30 days-of-react-ebook-fullstackio

Edit this page on Github (https://github.com/fullstackreact/30-days-of-react/blob/day-1/post.md)
What is React?
Today, we're starting out at the beginning. Let's look at what
React is and what makes it tick. We'll discuss why we want to
use it.
O e the ne t 3 da s, ou'll get a good feel fo the a ious pa ts of the React
https://facebook.github.io/ eact/ eb f ame o k and its ecos stem.
Each da in ou 3 da ad entu e ill build upon the p e ious da 's
mate ials, so b the end of the se ies, ou'll not onl kno the te ms,
concepts, and unde pinnings of ho the f ame o k o ks, but be able to use
React in ou ne t eb application.
Let's get sta ted. We'll sta t at the e beginning
https:// . outube.com/ atch? = RW3nDRmu6k as it's a e good
place to sta t.
React https://facebook.github.io/ eact/ is a Ja aSc ipt lib a fo building
use inte faces. It is the ie la e fo eb applications.
What is React?
1

At the hea t of all React applications a e components. A component is a self-
contained module that ende s some output. We can ite inte face
elements like a button o an input field as a React component. Components
a e composable. A component might include one o mo e othe components
in its output.
B oadl speaking, to ite React apps e ite React components that
co espond to a ious inte face elements. We then o ganize these
components inside highe -le el components hich define the st uctu e of
ou application.
Fo e ample, take a fo m. A fo m might consist of man inte face elements,
like input fields, labels, o buttons. Each element inside the fo m can be
itten as a React component. We'd then ite a highe -le el component,
the fo m component itself. The fo m component ould specif the st uctu e
of the fo m and include each of these inte face elements inside of it.
Impo tantl , each component in a React app abides b st ict data
management p inciples. Comple , inte acti e use inte faces often in ol e
comple data and application state. The su face a ea of React is limited and
aimed at gi ing us the tools to be able to anticipate ho ou application ill
look ith a gi en set of ci cumstances. We dig into these p inciples late in
the cou se.
React is a Ja aSc ipt f ame o k. Using the f ame o k is as simple as
including a Ja aSc ipt file in ou HTML and using the React e po ts in ou
application's Ja aSc ipt.
Fo instance, the Hello world e ample of a React ebsite can be as simple as:
Okay, so how do we use it?
2

<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js
"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-
dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">
</script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello world</h1>,
document.querySelector('#app')
);
</script>
</body>
</html>
Although it might look a little sca , the Ja aSc ipt code is a single line that
d namicall adds Hello world to the page. Note that e onl needed to
include a handful of Ja aSc ipt ﬁles to get e e thing o king.
Unlike man of its p edecesso s, React ope ates not di ectl on the b o se 's
Document Object Model DOM immediatel , but on a virtual DOM. That is,
athe than manipulating the document in a b o se afte changes to ou
data hich can be uite slo it esol es changes on a DOM built and un
enti el in memo . Afte the i tual DOM has been updated, React
intelligentl dete mines hat changes to make to the actual b o se 's DOM.
How does it work?
3

The React Vi tual DOM https://facebook.github.io/ eact/docs/dom-
diffe ences.html e ists enti el in-memo and is a ep esentation of the
eb b o se 's DOM. Because of this, e hen e ite a React component,
e' e not iting di ectl to the DOM, but e' e iting a i tual component
that React ill tu n into the DOM.
In the ne t a ticle, e'll look at hat this means fo us as e build ou React
components and jump into JSX and iting ou ﬁ st eal components.
4

What is JSX?
Now that we know what React is, let's take a look at a few terms
and concepts that will come up throughout the rest of the
series.
In ou p e ious a ticle, e looked at hat React
https://facebook.github.io/ eact/ is and discussed at a high-le el ho it
o ks. In this a ticle, e' e going to look at one pa t of the React ecos stem:
ES and JSX.
In an cu so sea ch on the Inte net looking fo React mate ial, no doubt
ou ha e al ead un into the te ms JSX , ES , and ES . These opa ue
ac on ms can get confusing uickl .
ES the ES stands fo ECMASc ipt is basicall " egula Ja aSc ipt." The th
update to Ja aSc ipt, ES as ﬁnalized in 9. It has been suppo ted b all
majo b o se s fo se e al ea s. The efo e, if ou' e itten o seen an
Ja aSc ipt in the ecent past, chances a e it as ES .
ES is a ne e sion of Ja aSc ipt that adds some nice s ntactical and
functional additions. It as ﬁnalized in . ES is almost full suppo ted
http://kanga .github.io/compat-table/es / b all majo b o se s. But it
JSX/ES /ES WTF??!
5

ill be some time until olde e sions of eb b o se s a e phased out of use.
Fo instance, Inte net E plo e does not suppo t ES , but has about % of
the b o se ma ket sha e.
In o de to eap the benefits of ES toda , e ha e to do a fe things to get it
to o k in as man b o se s as e can:
. We ha e to transpile ou code so that a ide ange of b o se s
unde stand ou Ja aSc ipt. This means con e ting ES Ja aSc ipt into
ES Ja aSc ipt.
. We ha e to include a shim o polyfill that p o ides additional
functionalit added in ES that a b o se ma o ma not ha e.
We'll see ho e do this a bit late in the se ies.
Most of the code e'll rite in this series ill be easil
translatable to ES . In cases here e use ES , e'll
introduce the feature at first and then alk through it.
As e'll see, all of ou React components ha e a render function that
specifies hat the HTML output of ou React component ill be. JavaScript
eXtension, o mo e commonl JSX, is a React e tension that allo s us to
ite Ja aSc ipt that looks like HTML.
Although in pre ious paradigms it as ie ed as a bad habit
to include Ja aScript and markup in the same place, it turns
out that combining the ie ith the functionalit makes
reasoning about the ie straight-for ard.
6

To see hat this means, imagine e had a React component that ende s an
h1 HTML tag. JSX allo s us to decla e this element in a manne that closel
esembles HTML:
class HelloWorld extends React.Component {
render() {
return (
<h1 className='large'>Hello World</h1>
);
}
}
The render() function in the HelloWorld component looks like it's etu ning
HTML, but this is actuall JSX. The JSX is translated to egula Ja aSc ipt at
untime. That component, afte t anslation, looks like this:
class HelloWorld extends React.Component {
render() {
return (
React.createElement(
'h1',
{className: 'large'},
'Hello World'
)
);
}
}
While JSX looks like HTML, it is actuall just a te se a to ite a
React.createElement() decla ation. When a component ende s, it outputs a
t ee of React elements o a virtual representation of the HTML elements
this component outputs. React ill then dete mine hat changes to make to
the actual DOM based on this React element ep esentation. In the case of
the HelloWorld component, the HTML that React ites to the DOM ill
look like this:
<h1 class='large'>Hello World</h1>
7

The class extends s nta e used in our ﬁrst React
component is ES s nta . It allo s us to rite objects using a
familiar Object-Oriented st le. In ES , the class s nta
might be translated as:
var HelloWorld = function() {}
Object.extends(HelloWorld, React.Component)
HelloWorld.prototype.render = function() {}
Because JSX is Ja aSc ipt, e can't use Ja aSc ipt ese ed o ds. This
includes o ds like class and for .
React gi es us the att ibute className . We use it in HelloWorld to set the
large class on ou h1 tag. The e a e a fe othe att ibutes, such as the for
att ibute on a label that React t anslates into htmlFor as for is also a
ese ed o d. We'll look at these hen e sta t using them.
If e ant to ite pu e Ja aSc ipt instead of el on a JSX compile , e can
just ite the React.createElement() function and not o about the la e
of abst action. But e like JSX. It's especiall mo e eadable ith comple
components. Conside the follo ing JSX:
<div>
<img src="profile.jpg" alt="Profile photo" />
<h1>Welcome back Ari</h1>
</div>
The Ja aSc ipt deli e ed to the b o se ill look like this:
8

React.createElement("div", null,
React.createElement("img", {src: "profile.jpg", alt: "Profile
photo"}),
React.createElement("h1", null, "Welcome back Ari")
);
Again, hile ou can skip JSX and ite the latte di ectl , the JSX s nta is
ell-suited fo ep esenting nested HTML elements.
No that e unde stand JSX, e can sta t iting ou ﬁ st React
components. Join us tomo o hen e jump into ou ﬁ st React app.
9

Our First Components
The ﬁrst t o articles in this series ere hea y on discussion. In
today's session, let's di e into some code and rite our ﬁrst
React app.
Let's re isit the "Hello orld" app e introduced on da one. Here it is again,
ritten slightl differentl :
10

<!DOCTYPE html>
<html>
<head>
<script
"></script>
<script
</script>
</head>
<body>
var app = <h1>Hello world</h1>
var mountComponent = document.querySelector('#app');
ReactDOM.render(app, mountComponent);
</script>
</body>
</html>
We' e included the source of React as a <script> tag inside the <head>
element of our page. It's important to place our <script> loading tags before
e start riting our React application other ise the React and ReactDOM
ariables on't be deﬁned in time for us to use them.
Also inside head is a script tag that includes a librar , babel-core . But hat
is babel-core ?
Hello world
Loading the React library
Babel
11

Yesterda , e talked about ES and ES . We mentioned that support for ES
is still spott . In order to use ES , it's best if e transpile our ES Ja aScript
into ES Ja aScript to support more bro sers.
Babel is a librar for transpiling ES to ES .
Inside body , e ha e a script bod . Inside of script , e define our first
React application. Note that the script tag has a type of text/babel :
This signals to Babel that e ould like it to handle the e ecution of the
Ja aScript inside this script bod , this a e can rite our React app using
ES Ja aScript and be assured that Babel ill li e-transpile its e ecution in
bro sers that onl support ES .
When using the babel-standalone package, e'll get a arning in the
console. This is fine and e pected. We'll s itch to a precompilation step in
a fe da s.
We' e included the <script /> tag here for ease of use.
Inside the Babel script bod , e' e defined our first React application. Our
application consists of a single element, the <h1>Hello world</h1> . The call
to ReactDOM.render() actuall places our tin React application on the page.
Without the call to ReactDOM.render() , nothing ould render in the DOM.
The first argument to ReactDOM.render() is what to render and the second is
where:
Warning in the console?
The React app
12

ReactDOM.render(<what>, <where>)
We' e ritten a React application. Our "app" is a React element hich
represents an h1 tag. But this isn't er interesting. Rich eb applications
accept user input, change their shape based on user interaction, and
communicate ith eb ser ers. Let's begin touching on this po er b
building our ﬁrst React component.
We mentioned at the beginning of this series that at the heart of all React
applications are components. The best a to understand React components
is to rite them. We'll rite our React components as ES classes.
Let's look at a component e'll call App . Like all other React components,
this ES class ill e tend the React.Component class from the React package:
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
All React components e ui e at least a render() function.
This render() function is e pected to etu n a i tual DOM
ep esentation of the b o se DOM element s .
In our index.html , let's replace our Ja aScript from before ith our ne App
component.
Components and more
13

<!DOCTYPE html>
<html>
<head>
<script
"></script>
<script
</script>
</head>
<body>
render() {
return <h1>Hello from our app</h1>
}
}
</script>
</body>
</html>
Ho e er, nothing is going to render on the screen. Do ou remember h ?
We ha en't told React e ant to render an thing on the screen or where to
render it. We need to use the ReactDOM.render() function again to e press to
React hat e ant rendered and here.
Adding the ReactDOM.render() function ill render our application on
screen:
var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
Hello from our app
14

Notice that e can render our React app using the App class as though it is a
built-in DOM component t pe like the <h1 /> and <div /> tags . Here e're
using it as though it's an element ith the angle brackets: <App /> .
The idea that our React components act just like an other element on our
page allo s us to build a component tree just as if e ere creating a nati e
bro ser tree.
While e're rendering a React component no , our app still lacks richness or
interacti it . Soon, e'll see ho to make React components data-dri en and
d namic.
But ﬁrst, in the ne t installment of this series, e'll e plore ho e can la er
components. Nested components are the foundation of a rich React eb
application.
Hello from our app
15

Complex Components
A esome, e' e built our ﬁrst component. No let's get a bit
fancier and start building a more comple interface.
In the p e ious section of 30 Days of React, e sta ted building ou ﬁ st React
component. In this section, e'll continue ou o k ith ou App component
and sta t building a mo e comple UI.
A common eb element e might see is a use timeline. Fo instance, e
might ha e an application that sho s a histo of e ents happening such as
applications like Facebook and T itte .
16

As e're not focusing on CSS
https:// . .org/standards/ ebdesign/htmlcss in this course,
e're not co ering the CSS speciﬁc to build the timeline as ou see it on
the screen.
Ho e er, e ant to make sure the timeline ou build looks similar to
ours. If ou include the follo ing CSS as a <link /> tag in our code,
ou're timeline ill look similar and ill be using the same st ling ours is
using:
<link
href="https://gist.githubusercontent.com/auser/2bc34b9abf07f34
f602dccd6ca855df1/raw/070d6cd5b4d4ec1a3e6892d43e877039a91a9108
/timeline.css" rel="stylesheet" type="text/css" />
The entire compiled CSS can be found on the gist at
https://gist.github.com/auser/ bc b abf f f dccd ca df
https://gist.github.com/auser/ bc b abf f f dccd ca df .
In addition, in order to make the timeline look e actl like the a ours
does on the site, ou'll need to include font-a esome
http://fonta esome.io/ in our eb application. There are multiple
a s to handle this. The simplest a is to include the link st les:
<link href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css" />
All the code for the e amples on the page is a ailable at the github repo
at https://github.com/fullstackreact/ -da s-of-react
https://github.com/fullstackreact/ -da s-of-react .
Styles
17

We could build this enti e UI in a single component. Ho e e , building an
enti e application in a single component is not a g eat idea as it can g o
huge, comple , and difﬁcult to test.
18

class Timeline extends React.Component {
render() {
return (
<div className="notificationsFrame">
<div className="panel">
<div className="header">
<div className="menuIcon">
<div className="dashTop"></div>
<div className="dashBottom"></div>
<div className="circle"></div>
</div>
<span className="title">Timeline</span>
<input
type="text"
className="searchInput"
placeholder="Search ..." />
<div className="fa fa-search searchIcon"></div>
</div>
<div className="content">
<div className="line"></div>
<div className="item">
<div className="avatar">
<img
alt='doug'
src="http://www.croop.cl/UI/twitter/images/doug.jpg"
/>
</div>
<span className="time">
An hour ago
</span>
<p>Ate lunch</p>
</div>
<img
19

alt='doug'
src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
</div>
<span className="time">10 am</span>
<p>Read Day two article</p>
</div>
<img
alt='doug'
</div>
<span className="time">10 am</span>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry.</p>
</div>
<img
alt='doug'
</div>
<span className="time">2:21 pm</span>
<p>Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</div>
)
}
}
20

Rathe than build this in a single component, let's b eak it do n into multiple
components.
Looking at this component, the e a e sepa ate pa ts to the la ge
component as a hole:
. The title ba
. The content
Breaking it down
An hour ago
Ate lunch
10 am
Read Day two article
10 am
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
2:21 pm
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type
specimen book.
Timeline 
21

We can chop up the content pa t of the component into indi idual places of
conce n. The e a e diffe ent item components inside the content pa t.
22

If e anted to go one step further, e could e en break
do n the title bar into 3 component parts, the menu button,
the title, and the search icon. We could di e e en further into
each one of those if e needed to.
Deciding ho deep to split our components is more of an art than a
science and is a skill ou'll de elop ith e perience.
In an case, it's usuall a good idea to sta t looking at applications using the
idea of components. B b eaking ou app do n into components it becomes
easie to test and easie to keep t ack of hat functionalit goes he e.
To build ou notiﬁcations app, let's sta t b building the containe to hold the
enti e app. Ou containe is simpl going to be a appe fo the othe t o
components.
None of these components ill e ui e special functionalit et , so the ill
look simila to ou HelloWorld component in that it's just a component ith
a single ende function.
Let's build a appe component e'll call App that might look simila to this:
The container component
23

render() {
return (
{/* content goes here */}
</div>
</div>
)
}
}
Notice that e use the attribute called className in React
instead of the HTML ersion of class . Remember that e're
not riting to the DOM directly and thus not riting HTML,
but JSX hich is just Ja aScript .
The reason e use className is because class is a reser ed ord in
Ja aScript. If e use class , e'll get an error in our console.
When a component is nested inside anothe component, it's called a child
component. A component can ha e multiple child en components. The
component that uses a child component is then called it's parent component.
With the appe component deﬁned, e can build ou title and content
components b , essentiall , g abbing the sou ce f om ou o iginal design and
putting the sou ce ﬁle into each component.
Fo instance, the heade component looks like this, ith a containe element
<div className="header"> , the menu icon, a title, and the sea ch ba :
Child components
24

class Header extends React.Component {
render() {
return (
<div className="fa fa-more"></div>
<input
type="text"
</div>
)
}
}
And ﬁnall , e can ite the Content component ith timeline items. Each
timeline item is apped in a single component, has an a ata associated
ith it, a timestamp, and some te t.
Timeline 
25

class Content extends React.Component {
render() {
return (
{/* Timeline item */}
<img
alt='Doug'
Doug
</div>
An hour ago
</span>
<p>Ate lunch</p>
<div className="commentCount">
2
</div>
</div>
{/* ... */}
</div>
)
}
}
26

In order to rite a comment in a React component, e ha e
to place it in the brackets as a multi-line comment in
Ja aScript.
Unlike the HTML comment that looks like this:

the React ersion of the comment must be in brackets:
{/* This is a comment in React */}
No that e ha e ou t o children components, e can set the Header and
the Content components to be children of the App component. Ou App
component can then use these components as if they are HTML elements
built-in to the bro ser. Ou ne App component, ith a heade and content
no looks like:
render() {
return (
<Header />
<Content />
</div>
</div>
)
}
}
Putting it all together
27

With this kno ledge, e no ha e the abilit to ite multiple components
and e can sta t to build mo e comple applications.
Ho e e , ou ma notice that this app does not ha e an use inte action no
custom data. In fact, as it stands ight no ou React application isn't that
much easie to build than st aight, no-f ills HTML.
In the ne t section, e'll look ho to make ou component mo e d namic
and become data-dri en ith React.
An hour ago
Ate lunch 2 
Timeline 
28

Data-Driven
Hard-coding data in our applications isn't e actl ideal. Toda ,
e'll set up our components to be dri en b data to them access
to e ternal data.
Through this point, e' e ritten our ﬁrst components and set them up in a
child/parent relationship. Ho e er, e ha en't et tied an data to our React
components. Although it's a more pleasant e perience in our opinion
riting a ebsite in React, e ha en't taken ad antage of the po er of React
to displa an d namic data.
Let's change that toda .
Recall, esterda e built the beginning of our timeline component that
includes a header and an acti it list:
Going data-driven
An hour ago
Timeline 
29

We broke do n our demo into components and ended up building three
separate components ith static JSX templates. It's not er con enient to
ha e to update our component's template e er time e ha e a change in our
ebsite's data.
Instead, let's gi e the components data to use to displa . Let's start ith the
<Header /> component. As it stands right no , the <Header /> component
onl sho s the title of the element as Timeline . It's a nice element and it
ould be nice to be able to reuse it in other parts of our page, but the title of
Timeline doesn't make sense for e er use.
Let's tell React that e ant to be able to set the title to something else.
React allo s us to send data to a component in the same s nta as HTML,
using attributes or properties on a component. This is akin to passing the
src attribute to an image tag. We can think about the propert of the <img
Introducing props
Ate lunch
10 am
10 am
2:21 pm
specimen book.
30

/> tag as a prop e're setting on a component called img .
We can access these properties inside a component as this.props . Let's see
props in action.
Recall, e deﬁned the <Header /> component as:
render() {
return (
<input
type="text"
</div>
)
}
}
When e use the <Header /> component, e placed it in our <App />
component as like so:
<Header />

31

We can pass in our title as a prop as an attribute on the <Header /> b
updating the usage of the component setting the attribute called title to
some string, like so:
<Header title="Timeline" />
Inside of our component, e can access this title prop from the
this.props propert in the Header class. Instead of setting the title staticall
as Timeline in the template, e can replace it ith the propert passed in.
Timeline 
32

render() {
return (
</div>
<span className="title">
{this.props.title}
</span>
<input
type="text"
</div>
)
}
}
We' e also updated the code slightly to get close to hat ou
ﬁnal <Header /> code ill look like, including adding a
searchIcon and a fe elements to style the menuIcon .
No our <Header /> component ill displa the string e pass in as the
title hen e call the component. For instance, calling our <Header />
component four times like so:
33

<Header title="Timeline" />
<Header title="Profile" />
<Header title="Settings" />
<Header title="Chat" />
Results in four <Header /> components to mount like so:
Prett nift , e ? No e can reuse the <Header /> component ith a
d namic title propert .
We can pass in more than just strings in a component. We can pass in
numbers, strings, all sorts of objects, and e en functions! We'll talk more
about ho to define these different properties so e can build a component
api later.
Instead of staticall setting the content and date Let's take the Content
component and set the timeline content b a data ariable instead of b te t.
Just like e can do ith HTML components, e can pass multiple props into
a component.
Recall, esterda e defined our Content container like this:
Timeline 
Profile 
Settings 
Chat 
34

render() {
return (
<img src="http://www.croop.cl/UI/twitter/images/doug.jpg"
/>
Doug
</div>
An hour ago
</span>
<p>Ate lunch</p>
2
</div>
</div>
{/* ... */}
</div>
)
}
}
As e did ith title , let's look at hat props our Content component
needs:
A user's a atar image
A timestamp of the acti it
Te t of the acti it item
Number of comments
35

Let's sa that e ha e a Ja aScript object that represents an acti it item. We
ill ha e a fe ﬁelds, such as a string ﬁeld te t and a date object. We might
ha e some nested objects, like a user and comments . For instance:
{
timestamp: new Date().getTime(),
text: "Ate lunch",
user: {
id: 1,
name: 'Nate',
avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
},
comments: [
{ from: 'Ari', text: 'Me too!' }
]
}
Just like e passed in a string title to the <Header /> component, e can
take this acti it object and pass it right into the Content component. Let's
con ert our component to displa the details from this acti it inside it's
template.
In order to pass a d namic ariable's alue into a template, e ha e to use the
template s nta to render it in our template. For instance:
36

render() {
const {activity} = this.props; // ES6 destructuring
return (
<img
alt={activity.text}
src={activity.user.avatar} />
{activity.user.name}
</div>
{activity.timestamp}
</span>
<p>{activity.text}</p>
{activity.comments.length}
</div>
</div>
</div>
)
}
}
37

We' e use a little bit of ES6 in ou class definition on the fi st
line of the render() function called destructuring. The t o
follo ing lines a e functionally e ui alent:
// these lines do the same thing
const activity = this.props.activity;
const {activity} = this.props;
Destructuring allo s us to sa e on typing and define ariables in a
shorter, more compact ay.
We can then use this ne content b passing in an object as a prop instead of
a hard-coded string. For instance:
<Content activity={moment1} />
Fantastic, no e ha e our acti it item dri en b an object. Ho e er, ou
might ha e noticed that e ould ha e to implement this multiple times ith
different comments. Instead, e could pass an arra of objects into a
component.
1509490290341
Ate lunch 1 
38

Let's sa e ha e an object that contains multiple acti it items:
const activities = [
{
text: "Ate lunch",
user: {
id: 1, name: 'Nate',
},
comments: [{ from: 'Ari', text: 'Me too!' }]
},
{
text: "Woke up early for a beautiful run",
user: {
id: 2, name: 'Ari',
},
comments: [{ from: 'Nate', text: 'I am so jealous' }]
},
]
We can rearticulate our usage of <Content /> b passing in multiple
acti ities instead of just one:
<Content activities={activities} />
Ho e er, if e refresh the ie nothing ill sho up! We need to ﬁrst update
our Content component to accept multiple acti ities. As e learned about
pre iousl , JSX is reall just Ja aScript e ecuted b the bro ser. We can
e ecute Ja aScript functions inside the JSX content as it ill just get run b
the bro ser like the rest of our Ja aScript.
Let's mo e our acti it item JSX inside of the function of the map function
that e'll run o er for e er item.
39

render() {
const {activities} = this.props; // ES6 destructuring
return (
{activities.map((activity) => {
return (
<img
alt={activity.text}
</div>
</span>
</div>
</div>
);
})}
</div>
)
}
}
1509490290341
Ate lunch 1 
1509490290341
40

No e can pass an number of acti ities to our arra and the Content
component ill handle it, ho e er if e lea e the component right no , then
e'll ha e a relati el comple component handling both containing and
displa ing a list of acti ities. Lea ing it like this reall isn't the React a .
Here is here it makes sense to rite one more component to contain
displa ing a single acti it item and then rather than building a comple
Content component, e can mo e the responsibilit . This ill also make it
easier to test, add functionalit , etc.
Let's update our Content component to displa a list of ActivityItem
components e'll create this ne t .
ActivityItem
Woke up early for a beautiful run 1

41

render() {
return (
{activities.map((activity) => (
<ActivityItem
activity={activity} />
))}
</div>
)
}
}
Not onl is this much simpler and easier to understand, but it makes testing
both components easier.
With our freshl -minted Content component, let's create the ActivityItem
component. Since e alread ha e the ie created for the ActivityItem , all
e need to do is cop it from hat as our Content component's template
as it's o n module.
42

