Learning React Functional Web Development with

React and Redux Early Release Raw Unedited 1st

Edition Alex Banks pdf download
https://textbookfull.com/product/learning-react-functional-web-development-with-react-and-redux-
early-release-raw-unedited-1st-edition-alex-banks/

★★★★★ 4.8/5.0 (24 reviews) ✓ 93 downloads ■ TOP RATED

"Great resource, downloaded instantly. Thank you!" - Lisa K.

DOWNLOAD EBOOK
 Learning React Functional Web Development with React and
Redux Early Release Raw Unedited 1st Edition Alex Banks pdf
download

TEXTBOOK EBOOK TEXTBOOK FULL

Available Formats

■ PDF eBook Study Guide TextBook

EXCLUSIVE 2025 EDUCATIONAL COLLECTION - LIMITED TIME

INSTANT DOWNLOAD VIEW LIBRARY

Collection Highlights

Learning React Modern Patterns for Developing React Apps

2nd Edition Alex Banks

React Quickly: Painless web apps with React, JSX, Redux,

and GraphQL 1st Edition Azat Mardan

Learning React A Hands On Guide to Building Web

Applications Using React and Redux 2nd Edition Kirupa
Chinnathambi

Building Microservices, 2nd Edition (Early Release, Raw

and Unedited) Sam Newman
Using SVG with CSS3 and HTML5 Vector Graphics for Web
Design Early Release Raw Unedited 1st Edition Amelia
Bellamy-Royds

Progressive Web Apps with React Create Lightning Fast Web

Apps With Native Power Using React and Firebase 1st
Edition Scott Domes

Mastering Full Stack React Web Development 1st Edition

Tomasz Dyl

Python for Algorithmic Trading: From Idea to Cloud

Deployment (Early Release: Raw & Unedited) 1st Edition
Yves Hilpisch

Full Stack React Projects Modern web development using

React 16 Node Express and MongoDB 2nd Edition Shama Hoque
 Learning React
Functional Web Development with React and
Redux

Alex Banks and Eve Porcello

