Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Singapore
Country selected
country flag Canary Islands
Country selected
country flag Hungary
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag South Korea
Country selected
country flag Turkey
Country selected
country flag Switzerland
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Chile
Country selected
country flag Norway
Country selected
country flag Ecuador
Country selected
country flag Indonesia
Country selected
country flag New Zealand
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag Austria
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag South Africa
Country selected
country flag Malaysia
Country selected
country flag Japan
Country selected
country flag Slovakia
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Home > Web Development > Front End Web Development > ReactJS by Example - Building Modern Web Applications with React
ReactJS by Example - Building Modern Web Applications with React
ReactJS by Example - Building Modern Web Applications with React

ReactJS by Example - Building Modern Web Applications with React: Building Modern Web Applications with React

Arrow left icon
Profile Icon A M
Arrow right icon
$19.99 per month
Full star icon Full star icon Half star icon Empty star icon Empty star icon 2.4 (9 Ratings)
Paperback Apr 2016 280 pages 1st Edition
eBook
$35.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon A M
Arrow right icon
$19.99 per month
Full star icon Full star icon Half star icon Empty star icon Empty star icon 2.4 (9 Ratings)
Paperback Apr 2016 280 pages 1st Edition
eBook
$35.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$35.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

ReactJS by Example - Building Modern Web Applications with React

Chapter 2. JSX in Depth

In the first chapter, we built our first component using React. We saw how using JSX makes the development easy. In this chapter, we will dive deep into JSX.

JavaScript XML (JSX) is an XML syntax that constructs the markup in React components. React works without JSX, but using JSX makes it easy to read and write the React components as well as structure them just like any other HTML element.

In this chapter, we will cover following points:

  • Why JSX?
  • Transforming JSX into JavaScript
  • Specifying HTML tags and React components
  • Multiple components
  • Different types of JSX tags
  • Using JavaScript expressions inside JSX
  • Namespaced components
  • Spread attributes
  • CSS styles and JSX
  • JSX Gotchas

At the end of the chapter, we will get familiar with the JSX syntax, how it should be used with React, and best practices of using it. We will also study some of the corner cases that one can run into while using JSX.

Why JSX?

Shawn had a great first day and he was just getting started with the next one at Adequate Consulting. With a mug of coffee, he startled Mike.

"Hey Mike, I saw that we used JSX for building our first component. Why should we use JSX when React has React.createElement?"

"You can use React without using JSX. But JSX makes it easy to build React components. It reduces the amount of code required to write. It looks like HTML markup. Its syntax is simple and concise and it's very easy to visualize the components that are getting built."

"Take an example of the render function of a component without using JSX."

// render without JSX
render: function(){
    return(React.createElement("div", 
                               null, 
                               "Hello React World!"));
}

"With JSX, it looks much better."

// render with JSX
render: function(){
    return <div>
      Hello React World
    </div>;
  }

&quot...

Transforming JSX into JavaScript

"Shawn, as I mentioned, the JSX is transformed to the native JavaScript syntax."

// Input (JSX):
var app = <App name="Mike" />;

"This will eventually get transformed to"

// Output (JS):
var app = React.createElement(App, {name:"Mike"});

Tip

Downloading the example code

You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

  • Log in or register to our website using your e-mail address and password.
  • Hover the mouse pointer on the SUPPORT tab at the top.
  • Click on Code Downloads & Errata.
  • Enter the name of the book in the Search box.
  • Select the book for which you're looking to download the code files.
  • Choose from the drop-down menu where you purchased this book from.
  • Click on Code...

HTML tags vs React components

"Mike, I am intrigued by one more thing. In JSX, we are mixing the React components as if they are simple HTML tags. We did this in our first component."

ReactDOM.render(<App headings = {['When', 'Who', 'Description']} 
                     data = {data} />, 
             document.getElementById('container'));

"The App tag is not a valid HTML tag here. But this still works."

"Yes. That's because we can specify both HTML tags and React components in JSX. There is a subtle difference though. HTML tags start with a lowercase letter and React components start with an uppercase letter." Mike explained.

// Specifying HTML tags
render: function(){
    return(<table className = 'table'>
           .....
           </table>);
}