class ActivityItem extends React.Component {
render() {
const {activity} = this.props; // ES6 destructuring
return (
<img
alt={activity.text}
</div>
</span>
</div>
</div>
)
}
}
1509490290341
Ate lunch 1 
1509490290341
Woke up early for a beautiful run 1 
43

This eek e updated our components to be dri en b data b using the
React props concept. In the ne t section, e'll di e into stateful components.
44

State
Toda e're getting started on ho stateful components ork in
React and look at hen and h e'll use state.
We' e almost made it through the rst eek of getting up and running on
React. We ha e orked through JSX, building our rst components, setting
up parent-child relationships, and dri ing our component properties ith
React. We ha e one more major idea e ha e et to discuss about React, the
idea of state.
React does not allo us to modif this.props on our components for good
reason. Imagine if e passed in the title prop to the Header component
and the Header component as able to modif it. Ho do e kno hat the
title is of the Header component? We set oursel es up for race-conditions,
confusing data state, and it ould be an all-around bad idea to modif a
ariable passed to a child component b a parent component.
Ho e er, sometimes a component needs to be able to update it's o n state.
For e ample, setting an active ag if a child component needs to sho it's
selected or updating a timer on a stop atch, for e ample.
The state of things
45

While it's preferable to use props as much as e can, sometimes e need to
hold on to the state of a component. To handle this, React gi es us the abilit
to hold state in our components.
state in a component is intended to be completel internal to the
Component and it's children i.e. accessed b the component and an
children it used . Similar to ho e access props in a component, the state
can be accessed ia this.state in a component. Whene er the state changes
ia the this.setState() function , the component ill rerender.
For instance, let's sa e ha e a simple clock component that sho s the
current time:
E en though this is a simple clock component, it does retain state in that it
needs to kno hat the current time is to displa . Without using state , e
could set a timer and rerender the entire React component, but other
components on the page ma not need rerendering... this ould become a
headache and slo hen e integrate it into a more comple application.
Instead, e can set a timer to call rerender inside the component and change
just the internal state of this component.
Let's take a stab at building this component. First, e'll create the component
e'll call Clock .
3:51:36 pm
46

Before e get into the state, let's build the component and create the
render() function. We'll need to take into account the number and prepend
a zero 0 to the number if the numbers are smaller than and set the
am/pm appropriatel . The end result of the render() function might look
something like this:
class Clock extends React.Component {
render() {
const currentTime = new Date(),
hours = currentTime.getHours(),
minutes = currentTime.getMinutes(),
seconds = currentTime.getSeconds(),
ampm = hours >= 12 ? 'pm' : 'am';
return (
<div className="clock">
{
hours == 0 ? 12 :
(hours > 12) ?
hours - 12 : hours
}:{
minutes > 9 ? minutes : `0${minutes}`
}:{
seconds > 9 ? seconds : `0${seconds}`
} {ampm}
</div>
)
}
}
47

Alternati ely, e could use the short snippet to handle padding the clock
time:
("00" + minutes).slice(-2)
But e' e opted to be more clear ith the pre ious code.
If e render our ne Clock component, e ill onl get a time rendered
e er time the component itself rerenders. It's not a er useful clock et . In
order to con ert our static time displa Clock component into a clock that
displa s the time, e'll need to update the time e er second.
In order to do that, e'll need to track the current time in the state of the
component. To do this, e'll need to set an initial state alue.
In the ES6 class st le, e can set the initial state of the component in the
constructor() b setting this.state to a alue.
constructor(props) {
super(props);
this.state = this.getTime();
}
The ﬁrst line of the constructor should always call
super(props) . If ou forget this, the component on't like
ou er much i.e. there ill be errors .
Alternative padding technique
48

No that e ha e a this.state de ned in our Clock component, e can
reference it in the render() function using the this.state . Let's update our
render() function to grab the alues from this.state :
// ...
render() {
const {hours, minutes, seconds, ampm} = this.state;
return (
<div className="clock">
{
hours === 0 ? 12 :
(hours > 12) ?
hours - 12 : hours
}:{
minutes > 9 ? minutes : `0${minutes}`
}:{
seconds > 9 ? seconds : `0${seconds}`
} {ampm}
</div>
)
}
}
Instead of orking directl ith data alues, e can no update the state of
the component and separate the render() function from the data
management.
In order to update the state, e'll use a special function called: setState() ,
hich ill trigger the component to rerender.
We need to call setState() on the this alue of the
component as it's a part of the React.Component class e are
subclassing.
49

In our Clock component, let's use the nati e setTimeout() Ja aScript
function to create a timer to update the this.state object in
milliseconds. We'll place this functionalit in a function as e'll ant to call
this again.
// ...
super(props);
}
// ...
setTimer() {
clearTimeout(this.timeout);
this.timeout = setTimeout(this.updateClock.bind(this), 1000);
}
// ...
updateClock() {
this.setState(this.getTime, this.setTimer);
}
// ...
}
We ill get into the lifec cle hooks in the ne t section, but
for the time being e'll call this in the constructor() for
simplicit .
In the updateClock() function e'll ant to update the state ith the ne
time. We can no update the state in the updateClock() function:
50

// ...
updateClock() {
}
// ...
}
The component ill be mounted on the page and in appro imatel one
second milliseconds it updates the current time. Ho e er, it on't be
reset again. We can simpl call the setTimer() function again at the end of
the function:
// ...
updateClock() {
const currentTime = new Date();
this.setState({
currentTime: currentTime
})
this.setTimer();
}
// ...
}
No the component itself might rerender slo er than the timeout function
gets called again, hich ould cause a rerendering bottleneck and needlessl
using up precious batter on mobile de ices. Instead of calling the
setTimer() function after e call this.setState() , e can pass a second
argument to the this.setState() function hich ill be guaranteed to be
called after the state has been updated.
51

// ...
updateClock() {
this.setState({
currentTime: currentTime
}, this.setTimer);
}
// ...
}
When e call this.setState() ith an object argument, it
ill perform a shallow merge of the data into the object
a ailable ia this.state and then ill rerender the
component.
We generall onl ant to keep alues in our state that e'll
use in the render() function. From the e ample abo e ith
our clock, notice that e stored the hours , minutes , and
seconds in our state. It's usuall a bad idea to store objects
or calculations in the state that e don't plan on using in the
render function as it can cause unnecessar rendering and
asteful CPU c cles.
3:51:36 pm
Some things to keep in mind
52

As e noted at the top of this section, it's preferred to use props hen
a ailable not onl for performance reasons, but because stateful components
are more dif cult to test.
Toda , e' e updated our components to be stateful and no ha e a handle
on ho to make a component stateful hen necessar . Tomorro e'll di e
into the lifec cle of a component and hen/ho to interact ith the page.
53

Lifecycle Hooks
Today, we'll look through a few of the most common lifecycle
hooks we can use with React components and we'll discuss why
they are useful and when we should each one.
Cong ats! We' e made it to the end of the fi st eek on React and e' e
al ead co e ed so much g ound. We just finished o king ith stateful
components to keep t ack of a component's inte nal state. Toda , e' e going
to pause on implementation and talk a bit about ho a component lives in an
application. That is, e'll talk about the component's lifec cle.
As React mounts ou application, it gi es us some hooks he e e can inse t
ou o n functionalit at diffe ent times in the component's lifec cle. In o de
to hook into the lifec cle, e'll need to define functions on ou component
hich React calls at the app op iate time fo each hook. Let's di e into the
fi st lifec cle hook:
When a component is defined on a page in ou application, e can't depend
upon it being a ailable in the DOM immediatel as e' e defining i tual
nodes. Instead, e ha e to ait until the component itself has actuall
mounted in the b o se . Fo functionalit that e need to un hen it has
componentWillMount() /
componentDidMount()
54

been mounted, e get t o diffe ent hooks o functions e can define. One
that is called just befo e the component is due to be mounted on the page
and one that is called just afte the component has been mounted.
Since e're defining virtual representations of nodes in our DOM tree
ith React, e're not actually defining DOM nodes. Instead, e're
building up an in-memory ie that React maintains and manages for us.
When e talk about mounting, e're talking about the process of
con erting the irtual components into actual DOM elements that are
placed in the DOM by React.
This is useful fo things such as fetching data to populate the component. Fo
instance, let's sa that e ant to use ou acti it t acke to displa github
e ents, fo e ample. We ill ant to load these e ents onl hen the data
itself is going to be ende ed.
Recall e defined ou Content component in ou acti it list:
What does mounting mean?
55

render() {
return (
{activities.map((activity) => (
<ActivityItem
))}
</div>
)
}
}
Let's update the Content component to make a e uest to the github.com
e ents api https://de elope .github.com/ 3/acti it /e ents/ and use the
esponse to displa the acti ities. As such, e'll need to update the state of
the object.
As e did este da , let's update ou component to be stateful b setting
this.state to an object in the const ucto
56

super(props);
this.state = {
activities: []
}
}
// ...
}
No , e'll ant to make an HTTP e uest hen the component itself is
getting ead to be mounted o just afte it mounts . B deﬁning the function
componentWillMount() o componentDidMount() in ou component, React
uns the method just befo e it mounts in the DOM. This is a pe fect spot fo
us to add a GET e uest.
Let's update the Content component ith the e uest to the github api.
Since e'll onl ant to displa a small list, let's take the latest fou e ents.
We' e sto ed a static JSON ﬁle of github data that e'll load
di ectly f om sou ce he e e'll get back to making AJAX
e uests in a fe days using p omises. Fo no , let's focus on
ho e'll implement updating ou component ith ne data:
// ...
componentWillMount() {
this.setState({activities: data});
}
// ...
}
57

Notice that e didn't change an thing else f om ou Content component and
it just o ks.
Sometimes e'll ant to update some data of ou component befo e o afte
e change the actual ende ing. Fo instance, let's sa e ant to call a
function to set up the ende ing o call a function set hen a component's
p ops a e changed. The componentWillUpdate() method is a easonable hook
to handle p epa ing ou component fo a change as long as e don't call
this.setState() to handle it as it ill cause an infinite loop .
Since e on't eall need to handle this in-depth, e on't o about
setting up an e ample he e, but it's good to kno it e ists. A mo e common
lifec cle hook e'll use is the componentWillReceiveProps() hook.
React ill call a method hen the component is about to ecei e ne props .
This is the fi st method that ill be called hen a component is going to
ecei e a ne set of p ops. Defining this method is a good time to look fo
updates to specific props as it gi es us an oppo tunit to calculate changes
and update ou component's inte nal state.
This is the time hen e can update ou state based on ne p ops.
componentWillUpdate() /
componentDidUpdate()
componentWillReceiveProps()
58

One thing to keep in mind he e is that e en though the
componentWillReceiveProps() method gets called, the alue of
the props may not ha e changed. It's always a good idea to
check fo changes in the p op alues.
Fo instance, let's add a refresh button to ou acti it list so ou use s can
e uest a e e uest of the github e ents api.
We'll use the componentWillReceiveProps() hook to ask the component to
eload it's data. As ou component is stateful, e'll ant to ef esh this state
ith ne data, so e can't simpl update the props in a component. We can
use the componentWillReceiveProps() method to tell the component e ant
a ef esh.
Let's add a button on ou containing element that passes a requestRefresh
boolean p op to tell the Content component to ef esh.
59

class Container extends React.Component {
super(props);
this.state = {refreshing: false}
}
// Bound to the refresh button
refresh() {
this.setState({refreshing: true})
}
// Callback from the `Content` component
onComponentRefresh() {
this.setState({refreshing: false});
}
render() {
const {refreshing} = this.state;
return (
<div className='notificationsFrame'>
<div className='panel'>
<Header title="Github activity" />
{/* refreshing is the component's state */}
<Content
onComponentRefresh={this.onComponentRefresh.bind(this)}
requestRefresh={refreshing}
fetchData={fetchEvents} />
{/* A container for styling */}
<Footer>
<button onClick={this.refresh.bind(this)}>
<i className="fa fa-refresh" />
Refresh
</button>
</Footer>
</div>
</div>
)
}
}
60

Notice that e ha e a ne element here that displays the children of the
element. This is a pattern hich allo s us to add a CSS class around some
content.
class Footer extends React.Component {
render() {
return (
<div className='footer'>
{this.props.children}
</div>
)
}
}
Using this ne prop the requestRefresh p op , e can update the
activities f om ou state object hen it changes alue.
// ...
componentWillReceiveProps(nextProps) {
// Check to see if the requestRefresh prop has changed
if (nextProps.requestRefresh !== this.props.requestRefresh) {
this.setState({loading: true}, this.updateData);
}
}
// ...
}
<Footer />
61

This demo is using static data f om a JSON ﬁle and andomly
picking fou elements hen e ef esh. This is set up to
simulate a ef esh.
Befo e the component is unmounted, React ill call out to the
componentWillUnmount() callback. This is the time to handle an clean-up
e ents e might need, such as clea ing timeouts, clea ing data,
disconnecting ebsockets, etc.
Fo instance, ith ou clock component e o ked on last time, e set a
timeout to be called e e second. When the component is ead to
unmount, e ant to make su e e clea this timeout so ou Ja aSc ipt
doesn't continue unning a timeout fo components that don't actuall e ist.
Recall that ou timer component e built looks like this:
componentWillUnmount()
62

super(props);
}
componentDidMount() {
this.setTimer();
}
setTimer() {
this.timeout = setTimeout(this.updateClock.bind(this), 1000);
}
updateClock() {
}
getTime() {
return {
hours: currentTime.getHours(),
minutes: currentTime.getMinutes(),
seconds: currentTime.getSeconds(),
ampm: currentTime.getHours() >= 12 ? 'pm' : 'am'
}
}
// ...
render() {
}
}
When ou clock is going to be unmounted, e'll ant to clea the timeout e
c eate in the setTimer() function on the component. Adding the
componentWillUnmount() function takes ca e of this necessa cleanup.
63

// ...
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
}
}
// ...
}
These a e a fe of the lifec cle hooks e can inte act ith in the React
f ame o k. We'll be using these a lot as e build ou eact apps, so it's a good
idea to be familia ith them, that the e ist, and ho to hook into the life of
a component.
We did int oduce one ne concept in this post hich e glossed o e : e
added a callback on a component to be called f om the child to it's pa ent
component. In the ne t section, e' e going to look at ho to deﬁne and
document the prop API of a component fo usage hen sha ing a
component ac oss teams and an application in gene al.
64

Packaging and PropTypes
We're looking at how to make reusable React components today
so that not only can we share our components across apps and
teams.
Phe ! We made it to eek t o elati el unscathed ! Th ough this point,
e' e talked th ough most of the basic featu es of React props , state , life-
c cle hooks, JSX, etc. .
In this section, e' e going to look a bit at annotating and packaging ou
components.
You ma ha e noticed e use props uite a bit in ou components. Fo the
most pa t, e'll e pect these to be a pa ticula t pe o set of t pes aka an
object o a string . React p o ides a method fo deﬁning and alidating
these t pes that allo us to easil e pose a component API.
Not onl is this a good p actice fo documentation pu poses, it's g eat fo
building eusable eact components
https://facebook.github.io/ eact/docs/ eusable-components.html .
PropTypes
65

The prop-types object e po ts a bunch of diffe ent t pes hich e can use
to define hat t pe a component's p op should be. We can define these using
the propTypes method in the ES6 class-st le React p op:
// ...
}
Clock.propTypes = {
// key is the name of the prop and
// value is the PropType
}
F om ithin this prop , e can define an object hich has the ke of a p op
as the name of the p op e a e defining and a alue defines the t pe o
t pes it should be defined as.
Fo instance, the Header component e built a fe da s ago accepts a a p op
called title and e e pect it to be a st ing. We can define it's t pe to be a
st ing as such:
First, we'll need to import the PropTypes package from the
prop-types package using the import keyword again:
import PropTypes from 'prop-types'
66

import PropTypes from 'prop-types'
// ...
}
Header.propTypes = {
title: PropTypes.string
}
React has a lot of t pes to choose f om, e po ted on the PropTypes object
and e en allo s fo us to deﬁne a custom object t pe. Let's look at an o e all
list of a ailable t pes:
React e poses a fe basic t pes e can use out of the bo .
type example class
type example class
String 'hello' PropTypes.string
Number 10, 0.1 PropTypes.number
Boolean true / false PropTypes.bool
Function
const say => (msg) => console.log("Hello
world")
PropTypes.func
Symbol Symbol("msg") PropTypes.symbol
Object {name: 'Ari'} PropTypes.object
Anything 'whatever', 10, {}
It's possible to tell React e ant it to pass th ough anything that can be
ende ed b using PropTypes.node :
type exampleclass
type exampleclass
A rendererable10, 'hello' PropTypes.node
Basic types
67

Clock.propTypes = {
title: PropTypes.string,
count: PropTypes.number,
isOn: PropTypes.bool,
onDisplay: PropTypes.func,
symbol: PropTypes.symbol,
user: PropTypes.object,
name: PropTypes.node
}
We' e al ead looked at ho to communicate f om a pa ent component to a
child component using props . We can communicate f om a child component
to a pa ent component using a function. We'll use this patte n uite often
hen e ant to manipulate a pa ent component f om a child.
We can pass th ough ite able collections in ou props . We' e al ead seen
ho e can do this hen e passed th ough an a a ith ou acti ities. To
decla e a component's p opt pe as an a a , e can use the PropTypes.array
annotation.
We can also e ui e that an a a holds onl objects of a ce tain t pe using
PropTypes.arrayOf([]) .
type example class
type example class
Array [] PropTypes.array
Array of numbers [1, 2, 3] PropTypes.arrayOf([type])
Enum ['Red', 'Blue'] PropTypes.oneOf([arr])
It's possible to desc ibe an object that can be one of a fe diffe ent t pes as
ell using PropTypes.oneOfType([types]) .
Collection types
68

Clock.propTypes = {
counts: PropTypes.array,
users: PropTypes.arrayOf(PropTypes.object),
alarmColor: PropTypes.oneOf(['red', 'blue']),
description: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(Title)
]),
}
It's possible to deﬁne t pes that need to be of a ce tain shape o instance of a
ce tain class.
type example class
type example class
Object {name: 'Ari'} PropTypes.object
Number object {count: 42} PropTypes.objectOf()
Instance new Message() PropTypes.objectOf()
Object shape {name: 'Ari'} PropTypes.shape()
Clock.propTypes = {
basicObject: PropTypes.object,
numbers: PropTypes
.objectOf(PropTypes.numbers),
messages: PropTypes
.instanceOf(Message),
contactList: PropTypes.shape({
name: PropTypes.string,
phone: PropTypes.string,
})
}
Object types
React types
69

We can also pass th ough React elements f om a pa ent to a child. This is
inc edibl useful fo building templates and p o iding customization ith the
templates.
type example class
type example class
Element <Title /> PropTypes.element
Clock.propTypes = {
displayEle: PropTypes.element
}
When e use element, React e pects that e'll be able to accept a single child
component. That is, e on't be able to pass multiple elements.
// Invalid for elements
<Clock displayElement={
<div>Name</div>
<div>Age</div>
}></Clock>
// Valid
<Clock displayElement={
<div>
<div>Name</div>
<div>Age</div>
</div>
}></Clock>
It's possible to e ui e a p op to be passed to a component b appending any
of the p opt pe desc iptions ith .isRequired :
Clock.propTypes = {
title: PropTypes.name.isRequired,
}
Requiring types
70

Setting a prop as e ui ed is e useful fo times hen the component is
dependent upon a prop to be passed in b it's pa ent component and on't
o k ithout it.
Finall , it's also possible to pass a function to deﬁne custom t pes. We can do
this fo a single p op o to alidate a a s. The one e ui ement fo the
custom function is that if the alidation does not pass, it e pects e'll etu n
an Error object:
type example class
type example class
Custom 'something_crazy'
function(props, propName, componentName)
{}
CustomArray
['something',
'crazy']
PropTypes.arrayOf(function(props, propName,
componentName) {})
UserLink.propTypes = {
userWithName: (props, propName, componentName) => {
if (!props[propName] || !props[propName].name) {
return new Error(
"Invalid " + propName + ": No name property defined for
component " + componentName
)
}
}
}
Sometimes e ant to be able to set a default alue fo a p op. Fo instance,
ou <Header /> component, e built este da might not e ui e a title to be
passed. If it's not, e'll still ant a title to be ende ed, so e can deﬁne a
common title instead b setting it's default p op alue.
To set a default p op alue, e can use the defaultProps object ke on the
component.
Custom types
Default props
71

Header.defaultProps = {
title: 'Github activity'
}
Phe , toda e ent th ough a lot of documentation. It's always a good idea
to build ou esuable components using the propTypes and defaultProps
att ibutes of components. Not onl ill it make it easie to communicate
ac oss de elope s, it'll be much easie hen e etu n to ou components
afte lea ing them fo a fe da s.
Ne t, e'll get back to code and sta t integ ating some st le into ou
components.
72

Styles
No application is complete without style. We'll look at the
different methods we can use to style our components, from
traditional CSS to inline styling.
Th ough this point, e ha en't touched the st ling of ou components
be ond attaching Cascading St leSheet CSS class names to components.
Toda , e'll spend time o king th ough a fe a s ho to st le ou React
components to make them look g eat, et still keeping ou sanit . We'll e en
o k th ough making o king ith CSS a bit easie too!
Let's look at a fe of the diffe ent a s e can st le a component.
. CasCasding St lesheets CSS
. Inline st les
. St ling lib a ies
Using CSS to st le ou eb applications is a p actice e' e al ead familia
ith and is nothing ne . If ou' e e e itten a eb application befo e, ou
most likel ha e used/ itten CSS. In sho t, CSS is a a fo us to add st le
to a DOM component outside of the actual ma kup itself.
CSS
73

Using CSS alongside React isn't no el. We'll use CSS in React just like e use
CSS hen not using React. We'll assign ids/classes to components and use
CSS selecto s to ta get those elements on the page and let the b o se
handle the st ling.
As an e ample, let's st le ou Header component e' e been o king ith a
bit.
Let's sa e anted to tu n the heade colo o ange using CSS. We can easil
handle this b adding a st lesheet to ou page and ta geting the CSS class of
.header in a CSS class.
Recall, the ende function of ou Header component cu entl looks like
this:
Orange header 
74

render() {
// Classes to add to the <input /> element
let searchInputClasses = ["searchInput"];
// Update the class array if the state is visible
if (this.state.searchVisible) {
searchInputClasses.push("active");
}
return (
{this.props.title}
</span>
<input
type="text"
className={searchInputClasses.join(' ')}
</div>
)
}
}
We can ta get the header b de ning the st les fo a .header class in a
egula css le. As pe -usual, e'll need to make su e e use a <link /> tag
to include the CSS class in ou HTML page. Supposing e de ne ou st les in
a le called styles.css in the same di ecto as the index.html le, this
<link /> tag ill look like the follo ing:
<link rel="stylesheet" type="text/css" href="styles.css">
Let's ll in the st les fo the Header class names:
75

.header {
background: rgba(251, 202, 43, 1);
}
.header, .fa, .title, .searchIcon {
color: #333333;
}
One of the most common complaints about CSS in the st place is the
cascading featu e itself. The a CSS o ks is that it cascades hence the
name pa ent st les to it's child en. This is often a cause fo bugs as classes
often ha e common names and it's eas to o e ite class st les fo non-
speci c classes.
Using ou e ample, the class name of .header isn't e speci c. Not onl
could the page itself ha e a heade , but content bo es on the page might,
a ticles, e en ads e place on the page might ha e a class name of .header .
One a e can a oid this p oblem is to use something like
css modules https://glenmadde n.com/a ticles/css-
modules to de ne custom, e uni ue CSS class names fo
us. The e is nothing magical about CSS modules othe than it
fo ces ou build-tool to de ne custom CSS class names fo us
so e can o k ith less uni ue names. We'll look into using
CSS modules a bit late in ou o k o .
Orange header 
76

React p o ides a not-so-ne method fo a oiding this p oblem enti el b
allo ing us to de ne st les inline along ith ou JSX.
Adding st les to ou actual components not onl allo us to de ne the st les
inside ou components, but allo us to d namicall de ne st les based upon
diffe ent states of the app.
React gi es us a a to de ne st les using a Ja aSc ipt object athe than a
sepa ate CSS le. Let's take ou Header component one mo e time and
instead of using css classes to de ne the st le, let's mo e it to inline st les.
De ning st les inside a component is eas using the style p op. All DOM
elements inside React accept a style p ope t , hich is e pected to be an
object ith camel-cased ke s de ning a st le name and alues hich map to
thei alue.
Fo e ample, to add a color st le to a <div /> element in JSX, this might
look like:
const style = { color: 'blue' }
<div style={style}>
This text will have the color blue
</div>
Inline styles
77

