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.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
React.js Essentials
React.js Essentials

React.js Essentials: A fast-paced guide to designing and building scalable and maintainable web apps with React.js

Arrow left icon
Profile Icon Artemij Fedosejev
Arrow right icon
$19.99 per month
Full star icon Full star icon Full star icon Full star icon Empty star icon 4 (32 Ratings)
Paperback Aug 2015 208 pages 1st Edition
eBook
$9.99 $25.99
Paperback
$32.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Artemij Fedosejev
Arrow right icon
$19.99 per month
Full star icon Full star icon Full star icon Full star icon Empty star icon 4 (32 Ratings)
Paperback Aug 2015 208 pages 1st Edition
eBook
$9.99 $25.99
Paperback
$32.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$9.99 $25.99
Paperback
$32.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

React.js Essentials

Chapter 2. Create Your First React Element

As many of you know, creating a simple web application today involves writing the HTML, CSS, and JavaScript code. The reason we use three different technologies is because we want to separate three different concerns:

  • Content (HTML)
  • Styling (CSS)
  • Logic (JavaScript)

This separation works great for creating a web page because, traditionally, we had different people working on different parts of our web page: one person structured the content using HTML and styled it using CSS, and then another person implemented the dynamic behavior of various elements on that web page using JavaScript. It was a content-centric approach.

Today, we mostly don't think of a website as a collection of web pages anymore. Instead, we build web applications that might have only one web page, and that web page does not represent the layout for our content—it represents a container for our web application. Such a web application with a single web page is...

Understanding the virtual DOM

Why do we need to manipulate the DOM in the first place? Because our web applications are not static. They have a state represented by the user interface (UI) that a web browser renders, and that state can be changed when an event occurs. What kind of events are we talking about? There are two types of events that we're interested in:

  • User events: When a user types, clicks, scrolls, resizes, and so on
  • Server events: When an application receives data or an error from a server, among others

What happens while handling these events? Usually, we update the data that our application depends on, and that data represents a state of our data model. In turn, when a state of our data model changes, we might want to reflect this change by updating a state of our UI. Looks like what we want is a way of syncing two different states: the UI state and the data model state. We want one to react to the changes in the other and vice versa. How can we achieve this?

One of...

Installing React

To start using the React library, we need to first install it. I am going to show you two ways of doing this: the simplest one and the one using the npm install command.

The simplest way is to add the <script> tag to our ~/snapterest/build/index.html file:

  • For the development version of React, add the following command:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-beta3/react.js"></script>
  • For the production version version of React, add the following command:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-beta3/react.min.js"></script>

There is a difference between the two that we'll learn about in the later chapters of this book. For our project, we'll be using the development version of React.

At the time of writing, the latest version of React library is 0.14.0-beta3. Over time, React gets updated, so make sure you use the latest version that is available to you, unless it introduces...

Creating React Elements with JavaScript

We'll start by familiarizing ourselves with a fundamental React terminology. It will help us build a clear picture of what the React library is made of. This terminology will most likely update over time, so keep an eye on the official documentation at http://facebook.github.io/react/docs/glossary.html.

Just like the DOM is a tree of nodes, React's virtual DOM is a tree of React nodes. One of the core types in React is called ReactNode. It's a building block for a virtual DOM, and it can be any one of these core types:

  • ReactElement: This is the primary type in React. It's a light, stateless, immutable, virtual representation of a DOM Element.
  • ReactText: This is a string or a number. It represents textual content and it's a virtual representation of a Text Node in the DOM.

ReactElements and ReactTexts are ReactNodes. An array of ReactNodes is called a ReactFragment. You will see examples of all of these in this chapter.

Let&apos...

Rendering React Elements

The ReactDOM.render() method takes three parameters: ReactElement, a regular DOMElement, and a callback function:

ReactDOM.render(ReactElement, DOMElement, callback);

ReactElement is a root element in the tree of ReactNodes that you've created. A regular DOMElement is a container DOM node for that tree. The callback is a function executed after the tree is rendered or updated. It's important to note that if this ReactElement was previously rendered to a parent DOM Element, then ReactDOM.render() will perform an update on the already rendered DOM tree and only mutate the DOM as it is necessary to reflect the latest version of the ReactElement. This is why a virtual DOM requires fewer DOM mutations.

So far, we've assumed that we're always creating our virtual DOM in a web browser. This is understandable because, after all, React is a user interface library, and all the user interfaces are rendered in a web browser. Can you think of a case when rendering...

Creating React Elements with JSX

When we build our virtual DOM by constantly calling the React.createElement() method, it becomes quite hard to visually translate these multiple function calls into a hierarchy of HTML tags. Don't forget that, even though we're working with a virtual DOM, we're still creating a structure layout for our content and user interface. Wouldn't it be great to be able to visualize that layout easily by simply looking at our React code?

JSX is an optional HTML-like syntax that allows us to create a virtual DOM tree without using the React.createElement() method.

Let's take a look at the previous example that we created without JSX:

var React = require('react');
var ReactDOM = require('react-dom');