// Specifying React components
var App = React.createClass({..});
ReactDOM.render(<App headings = {['When', 'Who', &apos...

Self closing tag

"Another thing that you must have noticed is how the component tag is closed in ReactDOM.render" added Mike.

ReactDOM.render(<App .../>, document.getElementById('container'));

"As JSX is based on XML, it allows adding a self-closing tag. All the component tags must be closed either with self-closing format or with a closing tag."

"Thanks Mike! Things make much more sense now."

Why JSX?

Shawn had a great first day and he was just getting started with the next one at Adequate Consulting. With a mug of coffee, he startled Mike.

"Hey Mike, I saw that we used JSX for building our first component. Why should we use JSX when React has React.createElement?"

"You can use React without using JSX. But JSX makes it easy to build React components. It reduces the amount of code required to write. It looks like HTML markup. Its syntax is simple and concise and it's very easy to visualize the components that are getting built."

"Take an example of the render function of a component without using JSX."

// render without JSX
render: function(){
    return(React.createElement("div", 
                               null, 
                               "Hello React World!"));
}

"With JSX, it looks much better."

// render with JSX
render: function(){
    return <div>
      Hello React World
    </div>;
  }

"Compared to the previous non-JSX example, the JSX code is much more readable...

Transforming JSX into JavaScript

"Shawn, as I mentioned, the JSX is transformed to the native JavaScript syntax."

// Input (JSX):
var app = <App name="Mike" />;

"This will eventually get transformed to"

// Output (JS):
var app = React.createElement(App, {name:"Mike"});

Tip

Downloading the example code

You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

  • Log in or register to our website using your e-mail address and password.

  • Hover the mouse pointer on the SUPPORT tab at the top.

  • Click on Code Downloads & Errata.

  • Enter the name of the book in the Search box.

  • Select the book for which you're looking to download the code files.

  • Choose from the drop-down menu where you purchased this book from.

  • Click on Code Download.

Once the file is downloaded, please...

HTML tags vs React components

"Mike, I am intrigued by one more thing. In JSX, we are mixing the React components as if they are simple HTML tags. We did this in our first component."

ReactDOM.render(<App headings = {['When', 'Who', 'Description']} 
                     data = {data} />, 
             document.getElementById('container'));

"The App tag is not a valid HTML tag here. But this still works."

"Yes. That's because we can specify both HTML tags and React components in JSX. There is a subtle difference though. HTML tags start with a lowercase letter and React components start with an uppercase letter." Mike explained.

// Specifying HTML tags
render: function(){
    return(<table className = 'table'>
           .....
           </table>);
}

// Specifying React components
var App = React.createClass({..});
ReactDOM.render(<App headings = {['When', 'Who', 'Description']}  
                     data = {data} />, 
                document.getElementById('container...

Self closing tag

"Another thing that you must have noticed is how the component tag is closed in ReactDOM.render" added Mike.

ReactDOM.render(<App .../>, document.getElementById('container'));

"As JSX is based on XML, it allows adding a self-closing tag. All the component tags must be closed either with self-closing format or with a closing tag."

"Thanks Mike! Things make much more sense now."

Multiple components

"Shawn, let's get back to our application. We are using almost the same code from last time but you can set up a new JSBin. We have included the latest React library and bootstrap library in the HTML tab. We have also added a container element, which we will render our React app."

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="//fb.me/react-with-addons-0.14.3.js"></script>
    <script src="//fb.me/react-dom-0.14.3.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JSX in Detail</title>
  </head>
  <body...

JavaScript expressions

"Shawn, let's discuss a bit about how we have rendered the Rows and Headings tag."

render: function() {
    var headings = this.props.headings.map(function(name) {
      return(<Heading heading = {name}/>);
    });

   return <tr>{headings}</tr>;
  }

"We are rendering {headings}, which is a list of React components, directly by adding them in curly braces as children of the <tr> tag. These expressions that are used to specify the child components are called child expressions."

"There is another category of expressions called as JavaScript expressions. These are simple expressions used for passing props or evaluating some JavaScript code that can be used as an attribute value."

// Passing props as expressions
ReactDOM.render(<App headings = {['When', 'Who', 'Description']} 
                  data = {data} />, 
                document.getElementById('container'));

// Evaluating expressions
ReactDOM.render(<App headings = {['When', 'Who...

Namespaced components

"Shawn, you must have used modules and packages in languages such as Ruby and Java. The idea behind these concepts is to create a namespace hierarchy of code such that the code from one module or package doesn't interfere with another."

"Yes. Is something like this available with React?" Shawn asked.

"Yes. React allows creating components that are namespaced under a parent component so that they don't interfere with other components or global functions."

"We are using very generic names such as Rows and Headings that can be used later in other parts of the app too. So it makes sense to namespace them now, rather than later." explained Mike.

"Agreed. Let's do it right away," Shawn.

"We need to represent the top-level component as custom component rather than using the <table> element."

var RecentChangesTable = React.createClass({
  render: function() {
    return <table>
             {this.props.children}
           </table>;
  } 
});

"Now, we can replace...

Spread attributes

Shawn learned a lot of things about JSX but when he was reflecting on the previous steps, he came up with another question.

"Mike, as of now we are just passing two props to the App component: headings and changesets. However, tomorrow these props can increase to any number. Passing them one by one would be cumbersome. Especially, when we have to pass some data from the recent changes API directly. It will be hard to a keep track of the structure of the incoming data and pass it accordingly in the props. Is there a better way?"

"Another excellent question, Shawn. True, it might be cumbersome passing a large number of attributes to the component one by one. But we can solve this using the spread attributes."

var props = { headings: headings, changeSets: data, timestamps: timestamps };
ReactDOM.render(<App {...props } />, 
                     document.getElementById('container'));

"In this case, all the properties of object are passed as props to the App component. We...

Styles in JSX

"Mike, all of the things that we did today are very cool. When do we start adding styles? How can I make this page look pretty? Right now it's a bit dull." Shawn asked.

"Ah, right. Let's do that. React allows us to pass styles to the components the same way props can be passed. For example, we want our headings to be of the floral white color and maybe we want to change the font size. We will represent it in a typical CSS way as follows:"

background-color: 'FloralWhite',
font-size: '19px';

"We can represent this as a JavaScript object in the CamelCase fashion."

    var headingStyle = { backgroundColor: 'FloralWhite',
                         fontSize: '19px' 
                       };

Then, we can use it in each Heading component as a JavaScript object."

RecentChangesTable.Heading = React.createClass({
  render: function() {
    var headingStyle = { backgroundColor: 'FloralWhite',
                         fontSize: '19px' };
    return(<th style={headingStyle}>{this.props.heading...
Left arrow icon

Page 1 of 14

Right arrow icon

Key benefits

  • *Create pragmatic real-world applications while learning React and its modern developer tools
  • *Build sustainable user interfaces by transforming data into components of UI
  • *Learn how to generate reusable ReactJS components effectively

Description

ReactJS is an open-source JavaScript library that brings the power of reactive programming to web applications and sites. It aims to address the challenges encountered in developing single-page applications, and is intended to help developers build large, easily scalable and changing web apps. Starting with a project on Open Library API, you will be introduced to React and JSX before moving on to learning about the life cycle of a React component. In the second project, building a multi-step wizard form, you will learn about composite dynamic components and perform DOM actions. You will also learn about building a fast search engine by exploring server-side rendering in the third project on a search engine application. Next, you will build a simple frontpage for an e-commerce app in the fourth project by using data models and React add-ons. In the final project you will develop a complete social media tracker by using the flux way of defining React apps and know about the best practices and use cases with the help of ES6 and redux. By the end of this book, you will not only have a good understanding of ReactJS but will also have built your very own responsive frontend applications from scratch.

Who is this book for?

If you are a web developer and wish to learn ReactJS from scratch, then this book is tailor-made for you. Good understanding of Javascript, HTML, and CSS is expected.

What you will learn

  • *Create, reuse, and compose React components using JSX
  • *Share data between various React components and techniques for data flow within a React app
  • *Handle user interactions with the help of event handlers and dynamic components
  • *Set up and use various next generation ES2015/ES6 features with React
  • *Understand the performance and immutability features of React using React add-ons
  • *Learn the techniques of Animation in React
  • *Use data stores to store model-related data and information
  • *Create a flux-based React application by using Reflux library

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Apr 21, 2016
Length: 280 pages
Edition : 1st
Language : English
ISBN-13 : 9781785289644
Vendor :
Facebook
Category :
Web Development
Languages :
JavaScript
Concepts :
Front End Web Development
Tools :
React

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Apr 21, 2016
Length: 280 pages
Edition : 1st
Language : English
ISBN-13 : 9781785289644
Vendor :
Facebook
Category :
Web Development
Languages :
JavaScript
Concepts :
Front End Web Development
Tools :
React

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
START FREE TRIAL
BUY NOW
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

React Components
React Components
Read more
Apr 2016 182 pages
eBook
eBook
  • eBook eBook $26.98
  • Paperback Paperback $38.99
$26.98 $29.99
$38.99
ReactJS by Example - Building Modern Web Applications with React
ReactJS by Example - Building Modern Web Applications with React
Read more
Apr 2016 280 pages
Full star icon 2.4 (9)
eBook
eBook
  • eBook eBook $35.98
  • Paperback Paperback $48.99
$35.98 $39.99
$48.99
Stars icon
Total $ 87.98
React Components
$38.99
ReactJS by Example - Building Modern Web Applications with React
$48.99
Total $ 87.98 Stars icon

Table of Contents

14 Chapters
1. Getting Started with React Chevron down icon Chevron up icon
1. Getting Started with React
What is React?
When Shawn meets Mike and ReactJS
Requiring React library
Building our first component
Back to work
Displaying static data
Passing data to components
Summary
2. JSX in Depth Chevron down icon Chevron up icon
2. JSX in Depth
Why JSX?
Transforming JSX into JavaScript
HTML tags vs React components
Self closing tag
Multiple components
JavaScript expressions
Namespaced components
Spread attributes
Styles in JSX
JSX Gotchas
Conditionals in JSX
Non-DOM attributes
Summary
3. Data Flow and Life Cycle Events Chevron down icon Chevron up icon
3. Data Flow and Life Cycle Events
Data flow in React
Props validation
Specifying default props
Modifying this.props.children
State
Setting initial state
Setting state
Avoiding state
State versus props
Component life cycle overview
Component life cycle methods
Summary
4. Composite Dynamic Components and Forms Chevron down icon Chevron up icon
4. Composite Dynamic Components and Forms
Forms in React
Setting up the application
Getting started with forms
Interactive props
Controlled components
Uncontrolled components
Getting started with form wizard
Form events
Parent Child relationship
Form validation
Shipping details step
Delivery details step
Summary
5. Mixins and the DOM Chevron down icon Chevron up icon
5. Mixins and the DOM
Back at the office
Adding a modal
Refs
Summary
6. React on the Server Chevron down icon Chevron up icon
6. React on the Server
Getting React to render on server
On the server
Summary
7. React Addons Chevron down icon Chevron up icon
7. React Addons
Getting started with Addons
Cloning components
Summary
8. Performance of React Apps Chevron down icon Chevron up icon
8. Performance of React Apps
Performance of React apps
Virtual DOM
The PERF addon
DOM operations performed by React
PureRenderMixin
Immutable data
Summary
9. React Router and Data Models Chevron down icon Chevron up icon
9. React Router and Data Models
A new adventure
Creating Backbone models
Incorporating defined Backbone models
Data models and Backbone
Summary
10. Animation Chevron down icon Chevron up icon
10. Animation
Fun stuff at Adequate LLC!
Model updates
Animate
Summary
11. React Tools Chevron down icon Chevron up icon
11. React Tools
Development tools
React Dev Tools
Build tools
Summary
12. Flux Chevron down icon Chevron up icon
12. Flux
Flux architecture and unidirectional flow
Flux actions
Flux stores
Summary
13. Redux and React Chevron down icon Chevron up icon
13. Redux and React
Redux
Setting up Redux
Summary
Index Chevron down icon Chevron up icon
Index

Recommendations for you

Left arrow icon
Full-Stack Flask and React
Full-Stack Flask and React
Read more
Oct 2023 408 pages
Full star icon 3.8 (5)
eBook
eBook
  • eBook eBook $27.99
  • Paperback Paperback $39.99
$27.99 $31.99
$39.99
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2024 828 pages
Full star icon 4.4 (5)
eBook
eBook
  • eBook eBook $35.98
  • Paperback Paperback $49.99
$35.98 $39.99
$49.99
Real-World Web Development with .NET 9
Real-World Web Development with .NET 9
Read more
Dec 2024 578 pages
Full star icon 3.5 (4)
eBook
eBook
  • eBook eBook $35.98
  • Paperback Paperback $49.99
$35.98 $39.99
$49.99
Django 5 By Example
Django 5 By Example
Read more
Apr 2024 822 pages
Full star icon 4.6 (40)
eBook
eBook
  • eBook eBook $35.98
  • Paperback Paperback $49.99
$35.98 $39.99
$49.99
React and React Native
React and React Native
Read more
Apr 2024 518 pages
Full star icon 4.2 (9)
eBook
eBook
  • eBook eBook $31.99
  • Paperback Paperback $43.99
$31.99 $35.99
$43.99
Scalable Application Development with NestJS
Scalable Application Development with NestJS
Read more
Jan 2025 612 pages
Full star icon 4.5 (6)
eBook
eBook
  • eBook eBook $27.99
  • Paperback Paperback $39.99
$27.99 $31.99
$39.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.3 (63)
eBook
eBook
  • eBook eBook $42.99
  • Paperback Paperback $59.99
$42.99 $47.99
$59.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 504 pages
Full star icon 4.5 (56)
eBook
eBook
  • eBook eBook $31.99
  • Paperback Paperback $44.99
$31.99 $35.99
$44.99
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Jun 2024 506 pages
Full star icon 4.8 (9)
eBook
eBook
  • eBook eBook $31.99
  • Paperback Paperback $44.99
$31.99 $35.99
$44.99
Learning Angular
Learning Angular
Read more
Jan 2025 494 pages
Full star icon 4.1 (7)
eBook
eBook
  • eBook eBook $31.99
  • Paperback Paperback $44.99
$31.99 $35.99
$44.99
Right arrow icon

Customer reviews

Top Reviews
  • Top Reviews
  • Most Recent
Rating distribution
Full star icon Full star icon Half star icon Empty star icon Empty star icon 2.4
(9 Ratings)
5 star 22.2%
4 star 11.1%
3 star 11.1%
2 star 0%
1 star 55.6%
Filter icon Filter
Top Reviews
  • Top Reviews
  • Most Recent

Filter reviews by

Mazahar May 03, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Nice book
Amazon Verified review Amazon
Amazon Customer May 10, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This is one of the great book to kickstart on React. Provide the basics of React and bring you to next level of knowledge of modern web applications. I would strong recommend to read this book.
Amazon Verified review Amazon
MigoFast Aug 21, 2016
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
I kind of figured after reading this book if I looked at the reviews folks would not like the 'pair programming' style - at first I thought it was a bit weird and novelty - but kept an open mind and actually found it somewhat natural and enjoyable and kind of a fun approachable way to read the 'same old' technical book.
Amazon Verified review Amazon
Armando Padilla Jun 05, 2016
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
Great read so far. Love the authors approach to telling a story along with building a nice app. The book quickly ramps up and gets you going in building out a react application. So why 3 stars? Chapter 4 you will get lost. After page 65 there is no way to get the application running. The author does mentioned what files should be present and even the structure but nothing stating what should be in the required files to actually start the server. To get around this download the chapter 4 code from the book's site.
Amazon Verified review Amazon
hysterio Jul 21, 2016
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
The entire book is written as a conversation between two developers, one takes the role of the mentor (Mike) the other stands in for the reader as the learner (Shawn). However, nowhere does the book actually call out who is speaking and the character’s voices don’t differ enough to actually tell them apart just by reading what they are saying. This means you can’t devote your entire attention to learning React as you must track which developer is saying what to understand the situation.The conversation nature also makes it difficult to skim the text to find important pieces of information or steps in a process as these steps are hidden in dense conversational text. The book also frequently fails to clearly call out where the code is being used by providing a file path or file title anywhere in relation to the code. Meaning this book is pretty much worthless as a reference.
Amazon Verified review Amazon

People who bought this also bought

Left arrow icon
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2022 818 pages
Full star icon 4.1 (54)
eBook
eBook
  • eBook eBook $35.98
  • Paperback Paperback $49.99
$35.98 $39.99
$49.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.3 (63)
eBook
eBook
  • eBook eBook $42.99
  • Paperback Paperback $59.99
$42.99 $47.99
$59.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 504 pages
Full star icon 4.5 (56)
eBook
eBook
  • eBook eBook $31.99
  • Paperback Paperback $44.99
$31.99 $35.99
$44.99
React and React Native
React and React Native
Read more
May 2022 606 pages
Full star icon 4.6 (17)
eBook
eBook
  • eBook eBook $35.98
  • Paperback Paperback $49.99
$35.98 $39.99
$49.99
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 4 (8)
eBook
eBook
  • eBook eBook $33.99
  • Paperback Paperback $46.99
$33.99 $37.99
$46.99
Right arrow icon

About the author

Profile icon A M
A M
Vipul A M is Director at BigBinary. He is part of Rails Issues Team, and helps triaging issues. His spare time is spent exploring and contributing to many Open Source ruby projects, when not dabbling with React JS. Vipul loves Ruby's vibrant community and helps in building PuneRb, is the founder of and runs RubyIndia Community Newsletter and RubyIndia Podcast, and organizes Deccan Ruby Conference in Pune. He can be found @vipulnsward on twitter and on his site http://vipulnsward.com.
Read more
See other products by A M
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.

Modal Close icon
Modal Close icon