Notice that e de ned the st les ith t o b aces
su ounding it. As e a e passing a Ja aSc ipt object ithin a
template tag, the inne b ace is the JS object and the oute is
the template tag.
Another e ample to possibl make this clearer ould be to pass a
Ja aScript object deﬁned outside of the JSX, i.e.
render() {
const divStyle = { color: 'blue' }
return (<div style={divStyle}>
</div>);
}
In an case, as these a e JS-de ned st les, so e can't use just an ole' css
st le name as background-color ould be in alid in Ja aSc ipt . Instead,
React e ui es us to camel-case the st le name.
camelCase https://en. ikipedia.o g/ iki/CamelCase is
iting compound o ds using a capital lette fo e e o d
ith a capital lette e cept fo the st o d, like
backgroundColor and linearGradient .
To update ou heade component to use these st les instead of depending on
a CSS class de nition, e can add the className p op along ith a style
p op:
78

// ...
render() {
}
const wrapperStyle = {
backgroundColor: 'rgba(251, 202, 43, 1)'
}
const titleStyle = {
color: '#111111'
}
const menuColor = {
backgroundColor: '#111111'
}
return (
<div style={wrapperStyle} className="header">
<div className="dashTop" style={menuColor}></div>
<div className="dashBottom" style={menuColor}></div>
<div className="circle" style={menuColor}></div>
</div>
<span style={titleStyle} className="title">
{this.props.title}
</span>
<input
type="text"
{/* Adding an onClick handler to call the showSearch button
*/}
79

<div
style={titleStyle}
onClick={this.showSearch.bind(this)}
className="fa fa-search searchIcon"></div>
</div>
)
}
}
Ou heade ill be o ange again.
The React communit is a p ett ib ant place hich is one of the easons it
is a fantastic lib a to o k ith . The e a e a lot of st ling lib a ies e can
use to help us build ou st les, such as Radium
https://fo midable.com/open-sou ce/ adium/ b Fo midable labs.
Most of these lib a ies a e based upon o k o s de ned b React
de elope s th ough o king ith React.
Radium allo s us to de ne common st les outside of the React component
itself, it auto- endo p e es, suppo ts media ue ies like :hover and
:active , simpli es inline st ling, and kind of a lot mo e.
We on't di e into Radium in this post as it's mo e outside the scope of this
se ies, but kno ing othe lib a ies a e good to be a a e of, especiall if
ou' e looking to e tend the de nitions of ou inline st les.
Styling libraries
Orange header 
80

No that e kno ho to st le ou components, e can make some good
looking ones ithout too much t ouble. In the ne t section, e'll get ight
back to adding use inte acti it to ou components.
81

Interactivity
Today e'll alk through ho to add interacti ity to our
applications to make them engaging and dynamic.
Th ough this point, e' e built ou fe handful of components ithout
adding much use inte action. Toda , e' e going to change that.
The b o se is an e ent-d i en application. E e thing that a use does in
the b o se es an e ent, f om clicking buttons to e en just mo ing the
mouse. In plain Ja aSc ipt, e can listen fo these e ents and attach a
Ja aSc ipt function to inte act ith them.
Fo instance, e can attach a function to the mousemove b o se e ent ith
the JS:
User interaction
82

export const go = () => {
const ele = document.getElementById('mousemove');
ele.innerHTML = 'Move your mouse to see the demo';
ele.addEventListener('mousemove', function(evt) {
const { screenX, screenY } = evt;
ele.innerHTML = '<div>Mouse is at: X: ' +
screenX + ', Y: ' + screenY +
'</div>';
})
}
This esults in the follo ing functionalit :
Move your mouse over this text
In React, ho e e e don't ha e to inte act ith the b o se 's e ent loop in
a Ja aSc ipt as React p o ides a a fo us to handle e ents using props .
Fo instance, to listen fo the mousemove e ent f om the athe unimp essi e
demo abo e in React, e'll set the p op onMouseMove notice the camelcasing
of the e ent name .
<div onMouseMove={(evt) => console.log(evt)}>
Move the mouse over this text
</div>
React p o ides a lot of props e can set to listen fo diffe ent b o se
e ents, such as click, touch, d ag, sc oll, selection e ents, and man mo e
see the e ents https://facebook.github.io/ eact/docs/e ents.html
documentation fo a list of all of them .
83

To see some of these in action, the follo ing is a small demo of some of the
props e can pass on ou elements. Each te t element in the list set the
p op it lists. T pla ing a ound ith the list and seeing ho the e ents a e
called and handled ithin the element all e ents a e set on the te t, not the
list item :
We'll be using the onClick p op uite a bit all th oughout ou apps uite a
bit, so it's a good idea to be familia ith it. In ou acti it list heade , e
ha e a sea ch icon that e ha en't hooked up et to sho a sea ch bo .
The inte action e ant is to sho a sea ch <input /> hen ou use s click
on the sea ch icon. Recall that ou Header component is implemented like
this:
84

super(props);
this.state = {
searchVisible: false
}
}
// toggle visibility when run on the state
showSearch() {
this.setState({
searchVisible: !this.state.searchVisible
})
}
render() {
}
return (
</div>
{this.props.title}
</span>
<input
type="text"
85

*/}
<div
</div>
)
}
}
When the use clicks on the <div className="fa fa-search searchIcon">
</div> element, e'll ant to un a function to update the state of the
component so the searchInputClasses object gets updated. Using the
onClick handle , this is p ett simple.
Let's make this component stateful it needs to t ack if the sea ch eld
should be sho ing o not . We can con e t ou component to be stateful
using the constructor() function:
super(props);
this.state = {
}
}
// ...
}
86

In Ja aScript, the constructor function is a function that runs hen an
object is created. It returns a reference to the Object function that
created the instance's prototype .
In plain English, a constructor function is the function that runs hen the
Ja aScript runtime creates a ne object. We'll use the constructor
method to set up instance ariables on the object as it runs right hen
the object is created.
When using the ES6 class s nta to create an object, e ha e to call the
super() method before an other method. Calling the super() function
calls the parent class's constructor() function. We'll call it ith the same
arguments as the constructor() function of our class is called ith.
When the use clicks on the button, e'll ant to update the state to sa that
the searchVisible ag gets updated. Since e'll ant the use to be able to
close/hide the <input /> eld afte clicking on the sea ch icon fo a second
time, e'll toggle the state athe than just set it to t ue.
Let's c eate this method to bind ou click e ent:
// ...
showSearch() {
this.setState({
})
}
// ...
}
Finall , e can attach a click handle using the onClick p op on the icon
element to call ou ne showSearch() method. The enti e updated sou ce fo
ou Header component looks like this:
What is a constructor function?
87

super(props);
this.state = {
}
}
showSearch() {
this.setState({
})
}
render() {
}
return (
{this.props.title}
</span>
<input
type="text"
*/}
<div
89

</div>
)
}
}
T clicking on the sea ch icon and atch the input eld appea and
disappea the animation effect is handled b CSS animations .
Whene e e build a fo m in React, e'll use the input e ents offe ed b
React. Most notabl , e'll use the onSubmit() and onChange() p ops most
often.
Let's update ou sea ch bo demo to captu e the te t inside the sea ch eld
hen it updates. Whene e an <input /> eld has the onChange() p op set,
it ill call the function e ery time the ﬁeld changes. When e click on it and
sta t t ping, the function ill be called.
Using this p op, e can captu e the alue of the eld in ou state.
Rathe than updating ou <Header /> component, let's c eate a ne child
component to contain a <form /> element. B mo ing the fo m-handling
esponsibilities to it's o n fo m, e can simplif the <Header /> code and e
can call up to the pa ent of the heade hen ou use submits the fo m this
is a usual React patte n .
Let's c eate a ne component e'll call SearchForm . This ne component is a
stateful component as e'll need to hold on to the alue of the sea ch input
t ack it as it changes :
Input events
90

class SearchForm extends React.Component {
// ...
super(props);
this.state = {
searchText: ''
}
}
// ...
}
No , e al ead ha e the HTML fo the fo m itten in the <Header />
component, so let's g ab that f om ou Header component and etu n it f om
ou SearchForm.render() function:
// ...
render() {
const { searchVisible } = this.state;
let searchClasses = ['searchInput']
if (searchVisible) {
searchClasses.push('active')
}
return (
<form className='header'>
<input
type="search"
className={searchClasses.join(' ')}
onChange={this.updateSearchInput.bind(this)}
<div
</form>
);
}
}
91

Notice that e lost the st les on ou <input /> eld. Since e no longe
ha e the searchVisible state in ou ne component, e can't use it to st le
the <input /> an longe . Ho e er, e can pass a p op f om ou Header
component that tells the SearchForm to ende the input as isible.
Let's de ne the searchVisible p op using PropTypes , of cou se and update
the render function to use the ne p op alue to sho o hide the sea ch
<input /> . We'll also set a default alue fo the isibilit of the eld to be
false since ou Header sho s/hides it nicel :
static propTypes = {
onSubmit: PropTypes.func.isRequired,
searchVisible: PropTypes.bool
}
// ...
}
No e ha e ou st les back on the <input /> element, let's add the
functionalit fo hen the use t pes in the sea ch bo , e'll ant to captu e
the alue of the sea ch eld. We can achie e this o k o b attaching the
onChange p op to the <input /> element and passing it a function to call
e e time the <input /> element is changed.
92

// ...
updateSearchInput(e) {
const val = e.target.value;
this.setState({
searchText: val
});
}
// ...
render() {
const { searchVisible } = this.state;
}
return (
<form className='header'>
<input
type="search"
<div
</form>
);
}
}
When e t pe in the eld, the updateSearchInput() function ill be called.
We'll keep t ack of the alue of the fo m b updating the state. In the
updateSearchInput() function, e can call di ectl to this.setState() to
update the state of the component.
93

The alue is held on the event object's ta get as
event.target.value .
// ...
updateSearchInput(e) {
const val = e.target.value;
this.setState({
searchText: val
});
}
// ...
}
94

We're creating hat's kno n as an uncontrolled component as e're not
setting the alue of the <input /> element. We can't pro ide an
alidation or post-processing on the input te t alue as it stands right
no .
If e ant to alidate the ﬁeld or manipulate the alue of the <input />
component, e'll ha e to create hat is called a controlled component,
hich reall just means that e pass it a alue using the value prop. A
controlled component ersion's render() function ould look like:
render() {
return (
<input
type="search"
value={this.state.searchText}
className={searchInputClasses}
);
}
}
As of no , e ha e no a to actuall submit the fo m, so ou use 's can't
eall sea ch. Let's change this. We'll ant to ap the <input /> component
in a <form /> DOM element so ou use s can p ess the ente ke to submit
the fo m. We can captu e the fo m submission b using the onSubmit p op
on the <form /> element.
Let's update the render() function to e ect this change.
Controlled vs. uncontrolled
95

// ...
submitForm(e) {
e.preventDefault();
const {searchText} = this.state;
this.props.onSubmit(searchText);
}
// ...
render() {
const { searchVisible } = this.props;
}
return (
<form onSubmit={this.submitForm.bind(this)}>
<input
type="search"
</form>
);
}
}
We immediately call event.preventDefault() on the
submitForm() function. This stops the b o se f om bubbling
the e ent up hich ould causes the default beha io of the
enti e page to eload the default function hen a b o se
submits a fo m .
No hen e t pe into the <input /> eld and p ess ente , the
submitForm() function gets called ith the e ent object.
96

So... g eat, e can submit the fo m and stuff, but hen do e actuall do the
sea ching? Fo demonst ation pu poses ight no , e'll pass the sea ch te t
up the pa ent-child component chain so the Header can decide hat to
sea ch.
The SearchForm component ce tainly doesn't kno hat it's
sea ching, so e'll ha e to pass the esponsibility up the
chain. We'll use this callback st ategy uite a bit.
In o de to pass the sea ch functionalit up the chain, ou SearchForm ill
need to accept a p op function to call hen the fo m is submitted. Let's
de ne a p op e'll call onSubmit that e can pass to ou SearchForm
component. Being good de elope s, e'll also add a default prop alue and a
propType fo this onSubmit function. Since e'll ant to make su e the
onSubmit() is de ned, e'll set the onSubmit p op to be a e ui ed p op:
static propTypes = {
onSubmit: PropTypes.func.isRequired,
searchVisible: PropTypes.bool
}
// ...
static defaultProps = {
onSubmit: () => {},
}
// ...
}
When the fo m is submitted, e can call this function di ectl f om the
props . Since e' e keeping t ack of the sea ch te t in ou state, e can call
the function ith the searchText alue in the state so the onSubmit()
function onl gets the alue and doesn't need to deal ith an e ent.
97

// ...
submitForm(event) {
// prevent the form from reloading the entire page
event.preventDefault();
// call the callback with the search value
this.props.onSubmit(this.state.searchText);
}
}
No , hen the use p esses ente e can call this onSubmit() function
passed in the props b ou Header component.
We can use this SearchForm component in ou Header component and pass
it the t o p ops e' e de ned searchVisible and onSubmit :
98

import React from 'react';
import SearchForm from './SearchFormWithSubmit'
super(props);
this.state = {
}
}
showSearch() {
this.setState({
})
}
render() {
}
return (
</div>
{this.props.title}
</span>
<SearchForm
searchVisible={this.state.searchVisible}
99

onSubmit={this.props.onSubmit} />
*/}
<div
</div>
)
}
}
export default Header
No e ha e a sea ch fo m component e can use and euse ac oss ou app.
Of cou se, e' e not actuall sea ching an thing et. Let's that and
implement sea ch.
To implement sea ch in ou component, e'll ant to pass up the sea ch
esponsibilit one mo e le el f om ou Header component to a containe
component e'll call Panel .
Fi st things st, let's implement the same patte n of passing a callback to a
pa ent component f om ithin a child component f om the Panel containe
to the Header component.
On the Header component, let's update the propTypes fo a p op e'll de ne
as a p op called onSearch :
Implementing search
100

// ...
}
onSearch: PropTypes.func
}
Inside the Header component's 'submitFo m ' function, call this onSearch()
p op e ill pass into it:
// ...
submitForm(val) {
this.props.onSearch(val);
}
// ...
}
onSearch: PropTypes.func
}
Notice that ou i tual t ee looks like this:
<Panel>
<Header>
<SearchForm></SearchForm>
</Header>
</Panel>
When the <SearchForm /> is updated, it ill pass along it's a areness of
the search input's change to it's parent, the <Header /> , hen it ill pass
along up ards to the <Panel /> component. This method is very common
in React apps and pro ides a good set of functional isolation for our
components.
101

Back in ou Panel component e built on da 7, e'll pass a function to the
Header as the onSearch() p op on the Header . What e' e sa ing he e is
that hen the sea ch fo m has been submitted, e ant the sea ch fo m to
call back to the heade component hich ill then call to the Panel
component to handle the sea ch.
Since the Header component doesn't cont ol the content listing, the Panel
component does, e ha e to pass the esponsibilit one mo e le el up, as
e' e de ning he e.
In an case, ou Panel component is essentiall a cop of ou Content
component e p e iousl o ked on:
102

class Panel extends React.Component {
super(props);
this.state = {
loading: false, // <~ set loading to false
activities: data,
filtered: data,
}
}
componentDidMount() {this.updateData();}
componentWillReceiveProps(nextProps) {
// Check to see if the requestRefresh prop has changed
if (nextProps.requestRefresh !== this.props.requestRefresh) {
}
}
handleSearch = txt => {
if (txt === '') {
this.setState({
filtered: this.state.activities
})
} else {
const { activities } = this.state
const filtered = activities.filter(a => a.actor &&
a.actor.login.match(txt))
this.setState({
filtered
})
}
}
// Call out to github and refresh directory
updateData() {
this.setState({
loading: false,
activities: data
}, this.props.onComponentRefresh);
}
103

render() {
const {loading, filtered} = this.state;
return (
<div>
<Header
onSubmit={this.handleSearch}
title="Github activity" />
{/* Show loading message if loading */}
{loading && <div>Loading</div>}
{filtered.map((activity) => (
<ActivityItem
key={activity.id}
))}
</div>
</div>
)
}
}
Let's update ou state to include a searchFilter st ing, hich ill just be the
sea ching alue:
super(props);
this.state = {
loading: false,
searchFilter: '',
activities: []
}
}
}
104

In o de to actuall handle the sea ching, e'll need to pass a onSearch()
function to ou Header component. Let's de ne an onSearch() function in
ou Panel component and pass it off to the Header p ops in the render()
function:
// ...
// after the content has refreshed, we want to
// reset the loading variable
onComponentRefresh() {this.setState({loading: false});}
handleSearch(val) {
// handle search here
}
render() {
const {loading} = this.state;
return (
<div>
<Header
onSearch={this.handleSearch.bind(this)}
title="Github activity" />
<Content
requestRefresh={loading}
onComponentRefresh={this.onComponentRefresh.bind(this)}
fetchData={this.updateData.bind(this)} />
</div>
)
}
}
All e did he e as add a handleSearch() function and pass it to the heade .
No hen the use t pes in the sea ch bo , the handleSearch() function on
ou Panel component ill be called.
To actuall implement sea ch, e'll need to keep t ack of this st ing and
update ou updateData() function to take into account sea ch lte ing. Fi st,
let's set the searchFilter on the state. We can also fo ce the Content to
eload the data b setting loading to t ue, so e can do this in one step:
105

// ...
handleSearch(val) {
this.setState({
searchFilter: val,
loading: true
});
}
// ...
}
Lastl , let's update ou updateData() function to take search into account.
class SearchableContent extends React.Component {
// ...
// ...
}
Although this might look comple , it's actuall nea l identical to ou e isting
updateData() function ith the e ception of the fact that e updated ou
fetch() esult to call the filter() method on the json collection.
All the collection.filter() function does is un the function passed in fo
e e element and it lte s out the alues that etu n fals alues, keeping
the ones that etu n t uth ones. Ou sea ch function simpl looks fo a
match on the Github acti it 's actor.login the Github use to see if it
ege p-matches the searchFilter alue.
With the updateData() function updated, ou sea ch is complete.
T sea ching fo auser .
No e ha e a 3-la e app component that handles sea ch f om a nested
child component. We jumped f om beginne to inte mediate ith this post.
Pat ou self on the back. This as some heft mate ial. Make su e ou
unde stand this because e'll use these concepts e co e ed toda uite
often.
106

In the ne t section, e'll jump out and look at building pure components.
107

Pure Components
React offers se eral different methods for creating components.
Today e'll talk about the ﬁnal method of creating components,
the function stateless pure component.
We' e looked at a fe diffe ent a s to build eact components. One method
e left out up th ough this point is the stateless component/functional
method of building React components.
As e' e seen up th ough this point, e' e onl o ked th ough building
components using the React.Component and React.createClass() methods.
Fo mo e pe fo mance and simplicit , React also allo s us to c eate pu e,
stateless components using a no mal Ja aSc ipt function.
A Pure component can eplace a component that onl has a render function.
Instead of making a full-blo n component just to ende some content to the
sc een, e can c eate a pure one instead.
Pure components a e the simplest, fastest components e can ite. The
a e eas to ite, simple to eason about, and the uickest component e
can ite. Befo e e di e into why these a e bette , let's ite one, o heck a
couple!
108

// The simplest one
const HelloWorld = () => (<div>Hello world</div>);
// A Notification component
const Notification = (props) => {
const {level, message} = props;
const classNames = ['alert', 'alert-' + level]
return (
<div className={classNames}>
{message}
</div>
)
};
// In ES5
var ListItem = function(props) {
var handleClick = function(event) {
props.onClick(event);
};
return (
<div className="list">
<a
href="#"
onClick={handleClick}>
{props.children}
</a>
</div>
)
}
So the a e just functions, ight? Yep! Since the a e just functions, it's eall
eas to test using pu e Ja aSc ipt. The idea is that if React kno s the props
that a e sent into a component, it can be dete ministic in kno ing if it has to
e ende o not. The same p ops in e ual the same output i tual DOM.
In React, functional components a e called ith an a gument of props
simila to the React.Component const ucto class , hich a e the props it's
called ith as ell as ith the cu ent context of the component t ee.
109

Fo instance, let's sa e ant to e ite ou o iginal Timer component
using functional components as e ant to gi e ou use s a d namic a to
set thei o n clock st les 4 hou clock s. , diffe ent sepa ato s, ma be
the don't ant to displa the seconds, etc .
We can b eak up ou clock into multiple components he e e can use each
block of time as an indi idual component. We might b eak them up like so:
const Hour = (props) => {
let {hours} = props;
if (hours === 0) { hours = 12; }
if (props.twelveHours) { hours -= 12; }
return (<span>{hours}</span>)
}
const Minute = ({minutes}) => (<span>{minutes<10 && '0'}{minutes}
</span>)
const Second = ({seconds}) => (<span>{seconds<10 && '0'}{seconds}
</span>)
const Separator = ({separator}) => (<span>{separator || ':'}</span>)
const Ampm = ({hours}) => (<span>{hours >= 12 ? 'pm' : 'am'}</span>)
With these, e can place indi idual components as th ough the a e full-
blo n React components the a e :
<div>Minute: <Minute minutes={12} /></div>
<div>Second: <Second seconds={51} /></div>
Minute: 12
Second: 51
110

We can efacto ou clock component to accept a format st ing and b eak up
this st ing selecting onl the components ou use is inte ested in sho ing.
The e a e multiple a s e can handle this, like fo cing the logic into the
Clock component or e can c eate anothe stateless component that
accepts a fo mat st ing. Let's do that easie to test :
const Formatter = (props) => {
let children = props.format.split('').map((e, idx) => {
if (e === 'h') {
return <Hour key={idx} {...props} />
} else if (e === 'm') {
return <Minute key={idx} {...props} />
} else if (e === 's') {
return <Second key={idx} {...props} />
} else if (e === 'p') {
return <Ampm key={idx} {...props} />
} else if (e === ' ') {
return <span key={idx}> </span>;
} else {
return <Separator key={idx} {...props} />
}
});
return <span>{children}</span>;
}
This is a little ugl ith the key and {...props} thingie in the e. React gi es
us some helpe s fo mapping o e child en and taking ca e of handling the
uni ue key fo each child th ough the React.Children object.
The render() function of ou Clock component can be g eatl simpliﬁed
thanks to the Formatter component into this:
111

state = { currentTime: new Date() }
componentDidMount() {
this.setState({
currentTime: new Date()
}, this.updateTime);
}
componentWillUnmount() {
if (this.timerId) {
clearTimeout(this.timerId)
}
}
updateTime = e => {
this.timerId = setTimeout(() => {
this.setState({
currentTime: new Date()
}, this.updateTime);
})
}
render() {
const { currentTime } = this.state
const hour = currentTime.getHours();
const minute = currentTime.getMinutes();
const second = currentTime.getSeconds();
return (
<div className='clock'>
<Formatter
{...this.props}
state={this.state}
hours={hour}
minutes={minute}
seconds={second}
/>
</div>
)
}
}
112

Not onl is ou Clock component much simple , but it's so much easie to
test. It also ill help us t ansition to using a data state t ee, like Flu /Redu
f ame o ks, but mo e on those late .
Ad antages to using functional components in React a e:
We can do a a ith the hea lifting of components, no const ucto ,
state, life-c cle madness, etc.
The e is no this ke o d i.e. no need to bind
P esentational components also called dumb components emphasize
UI o e business logic i.e. no state manipulation in the component
Encou ages building smalle , self-contained components
Highlights badl itten code fo bette efacto ing
FAST FAST FAST FAST FAST
The a e easy to euse
You might sa h not use a functional component? Well, some of the
disad antage of using a functional component a e some of the ad antages:
No life-c cle callback hooks
Limited functionalit
The e is no this ke o d
O e all, it's a eall good idea to t to p efe using functional components
o e thei hea ie React.Component cousins. When e get to talking about
data management in React, e'll see ho e can use these p esentational
components ith data as pu e props .
15:52:58 pm
Uhh... so why care?
113

Nice o k toda . We' e successfull achie ed React ank afte toda . We no
kno the three a s to make a React Component.
Tomo o , e'll get set up using/building React apps ith the package
management tool shipped b the React team: create-react-app .
114

create-react-app
Today, e're going to add a build process to store common build
actions so e can easily de elop and deploy our applications.
The React team noticed that the e is a lot of configu ation e ui ed and the
communit helped bloat -- us included to un a React app. Luckil , some
sma t folks in the React team/communit got togethe and built/ eleased an
official gene ato app that makes it much easie to get up and unning
uickl .
So fa in this cou se, e' e onl been o king ith iting ou components
in a single sc ipt. Although it's g eat fo simplicit , it can be difficult to sha e
components amongst multiple de elope s. A single file is also p ett difficult
to ite comple applications.
Instead, e'll set up a build tool fo ou applications using a e popula
packaging tool called c eate- eact-app
https://github.com/facebookincubato /c eate- eact-app . The tool
p o ides a g eat place to sta t out de eloping ou applications ithout
needing to spend too much time o king on setting up ou build tooling.
Packaging
115

In o de to use it, e'll need to sta t out b installing it. We can use npm o
yarn to install create-react-app :
The c eate- eact-app https://github.com/facebookincubato /c eate- eact-
app p oject is eleased th ough Facebook helps us get up and unning
uickl ith a React app on ou s stem ith no custom conﬁgu ing e ui ed
on ou pa t.
The package is eleased as a Node https://nodejs.o g/ Package
https:// .npmjs.com/package/c eate- eact-app and can be installed
using npm .
The Node https://nodejs.org homepage has simple documentation on
ho to install node, if ou don't alread ha e it installed on our s stem.
We recommend using the n m https://github.com/creationi /n m or
the n https://github.com/tj/n ersion management tools. These tools
make it incredibl eas to install/use multiple ersions of node on our
s stem at an point.
With node installed on ou s stem, e can install the create-react-app
package:
npm install --global create-react-app
create-react-app
A plug for nvm and n
116