var listItemElement1 = React.DOM.li({ className: 'item-1', key: 'item-1' }, 'Item 1');
var listItemElement2 = React.DOM.li({ className: 'item-2', key: 'item-2' }, 'Item 2...

Understanding the virtual DOM


Why do we need to manipulate the DOM in the first place? Because our web applications are not static. They have a state represented by the user interface (UI) that a web browser renders, and that state can be changed when an event occurs. What kind of events are we talking about? There are two types of events that we're interested in:

  • User events: When a user types, clicks, scrolls, resizes, and so on

  • Server events: When an application receives data or an error from a server, among others

What happens while handling these events? Usually, we update the data that our application depends on, and that data represents a state of our data model. In turn, when a state of our data model changes, we might want to reflect this change by updating a state of our UI. Looks like what we want is a way of syncing two different states: the UI state and the data model state. We want one to react to the changes in the other and vice versa. How can we achieve this?

One of the ways...

Left arrow icon Right arrow icon
Download code icon Download Code

Description

Building web applications with maintainable and performant user interfaces is a challenge that many have faced for more than a decade, but no one has risen to this challenge quite like React.js. Today React.js is used by Facebook, Instagram, Khan Academy, and Imperial College London, to name a few. Many new users recognize the benefits of React.js and adopt it in their own projects, forming a fast-growing community. The speed at which React.js has evolved promises a bright future for those who invest in learning it today. React.js Essentials will take you on a fast-paced journey through building your own maintainable React.js application. Begin by exploring how you can create single and multiple user interface elements. Create stateless and stateful components and make them reactive, learn to interact between your components and lifecycle methods and gauge how to effectively integrate your user interface components with other JavaScript libraries. Delve deep into the core elements of the Flux architecture and learn how to manage your application using stores. Finish by going that extra mile with the Jest test framework, running multiple tests on your application and find solutions to scale it further without complexity.

What you will learn

  • Install powerful React.js tools to make development much more efficient
  • Create React elements with properties and children
  • Get started with stateless and stateful React components
  • Use JSX to speed up your React.js development process
  • Add reactivity to your React components with lifecycle methods
  • Integrate your React components with other JavaScript libraries
  • Utilize the Flux application architecture with your React components
  • Test your React components with Jest test framework

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Aug 27, 2015
Length: 208 pages
Edition : 1st
Language : English
ISBN-13 : 9781783551620
Vendor :
Facebook
Languages :
Tools :

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 : Aug 27, 2015
Length: 208 pages
Edition : 1st
Language : English
ISBN-13 : 9781783551620
Vendor :
Facebook
Languages :
Tools :

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
$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
$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

Frequently bought together


Stars icon
Total $ 81.98
ReactJS by Example - Building Modern Web Applications with React
$48.99
React.js Essentials
$32.99
Total $ 81.98 Stars icon
Banner background image

Table of Contents

11 Chapters
1. Installing Powerful Tools for Your Project Chevron down icon Chevron up icon
2. Create Your First React Element Chevron down icon Chevron up icon
3. Create Your First React Component Chevron down icon Chevron up icon
4. Make Your React Components Reactive Chevron down icon Chevron up icon
5. Use Your React Components with Another Library Chevron down icon Chevron up icon
6. Update Your React Components Chevron down icon Chevron up icon
7. Build Complex React Components Chevron down icon Chevron up icon
8. Test Your React Application with Jest Chevron down icon Chevron up icon
9. Supercharge Your React Architecture with Flux Chevron down icon Chevron up icon
10. Prepare Your React Application for Painless Maintenance with Flux Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
(32 Ratings)
5 star 46.9%
4 star 25%
3 star 15.6%
2 star 9.4%
1 star 3.1%
Filter icon Filter
Top Reviews

Filter reviews by




Onco Sep 19, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
the basics
Amazon Verified review Amazon
Andreas Schön Jan 17, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
The book is a very good introduction into the basics of React.js including unit testing with Jest and the Flux architecture. The used example fits very well.Advanced topics like deploying an isomorphic application or a discussion of persistent immutable data structures with JavaScript (for readers with a background in Clojure or functional programming) to improve performance (through a custom shouldComponentUpdate method) is missing though.
Amazon Verified review Amazon
muhammad Sep 10, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
One of the best technical books I've read so far. It gets to the point and offers additional skills in addition to React. Worth every penny :).
Amazon Verified review Amazon
Giuseppe Rodriguez Oct 07, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I really enjoyed this book. Artemij is good at explaining the different React concepts and also at emphasizing best practices when it comes to Single Page Applications in general. The pace of the book is just right. Not too fast, not too slow. I would say that intermediate-level web developers will get the most out of this course. You need to have a good understanding of some key JavaScript concepts like scope (and the 'this' keyword), object properties, etc. if you want to get a good grip on React's core concepts and coding structure.The book explains the React concepts very well but teaching basic JavaScript is not the purpose of this course. So, total beginner's should learn basic JavaScript, HTML5 and CSS3 before taking this course. In short, I definitely recommend this course to any intermediate-level developer looking for a solid introduction to React, and the Flux architecture philosophy. It gives you a great foundation to start experimenting with your own ideas and explore the development patterns of component-based Single Page Applications.I seriously didn't think that I could have learned React as well as I did from this book, I have read multiple books on React but this one blew me away with how well done and well put together it is. Love the extensive details given explaining everything and I really am super confident now in React and have a solid base to build upon.
Amazon Verified review Amazon
Zac Nov 10, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Overall I was pretty pleased with my purchase and if you are in the right stage of your React journey I believe this book can be extremely valuable to you.You can find my full review on my blog here:[...]
Amazon Verified review Amazon
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.