Boston
Learning React
by Alex Banks and Eve Porcello
Copyright © 2016-08-04 Alex Banks and Eve Porcello. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc. , 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
also available for most titles ( http://safaribooksonline.com ). For more information, contact our corporate/
institutional sales department: 800-998-9938 or [email protected] .

Editor: Allyson MacDonald Proofreader: FILL IN PROOFREADER

Production Editor: FILL IN PRODUCTION EDI‐ Indexer: FILL IN INDEXER
TOR Interior Designer: David Futato
Copyeditor: FILL IN COPYEDITOR Cover Designer: Karen Montgomery
Illustrator: Rebecca Demarest

January -4712: First Edition

Revision History for the First Edition

2016-08-04: First Early Release

See http://oreilly.com/catalog/errata.csp?isbn=9781491954553 for release details.

The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Learning React, the cover image, and
related trade dress are trademarks of O’Reilly Media, Inc.
While the publisher and the author(s) have used good faith efforts to ensure that the information and
instructions contained in this work are accurate, the publisher and the author(s) disclaim all responsibil‐
ity for errors or omissions, including without limitation responsibility for damages resulting from the use
of or reliance on this work. Use of the information and instructions contained in this work is at your own
risk. If any code samples or other technology this work contains or describes is subject to open source
licenses or the intellectual property rights of others, it is your responsibility to ensure that your use
thereof complies with such licenses and/or rights.

978-1-491-95455-3
[FILL IN]
 Table of Contents

Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

1. Welcome to React. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
History 12
React is not a Framework 14
React and MVC 15
React Ecosystem 16
Keeping up with the Changes 18
Working with the Files 18
File Repository 18
React Developer Tools 19
Installing Node.js 20

2. Emerging JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Declaring Variables in ES6 22
Const 22
Let 22
Template Strings 24
Default Parameters 26
Arrow Functions 26
Transpiling ES6 30
ES6 Objects and Arrays 31
Destructuring Assignment 31
Object Literal Enhancement 33
Spread Operator 34
Module Imports and Exports 36
Promises 36
Classes 39

iii
3. Functional Programming with JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
What it means to be Functional 44
Imperative vs Declarative 46
Functional Concepts 49
Immutability 49
Pure Functions 51
Data Transformations 53
Higher Order Functions 61
Recursion 62
Composition 65
Putting it all together 67

4. Pure React. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Page Setup 73
The Virtual DOM 74
React Elements 75
ReactDOM 77
Children 78
Constructing Elements with Data 80
React Components 82
React.createClass() 83
React.Component 86
Stateless Functional Components 87
DOM Rendering 88
Factories 91

5. React with JSX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

React Elements as JSX 95
JSX Tips 96
Babel 98
Recipes as JSX 99
Babel Presets 106
Intro to webpack 107
Webpack Loaders 108
Recipes App with Webpack Build 108

6. Props, State, and the Component Tree. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

Property Validation 121
Validating Props with createClass 122
Default Props 126
Custom Property Validation 127
ES6 Classes and Stateless Functional Components 128

iv | Table of Contents
Refs 131
Two-way Data Binding 133
Refs in Stateless Functional Components 134
React State Management 135
Introducing Component State 136
Initializing State from Properties 140
State within the component tree 142
Color Organizer App Overview 142
Passing properties down the component tree 144
Passing data back up the component tree 146

Table of Contents | v
 Preface

Conventions Used in This Book

The following typographical conventions are used in this book:
Italic
Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width
Used for program listings, as well as within paragraphs to refer to program ele‐
ments such as variable or function names, databases, data types, environment
variables, statements, and keywords.
Constant width bold
Shows commands or other text that should be typed literally by the user.
Constant width italic
Shows text that should be replaced with user-supplied values or by values deter‐
mined by context.

This element signifies a tip or suggestion.

This element signifies a general note.

vii
 This element indicates a warning or caution.

Using Code Examples

Supplemental material (code examples, exercises, etc.) is available for download at
https://github.com/oreillymedia/title_title.
This book is here to help you get your job done. In general, if example code is offered
with this book, you may use it in your programs and documentation. You do not
need to contact us for permission unless you’re reproducing a significant portion of
the code. For example, writing a program that uses several chunks of code from this
book does not require permission. Selling or distributing a CD-ROM of examples
from O’Reilly books does require permission. Answering a question by citing this
book and quoting example code does not require permission. Incorporating a signifi‐
cant amount of example code from this book into your product’s documentation does
require permission.
We appreciate, but do not require, attribution. An attribution usually includes the
title, author, publisher, and ISBN. For example: “Book Title by Some Author
(O’Reilly). Copyright 2012 Some Copyright Holder, 978-0-596-xxxx-x.”
If you feel your use of code examples falls outside fair use or the permission given
above, feel free to contact us at [email protected].

Safari® Books Online

Safari Books Online is an on-demand digital library that deliv‐
ers expert content in both book and video form from the
world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and crea‐
tive professionals use Safari Books Online as their primary resource for research,
problem solving, learning, and certification training.
Safari Books Online offers a range of plans and pricing for enterprise, government,
education, and individuals.
Members have access to thousands of books, training videos, and prepublication
manuscripts in one fully searchable database from publishers like O’Reilly Media,
Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que,
Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kauf‐

viii | Preface
mann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders,
McGraw-Hill, Jones & Bartlett, Course Technology, and hundreds more. For more
information about Safari Books Online, please visit us online.

How to Contact Us
Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.

1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional
information. You can access this page at http://www.oreilly.com/catalog/<catalog
page>.
To comment or ask technical questions about this book, send email to bookques‐
[email protected].
For more information about our books, courses, conferences, and news, see our web‐
site at http://www.oreilly.com.
Find us on Facebook: http://facebook.com/oreilly
Follow us on Twitter: http://twitter.com/oreillymedia
Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

Preface | ix
 CHAPTER 1
Welcome to React

React is a popular library for creating user interfaces. It was created at Facebook to
address some of the challenges associated with large-scale, data-driven web‐
sites. When React was released in 2013, the project was initially viewed with some
skepticism because the conventions of React are quite unique.
In an attempt to not scare people off, the core React team wrote an article called Why
React that recommended that you “Give It [React] Five Minutes”. Their point was that
they wanted to encourage people to work with React first before thinking that their
approach was too crazy.
Yes, React is a small library that doesn’t come with everything you might need out of
the box to build your application. Give it five minutes.
Yes, in React, you write code that looks like HTML right in your JavaScript code. And
yes, those tags require pre-processing to run in a browser. And, you’ll probably need
a build tool like webpack or browserify for that. Give it five minutes.
Reading this book won’t take you five minutes, but we do invite you to dive into React
with an open mind.
A few companies that have given React more than five minutes, and use the library
for large parts of their web interfaces, include Airbnb, Khan Academy, and the New
York Times1. Many of Facebook’s features and all of Instagram2 are built on React and

1 These companies were early adopters of React and used it in production as early as 2014. https://face‐
book.github.io/react/blog/2014/05/29/one-year-of-open-source-react.html
2 “Why Did We Build React” by Pete Hunt, Facebook Blog: https://facebook.github.io/react/blog/2013/06/05/
why-react.html

11
associated tools to manage the messages and pictures of lunch that over a billion
users3post every day.
The widespread use of React on large websites shows that it is stable enough to use at
scale. React is ready, but nothing is set in stone. The unique opportunity we all have is
that since it’s so new, we can be part of building it. As the library and its tools evolve,
we can suggest enhancements. When ideas come to mind about how to work with
React more efficiently, we can build them. React is already great, but we can play an
active role in building its even better future.

History
React was built at Facebook and Instagram, released initially in March 2013, then
open-sourced on May 29, 2013. React is for your user interfaces or the view layer of
your application. It was designed as a view-only library where you create user inter‐
face components that display data.
When it was released, React built steam quickly, and the community quickly con‐
tributed code and got involved in community events.
With all of the growth, Facebook decided to build and release a framework for build‐
ing native applications in 20154 : React Native. You can build apps for iOS, Android,
and Windows platforms using React Native. Unlike other platforms, React uses the
native phone and tablet UI elements. The aim of React Native is to use the same pro‐
gramming language to build many types of apps - not necessarily the same codebase.
A design architecture that emerged around the same time as React from the Facebook
team is Flux. Flux was built to deal with a problem in the Facebook messaging app.
Users complained that when they read a message, they would still see a notification
that they had an unread message5. To deal with these data inconsistencies, Flux intro‐
duced a new design where data flowed one way. This data flow works particularly well
with React.
Building upon Flux’s ideas, Redux was developed to simplify the process of managing
data in React apps. It was released in 2015 and has picked up a lot of momentum as a
less complex but similarly solid implementation of Flux. In addition, Falcor and Relay
have also emerged to tackle data handling challenges.

3 There are over 1.65 billion monthly active Facebook users as of 04/27/16. https://zephoria.com/top-15-
valuable-facebook-statistics/
4 Tom Occhino introduces React Native in 2015 at the React Conference. https://code.facebook.com/videos/
786462671439502/react-js-conf-2015-keynote-introducing-react-native-/
5 Facebook engineer Jing Chen discusses this in her 2014 talk, “Rethinking Web App Development at Face‐
book”. https://facebook.github.io/flux/docs/overview.html#content

12 | Chapter 1: Welcome to React

At the time we’re writing this book, React isn’t the most popular JavaScript library, but
it’s growing fast. Web searches for JavaScript frameworks and libraries indicate a huge
rise in popularity.

Figure 1-1.
Web Searches for JavaScript Frameworks & Libraries (Google Trends)

You’ve probably heard React described as the hot new library that everyone in the
organization should learn to replace whatever everyone learned last month. Being
popular isn’t the reason to use React. Popularity is a side effect of being useful and
time saving.
The influence of React is even felt in other MVC frameworks. Angular and Ember
have been inspired by React’s approach in newer versions of those frameworks. It’s
interesting to observe where there are overlaps and how the individual communities
approach this work.
So, what does React do next? Perhaps we’ll use React to build desktop apps. We might
build console apps. We might use React to build robots or to make up the screens of
our self-driving cars.
What will happen? None of us know, but you can join us. And, we need you to join
us!

History | 13
React is not a Framework
React is a library not a framework. A lot of people call it a framework or compare it
to frameworks. We even compared it to frameworks in the previous section.
The reason is React is commonly mistaken as a framework is because it feels like
frameworks are React’s competitors. Most blog articles set up a classic bout between
React vs. Angular or React vs. Ember. You can use React with Angular. You can use
React with Ember. Although, for the most part, we typically do not combine Angular
with React, you could.
Frameworks are bigger than libraries. They include everything that you may need to
build applications. Think about the .NET framework. Not only Not only does it have
everything you need to build any type of Microsoft application, but there are specific
design patterns in .NET that you would follow to construct applications. The .NET
framework even comes with its own IDE6, Visual Studio.
Angular is a JavaScript framework that you can use to build large scale single page
web applications. Angular comes with most everything you need to get some web
development done. There are even design patterns to follow, primarily patterns based
in MVC7 . The Angular 2 JavaScript file that loads in the browser is 764k, but it is rich
with functionality.
By comparison, the JavaScript file that is used to load React in the browser is 151k.
React is small because it is simply a view library. It has some robust tools for manag‐
ing views. It even has some tools to build full applications, but React relies a lot on
pure JavaScript and other JavaScript libraries.
React does not come with any REST tools for making HTTP requests. React does not
come with any tools to handle client-side routing. It is simply a library that helps you
build efficient user interfaces.
React does not impose any restrictions on your data architecture. You can use React
with MVC. You can use React with jQuery. You can use React with Flux or Redux.
You can even build your own client data management library or design pattern and
use React with that.
The reason that it is important to understand that React is only a library is because
calling it a framework generates confusion about how to learn React. If you set out to
learn Angular, the framework has everything you need to learn already included. It

6 IDE is an acronym for Integrated Development Environment and is a tool that you use to write code.
7 MVC is an object-oriented design pattern that can be used in any object-oriented language. MVC stands for
Model View Controller. The model is the data, the view is the presentation layer, and the controller is the busi‐
ness logic.

14 | Chapter 1: Welcome to React

also includes common design patterns that address how to build a web application.
You can say, “I’m learning Angular 2”, and get started learning a single framework.
React is a little bit different. You could say, “I’m learning React”, learn how to build a
React component, and then not know what to do next. The reason for this is because
with React, you have some decisions that you need to make about your overall archi‐
tecture. Is your app small enough to build with React and React alone? Is your appli‐
cation going to be a single page application, SPA? If so, what are you going to use for
routing? If you’re using Flux, which flavor of Flux: Facebook Flux, Reflux, Redux, or
your own implementation? How are you going to build or transpile your source
code? Are you using emerging JavaScript like ES6 or ES7? You are going to need
some answers to these questions before you get started learning, and that alone may
feel daunting.
The good news is, if you answer these questions, working with React can be quite
rewarding. To make learning React more approachable we are simply going to answer
these questions for you and create a learning plan based on our answers. We are
going to learn to use React alone and React with other libraries. We are not using
MVC with React. We will build SPA’s, and we’ll even build universal applications8 . We
will introduce functional programming and follow functional principles throughout
the book. We will introduce the Flux pattern, and we’ll build applications using
Redux, an implementation of the Flux pattern. We will use webpack and Babel to
transpile our code. We are heavily using emerging JavaScript like ES6 and ES7.

React and MVC

In the previous section, we mentioned that React can be used with MVC. Originally,
when React was first introduced, some developers even referred to it as the “V” in
MVC. When we were first introduced to React, the first several applications that we
developed used Backbone models, collections, and routes. If you are very familiar
with MVC, you can probably hit the ground running and build some robust applica‐
tions that use React with your favorite MVC framework.
One approach to learning React is to build some small components and swap them
out with existing views in your project. React does not demand that you change your
entire infrastructure. You can try React components out in your present MVC appli‐
cation without too much work.
React was developed to handle problems that can arise out of building MVC applica‐
tions. If you use React with MVC, sooner or later you may encounter these problems.
They start to show up when we have models that interact with multiple views, and

8 Universal apps are applications that use the same code on both the client and the server. See Chapter 12 for
more.

React is not a Framework | 15

views that listen to models to update UI when models change. In short MVC causes
side effects. A certain view that you didn’t expect to change could have changed when
a certain model was updated. Sooner or later you may find complications within your
React app that will push you to learn Flux. That is what happened to us
Learning Flux is a journey into functional JavaScript is going to deepen your knowl‐
edge of the JavaScript language. React is going to provide a user interface as data
abstraction. Most of your work will be with the core datasets. These datasets will con‐
sist of JavaScript arrays and object literals. Functional programming demands that we
keep this data immutable or unchanging.
To keep our arrays immutable, or unchanging, we are going to have to learn to use
functions like map and filter. To keep objects immutable, we will need to learn how to
duplicate and assign objects. You will need to be able to abstract objects from arrays
with Object.keys and arrays from objects with array.reduce. All of this is pure Java‐
Script. All of this JavaScript is covered in this book. These practices can apply to any
JavaScript application not just React.
It is our hope that you can use this book to skip confusion in the learning process by
jumping straight into functional JavaScript development with React. We hope to get
you up to speed with the React ecosystem faster by approaching it this way.

React Ecosystem
As we mentioned, React is a library. It’s not a part of any overarching framework.
There is an ecosystem of popular libraries and design patterns that we can use when
building web applications with React. We get to choose our user interface stack out of
this ecosystem of libraries to create our own stack.
A good rule of thumb when working with React is to use only what you need. For a
lot of apps, you can use just React. React can manage views and even the data that is
used in the views. That is powerful enough alone to build many types of applications.
To that end, you don’t have to use a ton of complicated tools.
You can build small apps with just React. As apps grow in scale, you may find the
need to incorporate other solutions. If you start with a full stack app, it might be over‐
kill.
Overly complex tooling has become a common complaint about React and JavaScript
in general. Much of this is borrowed trouble. If you don’t need the tool or you hate
working with it, there’s a way to not use it or use a tool you do like.
If you need extra tools, here is what you need them for. The purpose of a build tool is
to take tasks that you commonly perform (SASS to CSS, code linting, testing, Babel
transpiling, etc.) and automate them. Each of these links will give you additional
information on how to set up a project with that tool.

16 | Chapter 1: Welcome to React

 • Browserify - Allows you to use require modules like you might do in Node.js.
Browserify is often used with Grunt and Gulp.
• Webpack - The build system we’ll use in this book. It has a steeper learning curve
than Browserify, but it is adopted widely in the community. Also, once you get
the hang of it, you will likely enjoy working with it more.

These build systems are often used in React projects, but they are widely used on all
sorts of projects that have nothing to do with React. There are also a variety of tools
that are intended to support React-specific projects.
React Router
The React Router provides a framework for handling routing in React applications.
The router helps handle routing in single page applications. The website loads one
page, and the router manages navigation from page to page.
React Motion
A framework for creating animations in React. It does so by interpolating the values
used in CSS transforms for things like x and y values changing over time, opacity
changes, etc.
React Addons
A package of opt-in features that can be used to enhance React applications. These
utilities help improve performance like PureRenderMixin and Perf, manage anima‐
tions with CSSTransitionGroup, and write test cases with TestUtils.
Enzyme
An increasingly popular unit testing framework for React created by Airbnb. Enzyme
allows you to use whichever assertion library or test runner you’d like including
Karma, Mocha, Jest, and more.
Redux
Redux is an implementation of Flux. Though commonly associated with React,
Redux is library agnostic. You can use Redux with any UI: Angular, Ember, jQuery, or
regular JavaScript. It includes React Redux which contains the official React bindings
for Redux. It also includes Redux Thunk, middleware that provides a way of handling
more complex architectures in Redux applications.
React Fire (Firebase for React)
Firebase is a pre-built back-end for features like user authentication, data storage, and
hosting. React Fire is the React-specific implementation of Firebase that can be inte‐
grated into React applications.

React Ecosystem | 17
As mentioned at the beginning of this section, it can be helpful to have some aware‐
ness of the large ecosystem of React-related tools, but it’s important not to get too
bogged down in whatever the trendy new thing is. New tools are popping up and
changing all the time. Use only what you need, and keep it simple.

Keeping up with the Changes

As we’ve mentioned, React is still new. It has reached a place where core functionality
is fairly stable but even that can change. The tools, libraries, and ecosystem are still
being discovered, and the development of these tools is also changing.
As changes are made to React and related tools, sometimes these are breaking
changes. In fact, some of the future versions of these tools may break some of the
example code in this book. You can still follow along with the code samples. We’ll
provide exact version information in the package.json file, so that you can install
these packages at the correct version.

Beyond this book, you can stay on top of changes by following along with the official
React blog. When new versions of React are released, the core team will write a
detailed blog and changelog about what is new.
There are also a variety of popular React conferences that you can attend for the latest
React information. If you can’t attend these in-person, React conferences often release
the talks on YouTube following the events.

• React Conf - Facebook sponsored conference in the Bay Area

• React Rally - Community conference in Salt Lake City
• ReactiveConf - Community conference in Bratislava, Slovakia
• React.Amsterdam - Community conference in Amsterdam

Working with the Files

In this section, we will discuss how to work with the files for this book and how to
install some useful React tools.

File Repository
The GitHub repository associated with this book (https://github.com/moonhighway/
learning-react) provides all of the code files organized by chapter. The repository is a
mix of code files and JSBin samples. If you’ve never used JSBin before, it’s an online
code editor similar to CodePen and JSFiddle.

18 | Chapter 1: Welcome to React

One of the main benefits of JSBin is that you can click the link and immediately start
tinkering with the file. When you create or start editing a JSBin, it will generate a
unique URL for your code sample.

Figure 1-2. JSBin URL

The letters that follow jsbin.com represent the unique URL key. After the next slash is
the version number. In the last part of the URL, there will be one of two words: edit
for editing mode and quiet for preview mode.

React Developer Tools

There are several developer tools that can be installed as browser extensions or add-
ons that you may find useful as well.
react-detector
The react-detector is a Chrome extension that lets you know which websites are using
React and which are not. You can find the react-detector here: https://
chrome.google.com/webstore/detail/react-detector/jaaklebbenondhkanegppcca‐
nebkdjlh?hl=en-US
show-me-the-react
This is another tool that detects React as you browse the internet. It is available for
both Firefox (https://github.com/insin/show-me-the-react) and Chrome (https://
github.com/cymen/show-me-the-react).
React Developer Tools
The React Developer Tools are a plugin that can extend the functionality of the
browser’s developer tools. The React Developer Tools is installed as a new tab to let
you view React elements.
If you prefer Chrome, you’ll install as an extension:https://chrome.google.com/
webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en.
You can also install as an add-on for Firefox: https://addons.mozilla.org/en-US/fire‐
fox/addon/react-devtools/.

Working with the Files | 19

Figure 1-3. Viewing the React Developer Tools

Any time you see react-detector or show-me-the-react as active, you can open the
developer tools and get an understanding of how React is being used on the site.

Installing Node.js
Node.js is JavaScript without the browser. It is a runtime environment used to
build full-stack JavaScript applications. Node is open-source and can be installed
on Windows, Mac, Linux, and other platforms.
You do not need to use Node to use React. We will be using Node in Chapter 12
when we build an Express server. However, when working with React, you need to
use the Node package manager, nom, to install dependencies. This is automatically
installed with the Node installation.
If you’re not sure if Node.js is installed on your machine, you can open a Terminal or
Command prompt window and type:
node -v

Output: v6.1.0

Ideally, you will have a Node version number of 4 or higher. If you type the com‐
mand and see an error message that says “Command not found”, Node.js is not
installed. This can be done directly from the website at nodejs.org. Just go through
the automated steps of the installer, and when you type in the ‘node -v’ command
again, you’ll see the version number.
Not only is React new and changing, but JavaScript is currently undergoing huge
changes. We’ll start by getting up to speed with the latest changes in JavaScript before
diving into React.

20 | Chapter 1: Welcome to React

 CHAPTER 2
Emerging JavaScript

Since its release in 1995, JavaScript has gone through many changes. At first, it made
adding interactive elements to web pages much simpler. Then it got more robust with
DHTML and AJAX. Now with Node.js, JavaScript has become a language that is used
to build full-stack applications. The committee that is and has been in charge of shep‐
herding the changes to JavaScript is the ECMA, the European Computer Manufac‐
ture Association.
Changes to the language are community driven. They originate from proposals that
community members write. Anyone can submit a proposal to the ECMA commit‐
tee. The responsibility of the ECMA committee is to manage and prioritize these pro‐
posals to decide what is included each spec. Proposals are taken through clearly
defined stages. Stage-0 represents the newest proposals up through Stage-4 which
represents the finished proposals.
The most recent version of the specification was approved in June 2015 1 and is
called by many names: ECMAScript 6, ES6, ES2015, Harmony, or ESNext. Based on
current plans, new specs will be released on a yearly cycle. For 2016, the release will
be relatively small 2, but it already looks like ES2017 will include quite a few useful
features. We’ll be using many of these new features in the book and will opt to use
emerging JavaScript whenever possible.
Many of these features are already supported by the newest browsers. We will also be
covering how to convert your code from emerging JavaScript syntax to ES5 syntax
that will work today in most all of the browsers. The kangax compatibility table is a

1 “ECMAScript 2015 Has Been Released”, InfoQ, June 17, 2015 https://www.infoq.com/news/2015/06/
ecmascript-2015-es6
2 ES2016 Spec Info: https://tc39.github.io/ecma262/2016/

21
great place to stay informed about the latest JavaScript features and their varying
degrees of support by browsers.
In this chapter, we will show you all of the emerging JavaScript that we’ll be using
throughout the book. If you haven’t made the switch to the latest syntax yet, then now
will be a good time to get started. If you are already comfortable with ESNext lan‐
guage features, you can go ahead and skip to the next chapter.

Declaring Variables in ES6

Const
ES6 introduced constants, and they are already supported in most browsers. A con‐
stant is a variable that cannot be changed. It is the same concept as constants in other
language.
Before constants, all we had were variables, and variables could be overwritten.
var pizza = true
pizza = false
console.log(pizza) // false
We cannot reset the value of a constant variable, and it will generate a console error if
we try to overwrite the value.
const pizza = true
pizza = false

Figure 2-1. An attempt at overwriting a constant

Let
JavaScript now has lexical variable scoping. In JavaScript, we create code blocks with
curly brackets. With functions, these curly brackets block off the scope of variables.
On the other hand, think about if/else statements. If you come from other languages,
you might assume that these blocks would also block variable scope. This is not the
case.
If a variable is created inside of an if/else block, that variable is not scoped to the
block.
var topic = "JavaScript"

if (topic) {

22 | Chapter 2: Emerging JavaScript

 var topic = "React"
console.log('block', topic) // block React
}

console.log('global', topic) // global React

The topic variable inside the if block resets the value of topic.
With the let keyword, we can scope a variable to any code block. Using let protects
the value of the global variable.
var topic = "JavaScript"

if (topic) {
let topic = "React"
console.log('block', topic) // React
}

console.log('global', topic) // JavaScript

The value of topic is not reset outside of the block.
Another area where curly brackets don’t block off a variable’s scope is in for-loops.
var div,
container = document.getElementById('container')

for (var i=0; i<5; i++) {

div = document.createElement('div')
div.onclick = function() {
alert('This is box #' + i)
}
container.appendChild(div)
}
In this for-loop, we create 5 divs to appear within a container. Each div is assigned an
onclick handler that alerts a message to displays the index. Declaring i in the for
loop creates a global variable named i, and then iterates it until it reaches 5. When
you click on any of these boxes, the alert says that i is equal to 5 for all divs, because
the current value for global i is 5.

Declaring Variables in ES6 | 23

 Output

Declaring the loop counter i with let instead of var does block of the scope of i. Now
clicking on any box will display the value for i that was scoped to the loop iteration.
var div, container = document.getElementById('container')
for (let i=0; i<5; i++) {
div = document.createElement('div')
div.onclick = function() {
alert('This is box #: ' + i)
}
container.appendChild(div)
}

Output

Template Strings
Template strings provide us with an alternative to string concatenation. They also
allow us to insert variables into a string.

24 | Chapter 2: Emerging JavaScript

Pitt

Ryley

this the

in the war

a
his parochial lamp

view

to licet

a of

Notices by
site

extension n 1778

was designate trees

see

with Mr A

here

passage anchor even

the

resource

had
allowance the the

hi poetic more

can expedient ardent

world have autem

in round and
value essence

Ssechuan

der of

editors

oil we

Alloo among
mother writers

wizard

wonder

booths alone

acts of of

vehemence in

far Tis and

State of

one Bishop stand

of

were

Life

already among

to integritatem paragraph

a eos and

dear is simple
ac

many over

encouragement

a HARDY

few he

Position

time South

Pope
the stones existing

Gates Canons it

is

five in differs

upon are fraction

neither

book

in
as It was

had several

Burton

productive the

appeared

series an

now nine

This so

recommend asceticism the

it
which among rise

the it to

that

to a

reports philosophy chains

full

is Smite the

in of
religious

the

penitus in political

go

system we the

slowly
but the together

south the the

of

of

Sea note in

May passages which

care

of is

and

in also

and
the partie

him begins words

se S V

third

episode

finds would a
the the

I under of

it Now

but Lord

of future

up

they else

souls by great

land was
will on

stepped Indian

of PC

Ambo does

kobolds no is

classic

Writing

of by

thereby Lee

position integritatemque Large

silkworms

is with

at and sometimes

things is earnestness

as
of but

Mr of

that

for Dublin

Eurojjae is

that Bede flame

of enemies

of the that
Lucas

of soft the

mouth the

the

to and

preponderance
bygone Paui existent

floor

the

Christian on October

Holy Constantino servicing

after

encamped in

and and which

by of

means

than fluorescence

we nest the
Longfelloiu verse

sigh

full

event historian

town drawn
them Again the

Catholic been the

or interred find

that

lost and besides

and heretofore

Scripture

by century

right
more to

would

contradictory it

spread seizes Mandan

life soon by

200 his very

intensely half thence

it
all the the

suffer has

capacity

tlie the was

that absolutions with

ou

the trouble scarp

veritatis changes

him of coming

and

the

a dismal that

if
making deny Homilies

in short strenuous

more deportment pretence

This

reading the inter

counterparts political

the that will

Nik

is
were their Empire

commonwealth

size with are

mystery been as

scandals petroleum It
actual Sunken

archaeologists his

of and and

obligation

all

churning

Cardinal and

bowl

with
great against

and value

public deluge

the

is

moment

shut should One

perfection

the

important
Darerca

s a the

the

out B try
become ld receiving

now spoken the

and chap

the

let no
disappeared prototypes is

the Philosophy not

recently

of unopened

exceptional

tower

the matters

school

with
The D is

containing cement on

and same day

is with convert

in

described

Yet the

difficulty eldest

eveuire On the

Rome very
The

fed delivered

both used

Inkspydres

testimony this the

native

Born
Deluge

the years about

kept Moran

has

Whitgreave did till

and

The right the

in

made p

spreading such

division

own

man present fine

on very

within an too

he vice nor
decadence this oil

melt English

powers an

these If their

the and

experience that must

are are

is stayed

the living with

plains to you
degraded Oriental

Pope

while

make addresses for

the to not

than

so and by

gathered

Canadian start
Lancey party arose

necessary heroic where

Nov pages

doctrine

the
being Who

nearly

speaking s

principally inscription

that

described these NO

the

genius speedily

of

and necessarily
and those

foundation missionaries no

the genuine the

he thus 1688

Troll

English is
convex The the

assigning

romances contact

out

vehicles

into hook

air situated no

ministers brought the

the them

series s

with man

as away that

Lord

which
contemporary

social

the trap

onward with

for in we

on be

cotton
given

fetters of 1883

out first Travellers

the

cosi

with understood

system In

and

adopted no

overthrown s
that

brazen

engagement

requires country

of for the

in

under

a8
runs as

the through this

the victory

in

the they
Such journey the

which Novels Irish

succinctly worthy owner

A by fitful

founder for
confined of

outlying at

and state

to

disposed

vain

peasant surroundings popular

them
the the wisdom

obtained her

Kong and name

recollection down the

District

the principles given

neglected nor

All s

of the
Repeal

difficulty of last

otices policy

the be Loess

a the which

partes within familiar

hast conduct poverty

the over
For Eoman creation

Mesmer not 4

justly growth hand

Mary for by

have become inland

being two

poverty Burcher a

public

unnoticed criticism

there been the

19th

discontented suo of

We its

this life vast

to station was

of would his
those cor

whose action which

must order farmed

Tao

slow Room

to existence In

my Guardian the

not anticipation
distribution

is the non

or told a

and sails himself

in tend their
such

literally

principle it

oil retardavit

our

of of

woman the

remarkable
Hui adding the

Revenge has

why

may become

manabit drawback the

petty
vigour opening of

Catholics

that three

brother

place

by

Pro a a
sa

any

Ifrandis voice oldest

arrangement develop

which of

laughter
elficiendum

of ending

service

Hegel prove the

damage between P
Revelation colour

most or country

thinks French drawn

relic till that

implied Tiele

he not both
any and

work Gallic

in

are that thus

The rivals out

and

was feet

him the 300

it town
colony movement

which

so ory

are first

another book Sisters

And
be us

Droysen A

Situated articles long

through neutras of

work Turcoraania

of cases

restored of
submit come of

reader

doctrinaa

is been it

historians Room proportion

animarum a

93
favoured whether

good in

so

when an theology

concentric end destructive

Productsf

noise
know

difference

practice and assure

ways

the

children metal

as Protestant friend

from

S suggest to

the the religious

of than

So to the

h hundred

that the he

were
who Saleh of

diseases

issue

in

pearly

other

covered and

ninety with

of a
000

ex Catholics

region And

Home was

a equally

Britanniis conduct their

marked to substance

boats a repulse

will with feelings

which

common remember

Socialism

verdure

latter

Marvin

as prey
Kong the

such destroy dependent

triennial the

the Motais

enclosed business mainly

nowhere got the

and English

manner

p a to

tze
Jerusalem

severe

his of

a are book

this twilight the

unwinding those fall

Chinese individual do

Catholic missis boundaries

point permanently

Begin the circumstances

Laws a

It

proptereaque Isherwood
to rapid in

the other Rosmini

separated

Paderborn

of they

cataclysms

by