With create-react-app installed globall , e'll be able to use the create-
react-app command an he e in ou te minal.
Let's c eate a ne app e'll call 0da s using the create-react-app
command e just installed. Open a Te minal indo in a di ecto he e
ou ant to c eate ou app.
In te minal, e can c eate a ne React application using the command and
adding a name to the app e ant to c eate.
create-react-app 30days && cd 30days
117

Inside ou ne p oject, e can un npm start to see ou ne p oject!
Let's sta t ou app in the b o se . The create-react-app package comes
ith a fe built-in sc ipts it c eated fo us in the package.json ﬁle . We can
start editing ou app using the built-in ebse e using the npm start
command:
118

npm start
This command ill open a indo in Ch ome to the default app it c eated
fo us unning at the u l: http://localhost: 000/ http://localhost: 000/ .
119

Let's edit the ne l c eated app. Looking at the di ecto st uctu e it
c eated, e'll see e ha e a basic node app unning ith a
public/index.html and a fe ﬁles in the src/ di ecto that comp ise ou
unning app.
Let's open up the src/App.js ﬁle and e'll see e ha e a e basic
component that should all look familia . It has a simple ende function hich
etu ns the esult e see in the Ch ome indo .
120

The index.html file has a single <div /> node ith the id of #root , he e
the app itself ill be mounted fo us automaticall this is handled in the
src/index.js file . An time e ant to add ebfonts, st le tags, etc. e can
load them in the index.html file.
Let's look at a fe of the featu es create-react-app enables fo us.
121

We' e used multiple components in the past. Let's pull in the e ample e
alked th ough on da - ith a heade and content slightl simplified --
changing the className f om notificationsFrame to App and emo ing the
inne component :
import React from 'react'
render() {
return (
<div className="App">
<Header />
<Content />
</div>
)
}
}
We could define the Header and the Content component in the same file, but
as e discussed, that becomes p ett cumbe some. Instead, let's c eate a
di ecto called components/ in the src/ di ecto src/components/ and
c eate t o files called Header.js and Content.js in the e:
# in my-app/
mkdir src/components
touch src/components/{Header,Content}.js
No , let's ite the t o components in thei especti e file. Fi st, the Header
components in src/components/Header.js :
122

import React, {Component} from 'react';
class Header extends Component {
render() {
return (
<div id="header">
<h1>Header</h1>
</div>
);
}
}
And no let's ite the Content component in the
src/components/Content.js file:
import React, {Component} from 'react';
class Content extends Component {
render() {
return <p className="App-intro">Content goes here</p>;
}
}
B making a small update to these t o component definitions, e can then
import them into ou App component in src/App.js .
We'll use the export ke o d befo e the class definition:
Let's update the Header component slightl :
export class Header extends React.Component {
// ...
}
and the Content component:
123

export class Content extends React.Component {
// ...
}
No e can import these t o component f om ou src/App.js file. Let's
update ou App.js b adding these t o import statements:
import {Header} from './components/Header'
import {Content} from './components/Content'
render() {
return (
<Header />
<Content />
</div>
)
}
}
He e, e' e using named e po ts to pull in the t o components f om thei
especti e files in src/components/ .
B con ention, if e onl ha e a single e po t f om these files, e can use the
export default s nta so e can emo e the {} su ounding the named
e po t. Let's update each of these especti e files to include an e t a line at
the end to enable the default impo t:
export class Header extends React.Component {
// ...
}
export default Header
124

and the Content component:
export class Content extends React.Component {
// ...
}
export default Content
No e can update ou impo t of the t o components like so:
import Header from './components/Header'
import Content from './components/Content'
render() {
return (
<Header />
<Content />
</div>
)
}
}
Using this kno ledge, e can no also update ou components b impo ting
the named Component class and simplif ou deﬁnition of the class ﬁle again.
Let's take the Content component in src/components/Content.js :
125

import React, {Component} from 'react'; // This is the change
export class Content extends Component { // and this allows us
// to not call
React.Component
// but instead use just
// the Component class
render() {
return <p className="App-intro">Content goes here</p>;
}
}
export default Content;
We'll get to deplo ment in a fe eeks, but fo the time being kno that the
gene ato c eated a build command so e can c eate miniﬁed, optimize
e sions of ou app that e can upload to a se e .
We can build ou app using the npm run build command in the oot of ou
p oject:
npm run build
Shipping
126

With that, e no ha e a li e- eloading single-page app SPA ead fo
de elopment. Tomo o , e'll use this ne app e built di ing into
ende ing multiple components at un-time.
127

Repeating Elements
Toda e're going to ork through ho to displa multiple
components in preparation for pulling in e ternal data into our
app.
Up th ough this point, e' e been building a basic application ithout an
e te nal data. Befo e e get the e e'll sta t on this functionalit tomo o ,
let's look o e something e glossed o e in the p e ious t o eeks:
We' e al ead seen this befo e he e e' e ite ated o e a list of objects and
ende multiple components on sc een. Befo e e add too much comple it
in ou app ith loading e te nal data, toda e'll take a uick peek at ho to
epeat components/elements in ou app.
Since JSX is seen as plain Ja aSc ipt b the b o se , e can use an ole'
Ja aSc ipt inside the template tags in JSX. We' e al ead seen this in action.
As a uick demo:
Repeating elements
128

const App = (props) => {
return (
<ul>
{a.map(i => {
return <li>{i}</li>
})}
</ul>
)
}
Notice the things inside of the template tags {} look like simple Ja aSc ipt.
That's because it is just Ja aSc ipt. This featu e allo s us to use most nati e
featu es of Ja aSc ipt inside ou template tags including nati e ite ato s,
such as map and forEach .
Let's see hat e mean he e. Let's con e t the p e ious e ample's a alue
f om a single intege to a list of intege s:
const a = [1, 10, 100, 1000, 10000];
We can map o e the a a iable he e inside ou components and etu n a list
of React components that ill build the i tual DOM fo us.
129

return (
<ul>
{a.map(i => {
return <li>{i}</li>
})}
</ul>
)
}
What is the map() function?
The map function is a nati e Ja aScript built-in function on the arra . It
accepts a function to be run on each element of the arra , so the function
abo e ill be run four times ith the alue of i starting as 1 and then it
ill run it again for the second alue here i ill be set as 10 and so on
and so forth.
Let's update the app e c eated on da ith ou App component he e.
Let's open up ou src/App.js le and eplace the content of the App
component ith this sou ce. Cleaning up a fe unused a iables and ou
src/App.js should look simila to this:
130

const a = [1, 10, 100, 1000, 10000];
return (
<ul>
{a.map(i => {
return <li>{i}</li>
})}
</ul>
)
}
export default App
Sta ting the app again ith the command gene ated b the create-react-app
command: npm start , e can see the app is o king in the b o se !
Ho e e , if e open the de elope console, e'll see e ha e an e o
p inted out. This e o is caused b the fact that React doesn't kno ho to
keep t ack of the indi idual components in ou list as each one just looks like
a <li /> component.
131

Fo pe fo mance easons, React uses the i tual DOM to attempt to limit the
numbe of DOM elements that need to be updated hen it e ende s the
ie . That is if nothing has changed, React on't make the b o se update
an thing to sa e on o k.
This featu e is eall fantastic fo building eb applications, but sometimes
e ha e to help React out b p o iding uni ue identi e s fo nodes. Mapping
o e a list and ende ing components in the map is one of those times.
React e pects us to uniquely identif components b using a special p op:
the key p op fo each element of the list. The key p op can be an thing e
ant, but it must be unique fo that element. In ou e ample, e can use the
i a iable in the map as no othe element in the a a has the same alue.
Let's update ou mapping to set the ke :
return (
<ul>
{a.map(i => {
return <li key={i}>{i}</li>
})}
</ul>
)
}
We talked about building a pa ent-child elationship a bit ea lie this eek,
but let's di e a bit mo e into detail about ho e get access to the child en
inside a pa ent component and ho e can ende them.
On da , e built a <Formatter /> component to handle date fo matting
ithin the Clock component to gi e ou use s e ibilit ith thei o n
custom clock ende ing. Recall that the implementation e c eated is
actuall p ett ugl and elati el comple .
Children
132

const Formatter = ({format, state}) => {
let children = format.split('').map(e => {
if (e == 'h') {
return <Hour />
} else if (e == 'm') {
return <Minute />
} else if (e == 's') {
return <Second />
} else if (e == 'p') {
return <Ampm />
} else if (e == ' ') {
return <span> </span>;
} else {
return <Separator />
}
});
return (<span>
{React.Children
.map(children, c => React.cloneElement(c, state))}
</span>)
}
134

We ha e et to talk about the React.cloneElement() function, so let's look
at it brieﬂ here. Remember WWWWWAAAAAYYYYY back on da e
looked at ho the bro ser sees JSX? It turns it into Ja aScript that looks
similar to:
React.createElement("div", null,
React.createElement("img", {src: "profile.jpg", alt: "Profile
photo"}),
React.createElement("h1", null, "Welcome back Ari")
);
Rather than creating a ne component instance if e alread ha e one ,
sometimes e'll ant to cop it or add custom props/children to the
component so e can retain the same props it as created ith. We can
use React.cloneElement() to handle this for us.
The React.cloneElement() has the same API as the
React.createElement() function here the arguments are:
. The ReactElement e ant to clone
. An props e ant to add to the instance
. An children e ant it to ha e.
In our Formatter e ample, e're creating a cop of all the children in the
list the <Hour /> , <Minute /> , etc. components and passing them the
state object as their props.
The React.Children object p o ides some nice utilit functions fo dealing
ith child en. Ou Formatter e ample abo e uses the map function to ite ate
th ough the child en and clone each one in the list. It c eates a key if
necessa fo each one, f eeing us f om ha ing to manage the uni ueness
ou sel es.
Let's use the React.Children.map() function to update ou App component:
React.cloneElement
135

return (
<ul>
{React.Children.map(a, i => <li>{i}</li>)}
</ul>
)
}
Back in the b o se , e e thing still o ks.
The e a e se e al othe eall useful methods in the React.Children object
a ailable to us. We'll mostl use the React.Children.map() function, but it's
good to kno about the othe ones a ailable
https://facebook.github.io/ eact/docs/top-le el-api.html# eact.child en
to us. Check out the documentation
https://facebook.github.io/ eact/docs/top-le el-api.html# eact.child en
fo a longe list.
Up th ough this point, e' e onl dealt ith local data, not eall focusing on
emote data although e did b ie mention it hen building ou acti it
feed component . Tomo o e' e going to get into inte acting ith a se e
so e can use it in ou React apps.
136

Fetching Remote Data
We' e ead to make an e te nal e uest to fetch data! Toda
e' e looking at the ﬁ st step of making a call to an e te nal API.
Ou apps, until this point ha e la gel been static. E en the data e displa ed
f om Github as static data included in ou p oject. Ou apps a e eall onl
as inte esting as the data e use, so let's make ou apps mo e inte esting.
The no mal b o se o k o is actuall a s nch onous one. When the
b o se ecei es html, it pa ses the st ing of html content and con e ts it
into a t ee object this is hat e often efe to as the DOM object/DOM
t ee .
When the b o se pa ses the DOM t ee, as it encounte s emote les such
as <link /> and <script /> tags , the b o se ill e uest these les in
pa allel , but ill e ecute them s nch onousl so as to maintain thei o de
the a e listed in the sou ce .
What if e ant to get some data f om off-site? We'll make e uests fo data
that's not a ailable at launch time to populate data in ou app. Ho e e , it's
not necessa il that eas to do because of the as nch onous natu e of
e te nal API e uests.
Querying for remote data
138

Essentiall , hat this means is that e'll ha e to handle ith Ja aSc ipt code
afte an unkno n pe iod of time as ell actuall make an HTTP e uest.
Luckil fo us, othe people ha e dealt ith this p oblem fo a long time and
e no ha e some p ett nice a s of handling it.
Sta ting ith handling ho e'll be making an HTTP e uest, e'll use a
lib a called fetch , hich is also a eb standa d
https://fetch.spec. hat g.o g/ , hopefull to make the http e uesting
easie to deal ith.
In o de to use fetch, e'll need to install the lib a in ou app e p e iousl
c eated. Let's open up a te minal indo again and use npm to install the
whatwg-fetch lib a an implementation of fetch . In the same di ecto
he e e c eated ou application, let's call:
npm install --save whatwg-fetch
Fetch
139

With the lib a installed, e can make a e uest to an off-site se e . In
o de to get access to the fetch lib a , e'll need to import the package in
ou sc ipt. Let's update the top fe lines of ou src/App.js le adding the
second line:
import React, { Component } from 'react';
import 'whatwg-fetch';
// ...
The whatwg-fetch object is uni ue in that it is one of the fe
lib a ies that e'll use hich attaches it's e po t on the
global object in the case of the b o se , this object is
window . Unlike the react lib a , e don't need to get a
handle on it's e po t as the lib a makes it a ailable on the
global object.
With the whatwg-fetch lib a included in ou p oject, e can make a e uest
using the fetch() api. Ho e e , befo e e can actuall sta t using the
fetch() api, e'll need to unde stand hat P omises a e and ho the o k
to deal ith the as nch onous e discussed in the int oduction.
We'll pick up ith promises tomo o . Good job getting th ough eek t o
and see ou tomo o !
140

Introduction to Promises
Today, e're going to look at hat e need to kno to
understand Promises from a high-le el, so e can build our our
applications using this incredibly useful concept.
Yeste da /a ticles/ -da s-of- eact-da - / e installed the fetch
lib a into ou create-react-app p oject e sta ted on da /a ticles/ -
da s-of- eact-da - / . Toda e'll pick up f om este da discussing the
concept and the art of P omises https://de elope .mozilla.o g/en-
US/docs/Web/Ja aSc ipt/Refe ence/Global_Objects/P omise .
As deﬁned b the Mozilla, a Promise object is used fo handling
as nch onous computations hich has some impo tant gua antees that a e
difﬁcult to handle ith the callback method the mo e old-school method of
handling as nch onous code .
A Promise object is simpl a appe a ound a alue that ma o ma not be
kno n hen the object is instantiated and p o ides a method fo handling
the alue after it is kno n also kno n as resolved o is una ailable fo a
failu e eason e'll efe to this as rejected .
What is a promise
141

Using a Promise object gi es us the oppo tunit to associate functionalit fo
an as nch onous ope ation's e entual success o failu e fo hate e
eason . It also allo s us to t eat these comple scena ios b using
s nch onous-like code.
Fo instance, conside the follo ing s nch onous code he e e p int out
the cu ent time in the Ja aSc ipt console:
var currentTime = new Date();
console.log('The current time is: ' + currentTime);
This is p ett st aight-fo a d and o ks as the new Date() object
ep esents the time the b o se kno s about. No conside that e' e using
a diffe ent clock on some othe emote machine. Fo instance, if e' e
making a Happ Ne Yea s clock, it ould be g eat to be able to s nch onize
the use 's b o se ith e e one elses using a single time alue fo e e one
so no-one misses the ball d opping ce emon .
Suppose e ha e a method that handles getting the cu ent time fo the
clock called getCurrentTime() that fetches the cu ent time f om a emote
se e . We'll ep esent this no ith a setTimeout() that etu ns the time
like it's making a e uest to a slo API :
function getCurrentTime() {
// Get the current 'global' time from an API
return setTimeout(function() {
return new Date();
}, 2000);
}
var currentTime = getCurrentTime()
Ou console.log() log alue ill etu n the timeout handle id, hich is
deﬁnitel not the cu ent time. T aditionall , e can update the code using a
callback to get called hen the time is a ailable:
142

// randomly decide if the date is retrieved or not
console.log(didSucceed);
if (didSucceed) {
onSuccess(currentTime);
} else {
onFail('Unknown error');
}
}, 2000);
}
getCurrentTime(function(newCurrentTime) {
console.log('The real current time is: ' + currentTime);
}, function(nestedError) {
console.log('There was an error fetching the second time');
})
}, function(error) {
console.log('There was an error fetching the time');
});
Dealing ith as nch onousit in this a can get comple uickl . In
addition, e could be fetching alues f om a p e ious function call, hat if
e onl ant to get one... the e a e a lot of t ick cases to deal ith hen
dealing ith alues that a e not et a ailable hen ou app sta ts.
Using p omises, on the othe hand helps us a oid a lot of this comple it
although is not a sil e bullet solution . The p e ious code, hich could be
called spaghetti code can be tu ned into a neate , mo e s nch onous-looking
e sion:
Enter Promises
144

// Get the current 'global' time from an API using Promise
return new Promise((resolve, reject) => {
setTimeout(function() {
didSucceed ? resolve(new Date()) : reject('Error');
}, 2000);
})
}
getCurrentTime()
.then(currentTime => getCurrentTime())
.then(currentTime => {
return true;
})
.catch(err => console.log('There was an error:' + err))
This p e ious sou ce e ample is a bit cleane and clea as to hat's going on
and a oids a lot of t ick e o handling/catching.
To catch the alue on success, e'll use the then() function a ailable on the
Promise instance object. The then() function is called ith hate e the
etu n alue is of the p omise itself. Fo instance, in the e ample abo e, the
getCurrentTime() function esol es ith the currentTime() alue on
successful completion and calls the then() function on the etu n alue
hich is anothe p omise and so on and so fo th.
To catch an e o that occu s an he e in the p omise chain, e can use the
catch() method.
145

We're using a promise chain in the abo e e ample to create a
chain of actions to be called one after another. A promise
chain sounds comple , but it's fundamentall simple.
Essentiall , e can "s nchronize" a call to multiple
as nchronous operations in succession. Each call to then() is
called ith the pre ious then() function's return alue.
For instance, if e anted to manipulate the alue of the
getCurrentTime() call, e can add a link in the chain, like so:
getCurrentTime()
.then(currentTime => getCurrentTime())
.then(currentTime => {
return 'It is now: ' + currentTime;
})
// this logs: "It is now: [current time]"
.then(currentTimeMessage => console.log(currentTimeMessage))
.catch(err => console.log('There was an error:' + err))
A p omise onl e e has one of th ee states at an gi en time:
pending
fulﬁlled esol ed
ejected e o
A pending p omise can onl e e lead to eithe a fulﬁlled state o a ejected
state once and only once, hich can a oid some p ett comple e o
scena ios. This means that e can onl e e etu n a p omise once. If e
ant to e un a function that uses p omises, e need to c eate a new one.
Single-use guarantee
Creating a promise
146

We can c eate ne p omises as the e ample sho s abo e using the Promise
const ucto . It accepts a function that ill get un ith t o pa amete s:
The onSuccess o resolve function to be called on success esolution
The onFail o reject function to be called on failu e ejection
Recalling ou function f om abo e, e can see that e call the resolve()
function if the e uest succeeded and call the reject() function if the
method etu ns an e o condition.
var promise = new Promise(function(resolve, reject) {
// call resolve if the method succeeds
resolve(true);
})
promise.then(bool => console.log('Bool is true'))
No that e kno hat p omises a e, ho to use, and ho to c eate them,
e can actuall get do n to using the fetch() lib a e installed este da .
dd
147

Displaying Remote Data
Ou f ont-end applications a e only as inte esting as the data
we display in them. Today, let's actually sta t making a e uest
fo data and get it integ ated into ou app.
As of toda , e' e o ked th ough p omises, built ou app using the npm
package , installed ou emote object fetching lib a whatwg-fetch and
e' e ﬁnall ead to integ ate emote data into ou application.
Let's get into using the fetch lib a e installed on da /a ticles/ -
da s-of- eact/ -aja .
Fo simplicit pu poses, let's b eak out ou demo f om este da he e e
fetched the cu ent time f om an API se e :
Fetching data
148

This demo eact component makes a e uest to the API se e and epo ts
back the cu ent time f om it's clock. Befo e e add the call to fetch, let's
c eate a fe stateful components e'll use to displa the time and update the
time e uest.
We realize the ne t fe lines are walls of code, hich e generall tr to
a oid, especiall ithout discussing ho the ork. Ho e er, since e're
not talking about ho to create a component in detail here, et e still
ant to ﬁll out a complete component, e' e made an e ception.
Please lea e us feedback links at the bottom if ou prefer us to change
this approach for toda .
Fi st, the basis of the appe component hich ill sho and fetch the
cu ent time looks like the follo ing. Let's cop and paste this code into ou
app at src/App.js :
Walls of code warning
149

import 'whatwg-fetch';
import './App.css';
import TimeForm from './TimeForm';
super(props);
this.fetchCurrentTime = this.fetchCurrentTime.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.state = {
currentTime: null, msg: 'now'
}
}
// methods we'll fill in shortly
fetchCurrentTime() {}
getApiUrl() {}
handleFormSubmit(evt) {}
handleChange(newState) {}
render() {
const {currentTime, tz} = this.state;
const apiUrl = this.getApiUrl();
return (
<div>
{!currentTime &&
<button onClick={this.fetchCurrentTime}>
Get the current time
</button>}
{currentTime && <div>The current time is: {currentTime}
</div>}
<TimeForm
onFormSubmit={this.handleFormSubmit}
onFormChange={this.handleChange}
tz={tz}
msg={'now'}
/>
150

<p>We'll be making a request from: <code>{apiUrl}</code></p>
</div>
)
}
}
export default App;
The p e ious component is a basic stateful React component as e' e
c eated. Since e'll ant to sho a fo m, e' e included the intended usage
of the TimeForm let's c eate ne t.
Let's c eate this component in ou eact app using create-react-app . Add
the ﬁle src/TimeForm.js into ou p oject:
touch src/TimeForm.js
No let's add content. We'll ant ou TimeForm to take the ole of allo ing
the use to s itch bet een timezones in thei b o se . We can handle this
b c eating a stateful component e'll call the TimeForm . Ou TimeForm
component might look like the follo ing:
151

<select
onChange={this._changeTimezone}
defaultValue={tz}>
{timezones.map(t => {
return (<option key={t} value={t}>{t}</option>)
})}
</select>
<input
type="text"
placeholder="A chronic string message (such as 7 hours from
now)"
onChange={this._changeMsg}
/>
<input
type="submit"
value="Update request"
/>
</form>
)
}
}
export default TimeForm;
With these Components c eated, let's load up ou app in the b o se afte
unning it ith npm start and e'll see ou fo m albeit not inc edibl
beautiful et . Of cou se, at this point, e on't ha e a unning component as
e ha en't implemented ou data fetching. Let's get to that no .
Fetching data
153

As e said este da , e'll use the fetch() API ith p omise suppo t. When
e call the fetch() method, it ill etu n us a p omise, he e e can handle
the e uest ho e e e ant. We' e going to make a e uest to ou no -
based API se e so sta t-up might be slo if it hasn't been un in a hile .
We' e going to be building up the URL e'll e uest as it ep esents the time
ue e'll e uest on the se e .
I' e al ead defined the method getApiUrl() in the App component, so let's
fill that function in.
The ch onic api se e accepts a fe a iables that e'll customize in the
fo m. It ill take the timezone to along ith a ch onic message. We'll sta t
simpl and ask the ch onic lib a fo the pst timezone and the cu ent time
now :
super(props);
this.state = {
currentTime: null, msg: 'now', tz: 'PST'
}
}
// ...
getApiUrl() {
const {tz, msg} = this.state;
const host = 'https://andthetimeis.com';
return host + '/' + tz + '/' + msg + '.json';
}
// ...
export default App;
No , hen e call getApiUrl() , the URL of the ne t e uest ill be etu ned
fo us. No , finall , let's implement ou fetch() function. The fetch()
function accepts a fe a guments that can help us customize ou e uests.
The most basic GET e uest can just take a single URL endpoint. The etu n
alue on fetch() is a p omise object, that e e plo ed in-depth este da .
154

Let's update ou fetchCurrentTime() method to fetch the cu ent time f om
the emote se e . We'll use the .json() method on the esponse object to
tu n the bod of the esponse f om a JSON object into Ja aSc ipt object and
then update ou component b setting the esponse alue of the dateString
as the currentTime in the component state:
// ...
fetchCurrentTime() {
fetch(this.getApiUrl())
.then(resp => resp.json())
.then(resp => {
const currentTime = resp.dateString;
this.setState({currentTime})
})
}
// ...
}
The ﬁnal piece of ou p oject toda is getting the data back f om the fo m to
update the pa ent component. That is, hen the use updates the alues
f om the TimeForm component, e'll ant to be able to access the data in the
App component. The TimeForm component al ead handles this p ocess fo
us, so e just need to implement ou fo m functions.
When a piece of state changes on the fo m component, it ill call a p op
called onFormChange . B deﬁning this method in ou App component, e can
get access to the latest e sion of the fo m.
In fact, e'll just call setState() to keep t ack of the options the fo m allo s
the use to manipulate:
155

// ...
handleChange(newState) {
this.setState(newState);
}
// ...
}
Finall , hen the use submits the fo m clicks on the button or p esses ente
in the input ﬁeld , e'll ant to make anothe e uest fo the time. This
means e can deﬁne ou handleFormSubmit p op to just call the
fetchCurrentTime() method:
// ...
handleFormSubmit(evt) {
this.fetchCurrentTime();
}
// ...
}
T pla ing a ound ith the demo and passing in diffe ent ch onic options.
It's actuall uite fun.
In an case, toda e o ked on uite a bit to get emote data into ou app.
Ho e e , at this point, e onl ha e a single page in ou single page app.
What if e ant to sho a diffe ent page in ou app? Tomo o , e' e going
to sta t adding multiple pages in ou app so e can featu e diffe ent ie s.
156

Client-side Routing
Most, if not all of our applications ill ha e multiple ie s in our
single-page application. Let's di e right into creating multiple
ie s for our applications using React Router.
We' e made it th ough 16 da s al ead ! Pat ou self on the back... but not fo
too long... the e is still a lot mo e.
Right no , ou app is limited to a single page. It's p ett a e to ﬁnd an
comple application that sho s a single ie . Fo instance, an application
might ha e a login ie he e a use can log in o a sea ch esults page that
sho s a use a list of thei sea ch esults. These a e t o diffe ent ie s ith
t o diffe ent page st uctu es.
Let's see ho e can change that ith ou app toda .
We'll use the e popula eact- oute https://github.com/ eactjs/ eact-
oute lib a fo handling diffe ent links. In o de to use the react-router
lib a , e'll need to install it using the npm package manage :
npm install --save react-router-dom
158

With react-router installed, e'll impo t a fe packages f om the lib a and
update ou app a chitectu e. Befo e e make those updates, let's take a step
back and f om a high le el look at ho and hy e a chitect ou application
this a .
Conceptuall ith React, e' e seen ho e can c eate t ee st uctu es using
components and nested components. Using this pe specti e ith a single
page app ith outes, e can think of the diffe ent pa ts of a page as
child en. Routing in a single page app f om this pe specti e is the idea that
e can take a pa t of a subt ee and s itch it out ith anothe subt ee. We
can then dynamically s itch out the diffe ent t ees in the b o se .
In other o ds, e'll deﬁne a React component that acts as a root component
of the outable elements. We can then tell React to change a ie , hich can
just s ap out an enti e React component fo anothe one as though it's a
completel diffe ent page ende ed b a se e .
We'll take ou App component and deﬁne all of the diffe ent outes e can
make in ou app in this App component. We'll need to pull some components
f om the react-router package. These components e'll use to set up this
st uctu e a e as follo s:
<BrowserRouter /> / <Router />
159

This is the component e'll use to define the root o the outing t ee. The
<BrowserRouter /> component is the component he e React ill eplace
it's child en on a pe - oute basis.
We'll use the <Route /> component to c eate a oute a ailable at a specific
location a ailable at a u l. The <Route /> component is mounted at page
URLs that match a pa ticula oute set up in the oute's configu ation props .
One olde , compatible a of handling client-side na igation is to use the #
hash ma k denoting the application endpoint. We'll use this method. We'll
need this object impo ted to tell the b o se this is ho e ant to handle
ou na igation.
F om the app e c eated a fe da s ago's oot di ecto , let's update ou
src/App.js to impo t these modules. We'll impo t the BrowserRouter using a
diffe ent name s nta ia ES6:
import {
BrowserRouter as Router,
Route
} from 'react-router-dom'
export class App extends React.Component {
render() {
<Router>
{/* routes will go here */}
</Router>
}
}
No let's define the outing oot in the DOM using the <Router />
component e impo ted in the render() function. We'll define the t pe of
outing e a e using using the history p op. In this e ample, e'll use the
<Route />
160

uni e sall -compatible hash histo t pe:
export class App extends React.Component {
// ...
render() {
<Router>
{/* routes will go here */}
</Router>
}
// ...
}
No let's define ou fi st oute. To define a oute, e'll use the <Route />
component e po t f om react-router and pass it a fe p ops:
path - The path fo the oute to be acti e
component - The component that defines the ie of the oute
Let's define the a oute at the oot path / ith a stateless component that
just displa s some static content:
const Home = () => (<div><h1>Welcome home</h1></div>)
// ...
render() {
return (
<Router>
<Route path="/" component={Home} />
</Router>
)
}
}
Welcome home
161

Loading this page in the b o se , e can see e get ou single oute at the
oot u l. Not e e citing. Let's add a second oute that sho s an about page
at the /about URL.
const Home = () => (<div><h1>Welcome home</h1></div>)
// ...
render() {
return (
<Router>
<div>
<Route path="/about" component={About} />
</div>
</Router>
)
}
}
Welcome home
In ou ie e'll need to add a link o an ancho tag -- <a /> to enable ou
use s to t a el f eel bet een the t o diffe ent outes. Ho e e , using the
<a /> tag ill tell the b o se to t eat the oute like it's a se e -side oute.
Instead, e'll need to use a diffe ent component su p ise called: <Link /> .
162

The <Link /> component e ui es a p op called to to point to the client-
side oute he e e ant to ende . Let's update ou Home and About
components to use the Link :
const Home = () => (<div><h1>Welcome home</h1><Link to='/about'>Go to
about</Link></div>)
const About = () => (<div><h1>About</h1><Link to='/'>Go home</Link>
</div>)
Welcome home
Go to about
Wait a minute... e don't uite ant both outes to sho up... This happens
because the eact oute ill ende all content that matches the path unless
othe ise specified . Fo this case, eact oute supplies us ith the Switch
component.
The <Switch /> component ill only render the first matching route it finds.
Let's update ou component to use the Switch component. As eact oute
ill t to ende both components, e'll need to specif that e onl ant
an exact match on the oot component.
163

about</Link></div>)
// ...
render() {
return (
<Router>
<Switch>
<Route path="/about" component={About} />
</Switch>
</Router>
)
}
}
Welcome home
Go to about
Althogh this is a limited int oduction, e could not lea e the discussion of
dealing ith eact oute ithout talking about the diffe ent a s e can get
subcomponents to ende .
We' e al ead seen the simplest a possible, using the component p op,
ho e e the e is a mo e po e ful method using a p op called render . The
render p op is e pected to be a function that ill be called ith the match
object along ith the location and oute conﬁgu ation.
Showing views
164

The render p op allo s us to ende hate er e ant in a sub oute, hich
includes ende ing othe outes. Nift , e ? Let's see this in action:
about</Link></div>)
const About = ({ name }) => (<div><h1>About {name}</h1></div>)
// ...
render() {
return (
<Router>
<Switch>
<Route
path="/about"
render={(renderProps) => (
<div>
<Link to='/about/ari'>Ari</Link>
<Link to='/about/nate'>Nate</Link>
<Route
path="/about/:name"
<div>
<About name={renderProps.match.params.name} />
<Link to='/'>Go home</Link>
</div>
)} />
</div>
)} />
<Route
path="/"
<div>
Home is underneath me
<Home {...this.props} {...renderProps} />
</div>
)} />
</Switch>
</Router>
)
}
}
165

Home is underneath me
Welcome home
Go to about
No e ha e multiple pages in ou application. We' e looked at ho e can
ende these outes th ough nested components ith just a fe of the
e po ts f om react-router .
react-router p o ides so much mo e functionalit that e don't ha e time
to co e in ou b isk int o to outing. Mo e info mation is a ailable at:
https://github.com/ eactjs/ eact- oute /t ee/maste /docs
https://github.com/ eactjs/ eact- oute /t ee/maste /docs
fullstack eact outing https://fullstack eact.com
Tomo o , e' e going to be sta ting integ ation ith Redu . He e's he e
e sta t integ ating mo e comple data handling.
166

Introduction to Flux
Handling data inside a client-side application is a comple task.
Toda e're looking at a one method of handling comple data
proposed b Facebook called the Flu Architecture.
As ou applications get bigge and mo e comple , e'll need a bette data
handling app oach. With mo e data, e'll ha e mo e to keep t ack of.
Ou code is e ui ed to handle mo e data and application state ith ne
featu es. F om as nch onous se e esponses to locall -gene ated,
uns nch onized data, e ha e to not onl keep t ack of this data, but also tie
it to the ie in a sane a .
Recognizing this need fo data management, the Facebook team eleased a
patte n fo dealing ith data called Flu
https://facebook.github.io/ u /docs/o e ie .html .
Toda , e' e going to take a look at the Flu a chitectu e, hat it is and h
it e ists.
What is flux
167

Flu is a patte n fo managing ho data o s th ough a React application. As
e' e seen, the p efe ed method of o king ith React components is
th ough passing data f om one pa ent component to it's child en
components. The Flu patte n makes this model the default method fo
handling data.
The e a e th ee distinct oles fo dealing ith data in the u methodolog :
Dispatche
Sto es
Vie s ou components
The majo idea behind Flu is that the e is a single-sou ce of t uth the
sto es and the can onl be updated b t igge ing actions. The actions a e
esponsible fo calling the dispatche , hich the sto es can subscribe fo
changes and update thei o n data acco dingl .
When a dispatch has been t igge ed, and the sto e updates, it ill emit a
change e ent hich the ie s can e ende acco dingl .
This ma seem unnecessa il comple , but the st uctu e makes it inc edibl
eas to eason about he e ou data is coming f om, hat causes it's
changes, ho it changes, and lets us t ack speci c use o s, etc.
The ke idea behind Flux is:
Data o s in one di ection and kept enti el in the sto es.
Implementations
168

Although e can c eate ou o n u implementation, man ha e al ead
c eated some fantastic lib a ies e can pick f om.
Facebook's u https://github.com/facebook/ u
alt http://alt.js.o g/
nuclea -js https://optimizel .github.io/nuclea -js/
Flu ible http:// u ible.io/
e u https://github.com/ e u / e u js
Flu o http:// u o .com/
u - eact https://github.com/ch istianalfoni/ u - eact
And mo e... man man mo e
We discuss this material in-depth about Flu , using libraries, and e en
implementing our o n ersion of ﬂu that suits us best. Check it out at
fullstackreact.com https://fullstackreact.com
It can be p ett intense t ing to pick the right choice fo ou applications.
Each has thei o n featu es and a e g eat fo diffe ent easons. Ho e e , to a
la ge e tent, the React communit has focused in on using anothe u tool
called Redu http:// edu .js.o g/ .
Redu is a small-ish lib a that takes it's design inspi ation f om the Flu
patte n, but is not itself a pu e u implementation. It p o ides the same
gene al p inciples a ound ho to update the data in ou application, but in
slightl diffe ent a .
Unlike Flu , Redu does not use a dispatche , but instead it uses pu e
functions to de ne data mutating functions. It still uses sto es and actions,
hich can be tied di ectl to React components.
Plug for fullstackreact
Redux http //redux.js.org/
169

The 3 majo p inciples
http:// edu .js.o g/docs/int oduction/Th eeP inciples.html of Redu e'll
keep in mind as e implement Redu in ou app a e:
Updates a e made ith pu e functions in educe s
state is a ead-onl p ope t
state is the single sou ce of t uth the e is onl one store in a Redu
app
One big diffe ence ith Redu and Flu is the concept of middle a e. Redu
added the idea of middle a e that e can use to manipulate actions as e
ecei e them, both coming in and heading out of ou application. We'll
discuss them in fu the detail in a fe da s.
In an case, this is a lot of int oduction to the u patte n. Tomo o e'll
actuall sta t mo ing ou data to use Redu .
170

Data Management with Redux
With the kno ledge of ﬂu and Redu , let's integrate Redu in
our application and alk through connected applications.
Yeste da , e discussed in light detail the eason fo the Flu patte n, hat
it is, the diffe ent options e ha e a ailable to us, as ell as int oduced
Redu http:// edu .js.o g/ .
Toda , e a e going to get back to code and on to adding Redu in ou app.
The app e' e building ith it ight no is ba e-bones simple, hich ill just
sho us the last time the page fetched the cu ent time. Fo simplicit fo
no , e on't call out to a emote se e , just using the Ja aSc ipt Date
object.
The st thing e'll ha e to do to use Redu is install the lib a . We can use
the npm package manage to install redux . In the oot di ecto of ou app
e p e iousl built, let's un the npm install command to install edu :
npm install --save redux
We'll also need to install anothe package that e'll use ith edu , the
react-redux that ill help us tie togethe react and redux :
171

npm install --save react-redux
The ne t bit of o k e need to do is to set up Redu inside of ou app. We'll
need to do the follo ing to get it set up:
. De ne educe s
. C eate a sto e
. C eate action c eato s
. Tie the sto e to ou React ie s
. P o t
No promises on step 5, but it would be nice, eh?
Configuration and setup
Precursor
172

We'll talk te minolog as e go, so take this setup discussion lightl
implementing is mo e impo tant to get ou nge s mo ing . We'll
est uctu e ou app just slightl anno ing, I kno ... but this is the last time
so e can c eate a appe component to p o ide data do n th ough ou
app.
When e' e complete, ou app t ee ill ha e the follo ing shape:
[Root] -> [App] -> [Router/Routes] -> [Component]
Without dela ing an longe , let's mo e ou src/App.js into the
src/containers di ecto and e'll need to update some of the paths f om
ou impo ts at the same time. We'll be using the eact oute mate ial e
discussed a fe da s ago.
We'll include a fe outes ith the <Switch /> statement to ensu e onl one
sho s up at a time.
173

import {
BrowserRouter as Router,
Route,
Switch
} from 'react-router-dom'
// We'll load our views from the `src/views`
// directory
import Home from './views/Home/Home';
import About from './views/About/About';
const App = props => {
return (
<Router>
<Switch>
<Route
path="/about"
component={About} />
<Route
path="*"
component={Home} />
</Switch>
</Router>
)
}
export default App;
In addition, e'll need to c eate a ne containe e'll call Root hich ill
ap ou enti e <App /> component and make the sto e a ailable to the est
of the app. Let's c eate the src/containers/Root.js le:
touch src/containers/Root.js
Fo the time being, e'll use a placeholde component he e, but e'll eplace
this content as e talk about the sto e. Fo no , let's e po t something:
174

import App from './App';
const Root = (props) => {
return (
<App />
);
}
export default Root;
Finall , let's update the oute that e ende ou app in the src/index.js le
to use ou ne Root containe instead of the App it p e iousl used.
import ReactDOM from 'react-dom';
import Root from './containers/Root';
import './index.css';
ReactDOM.render(
<Root />,
document.getElementById('root')
);
No ith a solid app st uctu e in place, e can sta t to add in Redu . The
steps e'll take to tie in some Redu st uctu e a e gene all all the same fo
most e e application e'll build. We'll need to:
. W ite a oot educe
. W ite actionC eato s
. Con gu e the sto e ith the ootReduce , the sto e, and the app
. Connect the ie s to the actionC eato s
We'll pu posefull be keeping this high-le el int oduction a tad sho t, so
hang tight if that's a mouthful, it ill all make mo e sense sho tl .
Adding in Redux
175

Let's setup the st uctu e to allo us to add edu . We'll do almost all of ou
o k in a src/redux di ecto . Let's c eate that di ecto .
mkdir -p src/redux
touch src/redux/configureStore.js
touch src/redux/reducers.js
Let's sta t b c eating ou educe st. Although it sounds comple , a
educe is actuall p ett st aight-fo a d ith some e pe ience. A educe
is literall onl a function. It's sole esponsibilit is to etu n a ep esentation
of the ne t state.
In the Redu patte n, unlike u e a e onl handling one global sto e fo the
entire application. This makes things much easie to deal ith as the e's a
single place fo the data of ou application to li e.
The root educe function is esponsible to etu n a ep esentation of the
cu ent global state of the application. When e dispatch an action on the
sto e, this educe function ill be called ith the cu ent state of the
application and the action that causes the state to update.
Let's build ou oot educe in a le at src/redux/reducers.js .
176

// Initial (starting) state
const initialState = {
currentTime: new Date().toString()
}
// Our root reducer starts with the initial state
// and must return a representation of the next state
const rootReducer = (state = initialState, action) => {
return state;
}
export default rootReducer
In the function, e' e de ning the st a gument to sta t out as the initial
state the st time it uns, the rootReducer is called ith no a guments, so it
ill al a s etu n the initialState on the st un .
That's the ootReduce fo no . As it stands ight no , the state al a s ill
be the same alue as the initialState. In ou case, this means ou data t ee has
a single ke of currentTime .
The second a gument he e is the action that gets dispatched f om the sto e.
We'll come back to hat that means e actl sho tl . Fo no , let's look at the
action.
At the e minimum, an action must include a type ke . The type ke can
be an alue e ant, but it must be p esent. Fo instance, in ou application,
e'll occassionall dispatch an action that e ant to tell the sto e to get the
ne cu ent time. We might call this action a st ing alue of FETCH_NEW_TIME .
The action e might dispatch f om ou sto e to handle this update looks like:
{
type: 'FETCH_NEW_TIME'
}
What is an action?
177

As e'll b t ping this st ing a lot and e ant to a oid a possible mispelling
some he e, it's common to c eate a types.js le that e po ts the action
t pes as constants. Let's follo this con ention and c eate a
src/redux/types.js le:
export const FETCH_NEW_TIME = 'FETCH_NEW_TIME';
Instead of calling the action ith the ha d-coded st ing of
'FETCH_NEW_TIME', e'll efe ence it f om the types.js le:
import * as types from './types';
{
type: types.FETCH_NEW_TIME,
}
When e ant to send data along ith ou action, e can add an ke s e
ant to ou action. We'll commonl see this called payload , but it can be
called an thing. It's a con ention to call additional info mation the payload .
Ou FETCH_NEW_TIME action ill send a pa load ith the ne cu ent time.
Since e ant to send a serializable alue ith ou actions, e'll send the
st ing alue of the ne cu ent time.
{
payload: new Date().toString() // Any serializable value
}
Back in ou educe , e can check fo the action t pe and take the
app op iate steps to c eate the ne t state. In ou case, e'll just sto e the
payload . If the type of the action is FETCH_NEW_TIME , e'll etu n the ne
cu entTime f om ou action pa load and the est of the state using the
ES sp ead s nta :
178

export const rootReducer = (state = initialState, action) => {
switch(action.type) {
case types.FETCH_NEW_TIME:
return { ...state, currentTime: action.payload}
default:
return state;
}
}
Remembe , the educe s must etu n a state, so in the default case, make
su e to etu n the cu ent state at the er minimum.
Since the reducer functions run e erytime an action is dispatched, e
ant to make sure these functions are as simple and fast as possible. We
don't ant them to cause any side-effects or ha e much delay at all.
We'll handle our side-effects outside of the reducer in the action creators.
Befo e e look at action c eato s and h e call them action c eato s , let's
hook up ou sto e to ou application.
We'll be using the react-redux package to connect ou ie s to ou edu
sto e. Let's make su e to install this package using npm :
npm install --save react-redux
The react-redux package e po ts a component called Provider . The
Provider component makes the sto e a ailable to all of ou containe
components in ou application ithout needing fo us to need to pass it in
Keep it light
Hooking up the store to the view
179

manuall e e time.
The Provider component e pects a store p op that it e pects to be a alid
edu sto e, so e'll need to complete a configureStore function befo e ou
app ill un ithout e o . Fo no , let's hook up the Provider component in
ou app. We'll do this b updating ou appe Root component e
p e iousl c eated to use the Provider component.
import { Provider } from 'react-redux';
// ...
// ...
return (
<Provider store={store}>
<App />
</Provider>
);
}
Notice e' e sending in the store alue to ou Provider component... but
e ha en't c eated the sto e et! Let's that no .
In o de to c eate a sto e, e'll use the ne src/redux/configureStore.js to
e po t a function hich ill be esponsible fo c eating the sto e.
Ho do e c eate a sto e?
The redux package e po ts a function called createStore hich ill c eate
the actual sto e fo us, so let's open up the src/redux/configureStore.js le
and e po t a function e'll de ne sho tl called configureStore() and
impo t the createStore helpe :
Configuring the store
180

import {createStore} from 'redux';
// ...
export const configureStore = () => {
// ...
}
// ...
export default configureStore;
We don't actuall etu n an thing in ou sto e uite et, so let's actuall
c eate the redux sto e using the createStore function e impo ted f om
edu :
import {createStore} from 'redux';
const store = createStore();
return store;
}
If e load ou page in the b o se , e'll see e ha e one giant e o and no
page gets ende ed.
181

The e o edu is gi ing us is telling us that e don't ha e a educe inside
ou sto e. Without a educe , it on't kno hat to do ith actions o ho
to c eate the state, etc. In o de to mo e be ond this e o , e'll need to
efe ence ou ootReduce e c eated.
The createStore function e pects us to pass the ootReduce in as the st
a gument. It'll also e pect the initial state to be passed in as the second
a gument. We'll impo t both of these alues f om the reducers.js le e
c eated.
import { rootReducer, initialState } from './reducers'
// ...
const store = createStore(
rootReducer, // root reducer
initialState, // our initialState
);
return store;
}
No let's update ou Root.js le ith an instance of the store c eated b
calling the configureStore() function.
182

const store = configureStore();
return (
<Provider store={store}>
<App />
</Provider>
);
}
E e thing in ou app is set-up to use Redu ithout too much o e head.
One mo e con enience that redux offe s is a a to bind pieces of the state
t ee to diffe ent components using the connect() function e po ted b the
react-redux package.
The connect() function etu ns a function that e pects the st a gument to
be that of a component. This is often called a highe -o de component.
The connect() function e pects us to pass in at least one a gument to the
function but often e'll pass in t o . The st a gument it e pects is a
function that ill get called ith the state and e pects an object in etu n
that connects data to the ie . Let's see if e can dem stif this beha io in
code.
We'll call this function the mapStateToProps function. Since it's esponsibilit
is to map the state to an object hich is me ged ith the component's
o iginal props .
Let's c eate the Home ie in src/views/Home.js and use this connect()
function to bind the alue of currentTime in ou state t ee.
Connecting the view cont'd
183

import { connect } from 'react-redux';
// ...
const mapStateToProps = state => {
return {
currentTime: state.currentTime
}
}
export default connect(
mapStateToProps
)(Home);
This connect() function automaticall passes an of the ke s in the
function's st a gument as props to the Home component.
In ou demo's case, the currentTime p op in the Home component ill be
mapped to the state t ee ke at currentTime . Let's update the Home
component to sho the alue in the currentTime :
const Home = (props) => {
return (
<div className="home">
<h1>Welcome home!</h1>
<p>Current time: {props.currentTime}</p>
</div>
);
}
Although this demo isn't e inte esting, it sho s e ha e ou Redux app set
up ith ou data committed to the global state and ou ie components
mapping the data.
Tomo o e' e going to sta t t igge ing updates into ou global state
th ough action c eato s as ell as o k th ough combining multiple edu
modules togethe .
184

Redux actions
With Redu in place, let's talk about ho e actuall modif the
Redu state from ithin our applications.
Yeste da e ent th ough the difﬁcult pa t of integ ating ou React app
ith Redu . F om he e on out, e'll be deﬁning functionalit ith ou Redu
setup.
As it stands no , e ha e ou demo application sho ing the cu ent time.
But the e cu entl isn't an a to update to the ne time. Let's modif this
no .
Recall that the onl a e can change data in Redu is th ough an action
c eato . We c eated a edu sto e este da , but e ha en't c eated a a fo
us to update the sto e.
What e ant is the abilit fo ou use s to update the time b clicking on a
button. In o de to add this functionalit , e'll ha e to take a fe steps:
. C eate an actionC eato to dispatch the action on ou sto e
. Call the actionC eato onClick of an element
. Handle the action in the educe
Triggering updates
186

We al ead implemented the thi d step, so e onl ha e t o things to do to
get this functionalit o king as e e pect.
Yeste da , e discussed hat actions a e, but not eall h e a e using
this thing called actionC eato s o hat the a e.
As a ef eshe , an action is a simple object that must include a type alue. We
c eated a types.js ﬁle that holds on to action t pe constants, so e can use
these alues as the type p ope t .
xport const FETCH_NEW_TIME = 'FETCH_NEW_TIME';
As a uick e ie , ou actions can be an object alue that has the type ke .
We can send data along ith ou action con entionall , e'll pass e t a data
along as the payload of an action .
{
payload: new Date().toString()
}
No e need to dispatch this along ou store . One a e could do that is
b calling the store.dispatch() function.
store.dispatch({
payload: new Date().toString()
})
Ho e e , this is p ett poo p actice. Rathe than dispatch the action
di ectl , e'll use a function to etu n an action... the function ill create the
action hence the name: actionC eato . This p o ides us ith a bette testing
sto eas to test , eusabilit , documentation, and encapsulation of logic.
187

Let's c eate ou fi st actionCreator in a file called redux/actionCreators.js .
We'll e po t a function ho's enti e esponsibilit is to etu n an app op iate
action to dispatch on ou sto e.
export const fetchNewTime = () => ({
payload: new Date().toString(),
})
export const login = (user) => ({
type: types.LOGIN,
payload: user
})
export const logout = () => ({
type: types.LOGOUT,
})
No if e call this function, nothing ill happen e cept an action object is
etu ned. Ho do e get this action to dispatch on the sto e?
Recall e used the connect() function e po t f om react-redux este da ?
The fi st a gument is called mapStateToProps , hich maps the state to a p op
object. The connect() function accepts a second a gument hich allo s us
to map functions to p ops as ell. It gets called ith the dispatch function,
so he e e can bind the function to call dispatch() on the sto e.
Let's see this in action. In ou src/views/Home/Home.js file, let's update ou
call to connect b p o iding a second function to use the actionC eato e
just c eated. We'll call this function mapDispatchToProps .
188

import { fetchNewTime } from '../../redux/actionCreators';
// ...
const mapDispatchToProps = dispatch => ({
updateTime: () => dispatch(fetchNewTime())
})
// ...
export default connect(
mapStateToProps,
mapDispatchToProps,
)(Home);
No the updateTime() function ill be passed in as a p op and ill call
dispatch() hen e ﬁ e the action. Let's update ou <Home /> component
so the use can p ess a button to update the time.
const Home = (props) => {
return (
<div className="home">
<h1>Welcome home!</h1>
<p>Current time: {props.currentTime}</p>
<button onClick={props.updateTime}>
Update time
</button>
</div>
);
}
Although this e ample isn't that e citing, it does sho case the featu es of
edu p ett ell. Imagine if the button makes a fetch to get ne t eets o
e ha e a socket d i ing the update to ou edu sto e. This basic e ample
demonst ates the full functionalit of edu .
189

As it stands no , e ha e a single educe fo ou application. This o ks fo
no as e onl ha e a small amount of simple data and p esumabl onl
one pe son o king on this app. Just imagine the headache it ould be to
de elop ith one gigantic s itch statement fo e ery single piece of data in
ou apps...
Ahhhhhhhhhhhhhh...
Redu to the escue! Redu has a a fo us to split up ou edu educe s
into multiple educe s, each esponsible fo onl a leaf of the state t ee.
We can use the combineReducers() e po t f om redux to compose an object
of educe functions. Fo e e action that gets t igge ed, each of these
functions ill be called ith the co esponding action. Let's see this in
action.
Let's sa that e pe haps mo e ealisticall ant to keep t ack of the
cu ent use . Let's c eate a currentUser edu module in... ou guessed it:
src/redux/currentUser.js :
touch src/redux/currentUser.js
We'll e po t the same fou alues e e po ted f om the currentTime
module... of cou se, this time it is speciﬁc to the cu entUse . We' e added a
basic st uctu e he e fo handling a cu ent use :
Multi-reducers
190

import * as types from './types'
export const initialState = {
user: {},
loggedIn: false
}
export const reducer = (state = initialState, action) => {
switch (action.type) {
case types.LOGIN:
return {
...state, user: action.payload, loggedIn: true};
case types.LOGOUT:
return {
...state, user: {}, loggedIn: false};
default:
return state;
}
}
Let's update ou configureStore() function to take these b anches into
account, using the combineReducers to sepa ate out the t o b anches
191

import { createStore, combineReducers } from 'redux';
import { reducer, initialState as userInitialState } from
'./currentUser'
combineReducers({
time: rootReducer,
user: reducer
}), // root reducer
{
time: initialState,
user: userInitialState
}, // our initialState
);
return store;
}
No e can c eate the login() and logout() action c eato s to send along
the action on ou sto e.
export const login = (user) => ({
type: types.LOGIN,
payload: user
})
// ...
export const logout = () => ({
type: types.LOGOUT,
})
No e can use the actionC eato s to call login and logout just like the
updateTime() action c eato .
192

Phe ! This as anothe heft da of Redu code. Toda , e completed the
ci cle bet een data updating and sto ing data in the global Redu state. In
addition, e lea ned ho to e tend Redu to use multiple educe s and
actions as ell as multiple connected components.
Ho e e , e ha e et to make an as nch onous call fo off-site data.
Tomo o e'll get into ho to use middle a e ith Redu , hich ill gi e
us the abilit to handle fetching emote data f om ithin ou app and still use
the po e of Redu to keep ou data.
Good job toda and see ou tomo o !
193

Redux Middleware
Toda , e're looking at the Redu method of managing comple
state changes in our code using Redu middle are.
Yeste da e connected the dots ith Redu , f om o king th ough
educe s, updating action c eato s, and connecting Redu to React
components. Redu middle are unlocks e en mo e po e hich e'll touch
on toda .
Middle a e gene all efe s to soft a e se ices that "glue togethe "
sepa ate featu es in e isting soft a e. Fo Redu , middle a e p o ides a
thi d-pa t e tension point bet een dispatching an action and handing the
action off to the educe :
[ Action ] <-> [ Middle a e ] <-> [ Dispatche ]
E amples of middle a e include logging, c ash epo ting, outing, handling
as nch onous e uests, etc.
Let's take the case of handling as nch onous e uests, like an HTTP call to a
se e . Middle a e is a g eat spot to do this.
Redux middleware
194

We'll implement some middle a e that ill handle making as nch onous
e uests on ou behalf.
Middle a e sits bet een the action and the educe . It can listen fo all
dispatches and e ecute code ith the details of the actions and the cu ent
states. Middle a e p o ides a po e ful abst action. Let's see e actl ho e
can use it to manage ou o n.
Continuing ith ou currentTime edu o k f om este da , let's build ou
middle a e to fetch the cu ent time f om the se e e used a fe da s ago
to actuall GET the time f om the API se ice.
Befo e e get too much fu the , let's pull out the currentTime o k f om the
rootReducer in the reducers.js file out to it's o n file. We left the oot
educe in a state he e e kept the currentTime o k in the oot educe .
Mo e con entionall , e'll mo e these in thei o n files and use the
rootReducer.js file hich e called reducers.js to hold just the main
combination educe .
Fi st, let's pull the o k into it's o n file in redux/currentTime.js . We'll
e po t t o objects f om he e and each educe :
initialState - the initial state fo this b anch of the state t ee
reducer - this b anch's educe
Our API middleware
195

currentTime: new Date().toString(),
}
switch(action.type) {
case types.FETCH_NEW_TIME:
return { ...state, currentTime: action.payload}
default:
return state;
}
}
export default reducer
With ou currentTime out of the oot educe , e'll need to update the
reducers.js ﬁle to accept the ne ﬁle into the oot educe . Luckil , this is
p ett eas :
import { combineReducers } from 'redux';
import * as currentUser from './currentUser';
import * as currentTime from './currentTime';
export const rootReducer = combineReducers({
currentTime: currentTime.reducer,
currentUser: currentUser.reducer,
})
currentTime: currentTime.initialState,
currentUser: currentUser.initialState,
}
export default rootReducer
196

Lastl , let's update the configureStore function to pull the ootReduce and
initial state f om the ﬁle:
// ...
rootReducer,
initialState,
);
return store;
}
Middle a e is basicall a function that accepts the store , hich is e pected
to etu n a function that accepts the next function, hich is e pected to
etu n a function hich accepts an action. Confusing? Let's look at hat this
means.
Let's build the smallest middle a e e possibl can to unde stand e actl
hat's happening and ho to add it to ou stack.
Let's c eate ou ﬁ st middle a e.
No the signatu e of middle a e looks like this:
const loggingMiddleware = (store) => (next) => (action) => {
// Our middleware
}
Back to middleware
The simplest middleware possible
197

Befuddled about this middle a e thing? Don't o , e all a e the ﬁ st time
e see it. Let's peel it back a little bit and dest uctu e hat's going on. That
loggingMiddleware desc iption abo e could be e itten like the follo ing:
const loggingMiddleware = function(store) {
// Called when calling applyMiddleware so
// our middleware can have access to the store
return function(next) {
// next is the following action to be run
// after this middleware
return function(action) {
// finally, this is where our logic lives for
// our middleware.
}
}
}
We don't need to o about how this gets called, just that it does get called
in that o de . Let's enhance ou loggingMiddleware so that e do actuall log
out the action that gets called:
const loggingMiddleware = (store) => (next) => (action) => {
// Our middleware
console.log(`Redux Log:`, action)
// call the next function
next(action);
}
Ou middle a e causes ou sto e to, hen e e time an action is called,
e'll get a console.log ith the details of the action.
In o de to appl middle a e to ou stack, e'll use this aptl named
applyMiddleware function as the thi d a gument to the createStore()
method.
198

import { createStore, applyMiddleware } from 'redux';
To apply middle a e, e can call this applyMiddleware() function in the
createStore() method. In ou src/redux/configureStore.js ﬁle, let's update
the sto e c eation b adding a call to applyMiddleware() :
rootReducer,
initialState,
applyMiddleware(
apiMiddleware,
loggingMiddleware,
)
);
No ou middle a e is in place. Open up the console in ou b o se to see
all the actions that a e being called fo this demo. T clicking on the Update
button ith the console open...
Welcome home!
Current time: Tue Oct 31 2017 15:53:46 GMT0700 (MST)
Update time
As e' e seen, middle a e gi es us the abilit to inse t a function in ou
Redu action call chain. Inside that function, e ha e access to the action,
state, and e can dispatch othe actions.
We ant to ite a middle a e function that can handle API e uests. We
can ite a middle a e function that listens onl to actions co esponding to
API e uests. Ou middle a e can " atch" fo actions that ha e a special
ma ke . Fo instance, e can ha e a meta object on the action ith a type of
'api' . We can use this to ensu e ou middle a e does not handle an
actions that a e not elated to API e uests:
199

const apiMiddleware = store => next => action => {
if (!action.meta || action.meta.type !== 'api') {
return next(action);
}
// This is an api request
}
If an action does ha e a meta object ith a t pe of 'api' , e'll pick up the
e uest in the apiMiddleware .
Let's con e t ou updateTime() actionC eato to include these p ope ties
into an API e uest. Let's open up the currentTime edu module e' e been
o king ith in src/redux/currentTime.js and ﬁnd the fetchNewTime()
function deﬁnition.
Let's pass in the URL to ou meta object fo this e uest. We can e en accept
pa amete s f om inside the call to the action c eato :
const host = 'https://andthetimeis.com'
export const fetchNewTime = ({ timezone = 'pst', str='now'}) => ({
payload: new Date().toString(),
meta: {
type: 'api',
url: host + '/' + timezone + '/' + str + '.json'
}
})
When e p ess the button to update the time, ou apiMiddleware ill catch
this befo e it ends up in the educe . Fo an calls that e catch in the
middle a e, e can pick apa t the meta object and make e uests using
these options. Alte nati el , e can just pass the enti e sanitized meta object
th ough the fetch() API as-is.
The steps ou API middle a e ill ha e to take:
. Find the e uest URL and compose e uest options f om meta
200

. Make the e uest
. Con e t the e uest to a Ja aSc ipt object
. Respond back to Redu /use
Let's take this step-b -step. Fi st, to pull off the URL and c eate the
fetchOptions to pass to fetch() . We'll put these steps in the comments in
the code belo :
}
// Find the request URL and compose request options from meta
const {url} = action.meta;
const fetchOptions = Object.assign({}, action.meta);
// Make the request
fetch(url, fetchOptions)
// convert the response to json
.then(json => {
// respond back to the user
// by dispatching the original action without
// the meta object
let newAction = Object.assign({}, action, {
payload: json.dateString
});
delete newAction.meta;
store.dispatch(newAction);
})
}
export default apiMiddleware
We ha e se e al options fo ho e espond back to the use in the Redu
chain. Pe sonall , e p efe to espond ith the same t pe the e uest as
ﬁ ed off ithout the meta tag and placing the esponse bod as the payload
of the ne action.
201

In this a , e don't ha e to change ou edu educe to manage the
esponse an diffe entl than if e e en't making a e uest.
We' e also not limited to a single esponse eithe . Let's sa that ou use
passed in an onSuccess callback to be called hen the e uest as complete.
We could call that onSuccess callback and then dispatch back up the chain:
}
// Find the request URL and compose request options from meta
const {url} = action.meta;
const fetchOptions = Object.assign({}, action.meta);
// Make the request
fetch(url, fetchOptions)
// convert the response to json
.then(json => {
if (typeof action.meta.onSuccess === 'function') {
action.meta.onSuccess(json);
}
return json; // For the next promise in the chain
})
.then(json => {
// respond back to the user
// by dispatching the original action without
// the meta object
let newAction = Object.assign({}, action, {
payload: json.dateString
});
delete newAction.meta;
store.dispatch(newAction);
})
}
202

The possibilities he e a e i tuall endless. Let's add the apiMiddleware to
ou chain b updating it in the configureStore() function:
import { createStore, applyMiddleware } from 'redux';
import loggingMiddleware from './loggingMiddleware';
import apiMiddleware from './apiMiddleware';
rootReducer,
initialState,
applyMiddleware(
apiMiddleware,
loggingMiddleware,
)
);
return store;
}
Welcome home!
Current time: Tue Oct 31 2017 15:53:46 GMT0700 (MST)
Update time
Notice that e didn't ha e to change any of ou ie code to update ho the
data as populated in the state t ee. P ett nift , eh?
This middle a e is p ett simplistic, but it's a good solid basis fo building it
out. Can ou think of ho ou might implement a caching se ice, so that e
don't need to make a e uest fo data e al ead ha e? Ho about one to
keep t ack of pending e uests, so e can sho a spinne fo e uests that
a e outstanding?
203

A esome! No e eall a e Redu ninjas. We' e con ue ed the Redu
mountain and a e ead to mo e on to the ne t step. Befo e e head the e,
ho e e ... pat ou self on the back. We' e made it th ough eek !
204

Introduction to Testing
Test suites are an upfront in estment that pay di idends o er
the lifetime of a system. Today e'll introduce the topic of
testing and discuss the different types of tests e can rite.
Oka , close ou e es fo a second... ait, don't... it's ha d to ead ith ou
e es closed, but imagine fo a moment ou application is getting close to
ou st deplo ment.
It's getting close and it gets ti ing to constantl un th ough the featu es in
ou b o se ... and so inef cient.
The e must be a bette a ...
When e talk about testing, e' e talking about the p ocess of automating
the p ocess of setting up and measu ing ou assumptions against asse tions
of functionalit about ou application.
When e talk about f ont-end testing in React, e' e efe ing to the p ocess
of making asse tions about hat ou React app ende s and ho it esponds
to use inte action.
Testing
205

We'll discuss th ee diffe ent soft a e testing pa adigms: unit testing,
functional testing, and integ ation testing.
Unit testing efe s to testing indi idual pieces o units, hence the name of
ou ou code so e can be con dent these speci c pieces of code o k as e
e pect.
Fo e ample, e ha e a fe educe s al ead in ou application. These
educe s comp ise a single function that e can make asse tions on unde
diffe ent scena ios.
In React, Unit tests t picall do not e ui e a b o se , can un inc edibl
uickl no iting to the DOM e ui ed , and the asse tions themsel es a e
usuall simple and te se.
We'll mostl concent ate on ans e ing the uestion: ith a gi en set of
inputs state and p ops , does the output match ou e pectations of hat
should be in the i tual dom. In this case, e' e testing the ende ing output.
With functional testing, e' e focused on testing the beha io of ou
component. Fo instance, if e ha e a na igation ba ith a use
login/logout button, e can test ou e pectations that:
Gi en a logged in use , the na ba ende s a button ith the te t Logout
Gi en no logged in use , the na ba ende s a button ith the te t Login
Functional tests usuall un in isolation i.e. testing the component
functionalit ithout the est of the application .
Finall , the last t pe of testing e'll look at is integ ation testing. This t pe of
testing tests the enti e se ice of ou application and attempts to eplicate
the e pe ience an end-use ould e pe ience hen using ou application.
Unit tests
Functional testing
Integration testing
206

On the o de of speed and ef cienc , integ ation testing is inc edibl slo as
it needs to un e pectations against a li e, unning b o se , he e as unit
and functional tests can un uite a bit faste especiall in React he e the
functional test is testing against the in-memo i tual dom athe than an
actual b o se ende .
When testing React components, e ill test both ou e pectations of hat
is contained in the i tual dom as ell as hat is e ected in the actual dom.
We' e going to use a testing lib a called called jasmine
http://jasmine.github.io to p o ide a eadable testing language and
asse tions.
As fa as test unning, the e is a gene al debate a ound hich test unne is
the easiest/most ef cient to o k ith, la gel bet een mocha
https://mochajs.o g and jest https://facebook.github.io/jest .
We' e going to use Jest in ou ad entu e in testing ith React as it's the
ofﬁcial take this ith a g ain of salt test unne . Most of the code e'll be
iting ill be in Jasmine, so feel f ee to use mocha, if it's ou test lib a of
choice.
Finall , e'll use a lib a e cannot li e ithout called Enz me
https://github.com/ai bnb/enz me hich puts the fun back in FUNctional
testing. Enz me p o ides some p ett nice React testing utilit functions that
make iting ou asse tions a cinch.
Tomo o , e'll get ou application set up ith the testing tooling in place so
that e can sta t testing ou application and be con dent it o ks as e
e pect. See ou tomo o !
The tools
207

Implementing Tests
Yeste da e e amined the diffe ent t pes of tests that e ite
in React. Toda e'll see it in action. We'll install the
dependencies e ui ed to set up tests as ell as ite ou ﬁ st
asse tions.
Let's get ou application set up to be tested. Since e' e going to be using a
fe diffe ent lib a ies, e'll need to install them befo e e can use them
ob iousl .
We' e going to use the follo ing npm lib a ies:
Jest https://facebook.github.io/jest/ is the ofﬁcial testing f ame o k
eleased b Facebook and is a fantastic testing f ame o k fo testing React
applications. It is inc edibl fast, p o ides sandbo ed testing en i onments,
suppo t fo snapshot testing, and mo e.
Dependencies
jest/jest-cli
babel-jest/babel-preset-stage-0
209

We'll ite ou tests using the stage 0 o ES6-edge functionalit , so e'll
ant to make su e ou test f ame o k can ead and p ocess ou ES6 in ou
tests and sou ce ﬁles.
Sinon is a test utilit lib a hich p o ides a a fo us to ite spies, stubs,
and mocks. We'll discuss hat these a e hen e need them, but e'll install
the lib a fo no .
The react-addons-test-utils package contains testing utilities p o ided b
the React team.
Enz me http://ai bnb.io/enz me/ , a Ja aSc ipt testing lib a
built/maintained b Ai bnb is a bit easie to o k ith and p o ides eall
nice methods fo t a e sing/manipulating React's i tual DOM output. While
e'll sta t ith react-addons-test-utils , e'll t ansition to using Enz me as
e p efe using it in ou tests.
The react-test-renderer lib a allo s us to use the snapshot featu e f om
the jest lib a . Snapshots a e a a fo Jest to se ialize the ende ed output
f om the i tual DOM into a ﬁle hich e can automate compa isons f om
one test to the ne t.
The edu -mock-sto e https://github.com/a naudbena d/ edu -mock-
sto e lib a allo s us to easil make a edu sto e fo testing. We'll use it to
test ou action c eato s, middle a e, and ou educe s.
To install all of these lib a ies, e'll use the follo ing npm command in the
te minal hile in the oot di ecto of ou p ojects:
sinon
react-addons-test-utils/enzyme
react-test-renderer
redux-mock-store
210

yarn add --dev babel-jest babel-preset-stage-0 enzyme jest-cli react-
addons-test-utils react-test-renderer redux-mock-store sinon
We'll also need to configu e ou setup. Fi st, let's add an npm sc ipt that ill
allo us to un ou tests using the npm test command. In ou package.json
file in the oot of ou p oject, let's add the test sc ipt. Find the sc ipts ke in
the package.json file and add the test command, like so:
{
// ...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "react-scripts test --env=jsdom"
},
}
Let's confi m that ou test setup is o king p ope l . Jest ill automaticall
look fo test files in the enti e t ee in a di ecto called __tests__ es, ith
the unde sco es . Let's c eate ou fi st __tests__ di ecto in ou
src/components/Timeline di ecto and c eate ou fi st test file:
mkdir src/components/Timeline/__tests__
touch src/components/Timeline/__tests__/Timeline-test.js
The Timeline-test.js file ill include all the tests fo ou Timeline
component as indicated b the filename . Let's c eate ou fi st test fo the
Timeline component.
Configuration
Writing tests
211

We'll ite ou tests using the Jasmine http://jasmine.github.io f ame o k.
Jasmine p o ides a fe methods e'll use uite a bit. Both of the follo ing
methods accept t o a guments, the ﬁ st being a desc iption st ing and the
second a function to e ecute:
describe()
it()
The describe() function p o ides a a fo us to g oup ou tests togethe in
logical bundles. Since e' e iting a bunch of tests fo ou Timeline , e'll
use the describe() function in ou test to indicate e' e testing the
Timeline.
An hour ago
Ate lunch
10 am
10 am
2:21 pm
specimen book.
Timeline 
212

In the src/components/Timeline/__tests__/Timeline-test.js file, let's add
the desc ibe block:
describe('Timeline', () => {
});
We can add ou fi st test using the it() function. The it() function is
he e e ill set ou e pectations. Let's set up ou tests ith ou fi st
e pectations, one passing and one failing so e can see the diffe ence in
output.
In the same file, let's add t o tests:
it('passing test', () => {
expect(true).toBeTruthy();
})
it('failing test', () => {
expect(false).toBeTruthy();
})
})
We'll look at the possible e pectations e can set in a moment. Fi st, let's un
ou tests.
The create-react-app package sets up a ualit testing en i onment using
Jest automaticall fo us. We can e ecute ou tests b using the yarn test o
npm test sc ipt.
In the te minal, let's e ecute ou tests:
Executing tests
213

yarn test
F om this output, e can see the t o tests ith one passing test ith a
g een checkma k and one failing test ith the ed and a desc iption of the
failu e .
Let's update the second test to make it pass b changing the e pectation to
toBeFalsy() :
it('passing test', () => {
expect(true).toBeTruthy();
})
it('failing test', () => {
expect(false).toBeTruthy();
})
})
Re- unning the test, e can see e ha e t o passing tests
214

yarn test
Jest p o ides a fe global commands in ou tests b default i.e. things ou
don't need to e ui e . One of those is the expect() command. The expect()
command has a fe e pectations hich e can call on it, including the t o
e' e used al ead :
toBeTruthy()
toBeFalsy()
toBe()
toEqual()
toBeDefined()
toBeCalled()
etc.
The enti e suite of e pectations is a ailable on the jest documentation page
at: https://facebook.github.io/jest/docs/api.html# iting-asse tions- ith-
e pect https://facebook.github.io/jest/docs/api.html# iting-asse tions-
ith-e pect .
Expectations
215

The expect() function takes a single a gument: the alue o function that
etu ns a alue to be tested. Fo instance, ou t o tests e' e al ead iten
pass the boolean alues of true and false .
No that e' e itten ou ﬁ st tests and conﬁ med ou setup, e'll actuall
get do n to testing ou Timeline component tomo o . G eat job toda and
see ou tomo o !
216

Testing the App
Let's start by looking at one feature of our application and
thinking about where the edge cases are and what we assume
will happen with the component.
Let's start ith the Timeline component as it's the most comple in our
current app.
The Timeline component dispa s a list of statuses ith a header ith a
d namic title. We'll ant to test an d namic logic e ha e in our
components. The simplest bit of logic e ha e to start out ith our tests are
around the d namic title presented on the timeline.
An hour ago
Ate lunch
10 am
10 am
Timeline 
217

We like to start out testing b listing our assumptions about a component
and under hat circumstances these assumptions are true. For instance, a
list of assumptions e can make about our Timeline component might
include the follo ing:
Under all circumstances, the Timeline ill be contained ithin a <div
/> ith the class of .notificationsFrame
Under all circumstances, e can assume there ill be a title
Under all circumstances, e assume the search button ill start out as
hidden
There is a list of at least four status updates
These assumptions ill translate into our tests.
Let's open the ﬁle src/components/Timeline/__tests__/Timeline-test.js . We
left off ith some dumm tests in this ﬁle, so let's clear those off and start
ith a fresh describe block:
Testing
2:21 pm
specimen book.
218

// Tests go here
})
For e er test that e rite against React, e'll ant to import react into our
test file. We'll also ant to bring in the react test utilities:
import TestUtils from 'react-addons-test-utils';
// Tests go here
})
Since e're testing the Timeline component here, e'll also ant to bring
that into our orkspace:
import Timeline from '../Timeline';
// Tests go here
})
Let's rite our first test. Our first assumption is prett simple to test. We're
testing to make sure the element is rapped in a .notificationsFrame class.
With e er test e'll rite, e'll need to render our application into the
orking test document. The react-addons-test-utils librar pro ides a
function to do just this called renderIntoDocument() :
219

it('wraps content in a div with .notificationsFrame class', () => {
const wrapper = TestUtils.renderIntoDocument(<Timeline />);
});
})
If e run this test e en though e're not setting an e pectations et , e'll
see that e ha e a problem ith the testing code. React thinks e're tr ing
to render an undefined component:
Let's find the element e e pect to be in the DOM using another TestUtils
function called findRenderedDOMComponentWithClass() .
The findRenderedDOMComponentWithClass() function accepts two arguments.
The first is the render tree our wrapper object and the second is the CSS
class name e ant it to look for:
220

const node =
TestUtils
.findRenderedDOMComponentWithClass(wrapper,
'notificationsFrame');
});
})
With that, our tests ill pass belie e it or not . The TestUtils sets up an
e pectation that it can ﬁnd the component ith the .notificationsFrame
class. If it doesn't ﬁnd one, it ill thro an error and our tests ill fail.
As a reminder, e can run our tests using either the npm test command or
the yarn test command. We'll use the yarn test command for no since
e're testing one component:
yarn test
221

With our one passing test, e' e conﬁrmed our test setup is orking.
Unfortunatel , the interface for TestUtils is a little comple and lo -le el.
The enzyme librar raps TestUtils , pro iding an easier and higher-le el
interface for asserting against a React component under test. We'll discuss
enz me in detail tomorro .
Great job toda and see ou tomorro !
222

Better Testing with Enzyme
Today, we'll look at an open-source library maintained by Airbnb
called Enzyme that makes testing fun and easy.
Yeste da e used the react-addons-test-utils lib a to ite ou ﬁ st test
against the Timeline component. Ho e e , this lib a is fai l lo -le el and
can be a bit cumbe some to use. Enz me http://ai bnb.io/enz me/ is a
testing utilit lib a eleased and maintained b the Ai Bnb http://ai bnb.io
team and it offe s a nice , highe -le el API fo dealing ith React
components unde test.
We' e testing against ou <Timeline /> component:
Tue Apr 04 2017 17:00:51 GMT-0700 (MST)
Ate lunch
Nate
1 
Tue Apr 04 2017 17:00:51 GMT-0700 (MST)
Played tennis
Ari
1 
Tue Apr 04 2017 17:00:51 GMT-0700 (MST)
Walked the dog 0 
Tue Apr 04 2017 17:00:51 GMT-0700 (MST)
Timeline 
224

We'll use Enz me to make these tests easie to ite and mo e eadable.
Yeste da , e ote ou ﬁ st test as the follo ing:
TestUtils
.findRenderedDOMComponentWithClass(wrapper,
'notificationsFrame');
});
})
Although this o ks, it's not uite the easiest test in the o ld to ead. Let's
see hat this test looks like hen e e ite it ith Enz me.
Rathe than testing the complete component t ee ith Enz me, e can test
just the output of the component. An of the component's child en ill not
be ende ed. This is called shallow ende ing.
Using Enzyme
Nate
Tue Apr 04 2017 17:00:51 GMT-0700 (MST)
Called mom 2 
225

Enz me makes shallo ende ing supe eas . We'll use the shallow function
e po ted b Enz me to mount ou component.
Let's update the src/components/Timeline/__tests__/Timeline-test.js ﬁle to
include the shallow function f om enzyme :
import { shallow } from 'enzyme';
// our tests
});
})
Shallo rendering is supported by react-addons-test-utils
as ell. In fact, Enzyme just raps this functionality. While
e didn't use shallo rendering yesterday, if e ere to use
it ould look like this:
const renderer = ReactTestUtils.createRenderer();
renderer.render(<Timeline />)
const result = renderer.getRenderOutput();
No to ende ou component, e can use the shallow method and sto e
the esult in a a iable. Then, e'll ue y the ende ed component fo
diffe ent React elements HTML o child components that a e ende ed
inside its i tual dom.
The enti e asse tion comp ises t o lines:
226

import { shallow, mount } from 'enzyme';
let wrapper;
wrapper = shallow(<Timeline />);
expect(wrapper.find('.notificationsFrame').length).toEqual(1);
});
it('has a title of Timeline', () => {
wrapper = mount(<Timeline />)
expect(wrapper.find('.title').text()).toBe("Timeline")
})
describe('search button', () => {
let search;
beforeEach(() => wrapper = mount(<Timeline />))
beforeEach(() => search = wrapper.find('input.searchInput'))
it('starts out hidden', () => {
expect(search.hasClass('active')).toBeFalsy()
})
it('becomes visible after being clicked on', () => {
const icon = wrapper.find('.searchIcon')
icon.simulate('click')
expect(search.hasClass('active')).toBeTruthy()
})
})
describe('status updates', () => {
it('has 4 status updates at minimum', () => {
wrapper = shallow(<Timeline />)
expect(
wrapper.find('ActivityItem').length
).toBeGreaterThan(3)
})
})
227

})
We can un ou tests in the same manne as e did befo e using the yarn
test command o the npm test command :
yarn test
Ou test passes and is mo e eadable and maintainable.
Let's continue iting asse tions, pulling f om the list of assumptions that e
made at the beginning of este da . We'll st uctu e the est of ou test suite
ﬁ st b iting out ou describe and it blocks. We'll ﬁll out the specs ith
asse tions afte :
228

import { shallow } from 'enzyme';
let wrapper;
});
it('has a title of Timeline')
it('starts out hidden')
it('becomes visible after being clicked on')
})
it('has 4 status updates at minimum')
})
})
If e ere follo ing Test Dri en De elopment or TDD for
short , e ould rite these assumptions first and then build
the component to pass these tests.
Let's fill in these tests so that the pass against ou e isting Timeline
component.
Ou title test is elati el simple. We'll look fo the title element and confi m
the title is Timeline .
229

We e pect the title to be a ailable unde a class of .title . So, to use the
.title class in a spec, e can just g ab the component using the find
function e posed b Enz me.
Since ou Header component is a child component of ou Timeline
component, e can't use the shallow() method. Instead e ha e to use the
mount() method p o ided b Enz me.
The shallow() rendering function only renders the component e're
testing speciﬁcally and it on't render child elements. Instead e'll ha e
to mount() the component as the child Header on't be a ailable in the
jsdom other ise.
We'll look at more Enzyme functions at the end of this article.
Let's ﬁll out the title spec no :
Shallow? Mount?
230

let wrapper;
});
wrapper = mount(<Timeline />) // notice the `mount`
})
})
Running ou tests, e'll see these t o e pectations pass:
Ne t, let's update ou sea ch button tests. We ha e t o tests he e, he e one
e ui es us to test an inte action. Enz me p o ides a e clean inte face fo
handling inte actions. Let's see ho e can ite a test against the sea ch
231

icon.
Again, since e' e testing against a child element in ou Timeline, e'll ha e
to mount() the element. Since e' e going to ite t o tests in a nested
describe() block, e can ite a befo e helpe to c eate the mount() ane
fo each test so the a e pu e.
In addition, e' e going to use the input.searchInput element fo both tests,
so let's ite the .find() fo that element in the befo e helpe too.
let wrapper;
// ...
let search;
// ...
})
})
To test if the sea ch input is hidden, e'll just ha e to kno if the active
class is applied o not. Enz me p o ides a a fo us to detect if a
component has a class o not using the hasClass() method. Let's ﬁll out the
ﬁ st test to e pect the sea ch input doens't ha e the acti e class:
232

let wrapper;
// ...
let search;
})
it('becomes visible after being clicked on')
// ...
})
})
The t ick pa t about the second test is that e need to click on the icon
element. Befo e e look at ho to do that, let's ﬁnd it ﬁ st. We can ta get it
b it's .searchIcon class on the appe :
})
No that e ha e the icon e ant to simulate a click on the element. Recall
that the onClick() method is eall just a facade fo b o se e ents. That is,
a click on an element is just an e ent getting bubbled th ough the
component. Rathe than cont olling a mouse o calling click on the
element, e'll simulate an e ent occu ing on it. Fo us, this ill be the click
e ent.
We'll use the simulate() method on the icon to c eate this e ent:
})
233

No e can set an e pectation that the search component has the active
class.
})
Ou last e pectation fo the Timeline component is that e ha e at least
fou status updates. As e a e la ing these elements on the Timeline
component, e can shallow ende the component. In addition, since each
of the elements a e of a custom component, e can sea ch fo the list of
speciﬁc components of t pe 'Acti it Item'.
// ...
})
})
No e can test fo the length of a list of ActivityItem components. We'll
set ou e pectation that the list if at least of length 4.
expect(
})
})
The enti e test suite that e ha e no is the follo ing:
234

let wrapper;
});
wrapper = mount(<Timeline />)
})
let search;
})
})
})
expect(
})
})
235

})
Befo e e close out fo toda , e should look at the inte face of an Enz me
shallo - ende ed component in ou tests, the wrapper object . The Enz me
documentation http://ai bnb.io/enz me/docs/api/shallo .html is
fantastic, so e'll keep this sho t.
Basicall , hen e use the find() function, e'll pass it a selecto and it ill
etu n a ShallowWrapper instance that aps the found nodes. The find()
function can take a st ing, function, o an object.
When e pass st ings into the find() function, e can pass CSS selecto s o
the displayName of a component. Fo instance:
wrapper.find('div.link');
wrapper.find('Link')
We can also pass it the component const ucto , fo instance:
import { Link } from 'react-router';
// ...
wrapper.find(Link)
Finall , e can also pass it an object p ope t selecto object, hich selects
elements b thei ke and alues. Fo instance:
wrapper.find({to: '/login'});
The etu n alue is a ShallowWrapper , hich is a t pe of Wrapper e can
ha e ende ed appe s and shallo appe s . These Wrapper instances
ha e a bunch of functions e can use to ta get diffe ent child components,
What's the deal with find()?
236

a s to look into the props and the state , as ell as othe att ibutes of a
ende ed component, such as html() and text() . What's mo e, e can
chain these calls togethe .
Take the case of the <Link /> component. If e anted to ﬁnd the HTML of
the link class based on all the links a ailable, e can ite a test like this:
// ...
it('displays a link tag with the Login text', () => {
link = wrapper
.find('Link')
.find({to: '/login'})
expect(link.html())
.toBe('<a class="link">Login</a>')
});
Phe ! That's a lot of ne info mation toda , but look ho uickl e ote
ou follo -up tests ith Enz me. It's much uicke to ead and makes it
easie to disce n hat's actuall happening.
Tomo o e'll continue ith ou testing jou ne and alk th ough
integ ation testing ou application.
237

Integration Testing
Today e'll rite tests to simulate ho users interact ith our
application and ill test the entire ﬂo of our app in a li e
bro ser.
We' e eached the nal pa t of ou int oduction to testing. We' e going to
ap up ou testing section ith integ ation testing. As a eminde of hat
Integ ation testing is, it's the p ocess of automating the e pe ience that ou
actual use s e pe ience as the use ou application.
Logo (/) Login please (/login) About (/about)
You need to know the secret
Integration testing
238

As e' e integ ation testing, e'll need to ha e ou app actuall unning as
e' e going to ha e a b o se launch and e ecute ou application. We'll be
using an automation se e called selenium http:// .seleniumh .o g , so
e'll need to do nload it as ell as a eall nift node automated testing
f ame o k called Night atch http://night atchjs.o g .
The easiest a to install selenium http://docs.seleniumh .o g/do nload/
is to do nload it th ough the the selenium ebsite at:
http://docs.seleniumh .o g/do nload/
http://docs.seleniumh .o g/do nload/ .
If you're on a mac, you can use Homebrew http://brew.sh
with the brew command:
brew install selenium-server-standalone
We'll also need to install the nightwatch command, hich e can do ith the
npm package manage . Let's install nightwatch globall using the --global
ag:
npm install --global nightwatch
This command gi es us the nightwatch command a ailable an he e in ou
te minal. We'll need to add a con gu ation le in the oot di ecto called
nighwatch.json o nighwatch.conf.js . We'll use the default con gu ation
le at nighwatch.json
Let's c eate the le in ou oot di ecto :
Install
239

touch nightwatch.json
No add the follo ing content in the ne nightwatch.json :
240

{
"src_folders" : ["tests"],
"output_folder" : "reports",
"selenium" : {
"start_process" : false,
"server_path" : "",
"log_path" : "",
"host" : "127.0.0.1",
"port" : 4444,
"cli_args" : {
"webdriver.chrome.driver" : "",
"webdriver.ie.driver" : ""
}
},
"test_settings" : {
"default" : {
"launch_url" : "http://localhost:3000",
"selenium_port" : 4444,
"selenium_host" : "localhost",
"silent": true,
"screenshots" : {
"enabled" : false,
"path" : ""
},
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true
}
},
"chrome" : {
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true
}
}
}
}
241

Night atch gi es us a lot of con gu ation options a ailable, so e on't
co e all the possible a s to con gu e it. Fo ou pu poses, e'll just use the
base con gu ation abo e as it's mo e than enough fo getting integ ation
testing going.
We'll ite ou night atch tests in a tests/ di ecto . Let's sta t b iting a
test fo handling the auth o k o . Let's ite ou test in a tests/ di ecto
hich matches the src_folders that e'll call tests/auth-flow.js .
mkdir tests
touch tests/auth-flow.js
The night atch tests can be set as an object of e po ts, he e the ke is the
desc iption of the test and the alue is a function ith a efe ence to the
client b o se . Fo instance, e'll set up fou tests fo ou tests/auth-
flow.js test.
Updating ou tests/auth-flow.js le ith these fou test functions look like
the follo ing:
module.exports = {
'get to login page': (browser) => {},
'logging in': (browser) => {},
'logging out': (browser) => {},
'close': (browser) => {},
}
Each of the functions in ou object e po ts ill ecei e a browser instance
hich se es as the inte face bet een ou test and the selenium ebd i e .
We ha e all so ts of a ailable options e can un on this browser a iable.
Let's ite ou st test to demonst ate this function. We' e going to set up
night atch so that it launches the page, and clicks on the Login link in the
na ba . We'll take the follo ing steps to do this:
Writing tests
242

. We'll st call the url() function on b o se to ask it to load a URL on
the page.
. We'll ait fo the page to load fo a ce tain amount of time.
. We'll nd the Login link and click on it.
And e'll set up asse tions along the a . Let's get bus ! We'll ask the
browser to load the URL e set in ou con gu ation le fo us, it's
http://localhost:3000
module.exports = {
'get to login page': (browser) => {
browser
// Load the page at the launch URL
.url(browser.launchUrl)
// wait for page to load
.waitForElementVisible('.navbar', 1000)
// click on the login link
.click('a[href="#/login"]')
browser.assert.urlContains('login');
},
'logging in': (browser) => {},
}
Thats it. Befo e e get too fa ahead, let's un this test to make su e ou test
setup o ks. We'll need to open te minal indo s he e.
In the st te minal indo , let's launch selenium. If ou do nloaded the
.jar le, ou can sta t this ith the command:
java -jar selenium-server-standalone-{VERSION}.jar
If ou do nloaded it th ough homeb e , ou can use the selenium-server
command:
243

selenium-server
In the second indo , e'll need to launch ou app. Remembe , the b o se
e' e going to launch ill actually hit ou site, so e need an instance of it
unning. We can sta t ou app up ith the npm start comamnd:
npm start
244

Finall , in the thi d and nal te minal indo , e'll un ou tests using the
nightwatch command.
nightwatch
245

When e un the nightwatch command, e'll see a ch ome indo open up,
isit the site, and click on the login link automaticall ... p ett cool, ight? .
All of ou tests pass at this point. Let's actuall tell the b o se to log a use
in.
Since the st step ill un, the b o se ill al ead be on the login page. In
the second ke of ou tests, e'll ant to take the follo ing steps:
. We'll ant to find the input for he user's email and set a alue to a
alid email.
. We'll ant to click the submit/login button
. We'll wait fo the page to load simila to ho e did p e iousl
. We'll ant to assert that the te t of the page is e ual to hat e e pect
it to be.
. We'll set an asse tion to make su e the URL is hat e think it is.
W iting this up in code is st aight-fo a d too. Just like e did p e iousl ,
let's ite the code ith comments inline:
246

module.exports = {
browser
},
'logging in': (browser) => {
browser
// set the input email to a valid email
.setValue('input[type=email]', 'ari@fullstack.io')
// submit the form
.click('input[type=submit]')
// wait for the page to load
// Get the text of the h1 tag
.getText('.content h1', function(comp) {
this.assert.equal(comp.value, 'Welcome home!')
})
browser.assert.urlContains(browser.launchUrl)
},
}
Running these tests again in the thi d te minal indo :
nightwatch
247

We can do a simila thing ith the logging out step f om ou b o se . To
get a use to log out, e ill:
. Find and click on the logout link
. Wait fo the content to load fo the ne t page hich contains an "a e
ou su e?"-st le button .
. We'll click on the "I'm su e" button to log out
. We'll ant to ` ait fo the content to load again
. We'll assert that t`he h tag contains the alue e e pect it to ha e
. And e'll make su e the page sho s the Login button
Let's implement this ith comments inline:
248

module.exports = {
browser
},
'logging in': (browser) => {
browser
.setValue('input[type=email]', 'ari@fullstack.io')
.click('input[type=submit]')
.getText('.content h1', function(comp) {
this.assert.equal(comp.value, 'Welcome home!')
})
browser.assert.urlContains(browser.launchUrl)
},
'logging out': (browser) => {
browser
// Find and click on the logout link
.click('a[href="#/logout"]')
// Wait for the content to load
.waitForElementVisible('.content button', 1000)
// Click on the button to logout
.click('button')
// We'll wait for the next content to load
.waitForElementVisible('h1', 1000)
// Get the text of the h1 tag
.getText('h1', function(res) {
this.assert.equal(res.value, 'Welcome home!')
})
// Make sure the Login button shows now
.waitForElementVisible('a[href="#/login"]', 1000);
},
}
249

As of no , ou ma ha e noticed that ou ch ome b o se s ha en't been
closing hen the tests ha e completed. This is because e ha en't told
selenium that e ant the session to be complete. We can use the end()
command on the browser object to close the connection. This is h e
ha e the last and nal step called close .
{
// ...
'close': (browser) => browser.end()
}
No let's un the enti e suite and make su e it passes again using the
nightwatch command:
nightwatch
That's it! We' e made it and ha e co e ed t pes of testing enti el , f om
lo -le el up th ough faking a eal b o se instance. No e ha e the tools
to ensu e ou applications a e ead fo full deplo ment.
250

But ait, e don't actuall ha e deplo ment gu ed out et, do e? Sta
tuned fo tomo o hen e sta t getting ou application deplo ed into the
cloud.
251

Deployment Introduction
Toda , e'll e plore the different pieces in ol ed in deplo ing
our application so the orld can use our application out in the
ild.
With ou app all tested up th ough this point, it's time to get it up and li e fo
the o ld to see. The est of this cou se ill be dedicated to deplo ing ou
application into p oduction.
When talking about deplo ment, e ha e a lot of diffe ent options:
Hosting
Deplo ment en i onment con gu ation
Continuous Integ ation CI, fo sho t
Cost c cles, net o k band idth cost
Bundle size
and mo e
We'll look at the diffe ent hosting options e ha e fo deplo ing ou eact
app tomo o and look at a fe diffe ent methods e ha e fo deplo ing ou
application up. Toda e' e going to focus on getting ou app ead fo
deplo ment.
Production deployment
252

Fi st things st... e' e going to need to handle some customization in ou
eb application, so e'll need to un the npm run eject command in the oot
of ou di ecto . This is a pe manent action, hich just means e'll be
esponsible fo handling customizations to ou app st uctu e fo no on
ithout the help of ou hand create-react-app .
This is here I always sa make a backup cop of our
application. We cannot go back from ejecting , but e can
re ert to old code.
We can eject f om the create-react-app st uctu e b unning the eject
command p o ided b the gene ato :
npm run eject
Afte ejecting f om the create-react-app st uctu e, e'll see e get a lot of
ne les in ou application oot in the config/ and scripts/ di ecto ies.
The npm run eject command c eated all of the les it uses inte nall and
ote them all out fo us in ou application.
The ke method of the create-react-app gene ato is called ebpack
https:// ebpack.github.io , hich is a module bundle /builde .
Webpack is a module bundle ith a gino mous communit of use s, tons of
plugins, is unde acti e de elopment, has a cle e plugin s stem, is inc edibl
fast, suppo ts hot-code eloading, and much much mo e.
Ejection from create-react-app
Webpack basics
253

Although e didn't eall call it out befo e, e' e been using ebpack this
enti e time unde the guise of npm start . Without ebpack, e ouldn't
ha e ha e been able to just ite import and e pect ou code to load. It
o ks like that because ebpack "sees" the import ke o d and kno s e
need to ha e the code at the path accessible hen the app is unning.
Webpack takes ca e of hot- eloading fo us, nea l automaticall , can load
and pack man t pes of les into bundles, and it can split code in a logical
manne so as to suppo t laz -loading and sh ink the initial do nload size fo
the use .
This is meaningful fo us as ou apps g o la ge and mo e comple , it's
impo tant to kno ho to manipulate ou build tools.
Fo e ample, hen e ant to deplo to diffe ent en i onments... hich e'll
get to sho tl . Fi st, a tin int oduction to ebpack, hat it is and ho it
o ks.
Looking into the gene ated les hen e an npm start befo e e ejected
the app, e can see that it se es the b o se t o o mo e les. The st is
the index.html and the bundle.js . The ebpack se e takes ca e of
injecting the bundle.js into the index.html , e en if e don't load ou app in
the index.html le.
The bundle.js le is a giant le that contains all the Ja aSc ipt code ou app
needs to un, including dependencies and ou o n les alike. Webpack has
it's o n method of packing les togethe , so it'll look kinda funn hen
looking at the a sou ce.
Webpack has pe fo med some t ansfo mation on all the included Ja aSc ipt.
Notabl , it used Babel to t anspile ou ES code to an ES -compatible fo mat.
If ou look at the comment heade fo app.js , it has a numbe , 254 :
What it does with bundle.js
254

/* 254 */
/*!********************!*
!*** ./src/app.js ***!
********************/
The module itself is encapsulated inside of a function that looks like this:
function(module, exports, __webpack_require__) {
// The chaotic `app.js` code here
}
Each module of ou eb app is encapsulated inside of a function ith this
signatu e. Webpack has gi en each of ou app's modules this function
containe as ell as a module ID in the case of app.js , .
But "module" he e is not limited to ES modules.
Remembe ho e "impo ted" the makeRoutes() function in app.js , like this:
import makeRoutes from './routes'
He e's hat the a iable decla ation of makeRoutes looks like inside the chaos
of the app.js Webpack module:
var _logo = __webpack_require__(/*! ./src/routes.js */ 255);
This looks uite st ange, mostl due to the in-line comment that Webpack
p o ides fo debugging pu poses. Remo ing that comment:
var _logo = __webpack_require__(255);
Instead of an import statement, e ha e plain old ES code.
255

No , sea ch fo ./src/routes.js in this le.
/* 255 */
/*!**********************!*
!*** ./src/routes.js ***!
**********************/
Note that its module ID is 255 , the same intege passed to
__webpack_require__ abo e.
Webpack t eats e erything as a module, including image assets like logo.svg .
We can get an idea of hat's going on b picking out a path in the mess of the
logo.svg module. You path might be diffe ent, but it ill look like this:
static/media/logo.5d5d9eef.svg
If ou open a ne b o se tab and plug in this add ess ou add ess ill be
diffe ent... matching the name of the le ebpack gene ated fo ou :
http://localhost:3000/static/media/logo.5d5d9eef.svg
You should get the React logo:
So Webpack c eated a Webpack module fo logo.svg , one that efe s to the
path to the SVG on the Webpack de elopment se e . Because of this
modula pa adigm, it as able to intelligentl compile a statement like this:
import makeRoutes from './routes'
Into this ES statement:
var _makeRoutes = __webpack_require__(255);
What about ou CSS assets? Yep, e erything is a module in Webpack. Sea ch
fo the st ing ./src/app.css :
256

Webpack's index.html didn't include an efe ences to CSS. That's because
Webpack is including ou CSS he e ia bundle.js . When ou app loads, this
c ptic Webpack module function dumps the contents of app.css into style
tags on the page.
So e kno hat is happening: Webpack has olled up e e concei able
"module" fo ou app into bundle.js . You might be asking: Wh ?
The st moti ation is uni e sal to Ja aSc ipt bundle s. Webpack has
con e ted all ou ES modules into its o n bespoke ES -compatible module
s nta . As e b ie touched on, it's apped all of ou Ja aSc ipt modules in
special functions. It p o ides a module ID s stem to enable one module to
efe ence anothe .
Webpack, like othe bundle s, consolidated all ou Ja aSc ipt modules into a
single le. It could keep Ja aSc ipt modules in sepa ate les, but this e ui es
some mo e con gu ation than create-react-app p o ides out of the bo .
Webpack takes this module pa adigm fu the than othe bundle s, ho e e .
As e sa , it applies the same modula t eatment to image assets, CSS, and
npm packages like React and ReactDOM . This modula pa adigm unleashes
a lot of po e . We touch on aspects of that po e th oughout the est of this
chapte .
It's oka if ou don't unde stand that out of the bo . Building and
maintaining ebpack is a comple p oject ith lots of mo ing pa ts and it
often takes e en the most e pe ienced de elope s a hile to "get."
We'll alk th ough the diffe ent pa ts of ou ebpack conﬁgu ation that
e'll be o king ith. If it feels o e helming, just stick ith us on the
basics he e and the est ill follo .
Complex, right?
257

With ou ne found kno ledge of the inne o kings of Webpack, let's tu n
ou attention back to ou app. We'll make some modi cations to ou
ebpack build tool to suppo t multiple en i onment con gu ations.
When e' e ead to deplo a ne application, e ha e to think about a fe
things that e ouldn't ha e to focus on hen de eloping ou application.
Fo instance, let's sa e a e e uesting data f om an API se e ... hen
de eloping this application, it's likel that e a e going to be unning a
de elopment instance of the API se e on ou local machine hich ould
be accessible th ough localhost .
When e deplo ou application, e'll ant to be e uesting data f om an
off-site host, most likel not in the same location f om he e the code is
being sent, so localhost just on't do.
One a e can handle ou con gu ation management is b using .env les.
These .env les ill contain diffe ent a iables fo ou diffe ent
en i onments, et still p o ide a a fo us to handle con gu ation in a sane
a .
Usuall , e'll keep one .env le in the oot to contain a global con g that can
be o e idden b con gu ation les on a pe -en i onment basis.
Let's install an npm package to help us ith this con gu ation setup called
dotenv :
npm install --save-dev dotenv
The doten https://github.com/motdotla/doten lib a helps us load
en i onment a iables into the ENV of ou app in ou en i onments.
Environment configuration
258

It's usuall a good idea to add .env to our .gitignore file, so
e don't check in these settings.
Con entionall , it's a good idea to c eate an e ample e sion of the .env
file and check that into the eposito . Fo instance, fo ou application
e can c eate a cop of the .env file called .env.example ith the
e ui ed a iables.
Late , anothe de elope o us, months f om no can use the
.env.example file as a template fo hat the .env file should look like.
These .env les can include a iables as though the a e uni -st le
a iables. Let's c eate ou global one ith the APP_NAME set to da s:
touch .env
echo "APP_NAME=30days" > .env
Let's na igate to the e ploded config/ di ecto he e e'll see all of ou
build tool itten out fo us. We on't look at all of these les, but to get an
unde standing of hat a e doing, e'll sta t looking in
config/webpack.config.dev.js .
This le sho s all of the ebpack con gu ation used to build ou app. It
includes loade s, plugins, ent points, etc. Fo ou cu ent task, the line to
look fo is in the plugins list he e e de ne the DefinePlugin() :
259

module.exports = {
// ...
plugins: [
// ...
// Makes some environment variables available to
// the JS code, for example:
// if (process.env.NODE_ENV === 'development') {
// ...
// }. See `env.js`
new webpack.DefinePlugin(env),
// ...
]
}
The webpack.DefinePlugin plugin takes an object ith keys and values and
nds all the places in ou code he e e use the ke and it eplaces it ith
the alue.
Fo instance, if the env object the e looks like:
{
'__NODE_ENV__': 'development'
}
We can use the a iable __NODE_ENV__ in ou sou ce and it ill be eplaced
ith 'de elopment', i.e.:
class SomeComponent extends React.Component {
render() {
return (
<div>Hello from {__NODE_ENV__}</div>
)
}
}
The esult of the render() function ould sa "Hello f om de elopment".
260

To add ou o n a iables to ou app, e' e going to use this env object and
add ou o n de nitions to it. Sc olling back up to the top of the le, e'll see
that it's cu entl c eated and e po ted f om the config/env.js le.
Looking at the config/env.js le, e can see that it takes all the a iables in
ou en i onment and adds the NODE_ENV to the en i onment as ell as an
a iables p e ed b REACT_APP_ .
// ...
module.exports = Object
.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce((env, key) => {
env['process.env.' + key] = JSON.stringify(process.env[key]);
return env;
}, {
'process.env.NODE_ENV': NODE_ENV
});
We can skip all the comple pa t of that ope ation as e'll onl need to
modif the second a gument to the educe function, in othe o ds, e'll
update the object:
{
'process.env.NODE_ENV': NODE_ENV
}
This object is the initial object of the reduce function. The
reduce function merges all of the ariables preﬁ ed b
REACT_APP_ into this object, so e'll al a s ha e the
process.env.NODE_ENV replaced in our source.
Essentiall hat e'll do is:
261

. Load ou default .env le
. Load an en i onment .env le
. Me ge these t o a iables togethe as ell as an default a iables such
as the NODE_ENV
. We'll c eate a ne object ith all of ou en i onment a iables and
sanitize each alue.
. Update the initial object fo the e isting en i onment c eato .
Let's get bus . In o de to load the .env le, e'll need to impo t the dotenv
package. We'll also impo t the path lib a f om the standa d node lib a
and set up a fe a iables fo paths.
Let's update the config/env.js le
var REACT_APP = /^REACT_APP_/i;
var NODE_ENV = process.env.NODE_ENV || 'development';
const path = require('path'),
resolve = path.resolve,
join = path.join;
const currentDir = resolve(__dirname);
const rootDir = join(currentDir, '..');
const dotenv = require('dotenv');
To load the global en i onment, e'll use the config() function e posed b
the dotenv lib a and pass it the path of the .env le loaded in the oot
di ecto . We'll also use the same function to look fo a le in the config/
di ecto ith the name of NODE_ENV.config.env . Additionall , e don't ant
eithe one of these methods to e o out, so e'll add the additional option of
silent: true so that if the le is not found, no e ception ill be th o n.
262

// 1. Step one (loading the default .env file)
const globalDotEnv = dotenv.config({
path: join(rootDir, '.env'),
silent: true
});
// 2. Load the environment config
const envDotEnv = dotenv.config({
path: join(currentDir, NODE_ENV + `.config.env`),
silent: true
});
Ne t, let's concatenate all these a iables togethe as ell as include ou
NODE_ENV option in this object. The Object.assign() method c eates a ne
object and me ges each object f om ight to left. This a , the en i onment
con g a iable
const allVars = Object.assign({}, {
'NODE_ENV': NODE_ENV
}, globalDotEnv, envDotEnv);
With ou cu ent setup, the allVars a iable ill look like:
{
'NODE_ENV': 'development',
'APP_NAME': '30days'
}
Finall , let's c eate an object that puts these a iables on process.env and
ensu es the a e alid st ings using JSON.stringify .
263

Let's update the .env le so that it includes this time se e :
APP_NAME=30days
TIME_SERVER='http://localhost:3001'
No , e' e been de eloping in "de elopment" ith the se e hosted on
he oku. We can set ou config/development.config.env le to set the
TIME_SERVER a iable, hich ill o e ide the global one:
TIME_SERVER='https://fullstacktime.herokuapp.com'
No , hen e un npm start , an occu ences of process.env.TIME_SERVER
ill be eplaced b hich e e alue takes p ecedence.
Let's update ou src/redux/modules/currentTime.js module to use the ne
se e , athe than the ha dcoded one e used p e iousl .
// ...
// ...
}
const host = process.env.TIME_SERVER;
export const actions = {
updateTime: ({timezone = 'pst', str='now'}) => ({
meta: {
type: 'api',
url: host + '/' + timezone + '/' + str + '.json',
method: 'GET'
}
})
}
No , fo ou p oduction deplo ment, e'll use the he oku app, so let's c eate
a cop of the development.config.env le as production.config.env in the
config/ di ecto :
265

cp config/development.config.env config/production.config.env
We used ou custom logging edu middle a e in ou application. This is
fantastic fo o king on ou site in de elopment, but e don't eall ant it
to be acti e hile in a p oduction en i onment.
Let's update ou middle a e con gu ation to onl use the logging
middle a e hen e a e in de elopment, athe than in all en i onments. In
ou p oject's src/redux/configureStore.js le, e loaded ou middle a e b
a simple a a :
let middleware = [
loggingMiddleware,
apiMiddleware
];
const store = createStore(reducer, applyMiddleware(...middleware));
No that e ha e the process.env.NODE_ENV a ailable to us in ou les, e
can update the middleware a a depending upon the en i onment e' e
unning in. Let's update it to onl add the logging if e a e in the
de elopment en i onment:
let middleware = [apiMiddleware];
if ("development" === process.env.NODE_ENV) {
middleware.unshift(loggingMiddleware);
}
const store = createStore(reducer, applyMiddleware(...middleware));
No hen e un ou application in de elopment, e'll ha e the
loggingMiddleware set, hile in an othe en i onment e' e disabled it.
Custom middleware per-
configuration environment
266

Toda as a long one, but tomo o is an e citing da as e'll get the app up
and unning on a emote se e .
G eat o k toda and see ou tomo o !
267

Deployment
Today, we'll look through some ready-to-go options so we can
get our site up and running. By the end of today, you'll be able to
share a link to your running application.
We left off este da p epa ing fo ou st deplo ment of ou application.
We' e ead to deplo ou application. No the uestion is where and what
a e e going to deplo ?
Let's e plo e...
While deplo ing a single page application has it's o n int icasies, it's simila
to deplo ing a non-single page application. What the end-use 's b o se
e uests all need to be a ailable fo the b o se to e uest. This means all
ja asc ipt les, an custom fonts, images, s g, st lesheets, etc. that e use in
ou application need to be a ailable on a publicl a ailable se e .
Webpack takes ca e of building and packaging ou enti e application fo hat
e'll need to gi e the se e to send to ou clients. This includes an client-
side tokens and ou p oduction con gu ation hich e put togethe
este da .
What
268

This means e onl need to send the contents of the dist ibution di ecto
ebpack put togethe . In ou case, this di ecto is the build/ di ecto . We
don't need to send an thing else in ou p oject to a emote se e .
Let's use ou build s stem to gene ate a list of p oduction les e'll ant to
host. We can un the npm run build command to gene ate these les in the
build/ di ecto :
npm run build
These da s e ha e man options fo hosting client-side applications. We'll
look at a fe options fo hosting ou application toda . Each of the follo ing
hosting se ices ha e thei bene ts and d a backs, hich e'll b ie
discuss befo e e actuall make a deplo ment.
The e a e t o possible a s fo us to deplo ou application. If e a e
o king ith a back-end application, e can use the back-end se e to host
ou public application les. Fo instance, if e e e building a ails
Where
269

application, e can send the client-side application di ectl to the public/
folde of the ails application.
This has the bene t of p o iding additional secu it in ou application as e
can e if a e uest f om a client-side application made to the backend to
ha e been gene ated b the se e -side code. One d a back, ho e e is that
it can hog net o k band idth to send static les and potentiall suck up
esou ces f om othe clients.
In this section, e'll o k on hosting ou client-side onl application, hich
is the second a e can deplo ou application. This means e can un/use
a se e hich is speci call designed fo hosting static les sepa ate f om
the back-end se e .
We'll focus on the second method he e e a e using othe se ices to
deplo ou client-side application. That is, e'll skip building a back-end and
upload ou static les to one o mo e of the non-e hausti e list of hosting
se ices.
su ge.sh https://su ge.sh/
github pages https://pages.github.com/
he oku https:// .he oku.com/
AWS S3 https://a s.amazon.com/s3/
Fo ge https://getfo ge.com/
BitBalloon https:// .bitballoon.com/
Pancake https:// .pancake.io/
... Mo e
We'll e plo e a fe of these options togethe .
surge.sh
270

su ge.sh https://su ge.sh/ is a guabl one of the easiest hosting p o ide s
to host ou static site ith. The p o ide a a fo us to easil and epeatable
methods fo hosting ou sites.
Let's deplo ou application to su ge. Fi st, e'll need to install the surge
command-line tool. We'll use npm , like so:
npm install --global surge
With the surge tool installed, e can un su ge in ou local di ecto and
point it to the build/ di ecto to tell it to upload the gene ated les in the
build/ di ecto .
surge -p build
The su ge tool ill un and it ill upload all of ou les to a domain speci ed
b the output of the tool. In the case of the p e ious un, this uploads ou
les to the u l of hateful-impulse.su ge.sh http://hateful-impulse.su ge.sh/
o the SSL e sion at https://hateful-impulse.su ge.sh/ https://hateful-
impulse.su ge.sh/
271

Fo mo e info mation on surge , check out thei documentation at
https://su ge.sh/help/ https://su ge.sh/help/ .
Github pages
272

github pages https://pages.github.com/ is anothe eas se ice to deplo
ou static les to. It's dependent upon using github to host ou git les, but is
anothe eas -to-use hosting en i onment fo single page applications.
We'll need to sta t b c eating ou github pages eposito on github. With
an acti e account, e can isit the github.com/ne
https://github.com/ne site and c eate a eposito .
With this epo, it ill edi ect us to the epo u l. Let's click on the clone or
download button and nd the github git u l. Let's cop and paste this to ou
clipboa d and head to ou te minal.
273

In ou te minal, let's add this as a emote o igin fo ou git epo.
Since e ha en't c eated this as a git epo et, let's initialize the git epo:
git init
git add -A .
git commit -am "Initial commit"
In the oot di ecto of ou application, let's add the emote ith the
follo ing command:
git remote add github [your git url here]
# From the demo, this will be:
# git remote add origin git@github.com:auser/30-days-of-react-demo.git
Ne t, e'll need to mo e to a b anch called gh-pages as github deplo s f om
this b anch. We can easil do this b checking out in a ne b anch using git.
Let's also un the gene ato and tell git that the build/ di ecto should be
conside ed the oot of ou app:
274

npm run build
git checkout -B gh-pages
git add -f build
git commit -am "Rebuild website"
git filter-branch -f --prune-empty --subdirectory-filter build
git checkout -
Since github pages does not se e di ectl f om the oot, but instead the
build folde , e'll need to add a con gu ation to ou package.json b setting
the homepage ke to the package.json le ith ou github u l. Let's open the
package.json le and add the "homepage" ke :
{
"name": "30days",
"version": "0.0.1",
"private": true,
"homepage": "http://auser.github.io/30-days-of-react-demo",
// ...
}
275

We can modify json ﬁles by using the j https://stedolan.github.io/j /
tool. If you don't ha e this installed, get it... get it no ... It's in aluable
To change the package.json ﬁle f om the command-line, e can use j ,
like so:
jq '.homepage =
"http://auser.github.io/30-days-of-react-demo"'
> package.json
With ou pages built, e can gene ate ou application using npm run build
and push to github f om ou local build/ di ecto .
git push -f github gh-pages
No e can isit ou site at the epo pages u l. Fo instance, the demo site is:
https://ause .github.io/30-da s-of- eact-demo https://ause .github.io/30-
da s-of- eact-demo/# .
Hint
276

We'll need to add this o k to a deployment sc ipt, so e e y time e ant
to elease a ne e sion of the site. We'll do mo e of this tomo o . To
elease to github, e'll ha e to use the follo ing sc ipt:
#!/usr/bin/env bash
git checkout -B gh-pages
git add -f build
git commit -am "Rebuild website"
git filter-branch -f --prune-empty --subdirectory-filter build
git push -f origin gh-pages
git checkout -
Fo mo e info mation on github pages, check out thei documentation at
https://help.github.com/catego ies/github-pages-basics/
https://help.github.com/catego ies/github-pages-basics/ .
Future deployments
Heroku
277

He oku https:// .he oku.com/ is a e cool hosting se ice that allo s
us to host both static and non-static ebsites. We might ant to deplo a
static site to he oku as e ma ant to mo e to a d namic backend at some
point, a e al ead comfo table ith deplo ing to he oku, etc.
To deplo ou site to he oku, e'll need an account. We can get one b
isiting https://signup.he oku.com/ https://signup.he oku.com/ to sign up
fo one.
We'll also need the he oku toolbet
https://de cente .he oku.com/a ticles/he oku-command-line as e'll be
using the heroku command-line tool.
Finall , e'll need to un heroku login to set up c edentials fo ou
application:
heroku login
Ne t, e'll need to tell the heroku command-line that e ha e a he oku app.
We can do this b calling heroku apps:create f om the command-line in ou
p oject oot:
278

heroku apps:create
# or with a name
heroku apps:create thirty-days-of-react-demo
He oku kno s ho to un ou application thanks to buildpacks
https://de cente .he oku.com/a ticles/buildpacks . We'll need to tell
he oku e ha e a static- le buildpack so it kno s to se e ou application as
a static le/spa.
We'll need to install the static- les plugin fo he oku. This can be easi install
using the heroku tool:
heroku plugins:install heroku-cli-static
279

We can add the static le buildpack ith the follo ing command:
heroku buildpacks:set https://github.com/hone/heroku-buildpack-static
Fo an con gu ation updates, e'll need to un the static:init command
f om he oku to gene ate the necessa static.json le:
heroku static:init
280

No e can deplo ou static site to he oku using the git o k o :
git push heroku master
# or from a branch, such as the heroku branch
git push heroku heroku:master
We' e deplo ed to onl th ee of the hosting p o ide s f om the list abo e.
The e a e man mo e options fo deplo ing ou application, ho e e this is a
p ett good sta t.
When e deplo ou application, e ill ant to make su e e e thing is
o king befo e e actuall send out the application to the o ld. Tomo o
e'll o k on integ ating a Continuous integ ation CI, fo sho t se e to
un ou tests befo e e deplo .
281

Continuous Integration
Today e'll look through some continuous integration solutions
a ailable for us to run tests against as ell as implement one to
test our application in the cloud.
We' e deplo ed our application to the "cloud", no e ant to make sure
e er thing runs as e e pect it. We' e started a test suite, but no e ant
to make sure it passes completel before e deplo .
We could set a step-b -step procedure for a de eloper to follo to make sure
e run our tests before e deplo manuall , but sometimes this can get in
the a of deplo ment, especiall under high-pressure deadlines in the
middle of the night. There are better methods.
The core idea is that e ant to deplo our application onl after all of our
tests ha e run and passed sometimes kno n as "going green" . There are
man a s e can do this. Mentioned abo e, e can handle it through
humans, but that can become tedious and e're prett good at forgetting
things... hat as I sa ing again?
Testing then deployment
282

Let's look at some better a s. One of the a s e can handle it is through a
deplo ment script that onl succeeds if all of our tests pass. This is the
easiest, but needs to be replicated across a team of de elopers.
Another method is to push our code to a continuous integration ser er
hose onl responsibilit is to run our tests and deplo our application if and
onl if the tests pass.
Just like hosting ser ices, e ha e man options for running continuous
integration ser ers. The follo ing is a short list of some of the popular CI
ser ers a ailable:
tra is ci https://tra is-ci.org/
circle ci https://circleci.com
codeship https://codeship.io
jenkins https://jenkins.io
AWS EC https://a s.amazon.com/ec /
Let's look at a fe a s of handling this process.
Without in ol ing an e tra ser ers, e can rite a script to e ecute our
tests before e deplo .
Let's create a script that actuall does do the deplo ment process ﬁrst. In our
case, let's take the surge.sh e ample from esterda . Let's add one more
script e'll call deploy.sh in our scripts/ director :
touch scripts/deploy.sh
chmod u+x scripts/deploy.sh
In here, let's add the surge deplo script changing the names to our domain
name, of course :
Custom build script
283

#!/usr/local/env bash
surge -p build --domain hateful-impulse.surge.sh
Let's rite the release script ne t. To e ecute it, let's add the script to the
package.json scripts object:
{
// ...
"scripts": {
"start": "node ./scripts/start.js",
"build": "node ./scripts/build.js",
"release": "node ./scripts/release.js",
"test": "jest"
},
}
No let's create the scripts/release.js file. From the root director in our
terminal, let's e ecute the follo ing command:
touch scripts/release.js
Inside this file, e'll ant to run a fe command-line scripts, first our build
step, then e'll ant to run our tests, and finall e'll run the deplo script, if
e er thing else succeeds first.
In a node file, e'll first set the NODE_ENV to be test for our build tooling.
We'll also include a script to run a command from the command-line from
ithin the node script and store all the output to an arra .
284

process.env.NODE_ENV = 'test';
var chalk = require('chalk');
const exec = require('child_process').exec;
var output = [];
function runCmd(cmd) {
return new Promise((resolve, reject) => {
const testProcess = exec(cmd, {stdio:[0,1,2]});
testProcess.stdout.on('data', msg => output.push(msg));
testProcess.stderr.on('data', msg => output.push(msg));
testProcess.on('close', (code) => (code === 0) ? resolve() :
reject())
});
}
When called, the runCmd() function ill return a promise that is resol ed
hen the command e its successfull and ill reject if there is an error.
Our release script ill need to be able to do the follo ing tasks:
. build
. test
. deplo
. report an errors
Mentall , e can think of this pipeline as:
build()
.then(runTests)
.then(deploy)
.catch(error)
Let's build these functions hich ill use our runCmd function e rote
earlier:
285

If an of our tests fail, e'll get all the output of our command, including the
failure errors. Let's update one of our tests to make them fail purposefull to
test the script.
I'll update the src/components/Nav/__tests__/Navbar-test.js ﬁle to change
the ﬁrst test to fail:
// ...
it('wraps content in a div with .navbar class', () => {
wrapper = shallow(<Navbar />);
expect(wrapper.find('.navbars').length).toEqual(1);
});
Let's rerun the release script and atch it fail and not run the deplo script:
npm run release
287

As e see, e'll get the output of the failing test in our logs, so e can ﬁ the
bug and then rerelease our application again b running the npm run release
script again.
Tra is ci https://tra is-ci.org/ is a hosted continuous integration
en ironment and is prett eas to set up. Since e' e pushed our container
to github, let's continue do n this track and set up tra is ith our github
account.
Head to tra is-ci.org https://tra is-ci.org/ and sign up there.
Travis CI
288

Once ou're signed up, click on the + button and ﬁnd our repositor :
From the project screen, click on the big 'acti ate repo' button.
289

No e need to configure tra is to do hat e ant, hich is run our test
scripts and then deplo our app. To configure tra is, e'll need to create a
.travis.yml file in the root of our app.
touch .travis.yml
Let's add the follo ing content to set the language to node ith the node
ersion of . :
language: node_js
node_js:
- "5.4"
No all e need to do is add this file .travis.yml to git and push the repo
changes to github.
git add .travis.yml
git commit -am "Added travis-ci configuration file"
git push github master
290

That's it. No tra is ill e ecute our tests based on the default script of npm
test .
No , e'll ant tra is to actuall deplo our app for us. Since e alread
ha e a scripts/deploy.sh script that ill deplo our app, e can use this to
deplo from tra is.
To tell tra is to run our deploy.sh script after e deplo , e ill need to add
the deploy ke to our .travis.yml ﬁle. Let's update the ml conﬁg to tell it
to run our deplo script:
language: node_js
node_js:
- "5.4"
deploy:
provider: script
script: scripts/deploy.sh
on:
branch: master
The ne t time e push, tra is ill take o er and push up to surge or
heree er the scripts/deploy.sh scripts ill tell it to deplo .
291

Particulars for authentication. To deplo to github pages, e'll need to add a
token to the script. The gist at
https://gist.github.com/domenic/ec b fc ab f dd
https://gist.github.com/domenic/ec b fc ab f dd is a great
resource to follo for deplo ing to github pages.
There are a lot of other options e ha e to run our tests before e deplo .
This is just a getting started guide to get our application up.
The Tra is CI ser ice is fantastic for open-source projects,
ho e er to use it in a pri ate project, e'll need to create a
billable account.
An open-source CI ser ice called Jenkins https://jenkins.io hich can
take a bit of ork to setup although it's getting a lot easier
https://jenkins.io/projects/blueocean/ .
Congrats! We ha e our application up and running, complete ith testing
and all.
See ou tomorro for our last da !
Other methods
292

Wrap-up and More Resources
We' e made it! Da 30. Congrats! No ou ha e enough
information to rite some er comple applications, integrated
ith data, st led to perfection, tested and deplo ed.
Welcome to the nal da ! Cong ats! You' e made it!
The nal component of ou t ip th ough React-land is a call to get in ol ed.
The React communit is acti e, g o ing, and f iendl .
Check out the communit p ojects on Github at: https://github.com/ eactjs
https://github.com/ eactjs
We' e co e ed a lot of mate ial in the past da s. The high-le el topics e
discussed in ou st da s:
. JSX and hat it is, f om the g ound up.
. Building components a. Static b. Data-d i en components c. Stateful and
stateless components d. Pu e components e. The inhe ent t ee-based
st uctu e of the i tual DOM
. The React component lifec cle
. Ho to build eusable and self-documenting components
. Ho to make ou components st lish using nati e React p opt pes as
ell as thi d pa t lib a ies
293

. Adding inte action to ou components
. Ho to use create-react-app to bootst ap ou apps
. Ho to integ ate data f om an API se e , including a look at p omises
. We o ked th ough the Flu a chitectu e
. Integ ated Redu in ou application, including ho middle a e o ks
. We integ ated testing st ategies in ou app a. Unit testing b. End-to-end
testing c. Functional testing
. We discussed deplo ment and e tending ou application to suppo t
multi-en i onment deplo ments
. We added continuous integ ation in ou deplo ment chain.
. Client-side outing
Although e co e ed a lot of topics in ou st da s, the e is so much
mo e! Ho do e kno ? We ote a book https:// .fullstack eact.com !
Inte ested in eading mo e and going deepe ith React? De nitel check it
out. Not onl do e co e in-depth the topics e b ie int oduced in ou
st da s, e go into a ton of othe content, including but not limited to :
Using g aph l and ho to build a G aphQL se e
Rela and React
Ho to use React to build a React Nati e application
Ho to e tend React Nati e to use ou o n custom modules
An in-depth, much mo e comp ehensi e e ie of testing, f om unit
tests th ough ie tests
A deep look into components, f om an inte nals pe specti e
Ad anced outing and dealing ith p oduction outing
Fo ms fo ms fo ms! We co e fo m alidations, f om basic fo m inputs
th ough alidating and integ ating ith Redu
And much much much mo e.
Just check out the book page at .fullstack eact.com
https:// .fullstack eact.com fo mo e details.
Cong ats on making it to da ! Time to celeb ate!
There is so much more!
294

30 days-of-react-ebook-fullstackio

More Related Content

What's hot (8)

Similar to 30 days-of-react-ebook-fullstackio (20)

More from imdurgesh (20)

Recently uploaded (20)

30 days-of-react-ebook-fullstackio