100% found this document useful (1 vote)

1K views

30 Days of React Ebook Fullstackio PDF

The document provides an introduction to React, including: - React is a JavaScript library for building user interfaces and acts as the view layer for web applications. - Components are the core building blocks of React apps, and are self-contained modules that render output. Components can include other components. - JSX is a syntax extension to JavaScript that allows writing HTML-like code to define React components and their structure. JSX code is translated to JavaScript.

Uploaded by

valkchirurg

Available Formats

Download as PDF, TXT or read online on Scribd

100% found this document useful (1 vote)

1K views

30 Days of React Ebook Fullstackio PDF

Uploaded by

valkchirurg

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 290

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.

Over the next 30 days, you'll get a good feel for the various parts of the React
(https://facebook.github.io/react/) web framework and its ecosystem.

Each day in our 30 day adventure will build upon the previous day's materials,
so by the end of the series, you'll not only know the terms, concepts, and
underpinnings of how the framework works, but be able to use React in your
next web application.

Let's get started. We'll start at the very beginning

(https://www.youtube.com/watch?v=1RW3nDRmu6k) as it's a very good place
to start.

What is React?
React (https://facebook.github.io/react/) is a JavaScript library for building
user interfaces. It is the view layer for web applications.

At the heart of all React applications are components. A component is a self-

contained module that renders some output. We can write interface elements
like a button or an input field as a React component. Components are
composable. A component might include one or more other components in its
output.

Broadly speaking, to write React apps we write React components that

correspond to various interface elements. We then organize these
components inside higher-level components which define the structure of our
application.

For example, take a form. A form might consist of many interface elements,
like input fields, labels, or buttons. Each element inside the form can be
written as a React component. We'd then write a higher-level component, the
form component itself. The form component would specify the structure of
the form and include each of these interface elements inside of it.

Importantly, each component in a React app abides by strict data management

principles. Complex, interactive user interfaces often involve complex data
and application state. The surface area of React is limited and aimed at giving
us the tools to be able to anticipate how our application will look with a given
set of circumstances. We dig into these principles later in the course.

Okay, so how do we use it?

React is a JavaScript framework. Using the framework is as simple as including
a JavaScript file in our HTML and using the React exports in our application's
JavaScript.

For instance, the Hello world example of a React website can be as simple as:
<!DOCTYPE html>
<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://npmcdn.com/[email protected]/browser.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>

Demo

Hello world

Although it might look a little scary, the JavaScript code is a single line that
dynamically adds Hello world to the page. Note that we only needed to include
a handful of JavaScript files to get everything working.
How does it work?
Unlike many of its predecessors, React operates not directly on the browser's
Document Object Model (DOM) immediately, but on a virtual DOM. That is,
rather than manipulating the document in a browser after changes to our data
(which can be quite slow) it resolves changes in its virtual DOM. After the
virtual DOM has been updated, React intelligently determines what changes to
make to the actual DOM.

The React Virtual DOM (https://facebook.github.io/react/docs/dom-

differences.html) exists entirely in-memory and is a representation of the web
browser's DOM. Because of this, we when we write a React component, we're
not writing directly to the DOM, but we're writing a virtual component that
React will turn into the DOM.

In the next article, we'll look at what this means for us as we build our React
components and jump into JSX and writing our first real components.
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 our previous article, we looked at what React

(https://facebook.github.io/react/) is and discussed at a high-level how it
works. In this article, we're going to look at one part of the React ecosystem:
ES6 and JSX.

JSX/ES5/ES6 WTF??!
In any cursory search on the Internet looking for React material, no doubt you
have already run into the terms JSX , ES5, and ES6. These opaque acronyms
can get confusing quickly.

ES5 (the ES stands for ECMAScript) is basically "regular JavaScript." The 5th
update to JavaScript, ES5 was finalized in 2009. It has been supported by all
major browsers for several years. Therefore, if you've written or seen any
JavaScript in the recent past, chances are it was ES5.

ES6 is a new version of JavaScript that adds some nice syntactical and
functional additions. It was finalized in 2015. ES6 is almost fully supported
(http://kangax.github.io/compat-table/es6/) by all major browsers. But it will
be some time until older versions of web browsers are phased out of use. For
instance, Internet Explorer 11 does not support ES6 but has about 12% of the
browser market share.

In order to reap the benefits of ES6 today, we have to do a few things to get it
to work in as many browsers as we can:

1. We have to transpile our code so that a wider range of browsers

understand our JavaScript. This means converting ES6 JavaScript into ES5
JavaScript.
2. We have to include a shim or polyfill that provides additional functionality
added in ES6 that a browser may or may not have.

We'll see how we do this a bit later in the series.

Most of the code we'll write in this series will be easily

translatable to ES5. In cases where we use ES6, we'll introduce
the feature at first and then walk through it.

As we'll see, all of our React components have a render function that specifies
what the HTML output of our React component will be. JavaScript eXtension,
or more commonly JSX, is a React extension that allows us to write JavaScript
that looks like HTML.

Although in previous paradigms it was viewed as a bad habit to

include JavaScript and markup in the same place, it turns out
that combining the view with the functionality makes
reasoning about the view pretty straightforward.
To see what this means, imagine we had a React component that renders an
h1 HTML tag. JSX allows us to declare this element in a manner that closely
resembles 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 returning
HTML, but this is actually JSX. The JSX is translated to regular JavaScript at
runtime. That component, after translation, looks like this:

class HelloWorld extends React.Component {

render() {
return (
React.createElement(
'h1',
{className: 'large'},
'Hello World'
)
);
}
}

While JSX looks like HTML, it is actually just a terser way to write a
React.createElement() declaration. When a component renders, it outputs a
tree of React elements or a virtual representation of the HTML elements this
component outputs. React will then determine what changes to make to the
actual DOM based on this React element representation. In the case of the
HelloWorld component, the HTML that React writes to the DOM will look like
this:

<h1 class='large'>Hello World</h1>

The class extends syntax we used in our first React
component is ES6 syntax. It allows us to write objects using a
familiar Object-Oriented style. In ES6, the class syntax might
be translated as:

var HelloWorld = function() {}

Object.extends(HelloWorld, React.Component)
HelloWorld.prototype.render = function() {}

Because JSX is JavaScript, we can't use JavaScript reserved words. This

includes words like class and for .

React gives us the attribute className . We use it in HelloWorld to set the

large class on our h1 tag. There are a few other attributes, such as the for
attribute on a label that React translates into htmlFor as for is also a reserved
word. We'll look at these when we start using them.

If we want to write pure JavaScript instead of rely on a JSX compiler, we can

just write the React.createElement() function and not worry about the layer
of abstraction. But we like JSX. It's especially more readable with complex
components. Consider the following JSX:

<div>
<img src="profile.jpg" alt="Profile photo" />
<h1>Welcome back Ari</h1>
</div>

The JavaScript delivered to the browser will look like this:

React.createElement("div", null,
React.createElement("img", {src: "profile.jpg", alt: "Profile
photo"}),
React.createElement("h1", null, "Welcome back Ari")
);

Again, while you can skip JSX and write the latter directly, the JSX syntax is
well-suited for representing nested HTML elements.

Now that we understand JSX, we can start writing our first React components.
Join us tomorrow when we jump into our first React app.
Our First Components

The first two articles in this series were heavy on discussion. In

today's session, let's dive into some code and write our first
React app.

Let's revisit the "Hello world" app we introduced on day one. Here it is again,
written slightly differently:
<!DOCTYPE html>
<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://npmcdn.com/[email protected]/browser.min.js">
</script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var app = <h1>Hello world</h1>
var mountComponent = document.querySelector('#app');
ReactDOM.render(app, mountComponent);
</script>
</body>
</html>

Hello world
Loading the React library
We've 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
we start writing our React application otherwise the React and ReactDOM
variables won't be defined in time for us to use them.

Also inside head is a script tag that includes a library, babel-core . But what
is babel-core ?

Babel
Yesterday, we talked about ES5 and ES6. We mentioned that support for ES6 is
still spotty. In order to use ES6, it's best if we transpile our ES6 JavaScript into
ES5 JavaScript.

Babel is a library for transpiling ES6 to ES5.

Inside body , we have a script body. Inside of script , we define our first
React application. Note that the script tag has a type of text/babel :

This signals to Babel that we would like it to handle the execution of the
JavaScript inside this script body. We can write our React app using ES6
JavaScript and be assured that Babel will handle its execution in browsers that
only support ES5.

The React app

Inside the Babel script body, we've defined our first React application. Our
application consists of a single element, the <h1>Hello world</h1> . The call to
ReactDOM.render() actually places our tiny React application on the page.
Without the call to ReactDOM.render() , nothing would render in the DOM. The
first argument to ReactDOM.render() is what to render and the second is
where:

ReactDOM.render(<what>, <where>)

We've written a React application. Our "app" is a React element which

represents an h1 tag. But this isn't very interesting. Rich web applications
accept user input, change their shape based on user interaction, and
communicate with web servers. Let's begin touching on this power by building
our first React component.

Components and more

We mentioned at the beginning of this series that at the heart of all React
applications are components. The best way to understand React components is
to write them. We'll write our React components as ES6 classes.

Let's look at a component we'll call App . Like all other React components, this
ES6 class will extend the React.Component class from the React package:

class App extends React.Component {

render() {
return <h1>Hello from our app</h1>
}
}

All React components require at least a render() function.

This render() function is expected to return a virtual DOM
representation of the browser DOM element(s).

There are multiple ways to write a React component. Throughout this

series, we'll look at several methods for writing them. The most common
form we'll use is the ES6 class representation used above.

Another way we could write our App component is by using the

React.createClass() function.

var App = React.createClass({

render: function() {
return <h1>Hello from our app</h1>
}
});

As of late, the community has been adopting the ES6 class declaration. But
both methods produce a React component with the same features.

In our index.html , let's replace our JavaScript from before with our new App
component.
<!DOCTYPE html>
<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://npmcdn.com/[email protected]/browser.min.js">
</script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
</script>
</body>
</html>

However, nothing is going to render on the screen. Do you remember why?

We haven't told React we want to render anything on the screen or where to

render it. We need to use the ReactDOM.render() function again to express to
React what we want rendered and where.

Adding the ReactDOM.render() function will render our application on screen:

var mount = document.querySelector('#app');

ReactDOM.render(<App />, mount);

Hello from our app

Hello from our app
Notice that we can render our React app using the App class as though it is a
built-in DOM component type (like the <h1 /> and <div /> tags). Here we're
using it as though it's an element with the angle brackets: <App /> .

The idea that our React components act just like any other element on our
page allows us to build a component tree just as if we were creating a native
browser tree.

While we're rendering a React component now, our app still lacks richness or
interactivity. Soon, we'll see how to make React components data-driven and
dynamic. But first, in the next installment of this series, we'll explore how we
can layer components. Nested components are the foundation of a rich React
web application.
Complex Components

Awesome, we've built our first component. Now let's get a bit
fancier and start building a more complex interface.

In the previous section of 30 Days of React, we started building our first React
component. In this section, we'll continue our work with our App component
and start building a more complex UI.

Timeline 

10 am
Ate lunch 2 

11:02 am
It is a long established fact that a reader will be distracted by the readable 2 
content of a page when looking at its layout.

11:31 am
Lorem Ipsum is simply dummy text of the printing and typesetting 2 
industry.

12 pm
Lorem Ipsum has been the industry's standard dummy text ever since the 2 
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.
A common web element we might see is a user timeline. For instance, we
might have an application that shows a history of events happening such as
applications like Facebook and Twitter.

We could build this entire UI in a single component. However, building an

entire application in a single component is not a great idea as it can grow
huge, complex, and difficult to test.
// Don't do it like this. This is for example only
class Panel extends React.Component {
render() {
return (
<div className="notificationsFrame">
<div className="panel">
<div className="header">

<span className="title">Timeline</span>

<div className="fa fa-search searchIcon"></div>

</div>
<div className="content">
<div className="line"></div>
<div className="item">

<span className="time">
An hour ago
</span>
<p>Ate lunch</p>
</div>

<span className="time">10 am</span>

<p>Read Day two article</p>
</div>

<span className="time">10 am</span>

<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry.</p>
</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>
)
}
}

Breaking it down
Rather than build this in a single component, let's break it down into multiple
components.
Looking at this component, there are 2 separate parts to the larger component
as a whole:

1. The title bar

2. The content

We can chop up the content part of the component into individual places of
concern. There are 3 different item components inside the content part.
If we wanted to go one step further, we could even break
down the title bar into 3 component parts, the menu button,
the title, and the search icon. We could dive even further into
each one of those if we needed to.

Deciding how deep to split your components is more of an art than a

science.

In any case, it's usually a good idea to start looking at applications using the
idea of components. By breaking our app down into components it becomes
easier to test and easier to keep track of what functionality goes where.

The container component

To build our notifications app, let's start by building the container to hold the
entire app. Our container is simply going to be a "wrapper" for the other two
components.

None of these components will require special functionality (yet), so they will
look similar to our HelloWorld component in that it's just a component with a
single render function.

Let's build a wrapper component we'll call App that might look similar to this:
class App extends React.Component {
render() {
return (
<div className="notificationsFrame">
<div className="panel">
{/* content goes here */}
</div>
</div>
)
}
}

Notice that we use the attribute called className in React

instead of the HTML version of class . Remember that we're
not writing to the DOM directly and thus not writing HTML,
but JSX (which is just JavaScript).

The reason we use className is because class is a reserved word in

JavaScript.

Child components
When a component is nested inside another component, it's called a child
component. A component can have multiple children components. The
component that uses a child component is then called it's parent component.

With the wrapper component defined, we can build our title and content
components by, essentially, grabbing the source from our original design and
putting the source file into each component.

For instance, the header component looks like this, with a container element
<div className="header"> , the menu icon, a title, and the search bar:
class Header extends React.Component {
render() {
return (
<div className="header">
<div className="fa fa-more"></div>

<span className="title">Timeline</span>

<div className="fa fa-search searchIcon"></div>

</div>
)
}
}

And finally, we can write the Content component with timeline items. Each
timeline item is wrapped in a single component, has an avatar associated with
it, a timestamp, and some text.
class Content extends React.Component {
render() {
return (
<div className="content">
<div className="line"></div>

{/* Timeline item */}

<span className="time">
An hour ago
</span>
<p>Ate lunch</p>
<div className="commentCount">
2
</div>
</div>

{/* ... */}

</div>
)
}
}

In order to write a comment in a React component, we have to

place it in the brackets as a multi-line comment in JavaScript.

Putting it all together

Now that we have our two children components, we can set the Header and
the Content components to be children of the App component. Our App
component can then use these components as if they are HTML elements
built-in to the browser. Our new App component, with a header and content
now looks like:

class App extends React.Component {

render() {
return (
<div className="notificationsFrame">
<div className="panel">
<Header />
<Content />
</div>
</div>
)
}
}

Timeline 

10 am
Ate lunch 2 

11:02 am
It is a long established fact that a reader will be distracted by the readable 2 
content of a page when looking at its layout.

11:31 am
Lorem Ipsum is simply dummy text of the printing and typesetting 2 
industry.

12 pm
Lorem Ipsum has been the industry's standard dummy text ever since the 2 
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.
With this knowledge, we now have the ability to write multiple components
and we can start to build more complex applications.

However, you may notice that this app does not have any user interaction nor
custom data. In fact, as it stands right now our React application isn't that
much easier to build than straight, no-frills HTML.

In the next section, we'll look how to make our component more dynamic and
become data-driven with React.
Driving Components Through Data

Hard-coding data in our applications isn't exactly ideal. Today,

we'll set up our components to be driven by data to them access
to external data.

Through this point, we've written our first components and set them up in a
child/parent relationship. However, we haven't yet tied any data to our React
components. Although it's a more pleasant experience (in our opinion) writing
a website in React, we haven't taken advantage of the power of React to
display any dynamic data.

Let's change that today.

Going data-driven
Recall, yesterday we built a timeline component that includes a header and an
activity list:

Timeline 

10 am
Ate lunch 2 

11:02 am
2 
It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout.

11:31 am
Lorem Ipsum is simply dummy text of the printing and typesetting 2 
industry.

12 pm
Lorem Ipsum has been the industry's standard dummy text ever since the 2 
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.

We broke down our demo into components and ended up building three
separate components with static JSX templates. It's not very convenient to
have to update our component's template everytime we have a change in our
website's data.

Instead, let's give the components data to use to display. Let's start with the
<Header /> component. As it stands right now, the <Header /> component
only shows the title of the element as Timeline . It's a nice element and it
would be nice to be able to reuse it in other parts of our page, but the title of
Timeline doesn't make sense for every use.

Let's tell React that we want to be able to set the title to something else.

Introducing props
React allows us to send data to a component in the same syntax 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 property of the <img /> tag
as a prop we'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, we defined the <Header /> component as:

class Header extends React.Component {
render() {
return (
<div className="header">
<div className="fa fa-more"></div>

<span className="title">Timeline</span>

<div className="fa fa-search searchIcon"></div>

</div>
)
}
}

When we use the <Header /> component, we placed it in our <App />
component as like so:

We can pass in our title as a prop as an attribute on the <Header /> by

updating the usage of the component setting the attribute called title to
some string, like so:

<Header title="Timeline" />

Inside of our component, we can access this title prop from the this.props
property in the Header class. Instead of setting the title statically as Timeline
in the template, we can replace it with the property passed in.
class Header extends React.Component {
render() {
return (
<div className="header">
<div className="fa fa-more"></div>

<span className="title">
{this.props.title}
</span>

<div className="fa fa-search searchIcon"></div>

</div>
)
}
}

Now our <Header /> component will display the string we pass in as the
title when we call the component. For instance, calling our <Header />
component four times like so:

<Header title="Timeline" />

Results in four <Header /> components to mount like so:

Timeline 

Proﬁle 

Settings 
Chat 

Pretty nifty, ey? Now we can reuse the <Header /> component with a dynamic
title property.

We can pass in more than just strings in a component. We can pass in

numbers, strings, all sorts of objects, and even functions! We'll talk more about
how to define these different properties so we can build a component api
later.

Instead of statically setting the content and date Let's take the Content
component and set the timeline content by a data variable instead of by text.
Just like we can do with HTML components, we can pass multiple props into a
component.

Recall, yesterday we defined our Content container like this:

class Content extends React.Component {
render() {
return (
<div className="content">
<div className="line"></div>

{/* Timeline item */}

<span className="time">
An hour ago
</span>
<p>Ate lunch</p>
<div className="commentCount">
2
</div>
</div>

</div>
)
}
}

As we did with title , let's look at what props our Content component needs:

A user's avatar image

A timestamp of the activity
Text of the activity item
Number of comments

Let's say that we have a JavaScript object that represents an activity item. We
will have a few fields, such as a string field (text) and a date object. We might
have 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 we passed in a string title to the <Header /> component, we can take
this activity object and pass it right into the Content component. Let's convert
our component to display the details from this activity inside it's template.

In order to pass a dynamic variable's value into a template, we have to use the
template syntax to render it in our template. For instance:
class Content extends React.Component {
render() {
const {activity} = this.props; // ES6 destructuring

return (
<div className="content">
<div className="line"></div>

{/* Timeline item */}

<div className="item">
<div className="avatar">
<img src={activity.user.avatar} />
{activity.user.name}
</div>

<span className="time">
{activity.timestamp}
</span>
<p>{activity.text}</p>
<div className="commentCount">
{activity.comments.length}
</div>
</div>
</div>
)
}
}
We've use a little bit of ES6 in our class definition on the first
line of the render() function called destructuring. The two
following lines are functionally equivalent:

// these lines do the same thing

const activity = this.props.activity;
const {activity} = this.props;

Destructuring allows us to save on typing and define variables in a shorter,

more compact way.

We can then use this new content by passing in an object as a prop instead of a
hard-coded string. For instance:

<Content activity={moment1} />

1482433897424
Ate lunch 1 

Fantastic, now we have our activity item driven by an object. However, you
might have noticed that we would have to implement this multiple times with
different comments. Instead, we could pass an array of objects into a
component.

Let's say we have an object that contains multiple activity items:

const activities = [
{
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!' }]
},
{
timestamp: new Date().getTime(),
text: "Woke up early for a beautiful run",
user: {
id: 2, name: 'Ari',
avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
},
comments: [{ from: 'Nate', text: 'I am so jealous' }]
},
]

We can rearticulate our usage of <Content /> by passing in multiple activities

instead of just one:

<Content activities={activities} />

However, if we refresh the view nothing will show up! We need to first update
our Content component to accept multiple activities. As we learned about
previously, JSX is really just JavaScript executed by the browser. We can
execute JavaScript functions inside the JSX content as it will just get run by
the browser like the rest of our JavaScript.

Let's move our activity item JSX inside of a map that we'll run over for every
item.
class Content extends React.Component {
render() {
const {activities} = this.props; // ES6 destructuring

return (
<div className="content">
<div className="line"></div>

{/* Timeline item */}

{activities.map((activity) => {
return (
<div className="item">
<div className="avatar">
<img src={activity.user.avatar} />
{activity.user.name}
</div>

<span className="time">
{activity.timestamp}
</span>
<p>{activity.text}</p>
<div className="commentCount">
{activity.comments.length}
</div>
</div>
);
})}

</div>
)
}
}

Now we can pass any number of activities to our array and the Content
component will handle it, however if we leave the component right now, then
we'll have a relatively complex component handling both containing and
displaying a list of activities. Leaving it like this really isn't the React way.

ActivityItem
Here is where it makes sense to write one more component to contain
displaying a single activity item and then rather than building a complex
Content component, we can move the responsibility. This will also make it
easier to test, add functionality, etc.

Let's update our Content component to display a list of ActivityItem

components (we'll create this next).

class Content extends React.Component {

render() {
const {activities} = this.props; // ES6 destructuring

return (
<div className="content">
<div className="line"></div>

{/* Timeline item */}

{activities.map((activity) => (
<ActivityItem
activity={activity} />
))}

</div>
)
}
}

Not only is this much simpler and easier to understand, but it makes testing
both components easier.

With our freshly-minted Content component, let's create the ActivityItem

component. Since we already have the view created for the ActivityItem , all
we need to do is copy it from what was our Content component's template as
it's own module.
class ActivityItem extends React.Component {
render() {
const {activity} = this.props; // ES6 destructuring

return (
<div className="item">
<div className="avatar">
<img src={activity.user.avatar} />
{activity.user.name}
</div>

<span className="time">
{activity.timestamp}
</span>
<p>{activity.text}</p>
<div className="commentCount">
{activity.comments.length}
</div>
</div>
)
}
}

This week we updated our components to be driven by data by using the React
props concept. In the next section, we'll dive into stateful components.
State

Today we're getting started on how stateful components work in

React and look at when and why we'll use state.

We've almost made it through your first week of getting up and running on
React. We've worked through JSX, building our first components, setting up
parent-child relationships, and driving our component properties with React.
We have one more major idea we have yet to discuss about React, the idea of
state.

The state of things

React does not allow us to modify this.props on our components for good
reason. Imagine if we passed in the title prop to the Header component and
the Header component was able to modify it. How do we know what the
title is of the Header component? We set ourselves up for race-conditions,
confusing data state, and it would be an all-around bad idea to modify a
variable passed to us by a parent component and modified in a child.

However, sometimes a component needs to be able to update it's own state.

For example, setting an active flag or updating a timer on a stopwatch, for
instance.
While it's preferable to use props as much as we can, sometimes we need to
hold on to the state of a component. To handle this, React gives us the ability
to have state in our components.

state in a component is intended to be completely internal to the

Component and it's children (i.e. accessed by the component and any children
it used). Similar to how we access props in a component, the state can be
accessed via this.state in a component. Whenever the state changes (via the
this.setState() function), the component will rerender.

For instance, let's say we have a simple clock component that shows the
current time:

12:11:48 am
Even though this is a simple clock component, it does retain state in that it
needs to know what the current time is to display. Without using state , we
could set a timer and rerender the entire React component, but other
components on the page may not need rerendering... this would be a
headache.

Instead, we can set a timer to call rerender inside the component and change
the internal state of this component.

Let's take a stab at building this component. First, we'll create the component
we'll call Clock . Before we 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 10 and set
the am/pm appropriately. 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>
)
}
}

If we render our new Clock component, we will only get a time rendered
everytime the component itself rerenders. It's not a very useful clock (yet). In
order to convert our static time display Clock component into a clock that
displays the time, we'll need to update the time every second.

In order to do that, we'll need to track the current time in the state of the
component. To do this, we'll need to set an initial state value. In the ES6 class
style, we can set the initial state of the component in the constructor() by
setting this.state to a value.
class Clock extends React.Component {
constructor(props) {
super(props); // ALWAYS required

const currentTime = new Date();

this.state = {
hours: currentTime.getHours(),
minutes: currentTime.getMinutes(),
seconds: currentTime.getSeconds(),
ampm: currentTime.getHours() >= 12 ? 'pm' : 'am'
};
}
// ...
}
The first line of the constructor should always call
super(props) . If you forget this, the component won't like you
very much (i.e. there will be errors).

Using the React.createClass() method to create a component requires a

bit of a different setup to provide the initial state. Instead of using a
constructor, we'd have to define the function getInitialState() and
return the object from there.

The equivalent way to create the state using React.createClass() looks

like:

const Clock = React.createClass({

getInitialState: function() {
const currentTime = new Date();
return {
hours: currentTime.getHours(),
minutes: currentTime.getMinutes(),
seconds: currentTime.getSeconds(),
ampm: currentTime.getHours() >= 12 ? 'pm' : 'am'
}
}
})

Now that we have a this.state defined in our Clock component, we can

reference it in the render() function using the this.state . Let's update our
render() function to grab the values 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 working directly with data values, we can now update the state of
the component. In order to update the state, we'll use the function
this.setState() , which will trigger the component to rerender.

In our Clock component, let's use the native setTimeout() JavaScript function
to create a timer to update the this.state object in 1000 milliseconds. We'll
place this functionality in a function as we'll want to call this again.
class Clock extends React.Component {
constructor(props) {
super(props); // ALWAYS required

const currentTime = new Date();

this.state = {
// ...
};

this.setTimer(); // start up the timeout

}

setTimer() {
setTimeout(this.updateClock.bind(this), 1000);
}

updateClock() {
// This will be called in one second
}
// ...
}

We will get into the lifecycle hooks in the next section, but for
the time being we'll call this in the constructor() for
simplicity.

In the updateClock() function we'll want to update the state with the new
time. We can now update the state in the updateClock() function:
class Clock extends React.Component {
// ...
updateClock() {
const currentTime = new Date();
this.setState({
hours: currentTime.getHours(),
minutes: currentTime.getMinutes(),
seconds: currentTime.getSeconds(),
ampm: currentTime.getHours() >= 12 ? 'pm' : 'am'
})
}
// ...
}

The component will be mounted on the page and in one second (1000
milliseconds) it updates the current time. However, it won't be reset again. We
can simply call the setTimer() function again at the end of the function:

class Clock extends React.Component {

// ...
updateClock() {
const currentTime = new Date();
this.setState({
// ...
})
this.setTimer();
}
// ...
}

Now the component itself might rerender slower than the timeout function
gets called again, which would cause a rerendering bottleneck and needlessly
using up precious battery on mobile devices. Instead of calling the setTimer()
function after we call this.setState() , we can pass a second argument to the
this.setState() function which will be guaranteed to be called after the state
has been updated.
class Clock extends React.Component {
// ...
updateClock() {
const currentTime = new Date();
this.setState({
// ...
}, this.setTimer);
}
// ...
}

12:11:48 am
Update our activity list
We can update our Header component in our activity list we've been working
on through the last section. When the user clicks on the search icon () in
the corner, we'll want to show the <input /> component.

Timeline 

Knowing what we know now with this.state , we can now update the view to
add a conditional rendering of the <input /> :
class Header extends React.Component {
constructor(props) {
super(props);

this.state = {
searchVisible: false
}
}

// toggle visibility when run on the state

showSearch() {
this.setState({
searchVisible: !this.state.searchVisible
})
}

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 (
<div className="header">
<div className="fa fa-more"></div>

<span className="title">
{this.props.title}
</span>

{/* Adding an onClick handler to call the showSearch button */}

<div
onClick={this.showSearch.bind(this)}
className="fa fa-search searchIcon"></div>
</div>
)
}
}

Some things to keep in mind

When we call this.setState() with an object argument, it
will perform a shallow merge of the data into the object
available via this.state and then will rerender the
component.

We generally only want to keep values in our state that we'll

use in the render() function. From the example above with
our clock, notice that we stored the hours , minutes , and
seconds in our state. It's usually a bad idea to store objects or
calculations in the state that we don't plan on using in the
render function as it can cause unnecessary rendering and
wasteful CPU cycles.

As we noted at the top of this section, it's preferred to use props when
available not only for performance reasons, but because stateful components
are more difficult to test.

Today we've updated our components to be stateful and now have a handle on
how to make a component stateful when necessary. Tomorrow we'll dive into
the lifecycle of a component and when/how to interact with the page.
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.

Congrats! We've made it to the end of the first week on React and we've
already covered so much ground. We just finished working with stateful
components to keep track of a component's internal state. Today, we're going
to pause on implementation and talk a bit about how a component lives in an
application. That is, we'll talk about the component's lifecycle.

As React mounts our application, it gives us some hooks where we can insert
our own functionality at different times in the component's lifecycle. In order
to hook into the lifecycle, we'll need to define functions on our component
which React calls at the appropriate time for each hook. Let's dive into the
first lifecycle hook:

componentWillMount() /
componentDidMount()
When a component is defined on a page in our application, we can't depend
upon it being available in the DOM immediately as we're defining virtual
nodes. Instead, we have to wait until the component itself has actually
mounted in the browser. For functionality that we need to run when it has
been mounted, we get two different hooks (or functions) we can define. One
that is called just before the component is due to be mounted on the page and
one that is called just after the component has been mounted.

What does mounting mean?

Since we're defining virtual representations of nodes in our DOM tree with
React, we're not actually defining DOM nodes. Instead, we're building up an
in-memory view that React maintains and manages for us. When we talk
about mounting, we're talking about the process of converting the virtual
components into actual DOM elements that are placed in the DOM by
React.

This is useful for things such as fetching data to populate the component. For
instance, let's say that we want to use our activity tracker to display github
events, for example. We will want to load these events only when the data
itself is going to be rendered.

Recall we defined our Content component in our activity list:

class Content extends React.Component {
render() {
const {activities} = this.props; // ES6 destructuring

return (
<div className="content">
<div className="line"></div>

{/* Timeline item */}

{activities.map((activity) => (
<ActivityItem
activity={activity} />
))}

</div>
)
}
}

Let's update the Content component to make a request to the github.com

events api (https://developer.github.com/v3/activity/events/) and use the
response to display the activities. As such, we'll need to update the state of
the object.

Github activity 

4 months ago
fullstackreact/react-yelp-clone
vigosan started

4 months ago
fullstackreact/react-native-ﬁrestack
caveman started

4 months ago
fullstackreact/react-native-ﬁrestack
jamesryancooper started

4 months ago
fullstackreact/react-native-oauth
element6 started

As we did yesterday, let's update our component to be stateful by setting

this.state to an object in the constructor
class Content extends React.Component {
constructor(props) {
super(props);

this.state = {
activities: []
}
}

// ...
}

Now, we'll want to make an HTTP request when the component itself is
getting ready to be mounted (or just after it mounts). By defining the function
componentWillMount() (or componentDidMount() ) in our component, React runs
the method just before it mounts in the DOM. This is a perfect spot for us to
add a GET request.

Let's update the Content component with the request to the github api. Since
we'll only want to display a small list, let's take the latest four events.

We've stored a static JSON file of github data that we'll load
directly from source here (we'll get back to making AJAX
requests in a few days) using promises. For now, let's focus on
how we'll implement updating our component with new data:

class Content extends React.Component {

// ...
componentWillMount() {
this.setState({activities: data});
}
// ...
}
Notice that we didn't change anything else from our Content component and
it just works.

componentWillUpdate() /
componentDidUpdate()
Sometimes we'll want to update some data of our component before or after
we change the actual rendering. For instance, let's say we want to call a
function to set up the rendering or call a function set when a component's
props are changed. The componentWillUpdate() method is a reasonable hook
to handle preparing our component for a change (as long as we don't call
this.setState() to handle it as it will cause an infinite loop).

Since we won't really need to handle this in-depth, we won't worry about
setting up an example here, but it's good to know it exists. A more common
lifecycle hook we'll use is the componentWillReceiveProps() hook.

componentWillReceiveProps()
React will call a method when the component is about to receive new props .
This is the first method that will be called when a component is going to
receive a new set of props. Defining this method is a good time to look for
updates to specific props as it gives us an opportunity to calculate changes
and update our component's internal state.

This is the time when we can update our state based on new props.

One thing to keep in mind here is that even though the

componentWillReceiveProps() method gets called, the value of
the props may not have changed. It's always a good idea to
check for changes in the prop values.
For instance, let's add a refresh button to our activity list so our users can
request a rerequest of the github events api.

Github activity 

4 months ago
fullstackreact/react-yelp-clone
vigosan started

4 months ago
fullstackreact/react-native-ﬁrestack
caveman started

4 months ago
fullstackreact/react-native-ﬁrestack
jamesryancooper started

4 months ago
fullstackreact/react-native-oauth
element6 started

 Refresh

We'll use the componentWillReceiveProps() hook to ask the component to

reload it's data. As our component is stateful, we'll want to refresh this state
with new data, so we can't simply update the props in a component. We can
use the componentWillReceiveProps() method to tell the component we want a
refresh.

For instance, let's add a button on our containing element that passes a
requestRefresh boolean prop to tell the Content component to refresh.
class Container extends React.Component {
constructor(props) {
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 (
<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>
</Panel>
)
}
}

Using this new prop (the requestRefresh prop), we can update the
activities from our state object when it changes value.
class Content extends React.Component {
constructor(props) {
super(props);

this.state = {
loading: false, // <~ set loading to false
activities: []
}
}

// Update the data when the component mounts

componentDidMount() {
this.updateData();
}

componentWillReceiveProps(nextProps) {
// Check to see if the requestRefresh prop has changed
if (nextProps.requestRefresh !== this.props.requestRefresh) {
this.setState({loading: true}, this.updateData);
}
}

// Call out to github data and refresh directory

updateData() {
this.setState({
loading: false,
activities: data
}, this.props.onComponentRefresh);
}

render() {
const {loading, activities} = this.state;

return (
<div className="content">
<div className="line"></div>
{/* Show loading message if loading */}
{loading && <div>Loading</div>}
{/* Timeline item */}
{activities.map((activity) => (
<ActivityItem
activity={activity} />
))}

</div>
)
}
}

componentWillUnmount()
Before the component is unmounted, React will call out to the
componentWillUnmount() callback. This is the time to handle any clean-up
events we might need, such as clearing timeouts, clearing data, disconnecting
websockets, etc.

For instance, with our clock component we worked on last time, we set a
timeout to be called every second. When the component is ready to unmount,
we want to make sure we clear this timeout so our JavaScript doesn't continue
running a timeout for components that don't actually exist.

12:12:31 am
Recall that our timer component we built looks like this:
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = this.getTime();
}

componentDidMount() {
this.setTimer();
}

setTimer() {
this.timeout = setTimeout(this.updateClock.bind(this), 1000);
}

updateClock() {
this.setState(this.getTime, this.setTimer);
}

getTime() {
const currentTime = new Date();
return {
hours: currentTime.getHours(),
minutes: currentTime.getMinutes(),
seconds: currentTime.getSeconds(),
ampm: currentTime.getHours() >= 12 ? 'pm' : 'am'
}
}

// ...
}

When our clock is going to be unmounted, we'll want to clear the timeout we
create in the setTimer() function on the component. Adding the
componentWillUnmount() function takes care of this necessary cleanup.
class Clock extends React.Component {
// ...
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
}
}
// ...
}

These are a few of the lifecycle hooks we can interact with in the React
framework. We'll be using these a lot as we build our react apps, so it's a good
idea to be familiar with them, that they exist, and how to hook into the life of a
component.

We did introduce one new concept in this post which we glossed over: we
added a callback on a component to be called from the child to it's parent
component. In the next section, we're going to look at how to define and
document the prop API of a component for usage when sharing a component
across teams and an application in general.
PropTypes

We're looking at how to make reusable React components

double click totoday
selection
so that not only can we share our components across apps and
teams.

Phew! We made it to week two (relatively unscathed)! Through this point,

we've talked through most of the basic features of React ( props , state , life-
cycle hooks, JSX, etc.). In this section, we're going to look a bit at annotating
our components.

PropTypes
You may have noticed we use props quite a bit in our components. For the
most part, we'll expect these to be a particular type or set of types (aka an
object or a string ). React provides a method for defining and validating
these types that allow us to easily expose a component API.

Not only is this a good practice for documentation purposes, it's great for
building reusable react components
(https://facebook.github.io/react/docs/reusable-components.html).

The React.PropTypes object exports a bunch of different types which we can

use to define what type a component's prop should be. We can define these
using the propTypes method in the ES6 class-style React prop:
class Clock extends React.Component {
// ...
}

Clock.propTypes = {
// key is the name of the prop and
// value is the PropType
}

Using the React.createClass() form, we'll define a key called

propTypes . For instance, we can rewrite the form of the Clock
component as:

const Clock = React.createClass({

proptypes: {}
});

From within this prop , we can define an object which has the key of a prop as
the name of the prop we are defining and a value defines the type (or types) it
should be defined as.

For instance, the Header component we built a few days ago accepts a a prop
called title and we expect it to be a string. We can define it's type to be a
string as such:

class Header extends React.Component {

// ...
}

Header.propTypes = {
title: React.PropTypes.string
}
React hasexample
type example
a lot of types toclass class
choose from, exported on the React.PropTypes
object and even allows for us to define a custom object type. Let's look at an
overall list of available types:

Basic types
React exposes a few basic types we can use out of the box.

type example class

String 'hello' React.PropTypes.string
Number 10, 0.1 React.PropTypes.number
Boolean true / false React.PropTypes.bool
const say => (msg) => console.log("Hello
Function React.PropTypes.func
world")
Symbol Symbol("msg") React.PropTypes.symbol
Object {name: 'Ari'} React.PropTypes.object
Anything 'whatever', 10, {}

It's possible to tell React we want it to pass through anything that can be
rendered by using React.PropTypes.node :

type example class

A rendererable10, 'hello' React.PropTypes.node

Clock.propTypes = {
title: React.PropTypes.string,
count: React.PropTypes.number,
isOn: React.PropTypes.bool,
onDisplay: React.PropTypes.func,
symbol: React.PropTypes.symbol,
user: React.PropTypes.object,

name: React.PropTypes.node
}

We've already looked at how to communicate from a parent component to a

child component using props . We can communicate from a child component
to a parent component using a function. We'll use this pattern quite often
type example
when we want to example aclass
manipulate class
parent component from a child.

Collection types
We can pass through iterable collections in our props . We've already seen
how we can do this when we passed through an array with our activities. To
declare a component's proptype as an array, we can use the
React.PropTypes.array annotation.

We can also require that an array holds only objects of a certain type using
React.PropTypes.arrayOf([]) .

type example class

Array [] React.PropTypes.array
Array of numbers [1, 2, 3] React.PropTypes.arrayOf([type])
Enum ['Red', 'Blue'] React.PropTypes.oneOf([arr])

It's possible to describe an object that can be one of a few different types as
well using React.PropTypes.oneOfType([types]) .

Clock.propTypes = {
counts: React.PropTypes.array,
users: React.PropTypes.arrayOf(React.PropTypes.object),
alarmColor: React.PropTypes.oneOf(['red', 'blue']),
description: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.instanceOf(Title)
]),
}

Object types
It's possible to define types that need to be of a certain shape or instance of a
certain class.

type example class

type example
example
class class
Object {name: 'Ari'} React.PropTypes.object
Number object {count: 42} React.PropTypes.objectOf()
Instance new Message() React.PropTypes.objectOf()
Object shape {name: 'Ari'} React.PropTypes.shape()

Clock.propTypes = {
basicObject: React.PropTypes.object,

numbers: React.PropTypes
.objectOf(React.PropTypes.numbers),

messages: React.PropTypes
.instanceOf(Message),

contactList: React.PropTypes.shape({
name: React.PropTypes.string,
phone: React.PropTypes.string,
})
}

React types
We can also pass through React elements from a parent to a child. This is
incredibly useful for building templates and providing customization with the
templates.

type example class

Element <Title /> React.PropTypes.element

Clock.propTypes = {
displayEle: React.PropTypes.element
}

When we use element, React expects that we'll be able to accept a single child
component. That is, we won't be able to pass multiple elements.
type example class
// Invalid for elements
<Clock displayElement={
<div>Name</div>
<div>Age</div>
}></Clock>
// Valid
<Clock displayElement={
<div>
<div>Name</div>
<div>Age</div>
</div>
}></Clock>

Requiring types
It's possible to require a prop to be passed to a component by appending any
of the proptype descriptions with .isRequired :

Clock.propTypes = {
title: React.PropTypes.name.isRequired,
}

Setting a prop as required is very useful for times when the component is
dependent upon a prop to be passed in by it's parent component and won't
work without it.

Custom types
Finally, it's also possible to pass a function to define custom types. We can do
this for a single prop or to validate arrays. The one requirement for the
custom function is that if the validation does not pass, it expects we'll return
an Error object:

type example class

Custom 'something_crazy' function(props, propName, componentName) {}
['something', React.PropTypes.arrayOf(function(props,
CustomArray 'crazy'] propName, componentName) {})
Clock.propTypes = {
userWithName: (props, propName, componentName) => {
if (!props[propName] || !props[propName].name) {
return new Error(
`Invalid ${propName}: No name property defined
for component ${componentName}`
)
}
},

usersWithNames: React.PropTypes
.arrayOf((props, propName, componentName) => {
if (!props[propName] || !props[propName].name) {
return new Error(
`Invalid ${propName}: No name property defined
for component ${componentName}`
)
}
})
}

Default props
Sometimes we want to be able to set a default value for a prop. For instance,
our <Header /> component, we built yesterday might not require a title to be
passed. If it's not, we'll still want a title to be rendered, so we can define a
common title instead by setting it's default prop value.

To set a default prop value, we can use the defaultProps object key on the
component.

Header.defaultProps = {
title: 'Github activity'
}
When using the React.createClass() form, we can define an
object key called getDefaultProps() which is expected to
return an object with the default values of props.

React.createClass({
getDefaultProps: () => ({
name: 'Github activity'
})
})

Phew, today we went through a lot of documentation. It's always a good idea
to build our resuable components using the propTypes and defaultProps
attributes of components. Not only will it make it easier to communicate
across developers, it'll be much easier when we return to our components
after leaving them for a few days. Next, we'll get back to code and start
integrating some style into our components.
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.

Through this point, we haven't touched the styling of our components beyond
attaching CSS class names to components. Today, we'll spend time working
through a few ways how to style our React components to make them look
great, yet still keeping our sanity.

Let's look at a few of the different ways we can style a component.

1. CasCasding Stylesheets (CSS)

2. Inline styles
3. Styling libraries

CSS
Using CSS to style our web applications is a practice we're already familiar
with and is nothing new. If you've ever written a web application before, you
most likely have used/written CSS. In short, CSS is a way for us to add style to
a DOM component outside of the actual markup itself.
Using CSS alongside React isn't novel. We'll use CSS in React just like we use
CSS when not using React. We'll assign ids/classes to components and use
CSS selectors to target those elements on the page and let the browser handle
the styling.

As an example, let's style our Header component we've been working with a
bit.

Timeline 

Let's say we wanted to turn the header color orange using CSS. We can easily
handle this by adding a stylesheet to our page and targeting the CSS class of
.header in a CSS class.

Recall, the render function of our Header component currently looks like this:
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 (
<div className="header">
<div className="fa fa-more"></div>

<span className="title">
{this.props.title}
</span>

<div className="fa fa-search searchIcon"></div>

</div>
)
}

We can target the header by defining the styles for a .header class in a
regular css file. As per-usual, we'll need to make sure we use a <link /> tag to
include the CSS class in our HTML page. Supposing we define our styles in a
file called styles.css in the same directory as the index.html file, this <link
/> tag will look like the following:

<link rel="stylesheet" type="text/css" href="styles.css">

Let's fill in the styles for the Header class names:

.header {
background: rgba(251, 202, 43, 1);
}
.header, .fa, .title, .searchIcon {
color: #333333;
}

Timeline 

One of the most common complaints about CSS in the first place is the
cascading feature itself. The way CSS works is that it cascades (hence the
name) parent styles to it's children. This is often a cause for bugs as classes
often have common names and it's easy to overwrite class styles for non-
specific classes.

Using our example, the class name of .header isn't very specific. Not only
could the page itself have a header, but content boxes on the page might,
articles, even ads we place on the page might have a class name of .header .

One way we can avoid this problem is to use something like

css modules (https://glenmaddern.com/articles/css-modules)
to define custom, very unique CSS class names for us. There is
nothing magical about CSS modules other than it forces our
build-tool to define custom CSS class names for us so we can
work with less unique names. We'll look into using CSS
modules a bit later in our workflow.

React provides a no-so-new method for avoiding this problem entirely by

allowing us to define styles inline along with our JSX.

Inline styles
Adding styles to our actual components not only allow us to define the styles
inside our components, but allow us to dynamically define styles based upon
different states of the app.

React gives us a way to define styles using a JavaScript object rather than a
separate CSS file. Let's take our Header component one more time and
instead of using css classes to define the style, let's move it to inline styles.

Defining styles inside a component is easy using the style prop. All DOM
elements inside React accept a style property, which is expected to be an
object with camel-cased keys defining a style name and values which map to
their value.

For example, to add a color style to a <div /> element in JSX, this might look
like:

<div style={{color: 'blue'}}>

This text will have the color blue
</div>

This text will have the color blue

Notice that we defined the styles with two braces ( {} )

surrounding it. As we are passing a JavaScript object within a
template tag, the inner brace is the JS object and the outer is
the template tag.

Another example to possibly make this clearer would be to pass a

JavaScript object defined outside of the JSX, i.e.

render() {
const divStyle = {color: 'blue'};
return (<div style={divStyle}>
This text will have the color blue
</div>);
}
In any case, as these are JS-defined styles, so we can't use just any ole' css
style name (as background-color would be invalid in JavaScript). Instead, React
requires us to camel-case the style name.

camelCase (https://en.wikipedia.org/wiki/CamelCase) is
writing compound words using a capital letter for every word
with a capital letter except for the first word, like
backgroundColor and linearGradient .

To update our header component to use these styles instead of depending on

a CSS class definition, we can replace the className prop with a style prop
instead:
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 (
<div style={{
backgroundColor: 'rgba(251, 202, 43, 1)'
}}>
<div
style={{color: '#333333'}}
className="fa fa-more"></div>

<span style={{color: '#333333'}}>

{this.props.title}
</span>

{/* Adding an onClick handler to call the showSearch button */}

<div
style={{color: '#333333'}}
onClick={this.showSearch.bind(this)}
className="fa fa-search searchIcon"></div>
</div>
)
}

Our header will be orange again.

Timeline 
Styling libraries
The React community is a pretty vibrant place (which is one of the reasons it is
a fantastic library to work with). There are a lot of styling libraries we can use
to help us build our styles, such as Radium (https://formidable.com/open-
source/radium/) by Formidable labs.

Most of these libraries are based upon workflows defined by React developers
through working with React.

Radium allows us to define common styles outside of the React component

itself, it auto-vendor prefixes, supports media queries (like :hover and
:active ), simplifies inline styling, and kind of a lot more.

We won't dive into Radium in this post as it's more outside the scope of this
series, but knowing other libraries are good to be aware of, especially if you're
looking to extend the definitions of your inline styles.

Now that we know how to style our components, we can make some good
looking ones without too much trouble. In the next section, we'll get right
back to adding user interactivity to our components.
Interactivity

Today we'll walk through how to add interactivity to our

applications to make them engaging and dynamic.

Through this point, we've built our few handful of components without adding
much user interaction. Today, we're going to change that.

User interaction
The browser is an event-driven application. Everything that a user does in the
browser fires an event, from clicking buttons to even just moving the mouse.
In plain JavaScript, we can listen for these events and attach a JavaScript
function to interact with them.

For instance, we can attach a function to the mousemove browser event with
the JS:
const ele = document.querySelector('#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 results in the following functionality:

Move your mouse to see the demo

In React, however we don't have to interact with the browser's event loop in
raw JavaScript as React provides a way for us to handle events using props .

For instance, to listen for the mousemove event from the (rather unimpressive)
demo above in React, we'll set the prop onMouseMove (notice the camelcasing
of the event name).

<div onMouseMove={(evt) => console.log(evt)}>

Move the mouse
</div>

React provides a lot of props we can set to listen for different browser events,
such as click, touch, drag, scroll, selection events, and many more (see the
events (https://facebook.github.io/react/docs/events.html) documentation
for a list of all of them).

Mouse is at -1, -1

To see some of these in action, the following is a small demo of some of the
props we can pass on our elements. Each text element in the list set the prop
it lists. Try playing around with the list and seeing how the events are called
and handled within the element.
The source code for the demo is included in today's post. Feel
free to peruse the code after the article, if you're interested.

Event handlers

 onMouseMove 

 onMouseUp 

 onMouseDown 

 onClick 

 onDoubleClick 

 onMouseLeave 

 onTouchStart 

 onTouchEnd 

We'll be using the onClick prop quite a bit all throughout our apps quite a bit,
so it's a good idea to be familiar with it. In our activity list header, we have a
search icon that we haven't hooked up yet to show a search box.

The interaction we want is to show a search <input /> when our users click
on the search icon. Recall that our Header component is implemented like
this:
class Header extends React.Component {
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 (
<div className="header">
<div className="fa fa-more"></div>

<span className="title">
{this.props.title}
</span>

<div className="fa fa-search searchIcon"></div>

</div>
)
}
}

When the user clicks on the <div className="fa fa-search searchIcon">

</div> element, we'll want to run a function to update the state of the
component so the searchInputClasses object gets updated. Using the
onClick handler, this is pretty simple.

Let's make this component stateful (it needs to track if the search field should
be showing or not). We can convert our component to be stateful using the
constructor() function:
class Header extends React.Component {
constructor(props) {
super(props);

this.state = {
searchVisible: false
}
}
}

What is a constructor function?

In JavaScript, the constructor function is a function that runs when 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 when the
JavaScript runtime creates a new object. We'll use the constructor method
to set up instance variables on the object as it runs right when the object is
created.

When using the ES6 class syntax to create an object, we have to call the
super() method before any other method. Calling the super() function
calls the parent class's constructor() function. We'll call it with the same
arguments as the constructor() function of our class is called with.

When the user clicks on the button, we'll want to update the state to say that
the searchVisible flag gets updated. Since we'll want the user to be able to
close/hide the <input /> field after clicking on the search icon for a second
time, we'll toggle the state rather than just set it to true.

Let's create this method to bind our click event:

class Header extends React.Component {
// ...

showSearch() {
this.setState({
// Toggles the searchVisible variable
// between truthy and falsy
searchVisible: !this.state.searchVisible
})
}
}

Finally, we can attach a click handler (using the onClick prop) on the icon
element to call our new showSearch() method. The entire updated source for
our Header component looks like this:
class Header extends React.Component {
constructor(props) {
super(props);

this.state = {
searchVisible: false
}
}

// toggle visibility when run on the state

showSearch() {
this.setState({
searchVisible: !this.state.searchVisible
})
}

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 (
<div className="header">
<div className="fa fa-more"></div>

<span className="title">
{this.props.title}
</span>

{/* Adding an onClick handler to call the showSearch button */}

<div
onClick={this.showSearch.bind(this)}
className="fa fa-search searchIcon"></div>
</div>
)
}
}

Try clicking on the search icon and watch the input field appear and disappear
(the animation effect is handled by CSS animations).

Event handlers 

Input events
Whenever we build a form in React, we'll use the input events offered by
React. Most notably, we'll use the onSubmit() and onChange() props most
often.

Let's update our search box demo to capture the text inside the search field
when it updates. Whenever an <input /> field has the onChange() prop set, it
will call the function every time the field changes. When we click on it and start
typing, the function will be called.

Using this prop, we can capture the value of the field in our state.

Rather than updating our <Header /> component, let's create a new child
component to contain a <form /> element. By moving the form-handling
responsibilities to it's own form, we can simplify the <Header /> code and we
can call up to the parent of the header when our user submits the form (this is
a usual React pattern).

Let's create a new component we'll call SearchForm . This new component is a
stateful component as we'll need to hold on to the value of the search input
(track it as it changes):
class SearchForm extends React.Component {
constructor(props) {
super(props);

this.state = {
searchText: ''
}
}
}

Now, we already have the HTML for the form written in the <Header />
component, so let's grab that from our Header component and return it from
our SearchForm.render() function:

class SearchForm extends React.Component {

// ...
render() {
let searchInputClasses = ["searchInput"];

// Update the class array if the state is visible

if (this.state.searchVisible) {
searchInputClasses.push("active");
}

return (
<input
type="search"
className={searchInputClasses}
placeholder="Search ..." />
);
}
}

Notice that we lost the styles on our <input /> field. Since we no longer have
the searchVisible state in our new component, we can't use it to style the
<input /> any longer. However, we can pass a prop from our Header
component that tells the SearchForm to render the input as visible.
Let's define the searchVisible prop (using React.PropTypes , of course) and
update the render function to use the new prop value to show (or hide) the
search <input /> . We'll also set a default value for the visibility of the field to
be false (since our Header shows/hides it nicely):

class SearchForm extends React.Component {

// ...
render() {
let searchInputClasses = ["searchInput"];

if (this.props.searchVisible) {
searchInputClasses.push("active");
}

return (
<input
type="search"
className={searchInputClasses}
placeholder="Search ..." />
);
}
}
SearchForm.propTypes = {
searchVisible: React.PropTypes.bool
}
SearchForm.defaultProps = {
searchVisible: false
}

Search box Search ... 

Now we have our styles back on the <input /> element, let's add the
functionality for when the user types in the search box, we'll want to capture
the value of the search field. We can achieve this workflow by attaching the
onChange prop to the <input /> element and passing it a function to call
every time the <input /> element is changed.
class SearchForm extends React.Component {
// ...

updateSearchInput(event) {
// This will be called
// when the search input changes
}

render() {
let searchInputClasses = ["searchInput"];

if (this.props.searchVisible) {
searchInputClasses.push("active");
}

return (
<input
type="search"
className={searchInputClasses}
{/* Add this line */}
onChange={this.updateSearchInput.bind(this)}
placeholder="Search ..." />
);
}
}

When we type in the field, the updateSearchInput() function will be called.

We'll keep track of the value of the form by updating the state. In the
updateSearchInput() function, we can call directly to this.setState() to
update the state of the component.

The value is held on the event object's target as

event.target.value .
class SearchForm extends React.Component {
// ...
updateSearchInput(event) {
this.setState({
searchText: event.target.value
});
}
// ...
}

Controlled vs. uncontrolled

We're creating what's known as an uncontrolled component as we're not
setting the value of the <input /> element. We can't provide any validation
or post-processing on the input text value as it stands right now.

If we want to validate the field or manipulate the value of the <input />
component, we'll have to create what is called a controlled component,
which really just means that we pass it a value using the value prop. A
controlled component version's render() function would look like:

class SearchForm extends React.Component {

render() {
return (
<input
type="search"
value={this.state.searchText}
className={searchInputClasses}
onChange={this.updateSearchInput.bind(this)}
placeholder="Search ..." />
);
}
}

As of now, we have no way to actually submit the form, so our user's can't
really search. Let's change this. We'll want to wrap the <input /> component
in a <form /> DOM element so our users can press the enter key to submit
the form. We can capture the form submission by using the onSubmit prop on
the <form /> element.

Let's update the render() function to reflect this change.

class SearchForm extends React.Component {

// ...

submitForm(event) {
// prevent the form from reloading the entire page
event.preventDefault();
}

render() {
let searchInputClasses = ["searchInput"];

if (this.props.searchVisible) {
searchInputClasses.push("active");
}

return (
<form onSubmit={this.submitForm.bind(this)}>
<input
type="search"
className={searchInputClasses}
onChange={this.updateSearchInput.bind(this)}
placeholder="Search ..." />
</form>
);
}
}

We immediately call event.preventDefault() on the

submitForm() function. This stops the browser from bubbling
the event up which would causes the default behavior of the
entire page to reload (the default function when a browser
submits a form).
Now when we type into the <input /> field and press enter, the submitForm()
function gets called with the event object.

So... great, we can submit the form and stuff, but when do we actually do the
searching? For demonstration purposes right now, we'll pass the search text
up the parent-child component chain so the Header can decide what to
search.

The SearchForm component certainly doesn't know what it's

searching, so we'll have to pass the responsibility up the chain.
We'll use this callback strategy quite a bit.

In order to pass the search functionality up the chain, our SearchForm will
need to accept a prop function to call when the form is submitted. Let's define
a prop we'll call onSubmit that we can pass to our SearchForm component.
Being good developers, we'll also add a default prop value and a propType for
this onSubmit function. Since we'll want to make sure the onSubmit() is
defined, we'll set the onSubmit prop to be a required prop:

class SearchForm extends React.Component {

}
SearchForm.propTypes = {
searchVisible: React.PropTypes.bool,
onSubmit: React.PropTypes.func.isRequired
}
SearchForm.defaultProps = {
searchVisible: false,
onSubmit: () => {} // prevent explosions
}

When the form is submitted, we can call this function directly from the props .
Since we're keeping track of the search text in our state, we can call the
function with the searchText value in the state so the onSubmit() function
only gets the value and doesn't need to deal with an event.
class SearchForm extends React.Component {
// ...
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);
}
}

Now, when the user presses enter we can call this onSubmit() function passed
in the props by our Header component.

Search box Search ... 

This demo logs to the console the search value. Try typing into
the search box and pressing enter. You'll see a console log with
the up-to-date value.

We can use this SearchForm component in our Header component and pass it
the two props we've defined ( searchVisible and onSubmit ):
class Header extends React.Component {
constructor(props) {
super(props);

this.state = {
searchVisible: false
}
}

// toggle visibility when run on the state

showSearch() {
this.setState({
searchVisible: !this.state.searchVisible
})
}

handleSearch(val) {
// Called when the
}

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 (
<div className="header">
<div className="fa fa-more"></div>

<span className="title">
{this.props.title}
</span>

{/* Adding an onClick handler to call the showSearch button */}

<div
onClick={this.showSearch.bind(this)}
className="fa fa-search searchIcon"></div>
</div>
)
}
}

Now we have a search form component we can use and reuse across our app.
Of course, we're not actually searching anything yet. Let's fix that and
implement search.

Implementing search
To implement search in our component, we'll want to pass up the search
responsibility one more level from our Header component to a container
component we'll call Panel .

First things first, let's implement the same pattern of passing a callback to a
parent component from within a child component from the Panel container
to the Header component.

On the Header component, let's update the propTypes for a prop we'll define
as a prop called onSearch :

class Header extends React.Component {

// ...
}
Header.propTypes = {
onSearch: React.PropTypes.func
}

Inside the Header component's 'submitForm()' function, call this onSearch()

prop we will pass into it:
class Header extends React.Component {
// ...
submitForm(val) {
this.props.onSearch(val);
}
// ...
}
Header.propTypes = {
onSearch: React.PropTypes.func
}

Notice that our virtual tree looks like this:

When the <SearchForm /> is updated, it will pass along it's awareness of
the search input's change to it's parent, the <Header /> , when it will pass
along upwards to the <Panel /> component. This method is very common
in React apps and provides a good set of functional isolation for our
components.

Back in our Panel component we built on day 7, we'll pass a function to the
Header as the onSearch() prop on the Header . What we're saying here is that
when the search form has been submitted, we want the search form to call
back to the header component which will then call to the Panel component to
handle the search.

Since the Header component doesn't control the content listing, the Panel
component does, we have to pass the responsibility one more level up, as
we're defining here.
In any case, our Panel component is essentially a copy of our Content
component we previously worked on:
const rootUrl = `https://api.github.com`
const endpoint = `/users/fullstackreact/events`

class Panel extends React.Component {

constructor(props) {
super(props);

this.state = {
loading: false, // <~ set loading to false
activities: []
}
}

componentDidMount() {this.updateData();}
componentWillReceiveProps(nextProps) {
// Check to see if the requestRefresh prop has changed
if (nextProps.requestRefresh !== this.props.requestRefresh) {
this.setState({loading: true}, this.updateData);
}
}

// Call out to github and refresh directory

updateData() {
this.setState({
loading: false,
activities: data
}, this.props.onComponentRefresh);
}

render() {
const {loading, activities} = this.state;

return (
<div>
<Header
title="Github activity" />
<Content
requestRefresh={loading}
onComponentRefresh={this.onComponentRefresh.bind(this)}
fetchData={this.updateData.bind(this)} />
</div>
)
}
}

Let's update our state to include a searchFilter string, which will just be the
searching value:

class Panel extends React.Component {

constructor(props) {
super(props);

this.state = {
loading: false,
searchFilter: '',
activities: []
}
}
}

In order to actually handle the searching, we'll need to pass a onSearch()

function to our Header component. Let's define an onSearch() function in our
Panel component and pass it off to the Header props in the render()
function:
class Panel extends React.Component {
// ...
// 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 we did here was add a handleSearch() function and pass it to the header.
Now when the user types in the search box, the handleSearch() function on
our Panel component will be called.

To actually implement search, we'll need to keep track of this string and
update our updateData() function to take into account search filtering. First,
let's set the searchFilter on the state. We can also force the Content to
reload the data by setting loading to true, so we can do this in one step:
class Panel extends React.Component {
// ...
handleSearch(val) {
this.setState({
searchFilter: val,
loading: true
});
}
// ...
}

Lastly, let's update our updateData() function to take search into account.

updateData() {
const {activities, searchFilter} = this.state;

// filter function
const filter = searchFilter !== '' &&
(e => e.actor.login.match(new RegExp(searchFilter)));

json = activities.filter(filter);
if (activities.length == 0) {
this.setState({activities: json})
}
return json;
}

Although this might look complex, it's actually nearly identical to our existing
updateData() function with the exception of the fact that we updated our
fetch() result to call the filter() method on the json collection.

All the collection.filter() function does is run the function passed in for
every element and it filters out the values that return falsy values, keeping the
ones that return truthy ones. Our search function simply looks for a match on
the Github activity's actor.login (the Github user) to see if it regexp-matches
the searchFilter value.
With the updateData() function updated, our search is complete.

Github activity 

There is nothing here

Now we have a 3-layer app component that handles search from a nested
child component. We jumped from beginner to intermediate with this post.
Pat yourself on the back. This was some hefty material. Make sure you
understand this because we'll use these concepts we covered today quite
often.

In the next section, we'll jump out and look at building pure components.
Pure Components

React offers several different methods for creating components.

Today we'll talk about the final method of creating components,
the function stateless pure component.

We've looked at a few different ways to build react components. One method
we left out up through this point is the stateless component/functional
method of building React components.

As we've seen up through this point, we've only worked through building
components using the React.Component and React.createClass() methods.
For more performance and simplicity, React also allows us to create pure,
stateless components using a normal JavaScript function.

A Pure component can replace a component that only has a render function.
Instead of making a full-blown component just to render some content to the
screen, we can create a pure one instead.

Pure components are the simplest, fastest components we can write. They are
easy to write, simple to reason about, and the quickest component we can
write. Before we dive into why these are better, let's write one, or heck a
couple!
// The simplest one
const HelloWorld = () => (<div>Hello world</div>);

// A Notification component
const Notification = (props) => {
const {level, message} = props;
return (
<div className=`alert alert-${level}`>
{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 they are just functions, right? Yep! Since they are just functions, it's really
easy to test using pure JavaScript. The idea is that if React knows the props
that are sent into a component, it can be deterministic in knowing if it has to
rerender or not. The same props in equal the same output virtual DOM.

In React, functional components are called with an argument of props (similar

to the React.Component constructor class), which are the props it's called with
as well as with the current context of the component tree.
For instance, let's say we want to rewrite our original Timer component using
functional components as we want to give our users a dynamic way to set
their own clock styles (24 hour clock vs. 12, different separators, maybe they
don't want to display the seconds, etc).

12:13:12 pm

12:13 pm
We can break up our clock into multiple components where we can use each
block of time as an individual component. We might break them up like so:

const Hour = (props) => {

let {hours} = props;
if (hours == 0) { hours = 12; }
if (props.twelveHours) { hours = 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, we can place individual components as through they are full-
blown React components (they are):

<div>Minute: <Minute minutes={12} /></div>

<div>Second: <Second seconds={51} /></div>

Minute: 12
Second: 51

We can refactor our clock component to accept a format string and break up
this string selecting only the components our user is interested in showing.
There are multiple ways we can handle this, like forcing the logic into the
Clock component or we can create another stateless component that accepts
a format string. Let's do that (easier to test):

export 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 ugly with the key and {...props} thingie in there. React gives
us some helpers for mapping over children and taking care of handling the
unique key for each child through the React.Children object.

The render() function of our Clock component can be greatly simplified

thanks to the Formatter component into this:
class Clock extends React.Component {
render() {
return (
<div className={styles.clock}>
<Formatter {...this.props} state={this.state} />
</div>
)
}
}

Not only is our Clock component much simpler, but it's so much easier to test.
It also will help us transition to using a data state tree, like Flux/Redux
frameworks, but more on those later.

Uhh... so why care?

Advantages to using functional components in React are:

We can do away with the heavy lifting of components, no constructor,

state, life-cycle madness, etc.
There is no this keyword (i.e. no need to bind)
Presentational components (also called dumb components) emphasize UI
over business logic (i.e. no state manipulation in the component)
Encourages building smaller, self-contained components
Highlights badly written code (for better refactoring)
FAST FAST FAST FAST FAST
They are easy to reuse

You might say why not use a functional component? Well, some of the
disadvantage of using a functional component are some of the advantages:

No life-cycle callback hooks

Limited functionality
There is no this keyword
Overall, it's a really good idea to try to prefer using functional components
over their heavier React.Component cousins. When we get to talking about
data management in React, we'll see how we can use these presentational
components with data as pure props .

Nice work today. We've successfully achieved React rank after today. We now
know the three ways to make a React Component. Tomorrow, we'll get set up
using/building React apps with the package management tool shipped by the
React team: create-react-app .
create-react-app

Today, we're going to add a build process to store common build

actions so we can easily develop and deploy our applications.

The React team noticed that there is a lot of configuration required (and the
community helped bloat -- us included) to run a React app. Luckily, some
smart folks in the React team/community got together and built/released an
official generator app that makes it much easier to get up and running quickly.

create-react-app
The create-react-app (https://github.com/facebookincubator/create-react-
app) project is released through Facebook helps us get up and running quickly
with a React app on our system with no custom configuring required on our
part.

The package is released as a Node (https://nodejs.org/) Package

(https://www.npmjs.com/package/create-react-app) and can be installed
using npm .
A plug for nvm
The Node (https://nodejs.org) homepage has simple documentation on
how to install node, if you don't already have it installed on your system.

We recommend using the nvm (https://github.com/creationix/nvm) or the

n (https://github.com/tj/n) version management tools. These tools make it
incredibly easy to install/use multiple versions of node on your system at
any point.

With node installed on our system, we can install the create-react-app

package:

npm install --global create-react-app

With create-react-app installed globally, we'll be able to use the create-

react-app command anywhere in our terminal.
Let's create a new app we'll call 30days using the create-react-app command
we just installed. Open a Terminal window in a directory where you want to
create your app.

In terminal, we can create a new React application using the command and
adding a name to the app we want to create.

create-react-app 30days && cd 30days

Let's start our app in the browser. The create-react-app package comes with
a few built-in scripts it created for us (in the package.json file). We can start
editing our app using the built-in webserver using the npm start command:

npm start
This command will open a window in Chrome to the default app it created for
us running at the url: http://localhost:3000/ (http://localhost:3000/).

Let's edit the newly created app. Looking at the directory structure it created,
we'll see we have a basic node app running with a public/index.html and a
few files in the src/ directory that comprise our running app.
Let's open up the src/App.js file and we'll see we have a very basic
component that should all look familiar. It has a simple render function which
returns the result we see in the Chrome window.

The index.html file has a single <div /> node with the id of #root , where the
app itself will be mounted for us automatically (this is handled in the
src/index.js file). Anytime we want to add webfonts, style tags, etc. we can
load them in the index.html file.

Shipping
We'll get to deployment in a few weeks, but for the time being know that the
generator created a build command so we can create minified, optimize
versions of our app that we can upload to a server.

We can build our app using the npm run build command in the root of our
project:

npm run build

With that, we now have a live-reloading single-page app (SPA) ready for
development. Tomorrow, we'll use this new app we built diving into rendering
multiple components at run-time.
Repeating Elements

Today we're going to work through how to display multiple

components in preparation for pulling in external data into our
app.

Up through this point, we've been building a basic application without any
external data. Before we get there (we'll start on this functionality tomorrow),
let's look over something we glossed over in the previous two weeks:

Repeating elements
We've already seen this before where we've iterated over a list of objects and
render multiple components on screen. Before we add too much complexity in
our app with loading external data, today we'll take a quick peek at how to
repeat components/elements in our app.

Since JSX is seen as plain JavaScript by the browser, we can use any ole'
JavaScript inside the template tags in JSX. We've already seen this in action. As
a quick demo:
const a = 10;
const ShowA = () => (<div>{a}</div>)
const MultipleA = () => (<div>{a * a}</div>)

ReactDOM.render(<div>
<ShowA />
<MultipleA />
</div>, document.getElementById('root'));

10
100

Notice the things inside of the template tags {} look like simple JavaScript.
That's because it is just JavaScript. This feature allows us to use (most) native
features of JavaScript inside our template tags including native iterators, such
as map and forEach .

Let's see what we mean here. Let's convert the previous example's a value
from a single integer to a list of integers:

const a = [1, 10, 100, 1000];

We can map over the a variable here inside our components and return a list
of React components that will build the virtual DOM for us.

const App = (props) => {

return (
<ul>
{a.map(i => {
return <li>{i}</li>
})}
</ul>
)
}
What is the map() function?

The map function is a native JavaScript built-in function on the array. It

accepts a function to be run on each element of the array, so the function
above will be run four times with the value of i starting as 1 and then it
will run it again for the second value where i will be set as 10 and so on
and so forth.

1
10
100
1000

Let's update the app we created on day 12 with our App component here. Let's
open up our src/App.js file and replace the content of the App component
with this source. Cleaning up a few unused variables and your src/App.js
should look similar to this:

import React from 'react';

import './App.css';

const a = [1, 10, 100, 1000];

const App = (props) => {
return (
<ul>
{a.map(i => {
return <li>{i}</li>
})}
</ul>
)
}

export default App;

Starting the app again with the command generated by the create-react-app
command: npm start , we can see the app is working in the browser!
However, if we open the developer console, we'll see we have an error printed
out. This error is caused by the fact that React doesn't know how to keep track
of the individual components in our list as each one just looks like a <li />
component.

For performance reasons, React uses the virtual DOM to attempt limit the
number of DOM elements that need to be updated when it rerenders the view.
That is if nothing has changed, React won't make the browser update anything
to save on work.

This feature is really fantastic for building web applications, but sometimes we
have to help React out by providing unique identifiers for nodes. Mapping over
a list and rendering components in the map is one of those times.

React expects us to uniquely identify components by using a special prop: the

key prop for each element of the list. The key prop can be anything we want,
but it must be unique for that element. In our example, we can use the i
variable in the map as no other element in the array has the same value.

Let's update our mapping to set the key:

import React from 'react';
import './App.css';

const a = [1, 10, 100, 1000];

const App = (props) => {
return (
<ul>
{a.map(i => {
return <li key={i}>{i}</li>
})}
</ul>
)
}

export default App;

Children
We talked about building a parent-child relationship a bit earlier this week,
but let's dive a bit more into detail about how we get access to the children
inside a parent component and how we can render them.

On day 11, we built a <Formatter /> component to handle date formatting

within the Clock component to give our users flexibility with their own
custom clock rendering. Recall that the implementation we created is actually
pretty ugly and relatively complex.
export 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>;
}

We can use the React.Children object to map over a list of React objects and
let React do this heavy-lifting. The result of this is a much cleaner Formatter
component (not perfect, but functional):
export 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>)
}
React.cloneElement
We have yet to talk about the React.cloneElement() function, so let's look
at it briefly here. Remember WWWWWAAAAAYYYYY back on day 2 we
looked at how the browser sees JSX? It turns it into JavaScript 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 new component instance (if we already have one),
sometimes we'll want to copy it or add custom props/children to the
component so we can retain the same props it was created with. We can
use React.cloneElement() to handle this for us.

The React.cloneElement() has the same API as the React.createElement()

function where the arguments are:

1. The ReactElement we want to clone

2. Any props we want to add to the instance
3. Any children we want it to have.

In our Formatter example, we're creating a copy 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 provides some nice utility functions for dealing
with children. Our Formatter example above uses the map function to iterate
through the children and clone each one in the list. It creates a key (if
necessary) for each one, freeing us from having to manage the uniqueness
ourselves.

Let's use the React.Children.map() function to update our App component:

const App = (props) => {
return (
<ul>
{React.Children.map(a, i => <li>{i}</li>)}
</ul>
)
}

Back in the browser, everything still works.

There are several other really useful methods in the React.Children object
available to us. We'll mostly use the React.Children.map() function, but it's
good to know about the other ones available
(https://facebook.github.io/react/docs/top-level-api.html#react.children) to
us. Check out the documentation
(https://facebook.github.io/react/docs/top-level-api.html#react.children)
for a longer list.

Up through this point, we've only dealt with local data, not really focusing on
remote data (although we did briefly mention it when building our activity
feed component). Tomorrow we're going to get into interacting with a server
so we can use it in our React apps.
Great work today!
Fetching Remote Data

We're ready to make an external request to fetch data! Today

we're looking at the first step of making a call to an external API.

Our apps, until this point have largely been static. Even the data we displayed
from Github was static data included in our project. Our apps are really only as
interesting as the data we use, so let's make our apps more interesting.

Querying for remote data

The normal browser workflow is actually a synchronous one. When the
browser receives html, it parses the string of html content and converts it into
a tree object (this is what we often refer to as the DOM object/DOM tree).

When the browser parses the DOM tree, as it encounters remote files (such as
<link /> and <script /> tags), the browser will request these files (in
parallel), but will execute them synchronously (so as to maintain their order
they are listed in the source).

What if we want to get some data from off-site? We'll make requests for data
that's not available at launch time to populate data in our app. However, it's
not necessarily that easy to do because of the asynchronous nature of external
API requests.
Essentially, what this means is that we'll have to handle with JavaScript code
after an unknown period of time as well actually make an HTTP request.
Luckily for us, other people have dealt with this problem for a long time and
we now have some pretty nice ways of handling it.

Starting with handling how we'll be making an HTTP request, we'll use a
library (called fetch , which is also a web standard
(https://fetch.spec.whatwg.org/), hopefully) to make the http requesting
easier to deal with.

Fetch
In order to use fetch, we'll need to install the library in our app we previously
created. Let's open up a terminal window again and use npm to install the
whatwg-fetch library (an implementation of fetch ). In the same directory
where we created our application, let's call:

npm install --save whatwg-fetch

With the library installed, we can make a request to an off-site server. In order
to get access to the fetch library, we'll need to import the package in our
script. Let's update the top few lines of our src/App.js file adding the second
line:

import React, { Component } from 'react';

import 'whatwg-fetch';
// ...

The whatwg-fetch object is unique in that it is one of the few

libraries that we'll use which attaches it's export on the
global object (in the case of the browser, this object is
window ). Unlike the react library, we don't need to get a
handle on it's export as the library makes it available on the
global object.

With the whatwg-fetch library included in our project, we can make a request
using the fetch() api. However, before we can actually start using the
fetch() api, we'll need to understand what Promises are and how they work
to deal with the asynchronous we discussed in the introduction.

We'll pick up with promises tomorrow. Good job getting through week two
and see you tomorrow!
Introduction to Promises

Today, we're going to look at what we need to know to

understand Promises from a high-level, so we can build our our
applications using this incredibly useful concept.

Yesterday (/articles/30-days-of-react-day-14/) we installed the fetch library

into our create-react-app project we started on day 12 (/articles/30-days-
of-react-day-12/). Today we'll pick up from yesterday discussing the concept
and the art of Promises (https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Promise).

What is a promise
As defined by the Mozilla, a Promise object is used for handling asynchronous
computations which has some important guarantees that are difficult to
handle with the callback method (the more old-school method of handling
asynchronous code).

A Promise object is simply a wrapper around a value that may or may not be
known when the object is instantiated and provides a method for handling the
value after it is known (also known as resolved ) or is unavailable for a failure
reason (we'll refer to this as rejected ).
Using a Promise object gives us the opportunity to associate functionality for
an asynchronous operation's eventual success or failure (for whatever reason).
It also allows us to treat these complex scenarios by using synchronous-like
code.

For instance, consider the following synchronous code where we print out the
current time in the JavaScript console:

var currentTime = new Date();

console.log('The current time is: ' + currentTime);

This is pretty straight-forward and works as the new Date() object represents
the time the browser knows about. Now consider that we're using a different
clock on some other remote machine. For instance, if we're making a Happy
New Years clock, it would be great to be able to synchronize the user's
browser with everyone elses using a single time value for everyone so no-one
misses the ball dropping ceremony.

For instance, this demo fetches the local time from a remote server (hosted on
heroku at https://fullstacktime.herokuapp.com/pst/now.json
(https://fullstacktime.herokuapp.com/pst/now.json), so no guarantees about
uptime).

Get the current time

We'll be making a request from:

https://fullstacktime.herokuapp.com/PST/now.json

This demo uses an instance of the Chronic web server (http://chronic.herokuapp.com/). It is

hosted on Heroku at https://fullstacktime.herokuapp.com
(https://fullstacktime.herokuapp.com). Check out the docs there for more information.

Suppose we have a method that handles getting the current time for the clock
called getCurrentTime() that fetches the current time from a remote server.
We'll represent this now with a setTimeout() that returns the time (like it's
making a request to a slow API):
function getCurrentTime() {
// Get the current 'global' time from an API
return setTimeout(function() {
return new Date();
}, 2000);
}
var currentTime = getCurrentTime()
console.log('The current time is: ' + currentTime);

Our console.log() log value will return the timeout handler id, which is
definitely not the current time. Traditionally, we can update the code using a
callback to get called when the time is available:

What if there is an error with the rest? How do we catch the error and define
a retry or error state?
function getCurrentTime(onSuccess, onFail) {
// Get the current 'global' time from an API
return setTimeout(function() {
// randomly decide if the date is retrieved or not
var didSucceed = Math.random() >= 0.5;
if (didSucceed) {
var currentTime = new Date();
onSuccess(currentTime);
} else {
onFail('Unknown error');
}
}, 2000);
}
getCurrentTime(function(currentTime) {
console.log('The current time is: ' + currentTime);
}, function(error) {
console.log('There was an error fetching the time');
});

Now, what if we want to make a request based upon the first requests value?
As a short example, let's reuse the getCurrentTime() function inside again (as
though it were a second method, but allows us to avoid adding another
complex-looking function):
function getCurrentTime(onSuccess, onFail) {
// Get the current 'global' time from an API
return setTimeout(function() {
// randomly decide if the date is retrieved or not
var didSucceed = Math.random() >= 0.5;
console.log(didSucceed);
if (didSucceed) {
var currentTime = new Date();
onSuccess(currentTime);
} else {
onFail('Unknown error');
}
}, 2000);
}
getCurrentTime(function(currentTime) {
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 with asynchronousity in this way can get complex quickly. In addition,
we could be fetching values from a previous function call, what if we only want
to get one... there are a lot of tricky cases to deal with when dealing with
values that are not yet available when our app starts.

Enter Promises
Using promises, on the other hand helps us avoid a lot of this complexity
(although is not a silver bullet solution). The previous code, which could be
called spaghetti code can be turned into a neater, more synchronous-looking
version:
function getCurrentTime(onSuccess, onFail) {
// Get the current 'global' time from an API using Promise
return new Promise((resolve, reject) => {
setTimeout(function() {
var didSucceed = Math.random() >= 0.5;
didSucceed ? resolve(new Date()) : reject('Error');
}, 2000);
})
}
getCurrentTime()
.then(currentTime => getCurrentTime())
.then(currentTime => {
console.log('The current time is: ' + currentTime);
return true;
})
.catch(err => console.log('There was an error:' + err))

This previous source example is a bit cleaner and clear as to what's going on
and avoids a lot of tricky error handling/catching.

To catch the value on success, we'll use the then() function available on the
Promise instance object. The then() function is called with whatever the
return value is of the promise itself. For instance, in the example above, the
getCurrentTime() function resolves with the currentTime() value (on
successful completion) and calls the then() function on the return value
(which is another promise) and so on and so forth.

To catch an error that occurs anywhere in the promise chain, we can use the
catch() method.
We're using a promise chain in the above example to create a
chain of actions to be called one after another. A promise
chain sounds complex, but it's fundamentally simple.
Essentially, we can "synchronize" a call to multiple
asynchronous operations in succession. Each call to then() is
called with the previous then() function's return value.

For instance, if we wanted to manipulate the value of the getCurrentTime()

call, we 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))

Single-use guarantee
A promise only ever has one of three states at any given time:

pending
fulfilled (resolved)
rejected (error)

A pending promise can only every lead to either a fulfilled state or a rejected
state once and only once, which can avoid some pretty complex error
scenarios. This means that we can only ever return a promise once. If we want
to rerun a function that uses promises, we need to create a new one.

Creating a promise
We can create new promises (as the example shows above) using the Promise
constructor. It accepts a function that will get run with two parameters:

The onSuccess (or resolve ) function to be called on success resolution

The onFail (or reject ) function to be called on failure rejection

Recalling our function from above, we can see that we call the resolve()
function if the request succeeded and call the reject() function if the
method returns an error condition.

var promise = new Promise(function(resolve, reject) {

// call resolve if the method succeeds
resolve(true);
})
promise.then(bool => console.log('Bool is true'))

Now that we know what promises are, how to use, and how to create them, we
can actually get down to using the fetch() library we installed yesterday.
Displaying Remote Data

Our front-end applications are only as interesting as the data we

display in them. Today, let's actually start making a request for
data and get it integrated into our app.

As of today, we've worked through promises, built our app using the npm
packager, installed our remote object fetching library ( whatwg-fetch ) and
we're finally ready to integrate remote data into our application.

Fetching data
Let's get into using the fetch library we installed on day 14 (/articles/30-
days-of-react-day-14/).

For simplicity purposes, let's break out our demo from yesterday where we
fetched the current time from an API server:

Get the current time

PST A chronic string messageUpdate
(such as
request
7 hours from now)

We'll be making a request from:

https://fullstacktime.herokuapp.com/PST/now.json
This demo uses an instance of the Chronic web server (http://chronic.herokuapp.com/). It is
hosted on Heroku at https://fullstacktime.herokuapp.com
(https://fullstacktime.herokuapp.com). Check out the docs there for more information.

This demo react component makes a request to the API server and reports
back the current time from it's clock. Before we add the call to fetch, let's
create a few stateful components we'll use to display the time and update the
time request.

Walls of code
We realize the next few lines are walls of code, which we generally try to
avoid, especially without discussing how they work. However, since we're
not talking about how to create a component in detail here, yet we still
want to fill out a complete component, we've made an exception.

Please leave us feedback (links at the bottom) if you prefer us to change

this approach for today.

First, the basis of the wrapper component which will show and fetch the
current time looks like the following. Let's copy and paste this code into our
app at src/App.js :
import React from 'react';
import 'whatwg-fetch';
import './App.css';
import TimeForm from './TimeForm';

class App extends React.Component {

constructor(props) {
super(props);
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.bind(this)}>
Get the current time
</button>}
{currentTime && <div>The current time is: {currentTime}</div>}
<TimeForm
onFormSubmit={this.handleFormSubmit.bind(this)}
onFormChange={this.handleChange.bind(this)}
tz={tz}
msg={'now'}
/>
<p>We'll be making a request from: <code>{apiUrl}</code></p>
</div>
)
}
}
export default App;

The previous component is a basic stateful React component as we've created.

Since we'll want to show a form, we've included the intended usage of the
TimeForm let's create next.

Let's create this component in our react app using create-react-app . Add the
file src/TimeForm.js into our project:

touch src/TimeForm.js

Now let's add content. Our TimeForm component might look like the following
code.:
import React from 'react'
const timezones = ['PST', 'MST', 'MDT', 'EST', 'UTC']

export class TimeForm extends React.Component {

constructor(props) {
super(props);

const {tz, msg} = this.props;

this.state = {tz, msg};
}

_handleChange(evt) {
typeof this.props.onFormChange === 'function' &&
this.props.onFormChange(this.state);
}

_changeTimezone(evt) {
const tz = evt.target.value;
this.setState({tz}, this._handleChange);
}

_changeMsg(evt) {
const msg =
encodeURIComponent(evt.target.value).replace(/%20/, '+');
this.setState({msg}, this._handleChange);
}

_handleFormSubmit(evt) {
evt.preventDefault();
typeof this.props.onFormSubmit === 'function' &&
this.props.onFormSubmit(this.state);
}

render() {
const {tz} = this.state;

return (
<form onSubmit={this._handleFormSubmit.bind(this)}>
<select
onChange={this._changeTimezone.bind(this)}
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.bind(this)}
/>
<input
type="submit"
value="Update request"
/>
</form>
)
}
}

export default TimeForm;

With these Components created, let's load up our app in the browser after
running it with npm start and we'll see our form (albeit not incredibly
beautiful yet). Of course, at this point, we won't have a running component as
we haven't implemented our data fetching. Let's get to that now.

Fetching data
As we said yesterday, we'll use the fetch() API with promise support. When
we call the fetch() method, it will return us a promise, where we can handle
the request however we want. We're going to make a request to our heroku-
based API server (so start-up might be slow if it hasn't been run in a while).

We're going to be building up the URL we'll request as it represents the time
query we'll request on the server.

I've already defined the method getApiUrl() in the App component, so let's
fill that function in.
The chronic api server accepts a few variables that we'll customize in the
form. It will take the timezone to along with a chronic message. We'll start
simply and ask the chronic library for the pst timezone and the current time
( now ):

class App extends React.Component {

constructor(props) {
super(props);
this.state = {
currentTime: null, msg: 'now'
}
}
// ...
getApiUrl() {
const {tz, msg} = this.state;
const host = 'https://fullstacktime.herokuapp.com';
return `${host}/${tz}/${msg}.json`;
}

Now, when we call getApiUrl() , the URL of the next request will be returned
for us. Now, finally, let's implement our fetch() function. The fetch()
function accepts a few arguments that can help us customize our requests.
The most basic GET request can just take a single URL endpoint. The return
value on fetch() is a promise object, that we explored in-depth yesterday.

Let's update our fetchCurrentTime() method to fetch the current time from
the remote server. We'll use the .json() method on the response object to
turn the body of the response from a JSON object into JavaScript object and
then update our component by setting the response value of the dateString
as the currentTime in the component state:
class App extends React.Component {

fetchCurrentTime() {
fetch(this.getApiUrl())
.then(resp => resp.json())
.then(resp => {
const currentTime = resp.dateString;
this.setState({currentTime})
})
}
// ...
}

The final piece of our project today is getting the data back from the form to
update the parent component. That is, when the user updates the values from
the TimeForm component, we'll want to be able to access the data in the App
component. The TimeForm component already handles this process for us, so
we just need to implement our form functions.

When a piece of state changes on the form component, it will call a prop
called onFormChange . By defining this method in our App component, we can
get access to the latest version of the form.

In fact, we'll just call setState() to keep track of the options the form allows
the user to manipulate:

class App extends React.Component {

handleChange(newState) {
this.setState(newState);
}

Finally, when the user submits the form (clicks on the button or presses enter
in the input field), we'll want to make another request for the time. This means
we can define our handleFormSubmit prop to just call the fetchCurrentTime()
method:
class App extends React.Component {

handleFormSubmit(evt) {
this.fetchCurrentTime();
}

Get the current time

PST A chronic string messageUpdate
(such as
request
7 hours from now)

We'll be making a request from:

https://fullstacktime.herokuapp.com/PST/now.json

This demo uses an instance of the Chronic web server (http://chronic.herokuapp.com/). It is

hosted on Heroku at https://fullstacktime.herokuapp.com
(https://fullstacktime.herokuapp.com). Check out the docs there for more information.

Try playing around with the demo and passing in different chronic options. It's
actually quite fun.

In any case, today we worked on quite a bit to get remote data into our app.
However, at this point, we only have a single page in our single page app. What
if we want to show a different page in our app? Tomorrow, we're going to start
adding multiple pages in our app so we can feature different views.
Client-side Routing

Most, if not all of our applications will have multiple views in our
single-page application. Let's dive right into creating multiple
views for our applications using React Router.

We've made it through 16 days already! Pat yourself on the back... but not for
too long... there is still a lot more.

Right now, our app is limited to a single page. It's pretty rare to find any
complex application that shows a single view. For instance, an application
might have a login view where a user can log in or a search results page that
shows a user a list of their search results. These are two different views with
two different page structures.

Let's see how we can change that with our app today.

We'll use the very popular react-router (https://github.com/reactjs/react-

router) library for handling different links. In order to use the react-router
library, we'll need to install it using the npm package manager:

npm install --save react-router

With react-router installed, we'll import a few packages from the library and
update our app architecture. Before we make those updates, let's take a step
back and from a high level look at how and why we architect our application
this way.

Conceptually with React, we've seen how we can create tree structures using
components and nested components. Using this perspective with a single
page app with routes, we can think of the different parts of a page as children.
Routing in a single page app from this perspective is the idea that we can take
a part of a subtree and switch it out with another subtree. We can then
dynamically switch out the different trees in the browser.

In other words, we'll define a React component that acts as a root component
of the routable elements. We can then tell React to change a view, which can
just swap out an entire React component for another one as though it's a
completely different page rendered by a server.

We'll take our App component and define all of the different routes we can
make in our app in this App component. We'll need to pull some components
from the react-router package. These components we'll use to set up this
structure are as follows:

<Router />
This is the component we'll use to define the root or the routing tree. The
<Router /> component is the component where React will replace it's
children on a per-route basis.

We'll use the <Route /> component to create a route available at a specific
location available at a url. The <Route /> component is mounted at page URLs
that match a particular route set up in the route's configuration props .

hashHistory

There are several methods for handling client-side routing. Newer browsers
are built with a browser history, which handles client-side defined routing in
JavaScript.

One older, compatible way of handling client-side navigation is to use the #

(hash) mark denoting the application endpoint. We'll use this method. We'll
need this object imported to tell the browser this is how we want to handle
our navigation.

From the app we created a few days ago's root directory, let's update our
src/App.js to import these modules:

import React from 'react';

import './App.css';

import { Router, Route, hashHistory } from 'react-router'

export class App extends React.Component {

render() {
// ...
}
}

export default App;

Now let's define the routing root in the DOM using the <Router />
component we imported in the render() function. We'll define the type of
routing we are using using the history prop. In this example, we'll use the
universally-compatible hash history type:

import { Router, Route, hashHistory } from 'react-router'

export class App extends React.Component {

render() {
return (
<Router history={hashHistory}>
{/* routes will go here */}
</Router>
)
}
}

Now let's define our first route. To define a route, we'll use the <Route />
component export from react-router and pass it a few props:

path - The path for the route to be active

component - The component that defines the view of the route

Let's define the a route at the root path / with a stateless component that
just displays some static content:

const Home = () => (<div><h1>Welcome home</h1></div>)

export class App extends React.Component {

render() {
return (
<Router history={hashHistory}>
<Route path="/" component={Home} />
</Router>
)
}
}
Welcome home

Loading this page in the browser, we can see we get our single route at the
root url. Not very exciting. Let's add a second route that shows an about page
at the /about URL.

const Home = () => (<div><h1>Welcome home</h1></div>)

const About = () => (<div><h1>About</h1></div>)

export class App extends React.Component {

render() {
return (
<Router history={hashHistory}>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
)
}
}

In our view we'll need to add a link (or an anchor tag -- <a /> ) to enable our
users to travel freely between the two different routes.

Wouldn't it be nice to have a common heading between the two? Another way
of saying that is wouldn't it be nice to contain the two routes within another
component that adds the links between the two?

Nesting routes
One nice feature of the react-router is it's ability to build a heirarchy of
routes so that one route can build upon another.

Let's say we have a common header that we want to render with both routes.
We can place a <Header /> component in the parent component and then
render each of the routes inside this new component.

Let's create a container component for the two routes. Personally, I like to
create a new directory to handle these containers, so let's add one to our
generated app. In a terminal window at the root of our generated app, let's run
the following to create the directory and our <Index /> container object:

mkdir src/containers
touch src/containers/Index.js

Let's create a container component inside our new src/containers/Index.js

file. In order to show our routes, we'll need to show the children of the routes.

Children prop

As we've discussed, React supports a nested tree structure, which allows us to

build these complex layouts with multiple children. Within a single element,
we can get access to the content underneath a component through the
this.props.children prop.

Using this prop allows us to display the routes inside our new Index
component using the {this.props.children} in the render() function. Inside
the new src/containers/Index.js file, let's populate it with:
import React from 'react';

export class Index extends React.Component {

render() {
return (
<div className="app">
<h2>Container goes here</h2>
<div className="page">
{this.props.children}
</div>
</div>
)
}
}

export default Index;

Using this.props.children , the Index container component can now be used

as a wrapper component for our routes. Let's update the src/App.js page to
use our new Index component. We'll nest the <Index /> container
component using a <Router /> component at a URL we want it to wrap. For
the following example, any route that's under the root / route will be
wrapped with the <Index /> component:
import { Index } from './containers/Index';

const Home = () => (<div><h1>Welcome home</h1></div>)

const About = () => (<div><h1>About</h1></div>)

export class App extends React.Component {

render() {
return (
<Router history={hashHistory}>
<Route path="/" component={Index}>
<Route path="home" component={Home} />
<Route path="about" component={About} />
</Route>
</Router>
)
}
}

And if we load this in our browser...

Container goes here

Uh oh... it doesn't show any route yet. We need to tell react-router what our
default link is for the path at / . We can do this by adding a IndexRoute export
from react-router . Let's update our src/App.js one more time by defining an
IndexRoute inside our nested index component:
import {
Router, Route, hashHistory, IndexRoute
} from 'react-router';
import { Index } from './containers/Index';

const Home = () => (<div><h1>Welcome home</h1></div>)

const About = () => (<div><h1>About</h1></div>)

export class App extends React.Component {

render() {
return (
<Router history={hashHistory}>
<Route path="/" component={Index}>
<IndexRoute component={Home} />
<Route path="home" component={Home} />
<Route path="about" component={About} />
</Route>
</Router>
)
}
}

Back in our browser, we have the Home component being rendered nicely as
the initial route.

Container goes here

Welcome home

Navigation
Let's actually implement a navigation bar to use in the Index component.
In order to do that, we'll need to use one more export from the react-router
package, the Link component. The Link component takes a to prop to
define which route we want the link to route our user.

Let's add a Navbar component to our app. Inside of the root directory where
we created our react app, let's add the components/Nav directory and create a
Navbar.js file inside of there to export our Navbar:

mkdir -p src/components/Nav
touch src/components/Nav/Navbar.js

Inside this new file, we'll use the Link export from react-router and make
the two links of home and about :

import React from 'react';

import { Link } from 'react-router';

export const Navbar = () => (

<div className="navbar">
<Link
className="link"
to="/home"
activeClassName="active">
Home
</Link>
<Link
className="link"
to="/about"
activeClassName="active">
About
</Link>
</div>
);

export default Navbar;

We can add this Navbar component to our Index component from before to
display a common navigation bar at the top underneath the root route.
Let's import this Navbar component inside our Index component and render
it along with the rest of the content:

import React from 'react';

import {Navbar} from '../components/Nav/Navbar';

export class Index extends React.Component {

render() {
return (
<div className="app">
<Navbar />
<div className="page">
{this.props.children}
</div>
</div>
)
}
}

export default Index;

In the browser, these links will now render with the links defined:

Home About

Welcome home
A views/ directory
Even though our views are stateless component functions, we gain a lot of
separation by breaking these views into their own files.

We'll refer to these other files in future iterations of our app, so if you'd like
to keep them similar, we can break them out into their own files.

mkdir -p src/views/{Home,About}
touch src/views/Home/Home.js
touch src/views/About/About.js

Update the content of these two files with the export of the function
defining the component. I.e. the src/views/Home/Home.js file should
include the route:

export const Home = () => (

<div><h1>Welcome home</h1></div>
);
export default Home;

Now we have multiple pages in our application. We've looked at how we can
render these routes through nested components with just a few of the exports
from react-router .

react-router provides so much more functionality that we don't have time to

cover in our brisk intro to routing. More information is available at:

https://github.com/reactjs/react-router/tree/master/docs
(https://github.com/reactjs/react-router/tree/master/docs)
fullstack react routing (https://fullstackreact.com)

Tomorrow, we're going to be starting integration with Redux. Here's where we

start integrating more complex data handling.
Introduction to Flux

Handling data inside a client-side application is a complex task.

Today we're looking at a one method of handling complex data
proposed by Facebook called the Flux Architecture.

As our applications get bigger and more complex, we'll need a better data
handling approach. With more data, we'll have more to keep track of.

Our code is required to handle more data and application state with new
features. From asynchronous server responses to locally-generated,
unsynchronized data, we have to not only keep track of this data, but also tie it
to the view in a sane way.

Recognizing this need for data management, the Facebook team released a
pattern for dealing with data called Flux
(https://facebook.github.io/flux/docs/overview.html).

Today, we're going to take a look at the Flux architecture, what it is and why it
exists.

What is flux
Flux is a pattern for managing how data flows through a React application. As
we've seen, the preferred method of working with React components is
through passing data from one parent component to it's children components.
The Flux pattern makes this model the default method for handling data.

There are three distinct roles for dealing with data in the flux methodology:

Dispatcher
Stores
Views (our components)

The major idea behind Flux is that there is a single-source of truth (the stores)
and they can only be updated by triggering actions. The actions are
responsible for calling the dispatcher, which the stores can subscribe for
changes and update their own data accordingly.

When a dispatch has been triggered, and the store updates, it will emit a
change event which the views can rerender accordingly.

This may seem unnecessarily complex, but the structure makes it incredibly
easy to reason about where our data is coming from, what causes it's changes,
how it changes, and lets us track specific user flows, etc.

The key idea behind Flux is:

Data flows in one direction and kept entirely in the stores.

Implementations
Although we can create our own flux implementation, many have already
created some fantastic libraries we can pick from.

Facebook's flux (https://github.com/facebook/flux)

alt (http://alt.js.org/)
nuclear-js (https://optimizely.github.io/nuclear-js/)
Fluxible (http://fluxible.io/)
reflux (https://github.com/reflux/refluxjs)
Fluxxor (http://fluxxor.com/)
flux-react (https://github.com/christianalfoni/flux-react)
And more... many many more
Plug for fullstackreact
We discuss this material in-depth about Flux, using libraries, and even
implementing our own version of flux that suits us best. Check it out at
fullstackreact.com (https://fullstackreact.com)

It can be pretty intense trying to pick the right choice for our applications.
Each has their own features and are great for different reasons. However, to a
large extent, the React community has focused in on using another flux tool
called Redux (http://redux.js.org/).

Redux (http://redux.js.org/)
Redux is a small-ish library that takes it's design inspiration from the Flux
pattern, but is not itself a pure flux implementation. It provides the same
general principles around how to update the data in our application, but in
slightly different way.

Unlike Flux, Redux does not use a dispatcher, but instead it uses pure
functions to define data mutating functions. It still uses stores and actions,
which can be tied directly to React components.

The 3 major principles

(http://redux.js.org/docs/introduction/ThreePrinciples.html) of Redux we'll
keep in mind as we implement Redux in our app are:

Updates are made with pure functions (in reducers)

state is a read-only property
state is the single source of truth (there is only one store in a Redux
app)

One big difference with Redux and Flux is the concept of middleware. Redux
added the idea of middleware that we can use to manipulate actions as we
receive them, both coming in and heading out of our application. We'll discuss
them in further detail in a few days.

In any case, this is a lot of introduction to the flux pattern. Tomorrow we'll
actually start moving our data to use Redux.
Data Management with Redux

With the knowledge of flux and Redux, let's integrate Redux in

our application and walk through connected applications.

Yesterday, we discussed (in light detail) the reason for the Flux pattern, what is
is, the different options we have available to us, as well as introduced Redux
(http://redux.js.org/).

Today, we are going to get back to code and on to adding Redux in our app.
The app we're building with it right now is bare-bones simple, which will just
show us the last time the page fetched the current time. For simplicity for
now, we won't call out to a remote server, just using the JavaScript Date
object.

The first thing we'll have to do to use Redux is install the library. We can use
the npm package manager to install redux . In the root directory of our app we
previously built, let's run the npm install command to install redux:

npm install --save redux

We'll also need to install another package that we'll use with redux, the react-
redux that will help us tie together react and redux :
npm install --save react-redux

Configuration and setup

The next bit of work we need to do is to set up Redux inside of our app. We'll
need to do the following to get it set up:

1. Define reducers
2. Create a store
3. Create action creators
4. Tie the store to our React views
5. Profit

No promises on step 5, but it would be nice, eh?

Precursor
We'll talk terminology as we go, so take this setup discussion lightly
(implementing is more important to get our fingers moving). We'll restructure
our app just slightly (annoying, I know... but this is the last time) so we can
create a wrapper component to provide data down through our app.

Our app will look like:

[Root] -> [App] -> [Router/Routes] -> [Component]

Without delaying any longer, let's move our src/App.js into the
src/containers directory and we'll need to update some of the paths from our
imports at the same time. The new file will need to look like:
import React from 'react';

import {
Router, Route, hashHistory, IndexRoute
} from 'react-router';

// We'll import the Index component from this

// src/containers directory directly
import { Index } from './Index';

// We'll load our views from the `src/views`

// directory
import Home from '../views/Home/Home';
import About from '../views/About/About';

export class App extends React.Component {

export default App;

In addition, we'll need to create a new container we'll call Root which will
wrap our entire <App /> component and make the store available to the rest
of the app. Let's create the src/containers/Root.js file:

touch src/containers/Root.js

For the time being, we'll use a placeholder component here, but we'll replace
this content as we talk about the store. For now, let's export something:
import React from 'react';
import App from './App';

export const Root = (props) => {

return (
<App />
);
}

export default Root;

Finally, let's update the route that we render our app in the src/index.js file
to use our new Root container instead of the App it previously used.

import React from 'react';

import ReactDOM from 'react-dom';
import Root from './containers/Root';
import './index.css';

ReactDOM.render(
<Root />,
document.getElementById('root')
);

Next, we'll create a redux module (just made this term up -- kind of, not
really... I wrote about it here
(https://www.fullstackreact.com/articles/better-redux-module-
management/)) with some action creators, a reducer function, and some
types. Finally, we'll wrap this all together by creating a store and passing it
down to the new Root component.

I'm purposely keeping this high-level introduction short, so hang tight if that's
a mouthful, it will all make more sense shortly.

Let's setup the structure to allow us to add redux. We'll do almost all of our
work in a src/redux directory. Let's create that directory and a
src/redux/modules/ directory to create our redux modules.
mkdir -p src/redux/modules
touch src/redux/configureStore.js
touch src/redux/modules/currentTime.js

In order to create a store, we'll use the new src/redux/configureStore.js to

export a function which will be responsible for creating the store.

The src/redux/configureStore.js file will need to export a function that will

return a redux store. The redux package exports a function called
createStore which will create the actual store for us, so let's open up the
src/redux/configureStore.js file and export a function (we'll define shortly)
called configureStore() and import the createStore helper:

import {createStore} from 'redux';

export const configureStore = () => {

// Return the store
}

export default configureStore;

We don't actually return anything in our store quite yet, so let's actually create
the redux store using the createStore function we imported from redux:

import {createStore} from 'redux';

export const configureStore = () => {

const store = createStore();

return store;
}

export default configureStore;

If we load our page in the browser, we'll see we have one giant error and no
page gets rendered.

The error redux is giving us is telling us that we don't have a reducer inside
our store. Without a reducer, it won't know what to do with actions or how to
create the state, etc. In order to move beyond this error, we'll need to define
some reducers:

Reducers
The term reducer is just a fancy way of saying functions that return state.
When we talk about a reducer, we are talking about this single function that
gets executed when an action is fired. It can either handle the action (i.e.
create a new state for it's piece of the state tree) or not handle it and return
the original state.

The reducer function receives two arguments when it's called:

1. The state tree

2. The action which triggered a change

For now, let's create an empty reducer function that always returns the
current state. Let's open up our src/redux/modules/currentTime.js file. We'll
use this file to manage the data we'll keep as the time data as well as any
actions we have that relate to time.

Inside the file, let's export a reducer function that (for now) returns the initial
state.

Let's define this function. Using ES6, we can also set the initial state for the
first time the reducer is called (which redux expects us to return an initial
state):

const initialState = {
currentTime: new Date()
}

export const reducer = (state = initialState, action) => {

return state;
}
This simple reducer function simply returns the initialState
object everytime it is called as the ES6 syntax for a default
argument is set to initialState . The first time the reducer
function is called, it will set the state value to the
initialState value. The next time it's run, the state variable
will be set to initialState .

With the reducer in-hand, we can update the src/redux/configureStore.js

file to use the reducer we just created.

import {createStore} from 'redux';

// import all the exports in `currentTime`
// to an object called `currentTime`
import * as currentTime from './modules/currentTime';

export const configureStore = () => {

const store = createStore(currentTime.reducer);

return store;
}

export default configureStore;

Action creators
With one-half of the equation started (the reducers ), we'll need a way to
trigger updates to the state tree. In Redux, we'll do this with an action.

Actions are POJOs (Plain Ole JavaScript Objects) that must have a type
property to set the type of action that is being performed. The type property
should be a string.

An action creator is a function that is expected to return an action (which is

easy to test).
For our app, we're adding a time listing to our home page. We'll need a way to
tell our application we want to update the current time. Let's create an action
creator to update the time.

Back in the src/redux/modules/currentTime.js file, let's export another two

objects:

the type object which exposes type constants

an actions object that contains the action creators.

We'll define a single action (for the time being) we'll use to trigger a fetch for
the current time. We'll create the action creator as well that will return a
simple action object with a single type of FETCH_NEW_TIME :

export const types = {

'FETCH_NEW_TIME': 'FETCH_NEW_TIME'
};
const initialState = {
currentTime: new Date()
}
// ...
export const actions = {
updateTime: () => ({type: types.FETCH_NEW_TIME})
}

Now, we can call these actions anytime we want, but nothing will happen
without us binding the action creators to the store.dispatch function of our
app.

The simplest way we can export these actions while binding them to the
store is to modify our src/redux/configureStore.js function to return an
object with a bound-actions object. This is pretty easy to accomplish using the
bindActionCreators method exported by redux and by virtue of the way we
set up our app structure.

In the configureStore function, let's import the bindActionCreators . We'll call

this function against the actions we exported from
./src/redux/modules/currentTime.js and the store.dispatch function, like
so:

import {createStore, bindActionCreators} from 'redux';

import * as currentTime from './modules/currentTime';

export const configureStore = () => {

const store = createStore(currentTime.reducer);

const actions = {
currentTime: bindActionCreators(
currentTime.actions,
store.dispatch)
}

// Export an object with `store` and `actions`

return {store, actions};
}

export default configureStore;

Hooking up the store to the view

Let's complete updating the Root wrapper component we previously created
by using the Provider component exported by react-redux .

The Provider component makes the store available to all of our container
components in our application without needing for us to need to pass it in
manually every time.

The Provider component expects a store prop that it expects to be a valid

redux store. We'll also want to send down our bound actions to our child
components, so they can call these actions at any point in the component
tree.

Let's pass the actions to our App component, while sending the store to the
Provider component. In the src/containers/Root.js file, let's update it to
accept the actions and store we'll pass in when we bootstrap our app:
import React from 'react';
import { Provider } from 'react-redux';
import App from './App';

// Using ES6 destructuring of the `props`

// variable so we just get the values of `store`
// and `actions`:
export const Root = ({store, actions}) => {
return (
<Provider store={store}>
<App actions={actions} />
</Provider>
);
}

export default Root;

Finally, let's update the src/index.js where we bootstrap our app to call the
configureStore function to create the store and fetch the actions. In the
src/index.js file, let's update:

import React from 'react';

import ReactDOM from 'react-dom';
import Root from './containers/Root';
import './index.css';

// Create redux store

import configureStore from './redux/configureStore';
const {store, actions} = configureStore();

ReactDOM.render(
<Root store={store} actions={actions} />,
document.getElementById('root')
);

Phew! That's a lot! We don't quite have it to the point where we can share
these actions object to our views yet. In order to send them down the child
component chain, we'll need to update the way that our <Router /> element
creates components so that we can add the actions to it's child element's
props .

In order to do this universally for all our routed components, we can provide a
function to the <Router /> which it will use to create the component
elements. The createElement prop is expected to return a React node as it's
passed in as the first argument (the second being the props it is called with).

Let's update our src/containers/App.js file to include this createElement()

function:

// ...
export class App extends React.Component {
render() {
const createElement = (Component, props) => {
return <Component
actions={this.props.actions}
{...props} />
}
return (
<Router
history={hashHistory}
{/* Create element function */}
createElement={createElement}>
<Route path="/" component={Index}>
<IndexRoute component={Home} />
<Route path="home" component={Home} />
<Route path="about" component={About} />
</Route>
</Router>
)
}
}

export default App;

Now each child Route in the view will get access to the actions object we
created.
Connecting the view
Everything in our app is set-up to use Redux without too much overhead. One
more convenience that redux (through react-redux ) offers is a way to bind
pieces of the state tree to different components using the connect() export.

The connect() function returns a function that expects the 1st argument to be
that of a component. In code, it's not as confusing as it sounds. Let's update
the export default Home line in the src/views/Home (where we'll want to show
the currentTime value) to connect the currentTime branch of our single-state
tree to the <Home /> view (which is passed through as props to the
component):

import React from 'react';

import {connect} from 'react-redux';

export const Home = (props) => {

return (
<div className="content">
<h1>Welcome home!</h1>
<p>This is the home page</p>
</div>
);
}

const mapStateToProps = (state) => {

return {
currentTime: state.currentTime
}
}
export default connect(
mapStateToProps
)(Home);

This connect() function will then automatically pass any of the keys in the
function's first argument as props to the Home component.
In our demo's case, the currentTime prop in the Home component will be
mapped to the state tree key at currentTime . Let's update the Home
component to show the value in the currentTime :

import React from 'react';

import {connect} from 'react-redux';

export const Home = (props) => {

return (
<div className="content">
<h1>Welcome home!</h1>
<p>The time is {currentTime.toString()}</p>
</div>
);
}

const mapStateToProps = (state) => {

return {
currentTime: state.currentTime
}
}
export default connect(
mapStateToProps
)(Home);
Current time: Thu Dec 22 2016 11:14:10 GMT-0800 (PST)

From redux

Although this demo isn't very interesting, it shows we have our Redux app set
up with our data committed to the global state and our view components
mapping the data.

Tomorrow we're going to start triggering updates into our global state as well
as work through combining multiple redux modules together.
Live-updating Our Redux Stores

With Redux in place, let's talk about how we actually modify the
Redux state from within our applications.

Yesterday we went through the difficult part of integrating our React app with
Redux. From here on out, we'll be defining functionality with our Redux setup.

As it stands now, we have our demo application showing the current time. But
there currently isn't any way to update to the new time. Let's modify this now.

Triggering updates
Recall that the only way we can change data in Redux is through an action
creator. We created a single action creator yesterday in the actions object
that is being passed to the Home component.
Current time: Thu Dec 22 2016 11:14:21 GMT-0800 (PST)

From redux

Update

What we want is the ability for our users to update the time by clicking on a
button. In order to add this functionality, we'll have to take two steps:

1. Call the action creator / dispatch the action

2. Handle the action in the reducer

The first step is pretty straightforward as we already have the action being
sent through the Home components props. We can add a <button /> element
with an onClick prop that calls out to the bound action
actions.currentTime.updateTime() .

In the Home component, let's update the source to include this <button /> :
const Home = ({actions, currentTime}) => {
return (
<div>
<p>Current time: {currentTime.toString()}</p>
<button onClick={actions.currentTime.updateTime}>
Update
</button>
</div>
)
}

The second step is equally easy. The reducer function gets called every time
there is an action that's dispatched via the store.

When the user clicks on the button, we're calling the bound action in the
onClick handler which triggers a dispatch on the store. The reducer function
will get called with two arguments:

1. The current state of the tree.

2. The action that was fired.

Inside the reducer function, we can listen for the particular action we're
interested in and return a new state back to update the global state tree.

Let's listen for the FETCH_NEW_TIME action in our reducer and update the
currentTime value of the state when the button is clicked. Inside the reducer
function of src/redux/modules/currentTime.js , let's grow it by adding a switch
statement:
export const types = {
'FETCH_NEW_TIME': 'FETCH_NEW_TIME'
};

export const reducer = (state = initialState, action) => {

switch(action.type) {
case types.FETCH_NEW_TIME:
return {...state, currentTime: new Date()};
default:
return state;
}
}

Now when our user clicks on the button, the action is fired and the reducer
picks it up. Since the action.type is equal to the value of the
types.FETCH_NEW_TIME , it will return a completely new state with a new
currentTime value:

Current time: Thu Dec 22 2016 11:14:21 GMT-0800 (PST)

From redux

Update

Multi-reducers
As it stands now, we have a single reducer for our application. This works for
now as we only have a small amount of simple data and (presumably) only one
person working on this app. Just imagine the headache it would be to develop
with one gigantic switch statement for every single piece of data in our apps...

Ahhhhhhhhhhhhhh...

Redux to the rescue! Redux has a way for us to split up our redux reducers
into multiple reducers, each responsible for only a leaf of the state tree.
We can use the combineReducers() export from redux to compose an object
of reducer functions. For every action that gets triggered, each of these
functions will be called with the corresponding action. Let's see this in action.

Let's say that we (perhaps more realistically) want to keep track of the current
user. Let's create a currentUser redux module in... you guessed it:
src/redux/modules/currentUser.js :

touch src/redux/modules/currentUser.js

We'll export the same four values we exported from the currentTime module...
of course, this time it is specific to the currentUser. We've added a basic
structure here for handling a current user:
export const types = {
'LOGIN': 'LOGIN',
'LOGOUT': 'LOGOUT'
};

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;
}
}

export const actions = {

In order to combine these reducers in our state, we'll use the combineReducers
function. We'll also bind the currentUser.actions object to the
store.dispatch function (just like we did with the currentTime.actions ). In
the src/redux/configureStore.js file:
// ...
// Modules
import * as currentTime from './modules/currentTime';
import * as currentUser from './modules/currentUser';

export const configureStore = () => {

const reducer = combineReducers({
currentTime: currentTime.reducer,
currentUser: currentUser.reducer
})
const store = createStore(reducer);

const actions = {
currentTime:
bindActionCreators(currentTime.actions, store.dispatch),
currentUser:
bindActionCreators(currentUser.actions, store.dispatch)
};

return {store, actions};

}

That's it. Now we have access to our currentUser.actions and we can interact
with the user state as well as the currentTime and not worry about
overwriting or conflicting with the currentTime state as redux will only pass
along the piece of state the reducer is interested in (defined by the key ).

For instance, if we call the actions.currentTime.updateTime() function, the

currentUser.reducer function will get run with only the currentUser part of
the state tree. Redux won't allow us to overwrite another reducer's state.

Note that all reducer functions get triggered on an action call

regardless of the action called.
Authentication (with dummy
data)
With our currentUser established, we have both the state for whether or not a
user is logged in as well as actions for logging in and out.

As our app develops, there are a variety of components that might want to
access this data. Let's start with the Navbar component. The Navbar
component might want to show a "Login" link if the user is not logged in.
Otherwise it would want to show a "Logout" link if the user is.

We can use connect (from the react-redux package) to accomplish this.

We might be tempted to connect Redux directly to the Navbar component.

Although this will work, it's better to try to connect as few components as
possible as they are more difficult to test. Instead, let's connect to the Index
container and use normal React prop passing to pass the Navbar component
the currentUser object.

Let's update the src/containers/Index.js container with the connect() call,

connecting it to the currentUser state:
import React from 'react';
import Navbar from '../components/Nav/Navbar';
import { connect } from 'react-redux';

export class Index extends React.Component {

render() {
const {currentUser} = this.props;
return (
<div className="app">
<Navbar currentUser={currentUser} />
<div className="page">
{this.props.children}
</div>
</div>
)
}
}

export default connect(state => ({

currentUser: state.currentUser
}))(Index);

Now, back in the Navbar , we can use the currentUser prop to show the
appropriate link:
import React from 'react';
import { Link } from 'react-router';

export const Navbar = ({currentUser}) => {

return (
<div className="navbar">
<Link
className="link"
to="/home"
activeClassName="active">
Home
</Link>
<Link
className="link"
to="/about"
activeClassName="active">
About
</Link>
{/* If we have a logged in user, show the login */}
{currentUser.loggedIn ?
<Link
to="/logout"
className="link"
activeClassName="active">Logout</Link> :
<Link
to="/login"
className="link"
activeClassName="active">Login</Link>}
</div>
);
}

export default Navbar;

Phew! This was another hefty day of Redux code. Today, we completed the
circle between data updating and storing data in the global Redux state. In
addition, we learned how to extend Redux to use multiple reducers and
actions as well as multiple connected components.

However, we have yet to make an asynchronous call for off-site data.

Tomorrow we'll get into how to use middleware with Redux, which will give us
the ability to handle fetching remote data from within our app and still use the
power of Redux to keep our data.

Good job today and see you tomorrow!

Redux Middleware

Today, we're looking at the Redux method of managing complex

state changes in our code using Redux middleware.

Yesterday we connected the dots with Redux, from working through reducers,
updating action creators, and connecting Redux to React components. Redux
middleware unlocks even more power which we'll touch on today.

Redux middleware
Middleware generally refers to software services that "glue together" separate
features in existing software. For Redux, middleware provides a third-party
extension point between dispatching an action and handing the action off to
the reducer:

[ Action ] <-> [ Middleware ] <-> [ Dispatcher ]

Examples of middleware include logging, crash reporting, routing, handling

asynchronous requests, etc.

Let's take the case of handling asynchronous requests, like an HTTP call to a
server. Middleware is a great spot to do this.

Our API middleware

We'll implement some middleware that will handle making asynchronous
requests on our behalf.

redux-modules (https://github.com/fullstackreact/redux-
modules)

While we go through the exercise of building our own middleware in this

article, the library redux-modules
(https://github.com/fullstackreact/redux-modules) provides this
middleware out of the box.

Middleware sits between the action and the reducer. It can listen for all
dispatches and execute code with the details of the action.

Continuing with our currentTime redux module, let's build our middleware to
fetch the current time from the server we used a few days ago to actually GET
the time from the API service.

Middleware is basically a function that accepts the store , which is expected

to return a function that accepts the next function, which is expected to
return a function which accepts an action. Confusing? Let's look at what this
means.

The simplest middleware possible

Let's build the smallest middleware we possibly can to understand exactly
what's happening and how to add it to our stack. Let's open up
src/redux/configureStore.js and import the applyMiddleware function from
redux :
import {
createStore,
combineReducers,
bindActionCreators,
applyMiddleware
} from 'redux';

// Modules
import * as currentTime from './modules/currentTime';
import * as currentUser from './modules/currentUser';
// ...

Now the signature of middleware looks like this:

const loggingMiddleware = (store) => (next) => (action) => {

// Our middleware
}

Befuddled about this middleware thing? Don't worry, we all are the first time
we see it. Let's peel it back a little bit and destructure what's going on. That
loggingMiddleware description above could be rewritten like the following:

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 worry about how this gets called, just that it does get called
in that order. Let's enhance our loggingMiddleware so that we do actually 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);
}

Now every time an action is called, we'll get a console.log with the details of
the action.

To apply middleware, we can call this applyMiddleware() function in the

createStore() method. In our src/redux/configureStore.js file, let's update
the store creation by adding a call to applyMiddleware() :

const store = createStore(

reducer,
applyMiddleware(loggingMiddleware)
);

Now our middleware is in place. Open up the console in your browser to see
all the actions that are being called for this demo. Try clicking on the Update
button with the console open...

Current time: Thu Dec 22 2016 11:14:28 GMT-0800 (PST)

From redux

Update

As we've seen, middleware gives us the ability to insert a function in our Redux
action call chain. Inside that function, we have access to the action, state, and
we can dispatch other actions.
We want to write a middleware function that can handle API requests. We can
write a middleware function that listens only to actions corresponding to API
requests. Our middleware can "watch" for actions that have a special marker.
For instance, we can have a meta object on the action with a type of 'api' .
We can use this to ensure our middleware does not handle any actions that
are not related to API requests:

const apiMiddleware = store => next => action => {

if (!action.meta || action.meta.type !== 'api') {
return next(action);
}

// This is an api request

}

If an action does have a meta object with a type of 'api' , we'll pick up the
request in the apiMiddleware .

Let's convert our actions.currentTime.updateTime() method into an API

request. Let's open up the currentTime redux module we've been working
with (in src/redux/modules/currentTime.js ) and find the
actions.updateTime() function definition.

Let's pass in the URL to our meta object for this request. We can even accept
parameters from inside the call to the action creator:

// ...
const host = 'https://fullstacktime.herokuapp.com'
export const actions = {
updateTime: ({timezone = 'pst', str='now'}) => ({
type: types.FETCH_NEW_TIME,
meta: {
type: 'api',
url: `${host}/${timezone}/${str}.json`,
method: 'GET'
}
})
}
When we press the button to update the time, our apiMiddleware will catch
this before it ends up in the reducer. For any calls that we catch in the
middleware, we can pick apart the meta object and make requests using these
options. Alternatively, we can just pass the entire sanitized meta object
through the fetch() API as-is.

The steps our API middleware will have to take:

1. Find the request URL and compose request options from meta
2. Make the request
3. Convert the request to a JavaScript object
4. Respond back to Redux/user

Let's take this step-by-step. First, to pull off the URL and create the
fetchOptions to pass to fetch() . We'll put these steps in the comments in the
code below:

const apiMiddleware = store => next => action => {

if (!action.meta || action.meta.type !== 'api') {
return next(action);
}
// This is an api request

// 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(resp => resp.json())
.then(json => {
// respond back to the user
})
}

We have several options for how we respond back to the user in the Redux
chain. Personally, we prefer to respond with the same type the request was
fired off without the meta tag and placing the response body as the payload
of the new action. For example:

const apiMiddleware = store => next => action => {

if (!action.meta || action.meta.type !== 'api') {
return next(action);
}
// This is an api request

// 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(resp => resp.json())
.then(json => {
// respond back to the user
// by dispatching the original action without
// the meta object
let newAction = Object.assign({}, action, {payload: json});
delete newAction.meta;
store.dispatch(newAction);
})
}

In this way, we don't have to change our redux reducer to manage the
response any differently than if we weren't making a request.

We're also not limited to a single response either. Let's say that our user
passed in an onSuccess callback to be called when the request was complete.
We could call that onSuccess callback and then dispatch back up the chain:
const apiMiddleware = store => next => action => {
if (!action.meta || action.meta.type !== 'api') {
return next(action);
}
// This is an api request

// 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(resp => resp.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});
delete newAction.meta;
store.dispatch(newAction);
})
}

The possibilities here are virtually endless. In any case, after our middleware
dispatches the original action, we need to update the reducer to accept the
original action, but this time with a payload. In the
src/redux/modules/currentTime.js file, let's update the reducer to store the
payload response:
export const reducer = (state = initialState, action) => {
switch (action.type) {
case types.FETCH_NEW_TIME:
return {
...state,
currentTime: action.payload.dateString
};
default:
return state;
}
}

Current time: Thu Dec 22 2016 11:14:28 GMT-0800 (PST)

From redux

Update

Notice that we didn't have to change any of our view code to update how the
data was populated in the state tree. Pretty nifty, eh?

This middleware is pretty simplistic, but it's a good solid basis for building it
out. Can you think of how you might implement a caching service, so that we
don't need to make a request for data we already have? How about one to keep
track of pending requests, so we can show a spinner for requests that are
outstanding?

Awesome! Now we really are Redux ninjas. We've conquered the Redux
mountain and are ready to move on to the next step. Before we head there,
however... pat yourself on the back. We've made it through week 3!
Introduction to Testing

Test suites are an upfront investment that pay dividends over the
lifetime of a system. Today we'll introduce the topic of testing
and discuss the different types of tests we can write.

Okay, close your eyes for a second... wait, don't... it's hard to read with your
eyes closed, but imagine for a moment your application is getting close to
your first deployment.

It's getting close and it gets tiring to constantly run through the features in
your browser... and so inefficient.

There must be a better way...

Testing
When we talk about testing, we're talking about the process of automating the
process of setting up and measuring our assumptions against assertions of
functionality about our application.

When we talk about front-end testing in React, we're referring to the process
of making assertions about what our React app renders and how it responds
to user interaction.
We'll discuss three different software testing paradigms: unit testing,
functional testing, and integration testing.

Unit tests

Unit testing refers to testing individual pieces (or units, hence the name) of
our our code so we can be confident these specific pieces of code work as we
expect.

For example, we have a few reducers already in our application. These

reducers comprise a single function that we can make assertions on under
different scenarios.

In React, Unit tests typically do not require a browser, can run incredibly
quickly (no writing to the DOM required), and the assertions themselves are
usually simple and terse.

We'll mostly concentrate on answering the question: with a given set of inputs
(state and props), does the output match our expectations of what should be in
the virtual dom. In this case, we're testing the rendering output.

Functional testing

With functional testing, we're focused on testing the behavior of our

component. For instance, if we have a navigation bar with a user login/logout
button, we can test our expectations that:

Given a logged in user, the navbar renders a button with the text Logout
Given no logged in user, the navbar renders a button with the text Login

Functional tests usually run in isolation (i.e. testing the component

functionality without the rest of the application).

Integration testing

Finally, the last type of testing we'll look at is integration testing. This type of
testing tests the entire service of our application and attempts to replicate the
experience an end-user would experience when using our application.
On the order of speed and efficiency, integration testing is incredibly slow as
it needs to run expectations against a live, running browser, where as unit and
functional tests can run quite a bit faster (especially in React where the
functional test is testing against the in-memory virtual dom rather than an
actual browser render).

When testing React components, we will test both our expectations of what is
contained in the virtual dom as well as what is reflected in the actual dom.

The tools
We're going to use a testing library called called jasmine
(http://jasmine.github.io) to provide a readable testing language and
assertions.

As far as test running, there is a general debate around which test runner is
the easiest/most efficient to work with, largely between mocha
(https://mochajs.org) and jest (https://facebook.github.io/jest).

We're going to use Jest in our adventure in testing with React as it's the official
(take this with a grain of salt) test runner. Most of the code we'll be writing will
be in Jasmine, so feel free to use mocha, if it's your test library of choice.

Finally, we'll use a library we cannot live without called Enzyme

(https://github.com/airbnb/enzyme) which puts the fun back in FUNctional
testing. Enzyme provides some pretty nice React testing utility functions that
make writing our assertions a cinch.

Tomorrow, we'll get our application set up with the testing tooling in place so
that we can start testing our application and be confident it works as we
expect. See you tomorrow!
Implementing Tests

Yesterday we examined the different types of tests that we write

in React. Today we'll see it in action. We'll install the
dependencies required to set up tests as well as write our first
assertions.

Let's get our application set up to be tested. Since we're going to be using a
few different libraries, we'll need to install them before we can use them
(obviously).

Dependencies
We're going to use the following npm libraries:

jest/jest-cli
Jest (https://facebook.github.io/jest/) is the official testing framework
released by Facebook and is a fantastic testing framework for testing React
applications. It is incredibly fast, provides sandboxed testing environments,
support for snapshot testing, and more.

babel-jest/babel-preset-stage-0
We'll write our tests using the stage 0 (or ES6-edge functionality), so we'll
want to make sure our test framework can read and process our ES6 in our
tests and source files.

sinon
Sinon is a test utility library which provides a way for us to write spies, stubs,
and mocks. We'll discuss what these are when we need them, but we'll install
the library for now.

react-addons-test-utils/enzyme
The react-addons-test-utils package contains testing utilities provided by
the React team.

Enzyme (http://airbnb.io/enzyme/), a JavaScript testing library

built/maintained by Airbnb is a bit easier to work with and provides really nice
methods for traversing/manipulating React's virtual DOM output. While we'll
start with react-addons-test-utils , we'll transition to using Enzyme as we
prefer using it in our tests.

react-test-renderer
The react-test-renderer library allows us to use the snapshot feature from
the jest library. Snapshots are a way for Jest to serialize the rendered output
from the virtual DOM into a file which we can automate comparisons from
one test to the next.

redux-mock-store
The redux-mock-store (https://github.com/arnaudbenard/redux-mock-
store) library allows us to easily make a redux store for testing. We'll use it to
test our action creators, middleware, and our reducers.

To install all of these libraries, we'll use the following npm command in the
terminal while in the root directory of our projects:
npm install --save-dev babel-jest babel-preset-stage-0 enzyme jest-cli
react-addons-test-utils react-test-renderer redux-mock-store sinon

Configuration
We'll also need to configure our setup. First, let's add an npm script that will
allow us to run our tests using the npm test command. In our package.json
file in the root of our project, let's add the test script. Find the scripts key 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": "jest"
},
}

Next, we'll need to configure jest . One of the nice (and often complained
about) features of jest is its automocking feature. Personally, I prefer to use
automocking as it forces us to focus on what we are testing, but feel free to
skip this if you prefer not to use automocking.

Since automocking is disabled by default, we'll need to enable it (if we want to

use it). Additionally, we'll need to set a few libraries to be skipped when
mocking by default. Jest lets us do this by setting the
unmockedModulePathPatterns setting.

Let's update our package.json with a Jest key:

{
"jest": {
"automock": true,
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react",
"<rootDir>/node_modules/react-dom",
"<rootDir>/node_modules/react-addons-test-utils",
"<rootDir>/node_modules/fbjs",
"<rootDir>/node_modules/enzyme",
"<rootDir>/node_modules/sinon",
"<rootDir>/node_modules/redux",
"<rootDir>/node_modules/react-redux"
]
},
}

The <rootDir> string in there is automatically translated by

Jest to be the root directory of our project.

Writing tests
Let's confirm that our test setup is working properly. Jest will automatically
look for test files in the entire tree in a directory called __tests__ (yes, with
the underscores). Let's create our first __tests__ directory in our
src/components/Nav directory and create our first test file:

mkdir src/components/Nav/__tests__
touch src/components/Nav/__tests__/Navbar-test.js

The Navbar-test.js file will include all the tests for our Navbar component
(as indicated by the filename). Let's create our first test.
We'll write our tests using the Jasmine (http://jasmine.github.io) framework.
Jasmine provides a few methods we'll use quite a bit. Both of the following
methods accept two arguments, the first being a description string and the
second a function to execute:

describe()
it()

The describe() function provides a way for us to group our tests together in
logical bundles. Since we're writing a bunch of tests for our Navbar , we'll use
the describe() function in our test to indicate we're testing the Navbar.

In the src/components/tests/Navbar-test.js file, let's add the describe

block:

describe('Navbar', () => {

});

We can add our first test using the it() function. The it() function is where
we will set our expectations. Let's set up our tests with our first expectations,
one passing and one failing so we can see the difference in output.

In the same file, let's add two tests:

describe('Navbar', () => {

it('passing test', () => {

expect(true).toBeTruthy();
})

it('failing test', () => {

expect(false).toBeTruthy();
})
})
We'll look at the possible expectations we can set in a moment. First, let's run
our tests.

Executing tests
The jest-cli package provides a command called jest which will automatically
find our tests and run them.

You can install the jest-cli package using the --global flag
with npm to get jest in your PATH.

Alternatively, you can call the jest command in the local directory using
the direct path of: ./node_modules/.bin/jest

In the terminal, at the root of our project, let's execute the navbar tests using
the jest command (or, since we set up our npm test script, we can run this
with npm test ). We'll use the jest command with the --verbose flag so see
extra description:

jest --verbose src/components/Nav

From this output, we can see the two tests with one passing test (with a green
checkmark) and one failing test (with the red x and a description of the
failure).

Let's update the second test to make it pass by changing the expectation to
toBeFalsy() :

describe('Navbar', () => {

it('passing test', () => {

expect(true).toBeTruthy();
})

it('failing test', () => {

expect(false).toBeTruthy();
})
})

Re-running the test, we can see we have two passing tests

jest --verbose src/components/Nav

Expectations
Jest provides a few global commands in our tests by default (i.e. things you
don't need to require). One of those is the expect() command. The expect()
command has a few expectations which we can call on it, including the two
we've used already:

toBeTruthy()
toBeFalsy()
toBe()
toEqual()
toBeDefined()
toBeCalled()
etc.

The entire suite of expectations is available on the jest documentation page at:
https://facebook.github.io/jest/docs/api.html#writing-assertions-with-
expect (https://facebook.github.io/jest/docs/api.html#writing-assertions-
with-expect).
The expect() function takes a single argument: the value or function that
returns a value to be tested. For instance, our two tests we've already writen
pass the boolean values of true and false .

Now that we've written our first tests and confirmed our setup, we'll actually
get down to testing our Navbar component tomorrow. Great job today and see
you tomorrow!
Testing the App

Now that we have our test setup in place, let's get to testing our
app for real. 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 with the Navbar component as it's the most complex in our current
app.

The Navbar component is displayed at the top of our app with a small amount
of logic around showing a button to login or logout, depending on the state of
the current user (are they logged in or not):

We like to start out testing by listing our assumptions about a component and
under what circumstances these assumptions are true. For instance, a list of
assumptions we can make about our Navbar component might include the
following:

Under all circumstances, the navbar will be contained within a <div />
with the class of .navbar
Under all circumstances, we can assume there will be a link linking back
to the homepage
Under all circumstances, we assume the second link will be one that links
to the about page
When a current user is not logged in, we can assume that the navbar will
show a link to the login page with the text of login
When we have a current user that is logged in, we assume the navbar will
show a link to the logout page with the text of logout

These assumptions will translate into our tests.

Testing
Let's open the file src/components/Nav/Navbar-test.js . We left off with some
dummy tests in this file, so let's clear those off and start with a fresh describe
block:

describe('Navbar', () => {
// Tests go here
})

For every test that we write against React, we'll want to import react into our
test file. We'll also want to bring in the react test utilities:

import React from 'react';

import TestUtils from 'react-addons-test-utils';

describe('Navbar', () => {
// Tests go here
})

Since we're testing the Navbar component here, we'll also want to bring that
into our workspace:
import React from 'react';
import TestUtils from 'react-addons-test-utils';

import Navbar from '../Navbar';

describe('Navbar', () => {
// Tests go here
})

Let's write our first test. Our first assumption is pretty simple to test. We're
testing to make sure the element is wrapped in a .navbar class. With every
test we'll write, we'll need to render our application into the working test
document. The react-addons-test-utils library provides a function to do just
this called renderIntoDocument() :

import React from 'react';

import TestUtils from 'react-addons-test-utils';

import Navbar from '../Navbar';

describe('Navbar', () => {

it('wraps content in a div with .navbar class', () => {

const wrapper = TestUtils.renderIntoDocument(<Navbar />);
});

})

If we run this test (even though we're not setting any expectations yet), we'll
see that we have a problem with the testing code. React thinks we're trying to
render an undefined component:
As we mentioned yesterday, this is because jest provides a feature which
creates mocks for every object in its workspace.

Since we haven't told jest we want it to not create a mock for the Navbar
component, it returns an undefined component. We can fix this by telling jest
to unmock the component (by path) using the jest.unmock() function:

import React from 'react';

import TestUtils from 'react-addons-test-utils';

jest.unmock('../Navbar');
import Navbar from '../Navbar';

describe('Navbar', () => {

it('wraps content in a div with .navbar class', () => {

const wrapper = TestUtils.renderIntoDocument(<Navbar />);
});

})
The second issue we'll encounter when we write our first test: We're wanting
to test to make sure we have the <div></div> element with a class of navbar .
Let's find the element we expect 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 we want it to look for:

import React from 'react';

import TestUtils from 'react-addons-test-utils';

jest.unmock('../Navbar');
import Navbar from '../Navbar';

describe('Navbar', () => {

it('wraps content in a div with .navbar class', () => {

const wrapper = TestUtils.renderIntoDocument(<Navbar />);
const node =
TestUtils
.findRenderedDOMComponentWithClass(wrapper, 'navbar');
});

})

With that, we'll have our second error here if we run the tests:
This test fails for a somewhat more obscure reason. Instead of using a React
component class for Navbar , we're using a stateless function. React doesn't
know how to access this element. To fix it, we can either rewrite the element
to be a component class or we can wrap it in a wrapper component class.

Since this is for tests, we prefer to use the latter option for testing. We
generally have a class component available to our tests. For now, let's write
this tiny class wrapper in the same test:
import React from 'react';
import TestUtils from 'react-addons-test-utils';

jest.unmock('../Navbar');
import Navbar from '../Navbar';

// Test wrapper
class TestWrapper extends React.Component {
render() {
return (<div>{this.props.children}</div>)
}
}

describe('Navbar', () => {

it('wraps content in a div with .navbar class', () => {

// updating our rendering with our helper class
const wrapper = TestUtils.renderIntoDocument(
<TestWrapper><Navbar /></TestWrapper>
);
const node =
TestUtils
.findRenderedDOMComponentWithClass(wrapper, 'navbar');
});

})

For now, this is enough to get into our document. We haven't actually made an
expectation quite yet, so let's set one of those up right now. We expect that at
least one element with the .navbar class will be found. We can set our
expectation on the element to make sure it's defined:
describe('Navbar', () => {

it('wraps content in a div with .navbar class', () => {

})

As a reminder, we can run our tests using either the npm test command or
the jest command. We'll use the jest command for now since we're testing
one component:

jest src/components/Nav

With our one passing test, we've confirmed our test setup is working.
Unfortunately, the interface for TestUtils is a little complex and low-level.
The enzyme library wraps TestUtils , providing an easier and higher-level
interface for asserting against a React component under test. We'll discuss
enzyme in detail tomorrow.

Great job today and see you tomorrow!

Better Testing with Enzyme

Today, we'll look at an open-source library maintained by Airbnb

called Enzyme that makes testing fun and easy.

Yesterday we used the react-addons-test-utils library to write our first test

against the Navbar component. However, this library is fairly low-level and
can be a bit cumbersome to use. Enzyme (http://airbnb.io/enzyme/) is a
testing utility library released and maintained by the AirBnb (http://airbnb.io)
team and it offers a nicer, higher-level API for dealing with React components
under test.

Using Enzyme
We'll use Enzyme to make these tests easier to write and more readable.

Yesterday, we wrote our first test as the following:

describe('Navbar', () => {

it('wraps content in a div with .navbar class', () => {

})

Although this works, it's not quite the easiest test in the world to read. Let's
see what this test looks like when we rewrite it with Enzyme.

Rather than testing the complete component tree with Enzyme, we can test
just the output of the component. Any of the component's children will not be
rendered. This is called shallow rendering.

Enzyme makes shallow rendering super easy. We'll use the shallow function
exported by Enzyme to mount our component.

Let's update the src/components/Nav/tests/Navbar-test.js file to include

the shallow function from enzyme :

import React from 'react';

import { shallow } from 'enzyme';

jest.unmock('../Navbar');
import Navbar from '../Navbar';

describe('Navbar', () => {
it('wraps content in a div with .navbar class', () => {
// our tests
});
})
Shallow rendering is supported by react-addons-test-utils as
well. In fact, Enzyme just wraps this functionality. While we
didn't use shallow rendering yesterday, if we were to use it
would look like this:

const renderer = ReactTestUtils.createRenderer();

renderer.render(<Navbar />)
const result = renderer.getRenderOutput();

Now to render our component, we can use the shallow method and store the
result in a variable. Then, we'll query the rendered component for different
React elements (HTML or child components) that are rendered inside its
virtual dom.

The entire assertion comprises two lines:

import React from 'react';

import { shallow } from 'enzyme';

jest.unmock('../Navbar');
import Navbar from '../Navbar';

describe('Navbar', () => {
let wrapper;

it('wraps content in a div with .navbar class', () => {

wrapper = shallow(<Navbar />);
expect(wrapper.find('.navbars').length).toEqual(1);
});
})

We can run our tests in the same manner as we did before using the jest
command (or the npm test command):
jest src/components/Nav

Our test passes and is more readable and maintainable.

Let's continue writing assertions, pulling from the list of assumptions that we
made at the beginning of yesterday. We'll structure the rest of our test suite
first by writing out our describe and it blocks. We'll fill out the specs with
assertions after:
import React from 'react';
import { shallow } from 'enzyme';

jest.unmock('../Navbar');
import Navbar from '../Navbar';

describe('Navbar', () => {
let wrapper;

it('wraps content in a div with .navbar class', () => {

wrapper = shallow(<Navbar />);
expect(wrapper.find('.navbars').length).toEqual(1);
});

describe('links', () => {

it('renders a link to home', () => {

});
it('renders an about link', () => {

});

describe('with a currentUser', () => {

describe('that is not logged in', () => {

it('shows a link for login', () => {

})
});

describe('that is logged in', () => {

it('shows a link to logout', () => {

})
});
})
})
If we were following Test Driven Development (or TDD for
short), we would write these assumptions first and then build
the component to pass these tests.

Let's fill in these tests so that they pass against our existing Navbar
component. Our link tests will be relatively simple. We're going to grab a list of
the links in our component. We can do this using the tag that we're looking for
or even the type of component (class/component name/function).

Since we'll need the links in all of the specs, let's grab them in a beforeEach()
block:

describe('Navbar', () => {
let wrapper;
// ...
describe('links', () => {
let Links;

beforeEach(() => {
wrapper = shallow(<Navbar />)
Links = wrapper.find('Link');
});

it('renders a link to home', () => {

});

it('renders an about link', () => {

});
});
})

With the Links variable, we can grab the different links and test against them.

We expect the first link to be the "Home" link. So, to use the "Home" link in a
spec, we can just grab the first component in our Links variable.
For any other link, we can use the findWhere function exposed by Enzyme.

We'll look at more Enzyme functions at the end of this article.

Let's fill out the specs now:

describe('Navbar', () => {
let wrapper;
// ...
describe('links', () => {
let Links;

beforeEach(() => {
wrapper = shallow(<Navbar />)
Links = wrapper.find('Link');
});

it('renders a link to home', () =>

const link = Links.first();
expect(link).toBeDefined();
expect(link.childAt(0).text()).toBe('Home');
expect(link.props().to).toBe('/home'); {
});

it('renders an about link', () => {

const link = wrapper
.findWhere(n => n.props().to === '/about')
expect(link).toBeDefined();
expect(link.childAt(0).text()).toBe('About')
});
});
})

Running our tests, we'll see these two expectations pass:

Finally, let's write our tests against the currentUser conditions. Since the
<Navbar /> accepts a currentUser prop, we'll pass it a currentUser prop in
the next round of tests.

A currentUser variable is considered to be logged in if they have a key of

loggedIn as a boolean (true or false). For each block of the user tests, we can
set up this variable in the beforeEach() block of our tests and render the
resulting component:
describe('Navbar', () => {
let wrapper;

describe('with a currentUser', () => {

let currentUser;

describe('that is not logged in', () => {

beforeEach(() => {
currentUser = { loggedIn: false };
wrapper = shallow(
<Navbar currentUser={currentUser} />
)
});

it('shows a link for login', () => {

})
});

describe('that is logged in', () => {

beforeEach(() => {
currentUser = { loggedIn: true };
wrapper = shallow(
<Navbar currentUser={currentUser} />
)
});

it('shows a link to logout', () => {

})
});
})
})

With our wrapper set up properly, we can test against the links similar to how
we did with our first ones. We'll traverse the component looking for the to
prop to match the link we're looking for and ensure the component contains
the elements we expect it to contain:
describe('Navbar', () => {
let wrapper;

describe('with a currentUser', () => {

let currentUser;

describe('that is not logged in', () => {

beforeEach(() => {
currentUser = { loggedIn: false };
wrapper = shallow(
<Navbar currentUser={currentUser} />
)
});

it('shows a link for login', () => {

const link = wrapper.find({to: '/login'});
expect(link.length).toEqual(1);
expect(link.childAt(0).text()).toBe('Login')
})
});

describe('that is logged in', () => {

beforeEach(() => {
currentUser = { loggedIn: true };
wrapper = shallow(
<Navbar currentUser={currentUser} />
)
});

it('shows a link to logout', () => {

const link = wrapper
.findWhere(n => n.props().to === '/logout');
expect(link.length).toEqual(1);
expect(link.childAt(0).text()).toBe('Logout');
})
});
})
})

Running our tests one more time, we can see they all pass as expected:
What's the deal with find() ?
Before we close out for today, we should look at the interface of an Enzyme
shallow-rendered component (in our tests, the wrapper object). The Enzyme
documentation (http://airbnb.io/enzyme/docs/api/shallow.html) is fantastic,
so we'll keep this short.

Basically, when we use the find() function, we'll pass it a selector and it will
return a ShallowWrapper instance that wraps the found nodes. The find()
function can take a string, function, or an object.

When we pass strings into the find() function, we can pass CSS selectors or
the displayName of a component. For instance:

wrapper.find('div.link');
wrapper.find('Link')

We can also pass it the component constructor, for instance:

import { Link } from 'react-router';
// ...
wrapper.find(Link)

Finally, we can also pass it an object property selector object, which selects
elements by their key and values. For instance:

wrapper.find({to: '/login'});

The return value is a ShallowWrapper , which is a type of Wrapper (we can have
rendered wrappers and shallow wrappers). These Wrapper instances have a
bunch of functions we can use to target different child components, ways to
look into the props and the state , as well as other attributes of a rendered
component, such as html() and text() . What's more, we can chain these
calls together.

Take the case of the <Link /> component. If we wanted to find the HTML of
the link class based on all the links available, we can write 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>')
});

Phew! That's a lot of new information today, but look how quickly we wrote
our follow-up tests with Enzyme. It's much quicker to read and makes it easier
to discern what's actually happening.

Tomorrow we'll continue with our testing journey and walk through
integration testing our application.
Integration Testing

Today we'll write tests to simulate how users interact with our
application and will test the entire flow of our app in a live
browser.

We've reached the final part of our introduction to testing. We're going to
wrap up our testing section with integration testing. As a reminder of what
Integration testing is, it's the process of automating the experience that our
actual users experience as they use our application.

Integration testing
As we're integration testing, we'll need to have our app actually running as
we're going to have a browser launch and execute our application. We'll be
using an automation server called selenium (http://www.seleniumhq.org), so
we'll need to download it as well as a really nifty node automated testing
framework called Nightwatch (http://nightwatchjs.org).

Install
The easiest way to install selenium (http://docs.seleniumhq.org/download/)
is to download it through the the selenium website at:
http://docs.seleniumhq.org/download/
(http://docs.seleniumhq.org/download/).
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, which we can do with the
npm package manager. Let's install nightwatch globally using the --global
flag:

npm install --global nightwatch

This command gives us the nightwatch command available anywhere in our

terminal. We'll need to add a configuration file in the root directory called
nighwatch.json (or nighwatch.conf.js ). We'll use the default configuration
file at nighwatch.json

Let's create the file in our root directory:

touch nightwatch.json

Now add the following content in the new nightwatch.json :

{
"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
}
}
}
}
Nightwatch gives us a lot of configuration options available, so we won't cover
all the possible ways to configure it. For our purposes, we'll just use the base
configuration above as it's more than enough for getting integration testing
going.

Writing tests
We'll write our nightwatch tests in a tests/ directory. Let's start by writing a
test for handling the auth workflow. Let's write our test in a tests/ directory
(which matches the src_folders ) that we'll call tests/auth-flow.js .

mkdir tests
touch tests/auth-flow.js

The nightwatch tests can be set as an object of exports, where the key is the
description of the test and the value is a function with a reference to the client
browser. For instance, we'll set up four tests for our tests/auth-flow.js test.

Updating our tests/auth-flow.js file with these four test functions look like
the following:

module.exports = {
'get to login page': (browser) => {},
'logging in': (browser) => {},
'logging out': (browser) => {},
'close': (browser) => {},
}

Each of the functions in our object exports will receive a browser instance
which serves as the interface between our test and the selenium webdriver.
We have all sorts of available options we can run on this browser variable.

Let's write our first test to demonstrate this function. We're going to set up
nightwatch so that it launches the page, and clicks on the Login link in the
navbar. We'll take the following steps to do this:
1. We'll first call the url() function on browser to ask it to load a URL on
the page.
2. We'll wait for the page to load for a certain amount of time.
3. We'll find the Login link and click on it.

And we'll set up assertions along the way. Let's get busy! We'll ask the browser
to load the URL we set in our configuration file (for 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) => {},
'logging out': (browser) => {},
'close': (browser) => {},
}

Thats it. Before we get too far ahead, let's run this test to make sure our test
setup works. We'll need to open 3 terminal windows here.

In the first terminal window, let's launch selenium. If you downloaded the
.jar file, you can start this with the command:

java -jar selenium-server-standalone-{VERSION}.jar

If you downloaded it through homebrew, you can use the selenium-server

command:
selenium-server

In the second window, we'll need to launch our app. Remember, the browser
we're going to launch will actually hit our site, so we need an instance of it
running. We can start our app up with the npm start comamnd:

npm start
Finally, in the third and final terminal window, we'll run our tests using the
nightwatch command.

nightwatch
When we run the nightwatch command, we'll see a chrome window open up,
visit the site, and click on the login link automatically... (pretty cool, right?).

All of our tests pass at this point. Let's actually tell the browser to log a user in.

Since the first step will run, the browser will already be on the login page. In
the second key of our tests, we'll want to take the following steps:

1. We'll want to find the input for he user's email and set a value to a
valid email.
2. We'll want to click the submit/login button
3. We'll wait for the page to load (similar to how we did previously)
4. We'll want to assert that the text of the page is equal to what we expect
it to be.
5. We'll set an assertion to make sure the URL is what we think it is.

Writing this up in code is straight-forward too. Just like we did previously, let's
write the code with comments inline:
module.exports = {
'get to login page': (browser) => {
browser
.url(browser.launchUrl)
.waitForElementVisible('.navbar', 1000)
.click('a[href="#/login"]')

browser.assert.urlContains('login');
},
'logging in': (browser) => {
browser
// set the input email to a valid email
.setValue('input[type=email]', '[email protected]')
// submit the form
.click('input[type=submit]')
// wait for the page to load
.waitForElementVisible('.navbar', 1000)
// Get the text of the h1 tag
.getText('.content h1', function(comp) {
this.assert.equal(comp.value, 'Welcome home!')
})

browser.assert.urlContains(`${browser.launchUrl}/`)
},
'logging out': (browser) => {},
'close': (browser) => {},
}

Running these tests again (in the third terminal window):

nightwatch
We can do a similar thing with the logging out step from our browser. To get
a user to log out, we will:

1. Find and click on the logout link

2. Wait for the content to load for the next page (which contains an "are
you sure?"-style button).
3. We'll click on the "I'm sure" button to log out
4. We'll want to `wait for the content to load again
5. We'll assert that t`he h1 tag contains the value we expect it to have
6. And we'll make sure the page shows the Login button

Let's implement this with comments inline:

module.exports = {
'get to login page': (browser) => {
browser
.url(browser.launchUrl)
.waitForElementVisible('.navbar', 1000)
.click('a[href="#/login"]')

browser.assert.urlContains('login');
},
'logging in': (browser) => {
browser
.setValue('input[type=email]', '[email protected]')
.click('input[type=submit]')
.waitForElementVisible('.navbar', 1000)
.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);
},
'close': (browser) => {},
}
As of now, you may have noticed that your chrome browsers haven't been
closing when the tests have completed. This is because we haven't told
selenium that we want the session to be complete. We can use the end()
command on the browser object to close the connection. This is why we have
the last and final step called close .

{
// ...
'close': (browser) => browser.end()
}

Now let's run the entire suite and make sure it passes again using the
nightwatch command:

nightwatch

That's it! We've made it and have covered 3 types of testing entirely, from low-
level up through faking a real browser instance. Now we have the tools to
ensure our applications are ready for full deployment.
But wait, we don't actually have deployment figured out yet, do we? Stay tuned
for tomorrow when we start getting our application deployed into the cloud.
Deployment Introduction

Today, we'll explore the different pieces involved in deploying our

application so the world can use our application out in the wild.

With our app all tested up through this point, it's time to get it up and live for
the world to see. The rest of this course will be dedicated to deploying our
application into production.

Production deployment
When talking about deployment, we have a lot of different options:

Hosting
Deployment environment configuration
Continuous Integration (CI, for short)
Cost cycles, network bandwidth cost
Bundle size
and more

We'll look at the different hosting options we have for deploying our react app
tomorrow and look at a few different methods we have for deploying our
application up. Today we're going to focus on getting our app ready for
deployment.
Ejection (from create-react-app )
First things first... we're going to need to handle some customization in our
web application, so we'll need to run the npm run eject command in the root
of our directory. This is a permanent action, which just means we'll be
responsible for handling customizations to our app structure for now on
(without the help of our handy create-react-app ).

This is where I always say make a backup copy of your

application. We cannot go back from ejecting , but we can
revert to old code.

We can eject from the create-react-app structure by running the eject

command provided by the generator:

npm run eject

After ejecting from the create-react-app structure, we'll see we get a lot of
new files in our application root in the config/ and scripts/ directories. The
npm run eject command created all of the files it uses internally and wrote
them all out for us in our application.

The key method of the create-react-app generator is called webpack

(https://webpack.github.io), which is a module bundler/builder.

Webpack basics
Webpack is a module bundler with a ginormous community of users, tons of
plugins, is under active development, has a clever plugin system, is incredibly
fast, supports hot-code reloading, and much much more.
Although we didn't really call it out before, we've been using webpack this
entire time (under the guise of npm start ). Without webpack, we wouldn't
have have been able to just write import and expect our code to load. It works
like that because webpack "sees" the import keyword and knows we need to
have the code at the path accessible when the app is running.

Webpack takes care of hot-reloading for us, nearly automatically, can load and
pack many types of files into bundles, and it can split code in a logical manner
so as to support lazy-loading and shrink the initial download size for the user.

This is meaningful for us as our apps grow larger and more complex, it's
important to know how to manipulate our build tools.

For example, when we want to deploy to different environments... which we'll

get to shortly. First, a tiny introduction to webpack, what it is and how it
works.

What it does with bundle.js

Looking into the generated files when we ran npm start before we ejected the
app, we can see that it serves the browser two or more files. The first is the
index.html and the bundle.js . The webpack server takes care of injecting the
bundle.js into the index.html , even if we don't load our app in the
index.html file.

The bundle.js file is a giant file that contains all the JavaScript code our app
needs to run, including dependencies and our own files alike. Webpack has it's
own method of packing files together, so it'll look kinda funny when looking at
the raw source.

Webpack has performed some transformation on all the included JavaScript.

Notably, it used Babel to transpile our ES6 code to an ES5-compatible format.

If you look at the comment header for app.js , it has a number, 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 our web app is encapsulated inside of a function with this
signature. Webpack has given each of our app's modules this function
container as well as a module ID (in the case of app.js , 254).

But "module" here is not limited to ES6 modules.

Remember how we "imported" the makeRoutes() function in app.js , like this:

import makeRoutes from './routes'

Here's what the variable declaration of makeRoutes looks like inside the chaos
of the app.js Webpack module:

var _logo = __webpack_require__(/! ./src/routes.js / 255);

This looks quite strange, mostly due to the in-line comment that Webpack
provides for debugging purposes. Removing that comment:

var _logo = __webpack_require__(255);

Instead of an import statement, we have plain old ES5 code.

Now, search for ./src/routes.js in this file.

/* 255 */
/*!**********************!*\
!*** ./src/routes.js ***!
\**********************/

Note that its module ID is 255 , the same integer passed to

__webpack_require__ above.

Webpack treats everything as a module, including image assets like logo.svg .

We can get an idea of what's going on by picking out a path in the mess of the
logo.svg module. Your path might be different, but it will look like this:

static/media/logo.5d5d9eef.svg

If you open a new browser tab and plug in this address (your address will be
different... matching the name of the file webpack generated for you):

http://localhost:3000/static/media/logo.5d5d9eef.svg

You should get the React logo:

So Webpack created a Webpack module for logo.svg , one that refers to the
path to the SVG on the Webpack development server. Because of this modular
paradigm, it was able to intelligently compile a statement like this:

import makeRoutes from './routes'

Into this ES5 statement:

var _makeRoutes = __webpack_require__(255);

What about our CSS assets? Yep, everything is a module in Webpack. Search
for the string ./src/app.css :
Webpack's index.html didn't include any references to CSS. That's because
Webpack is including our CSS here via bundle.js . When our app loads, this
cryptic Webpack module function dumps the contents of app.css into style
tags on the page.

So we know what is happening: Webpack has rolled up every conceivable

"module" for our app into bundle.js . You might be asking: Why?

The first motivation is universal to JavaScript bundlers. Webpack has

converted all our ES6 modules into its own bespoke ES5-compatible module
syntax. As we briefly touched on, it's wrapped all of our JavaScript modules in
special functions. It provides a module ID system to enable one module to
reference another.

Webpack, like other bundlers, consolidated all our JavaScript modules into a
single file. It could keep JavaScript modules in separate files, but this requires
some more configuration than create-react-app provides out of the box.

Webpack takes this module paradigm further than other bundlers, however. As
we saw, it applies the same modular treatment to image assets, CSS, and npm
packages (like React and ReactDOM). This modular paradigm unleashes a lot of
power. We touch on aspects of that power throughout the rest of this chapter.

Complex, right?
It's okay if you don't understand that out of the box. Building and
maintaining webpack is a complex project with lots of moving parts and it
often takes even the most experienced developers a while to "get."

We'll walk through the different parts of our webpack configuration that
we'll be working with. If it feels overwhelming, just stick with us on the
basics here and the rest will follow.
With our newfound knowledge of the inner workings of Webpack, let's turn
our attention back to our app. We'll make some modifications to our webpack
build tool to support multiple environment configurations.

Environment configuration
When we're ready to deploy a new application, we have to think about a few
things that we wouldn't have to focus on when developing our application.

For instance, let's say we are requesting data from an API server... when
developing this application, it's likely that we are going to be running a
development instance of the API server on our local machine (which would be
accessible through localhost ).

When we deploy our application, we'll want to be requesting data from an off-
site host, most likely not in the same location from where the code is being
sent, so localhost just won't do.

One way we can handle our configuration management is by using .env files.
These .env files will contain different variables for our different
environments, yet still provide a way for us to handle configuration in a sane
way.

Usually, we'll keep one .env file in the root to contain a global config that can
be overridden by configuration files on a per-environment basis.

Let's install an npm package to help us with this configuration setup called
dotenv :

npm install --save-dev dotenv

The dotenv (https://github.com/motdotla/dotenv) library helps us load

environment variables into the ENV of our app in our environments.
It's usually a good idea to add .env to our .gitignore file, so
we don't check in these settings.

Conventionally, it's a good idea to create an example version of the .env

file and check that into the repository. For instance, for our application we
can create a copy of the .env file called .env.example with the required
variables.

Later, another developer (or us, months from now) can use the
.env.example file as a template for what the .env file should look like.

These .env files can include variables as though they are unix-style variables.
Let's create our global one with the APP_NAME set to 30days:

touch .env
echo "APP_NAME=30days" > .env

Let's navigate to the exploded config/ directory where we'll see all of our
build tool written out for us. We won't look at all of these files, but to get an
understanding of what are doing, we'll start looking in
config/webpack.config.dev.js .

This file shows all of the webpack configuration used to build our app. It
includes loaders, plugins, entry points, etc. For our current task, the line to
look for is in the plugins list where we define the DefinePlugin() :
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 with keys and values and
finds all the places in our code where we use the key and it replaces it with the
value.

For instance, if the env object there looks like:

{
'__NODE_ENV__': 'development'
}

We can use the variable __NODE_ENV__ in our source and it will be replaced
with 'development', i.e.:

class SomeComponent extends React.Component {

render() {
return (
<div>Hello from {__NODE_ENV__}</div>
)
}
}

The result of the render() function would say "Hello from development".
To add our own variables to our app, we're going to use this env object and
add our own definitions to it. Scrolling back up to the top of the file, we'll see
that it's currently created and exported from the config/env.js file.

Looking at the config/env.js file, we can see that it takes all the variables in
our environment and adds the NODE_ENV to the environment as well as any
variables prefixed by 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 complex part of that operation as we'll only need to modify
the second argument to the reduce function, in other words, we'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 variables prefixed by
REACT_APP_ into this object, so we'll always have the
process.env.NODE_ENV replaced in our source.

Essentially what we'll do is:

1. Load our default .env file
2. Load any environment .env file
3. Merge these two variables together as well as any default variables (such
as the NODE_ENV )
4. We'll create a new object with all of our environment variables and
sanitize each value.
5. Update the initial object for the existing environment creator.

Let's get busy. In order to load the .env file, we'll need to import the dotenv
package. We'll also import the path library from the standard node library and
set up a few variables for paths.

Let's update the config/env.js file

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 environment, we'll use the config() function exposed by
the dotenv library and pass it the path of the .env file loaded in the root
directory. We'll also use the same function to look for a file in the config/
directory with the name of ${NODE_ENV}.config.env . Additionally, we don't
want either one of these methods to error out, so we'll add the additional
option of silent: true so that if the file is not found, no exception will be
thrown.
// 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
});

Next, let's concatenate all these variables together as well as include our
NODE_ENV option in this object. The Object.assign() method creates a new
object and merges each object from right to left. This way, the environment
config variable

const allVars = Object.assign({}, {

'NODE_ENV': NODE_ENV
}, globalDotEnv, envDotEnv);

With our current setup, the allVars variable will look like:

{
'NODE_ENV': 'development',
'APP_NAME': '30days'
}

Finally, let's create an object that puts these variables on process.env and
ensures they are valid strings (using JSON.stringify ).
const initialVariableObject =
Object.keys(allVars)
.reduce((memo, key) => {
memo[`process.env.${key.toUpperCase()}`] =
JSON.stringify(allVars[key]);
return memo;
}, {});

With our current setup (with the .env file in the root), this creates the
initialVariableObject to be the following object:

{
'process.env.NODE_ENV': '"development"',
'process.env.APP_NAME': '"30days"'
}

Now we can use this initialVariableObject as the second argument for the
original module.exports like. Let's update it to use this object:

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;
}, initialVariableObject);

Now, anywhere in our code we can use the variables we set in our .env files.

Since we are making a request to an off-site server in our app, let's use our
new configuration options to update this host.

Let's say by default we want the TIME_SERVER to be set to

http://localhost:3001 , so that if we don't set the TIME_SERVER in an
environment configuration, it will default to localhost. We can do this by
adding the TIME_SERVER variable to the global .env file.
Let's update the .env file so that it includes this time server:

APP_NAME=30days
TIME_SERVER='http://localhost:3001'

Now, we've been developing in "development" with the server hosted on

heroku. We can set our config/development.config.env file to set the
TIME_SERVER variable, which will override the global one:

TIME_SERVER='https://fullstacktime.herokuapp.com'

Now, when we run npm start , any occurrences of process.env.TIME_SERVER

will be replaced by which ever value takes precedence.

Let's update our src/redux/modules/currentTime.js module to use the new

server, rather than the hardcoded one we used previously.

// ...
export const reducer = (state = initialState, action) => {
// ...
}

const host = process.env.TIME_SERVER;

export const actions = {
updateTime: ({timezone = 'pst', str='now'}) => ({
type: types.FETCH_NEW_TIME,
meta: {
type: 'api',
url: `${host}/${timezone}/${str}.json`,
method: 'GET'
}
})
}

Now, for our production deployment, we'll use the heroku app, so let's create a
copy of the development.config.env file as production.config.env in the
config/ directory:
cp config/development.config.env config/production.config.env

Custom middleware per-

configuration environment
We used our custom logging redux middleware in our application. This is
fantastic for working on our site in development, but we don't really want it to
be active while in a production environment.

Let's update our middleware configuration to only use the logging middleware
when we are in development, rather than in all environments. In our project's
src/redux/configureStore.js file, we loaded our middleware by a simple
array:

let middleware = [
loggingMiddleware,
apiMiddleware
];
const store = createStore(reducer, applyMiddleware(...middleware));

Now that we have the process.env.NODE_ENV available to us in our files, we can

update the middleware array depending upon the environment we're running
in. Let's update it to only add the logging if we are in the development
environment:

let middleware = [apiMiddleware];

if ("development" === process.env.NODE_ENV) {
middleware.unshift(loggingMiddleware);
}

const store = createStore(reducer, applyMiddleware(...middleware));

Now when we run our application in development, we'll have the

loggingMiddleware set, while in any other environment we've disabled it.
Today was a long one, but tomorrow is an exciting day as we'll get the app up
and running on a remote server.

Great work today and see you tomorrow!

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 yesterday preparing for our first deployment of our application.
We're ready to deploy our application. Now the question is where and what are
we going to deploy?

Let's explore...

What
While deploying a single page application has it's own intricasies, it's similar to
deploying a non-single page application. What the end-user's browser
requests all need to be available for the browser to request. This means all
javascript files, any custom fonts, images, svg, stylesheets, etc. that we use in
our application need to be available on a publicly available server.

Webpack takes care of building and packaging our entire application for what
we'll need to give the server to send to our clients. This includes any client-
side tokens and our production configuration (which we put together
yesterday).
This means we only need to send the contents of the distribution directory
webpack put together. In our case, this directory is the build/ directory. We
don't need to send anything else in our project to a remote server.

Let's use our build system to generate a list of production files we'll want to
host. We can run the npm run build command to generate these files in the
build/ directory:

npm run build

Where
These days we have many options for hosting client-side applications. We'll
look at a few options for hosting our application today. Each of the following
hosting services have their benefits and drawbacks, which we'll briefly discuss
before we actually make a deployment.

There are two possible ways for us to deploy our application. If we are working
with a back-end application, we can use the back-end server to host our
public application files. For instance, if we were building a rails application, we
can send the client-side application directly to the public/ folder of the rails
application.

This has the benefit of providing additional security in our application as we

can verify a request from a client-side application made to the backend to
have been generated by the server-side code. One drawback, however is that
it can hog network bandwidth to send static files and potentially suck up
resources from other clients.

In this section, we'll work on hosting our client-side only application, which is
the second way we can deploy our application. This means we can run/use a
server which is specifically designed for hosting static files separate from the
back-end server.

We'll focus on the second method where we are using other services to deploy
our client-side application. That is, we'll skip building a back-end and upload
our static files to one (or more) of the (non-exhaustive) list of hosting services.

surge.sh (https://surge.sh/)
github pages (https://pages.github.com/)
heroku (https://www.heroku.com/)
AWS S3 (https://aws.amazon.com/s3/)
Forge (https://getforge.com/)
BitBalloon (https://www.bitballoon.com/)
Pancake (https://www.pancake.io/)
... More

We'll explore a few of these options together.

surge.sh
surge.sh (https://surge.sh/) is arguably one of the easiest hosting providers to
host our static site with. They provide a way for us to easily and repeatable
methods for hosting our sites.

Let's deploy our application to surge. First, we'll need to install the surge
command-line tool. We'll use npm , like so:

npm install --global surge

With the surge tool installed, we can run surge in our local directory and
point it to the build/ directory to tell it to upload the generated files in the
build/ directory.

surge -p build

The surge tool will run and it will upload all of our files to a domain specified
by the output of the tool. In the case of the previous run, this uploads our files
to the url of hateful-impulse.surge.sh (http://hateful-impulse.surge.sh/) (or
the SSL version at https://hateful-impulse.surge.sh/ (https://hateful-
impulse.surge.sh/))
For more information on surge , check out their documentation at
https://surge.sh/help/ (https://surge.sh/help/).

Github pages
github pages (https://pages.github.com/) is another easy service to deploy
our static files to. It's dependent upon using github to host our git files, but is
another easy-to-use hosting environment for single page applications.

We'll need to start by creating our github pages repository on github. With an
active account, we can visit the github.com/new (https://github.com/new)
site and create a repository.

With this repo, it will redirect us to the repo url. Let's click on the clone or
download button and find the github git url. Let's copy and paste this to our
clipboard and head to our terminal.
In our terminal, let's add this as a remote origin for our git repo.

Since we haven't created this as a git repo yet, let's initialize the git repo:

git init
git add -A .
git commit -am "Initial commit"

In the root directory of our application, let's add the remote with the following
command:

git remote add github [your git url here]

# From the demo, this will be:
# git remote add origin [email protected]:auser/30-days-of-react-demo.git

Next, we'll need to move to a branch called gh-pages as github deploys from
this branch. We can easily do this by checking out in a new branch using git.
Let's also run the generator and tell git that the build/ directory should be
considered the root of our app:
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 serve directly from the root, but instead the build
folder, we'll need to add a configuration to our package.json by setting the
homepage key to the package.json file with our github url. Let's open the
package.json file and add the "homepage" key:

{
"name": "30days",
"version": "0.0.1",
"private": true,
"homepage": "http://auser.github.io/30-days-of-react-demo",
// ...
}
Hint
We can modify json files by using the jq (https://stedolan.github.io/jq/)
tool. If you don't have this installed, get it... get it now... It's invaluable

To change the package.json file from the command-line, we can use jq,
like so:

jq '.homepage = \
"http://auser.github.io/30-days-of-react-demo"' \
> package.json

With our pages built, we can generate our application using npm run build
and push to github from our local build/ directory.

git push -f github gh-pages

Now we can visit our site at the repo pages url. For instance, the demo site is:
https://auser.github.io/30-days-of-react-demo (https://auser.github.io/30-
days-of-react-demo/#).
Future deployments
We'll need to add this work to a deployment script, so every time we want
to release a new version of the site. We'll do more of this tomorrow. To
release to github, we'll have to use the following script:

#!/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 -

For more information on github pages, check out their documentation at

https://help.github.com/categories/github-pages-basics/
(https://help.github.com/categories/github-pages-basics/).

Heroku
Heroku (https://www.heroku.com/) is a very cool hosting service that allows
us to host both static and non-static websites. We might want to deploy a
static site to heroku as we may want to move to a dynamic backend at some
point, are already comfortable with deploying to heroku, etc.

To deploy our site to heroku, we'll need an account. We can get one by visiting
https://signup.heroku.com/ (https://signup.heroku.com/) to sign up for one.

We'll also need the heroku toolbet

(https://devcenter.heroku.com/articles/heroku-command-line) as we'll be
using the heroku command-line tool.

Finally, we'll need to run heroku login to set up credentials for our
application:

heroku login

Next, we'll need to tell the heroku command-line that we have a heroku app.
We can do this by calling heroku apps:create from the command-line in our
project root:
heroku apps:create
# or with a name
heroku apps:create thirty-days-of-react-demo

Heroku knows how to run our application thanks to buildpacks

(https://devcenter.heroku.com/articles/buildpacks). We'll need to tell heroku
we have a static-file buildpack so it knows to serve our application as a static
file/spa.

We'll need to install the static-files plugin for heroku. This can be easiy install
using the heroku tool:

heroku plugins:install heroku-cli-static

We can add the static file buildpack with the following command:

heroku buildpacks:set https://github.com/hone/heroku-buildpack-static

For any configuration updates, we'll need to run the static:init command
from heroku to generate the necessary static.json file:

heroku static:init
Now we can deploy our static site to heroku using the git workflow:

git push heroku master

# or from a branch, such as the heroku branch
git push heroku heroku:master

We've deployed to only three of the hosting providers from the list above.
There are many more options for deploying our application, however this is a
pretty good start.

When we deploy our application, we will want to make sure everything is

working before we actually send out the application to the world. Tomorrow
we'll work on integrating a Continuous integration (CI, for short) server to run
our tests before we deploy.
Continuous Integration

Today we'll look through some continuous integration solutions

available for us to run tests against as well as implement one to
test our application in the cloud.

We've deployed our application to the "cloud", now we want to make sure
everything runs as we expect it. We've started a test suite, but now we want to
make sure it passes completely before we deploy.

We could set a step-by-step procedure for a developer to follow to make sure

we run our tests before we deploy manually, but sometimes this can get in the
way of deployment, especially under high-pressure deadlines in the middle of
the night. There are better methods.

Testing then deployment

The core idea is that we want to deploy our application only after all of our
tests have run and passed (sometimes known as "going green"). There are
many ways we can do this. Mentioned above, we can handle it through
humans, but that can become tedious and we're pretty good at forgetting
things... what was I saying again?

Let's look at some better ways. One of the ways we can handle it is through a
deployment script that only succeeds if all of our tests pass. This is the easiest,
but needs to be replicated across a team of developers.
Another method is to push our code to a continuous integration server whose
only responsibility is to run our tests and deploy our application if and only if
the tests pass.

Just like hosting services, we have many options for running continuous
integration servers. The following is a short list of some of the popular CI
servers available:

travis ci (https://travis-ci.org/)
circle ci (https://circleci.com)
codeship (https://codeship.io)
jenkins (https://jenkins.io)
AWS EC2 (https://aws.amazon.com/ec2/)

Let's look at a few ways of handling this process.

Custom build script

Without involving any extra servers, we can write a script to execute our tests
before we deploy.

Let's create a script that actually does do the deployment process first. In our
case, let's take the surge.sh example from yesterday. Let's add one more
script we'll call deploy.sh in our scripts/ directory:

touch scripts/deploy.sh
chmod u+x scripts/deploy.sh

In here, let's add the surge deploy script (changing the names to your domain
name, of course):

#!/usr/local/env bash
surge -p build --domain hateful-impulse.surge.sh

Let's write the release script next. To execute 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"
},
}

Now let's create the scripts/release.js file. From the root directory in our
terminal, let's execute the following command:

touch scripts/release.js

Inside this file, we'll want to run a few command-line scripts, first our build
step, then we'll want to run our tests, and finally we'll run the deploy script, if
everything else succeeds first.

In a node file, we'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
within the node script and store all the output to an array.
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 will return a promise that is resolved
when the command exits successfully and will reject if there is an error.

Our release script will need to be able to do the following tasks:

1. build
2. test
3. deploy
4. report any errors

Mentally, we can think of this pipeline as:

build()
.then(runTests)
.then(deploy)
.catch(error)

Let's build these functions which will use our runCmd function we wrote
earlier:
function build() {
console.log(chalk.cyan('Building app'));
return runCmd("npm run build");
}

function runTests() {
console.log(chalk.cyan('Running tests...'));
return runCmd("npm test");
}

function deploy() {
console.log(chalk.green('Deploying...'));
return runCmd(`sh -c "${__dirname}/deploy.sh"`);
}

function error() {
console.log(chalk.red('There was an error'));
output.forEach(msg => process.stdout.write(msg));
}

With our scripts/release.js file complete, let's execute our npm run release
command to make sure it deploys:

npm run release

With all our tests passing, our updated application will be deployed
successfully!
If any of our tests fail, we'll get all the output of our command, including the
failure errors. Let's update one of our tests to make them fail purposefully to
test the script.

I'll update the src/components/Nav/tests/Navbar-test.js file to change

the first 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 watch it fail and not run the deploy script:

npm run release

As we see, we'll get the output of the failing test in our logs, so we can fix the
bug and then rerelease our application again by running the npm run release
script again.

Travis CI
Travis ci (https://travis-ci.org/) is a hosted continuous integration
environment and is pretty easy to set up. Since we've pushed our container to
github, let's continue down this track and set up travis with our github
account.

Head to travis-ci.org (https://travis-ci.org/) and sign up there.

Once you're signed up, click on the + button and find your repository:

From the project screen, click on the big 'activate repo' button.
Now we need to configure travis to do what we want, which is run our test
scripts and then deploy our app. To configure travis, we'll need to create a
.travis.yml file in the root of our app.

touch .travis.yml

Let's add the following content to set the language to node with the node
version of 5.4:

language: node_js
node_js:
- "5.4"

Now all we 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
That's it. Now travis will execute our tests based on the default script of npm
test .

Now, we'll want travis to actually deploy our app for us. Since we already have
a scripts/deploy.sh script that will deploy our app, we can use this to deploy
from travis.

To tell travis to run our deploy.sh script after we deploy, we will need to add
the deploy key to our .travis.yml file. Let's update the yml config to tell it to
run our deploy script:

language: node_js
node_js:
- "5.4"
deploy:
provider: script
script: scripts/deploy.sh
on:
branch: master

The next time we push, travis will take over and push up to surge (or
whereever the scripts/deploy.sh scripts will tell it to deploy).
Particulars for authentication. To deploy to github pages, we'll need to add a
token to the script. The gist at
https://gist.github.com/domenic/ec8b0fc8ab45f39403dd
(https://gist.github.com/domenic/ec8b0fc8ab45f39403dd) is a great resource
to follow for deploying to github pages.

Other methods
There are a lot of other options we have to run our tests before we deploy.
This is just a getting started guide to get our application up.

The Travis CI service is fantastic for open-source projects,

however to use it in a private project, we'll need to create a
billable account.

An open-source CI service called Jenkins (https://jenkins.io) which can

take a bit of work to setup (although it's getting a lot easier
(https://jenkins.io/projects/blueocean/)).

Congrats! We have our application up and running, complete with testing and
all.

See you tomorrow for our last day!

Wrap-up and More Resources

We've made it! Day 30. Congrats! Now you have enough
information to write some very complex applications, integrated
with data, styled to perfection, tested and deployed.

Welcome to the final day! Congrats! You've made it!

The final component of our trip through React-land is a call to get involved.
The React community is active, growing, and friendly.

Check out the community projects on Github at: https://github.com/reactjs

(https://github.com/reactjs)

We've covered a lot of material in the past 30 days. The high-level topics we
discussed in our first 30 days:

1. JSX and what it is, from the ground up.

2. Building components a. Static b. Data-driven components c. Stateful and
stateless components d. Pure components e. The inherent tree-based
structure of the virtual DOM
3. The React component lifecycle
4. How to build reusable and self-documenting components
5. How to make our components stylish using native React proptypes as
well as third party libraries
6. Adding interaction to our components
7. How to use create-react-app to bootstrap our apps
8. How to integrate data from an API server, including a look at promises
9. We worked through the Flux architecture
10. Integrated Redux in our application, including how middleware works
11. We integrated testing strategies in our app a. Unit testing b. End-to-end
testing c. Functional testing
12. We discussed deployment and extending our application to support
multi-environment deployments
13. We added continuous integration in our deployment chain.
14. Client-side routing

There is so much more!

Although we covered a lot of topics in our first 30 days, there is so much
more! How do we know? We wrote a book (https://www.fullstackreact.com)!

Interested in reading more and going deeper with React? Definitely check it
out. Not only do we cover in-depth the topics we briefly introduced in our
first 30 days, we go into a ton of other content, including (but not limited to):

Using graphql and how to build a GraphQL server

Relay and React
How to use React to build a React Native application
How to extend React Native to use our own custom modules
An in-depth, much more comprehensive review of testing, from unit tests
through view tests
A deep look into components, from an internals perspective
Advanced routing and dealing with production routing
Forms forms forms! We cover form validations, from basic form inputs
through validating and integrating with Redux
And much much much more.

Just check out the book page at www.fullstackreact.com

(https://www.fullstackreact.com) for more details.

Congrats on making it to day 30! Time to celebrate!

Fundamentals of Piano Practice
100% (21)
Fundamentals of Piano Practice
275 pages
Just Javascript
No ratings yet
Just Javascript
123 pages
Download Learning TypeScript: Enhance Your Web Development Skills Using Type-Safe JavaScript 1st Edition Josh Goldberg ebook All Chapters PDF
100% (1)
Download Learning TypeScript: Enhance Your Web Development Skills Using Type-Safe JavaScript 1st Edition Josh Goldberg ebook All Chapters PDF
40 pages
The Ultimate React - Js Guide
100% (1)
The Ultimate React - Js Guide
33 pages
Typescript and JavaScript Coding Made Simple 2 Books in 1
No ratings yet
Typescript and JavaScript Coding Made Simple 2 Books in 1
329 pages
TypeScript For Beginners The Ultimate Guide (Sufyan Bin Uzayr)
100% (6)
TypeScript For Beginners The Ultimate Guide (Sufyan Bin Uzayr)
205 pages
React
100% (1)
React
116 pages
Exploring Es6
100% (9)
Exploring Es6
555 pages
NGRX Tutorial Series
No ratings yet
NGRX Tutorial Series
37 pages
jQuery Mobile Web Development Essentials - Third Edition
From Everand
jQuery Mobile Web Development Essentials - Third Edition
Andy Matthews
No ratings yet
30 Days of React Ebook Fullstackio
No ratings yet
30 Days of React Ebook Fullstackio
296 pages
React Components
From Everand
React Components
Christopher Pitt
No ratings yet
ReactJS for Jobseekers: The Only Guide You Need to Learn React and Crack Interviews (English Edition)
From Everand
ReactJS for Jobseekers: The Only Guide You Need to Learn React and Crack Interviews (English Edition)
Qaifi Khan
No ratings yet
My Awesome React Redux Structure PDF
No ratings yet
My Awesome React Redux Structure PDF
26 pages
React in Patterns PDF
No ratings yet
React in Patterns PDF
138 pages
Effective React With NX 2022
No ratings yet
Effective React With NX 2022
98 pages
Delightful React Code and Sketches
100% (1)
Delightful React Code and Sketches
90 pages
Ui React
No ratings yet
Ui React
173 pages
Developing With Angular
100% (2)
Developing With Angular
481 pages
How To Use React Router in Your Application
No ratings yet
How To Use React Router in Your Application
5 pages
TypeScript Basics Learn TypeScript From Scratch and Solidify Your Skills With Projects (Nabendu Biswas) (Z-Library)
No ratings yet
TypeScript Basics Learn TypeScript From Scratch and Solidify Your Skills With Projects (Nabendu Biswas) (Z-Library)
172 pages
Node - Js Design Patterns Sample Chapter
100% (1)
Node - Js Design Patterns Sample Chapter
56 pages
React - Js Complete Guide To Server-Side Rendering (Front-End Development Book 1)
50% (2)
React - Js Complete Guide To Server-Side Rendering (Front-End Development Book 1)
46 pages
Crud in Angular 10
No ratings yet
Crud in Angular 10
15 pages
React JS Book
No ratings yet
React JS Book
109 pages
ExpressJs Handwritten Notes
100% (1)
ExpressJs Handwritten Notes
144 pages
React Type Script
No ratings yet
React Type Script
230 pages
Front End Interview Questions
No ratings yet
Front End Interview Questions
20 pages
Microservices Using ASP - NET Core
100% (1)
Microservices Using ASP - NET Core
33 pages
React JS Roadmap
No ratings yet
React JS Roadmap
9 pages
SurviveJS - Webpack 5. From Apprentice To Master
No ratings yet
SurviveJS - Webpack 5. From Apprentice To Master
301 pages
React + GraphQL Tutorial - The Server - Apollo Blog
No ratings yet
React + GraphQL Tutorial - The Server - Apollo Blog
15 pages
Responsive Web Design With AngularJS Sample Chapter
No ratings yet
Responsive Web Design With AngularJS Sample Chapter
34 pages
The Road To React. Robin Wieruch, 2020 PDF
100% (1)
The Road To React. Robin Wieruch, 2020 PDF
229 pages
Learn Rxjs
100% (3)
Learn Rxjs
309 pages
React Interview Questions - Answers
No ratings yet
React Interview Questions - Answers
1 page
Important ReactJs Interview Questions
No ratings yet
Important ReactJs Interview Questions
27 pages
Redux Basic Guide
No ratings yet
Redux Basic Guide
43 pages
React Training
No ratings yet
React Training
114 pages
Clean Up Redux Code With React-Redux Hooks PDF
No ratings yet
Clean Up Redux Code With React-Redux Hooks PDF
10 pages
Learn ReactJS Tutorial
100% (1)
Learn ReactJS Tutorial
4 pages
Express
100% (1)
Express
141 pages
Js Cheatsheet 1
No ratings yet
Js Cheatsheet 1
17 pages
Hands On Nodejs
100% (1)
Hands On Nodejs
152 pages
Essential Guide To Angular For All Levels
No ratings yet
Essential Guide To Angular For All Levels
102 pages
Node - Js & JavaScript Testing Best Practices - Yoni Goldberg - Medium
100% (1)
Node - Js & JavaScript Testing Best Practices - Yoni Goldberg - Medium
35 pages
React Native Complete Guide
No ratings yet
React Native Complete Guide
1 page
Mastering TypeScript - Sample Chapter
No ratings yet
Mastering TypeScript - Sample Chapter
33 pages
Dynamic Rendering in NextJS
No ratings yet
Dynamic Rendering in NextJS
8 pages
ReactJs Interview Questions
No ratings yet
ReactJs Interview Questions
11 pages
Angular Authentication Complete Guide
100% (3)
Angular Authentication Complete Guide
32 pages
React - Js by Example
100% (9)
React - Js by Example
28 pages
The Road To React PDF
100% (3)
The Road To React PDF
249 pages
ZTM Next - Js Course Code Guide
No ratings yet
ZTM Next - Js Course Code Guide
14 pages
A Complete Guide To CSS Grid - CSS-Tricks - CSS-Tricks
No ratings yet
A Complete Guide To CSS Grid - CSS-Tricks - CSS-Tricks
44 pages
Advanced Folder Structure React
No ratings yet
Advanced Folder Structure React
4 pages
Markiting Strategy of Jio
100% (1)
Markiting Strategy of Jio
463 pages
Full Stack iOS Development with Swift and Vapor: Full stack iOS development made easy (English Edition)
From Everand
Full Stack iOS Development with Swift and Vapor: Full stack iOS development made easy (English Edition)
Hem Dutt
No ratings yet
MERN Stack Course Book
From Everand
MERN Stack Course Book
Pedro Martins
No ratings yet
Learning TypeScript 5
From Everand
Learning TypeScript 5
Anna Richter
No ratings yet
Vue.js: Tools & Skills
From Everand
Vue.js: Tools & Skills
James Hibbard
No ratings yet
Angular Services
From Everand
Angular Services
Sohail Salehi
No ratings yet
Bach Inventions PDF
100% (4)
Bach Inventions PDF
33 pages
Kenneth Ste I Glitz A Digital Signal Processing PR
No ratings yet
Kenneth Ste I Glitz A Digital Signal Processing PR
164 pages
8dio Legacy 1928 Steinway Scoring Piano
No ratings yet
8dio Legacy 1928 Steinway Scoring Piano
10 pages
Program Which Shows The Different Data Declarations (Data Types) in COBOL
No ratings yet
Program Which Shows The Different Data Declarations (Data Types) in COBOL
72 pages
Symbiosis Skills and Open University
No ratings yet
Symbiosis Skills and Open University
4 pages
03a. Relational Algebra Tambahan + Jawaban Latihan
No ratings yet
03a. Relational Algebra Tambahan + Jawaban Latihan
62 pages
UxApps ErrorReport
No ratings yet
UxApps ErrorReport
2 pages
Akanksha Resume PDF
No ratings yet
Akanksha Resume PDF
2 pages
Microbit YR1 Laboratory Worksheet SY2023 24 FINAL REVISED
No ratings yet
Microbit YR1 Laboratory Worksheet SY2023 24 FINAL REVISED
164 pages
Modern CPP Development
No ratings yet
Modern CPP Development
3 pages
BOM Configuration
No ratings yet
BOM Configuration
16 pages
C Functions in C, We Can Divide A Large Program Into The Basic Building Blocks Known As
No ratings yet
C Functions in C, We Can Divide A Large Program Into The Basic Building Blocks Known As
6 pages
Worksheet 1 For Python 2024 - Answers
100% (1)
Worksheet 1 For Python 2024 - Answers
11 pages
T. Y. B. SC.: (Computer Science)
No ratings yet
T. Y. B. SC.: (Computer Science)
47 pages
DAA Exp 8 - 40
No ratings yet
DAA Exp 8 - 40
7 pages
PrinterLibs For Android en US
No ratings yet
PrinterLibs For Android en US
116 pages
Stacks Exclusive Notes
No ratings yet
Stacks Exclusive Notes
21 pages
Jhipster 4 Mini Book
No ratings yet
Jhipster 4 Mini Book
129 pages
Full Stack Developer: (Backend Specialization)
No ratings yet
Full Stack Developer: (Backend Specialization)
21 pages
atharva_AJP04 - Copy
No ratings yet
atharva_AJP04 - Copy
14 pages
I. Create Table Using Constraints What Is Constraint?
No ratings yet
I. Create Table Using Constraints What Is Constraint?
8 pages
Oop Answers
No ratings yet
Oop Answers
14 pages
CSC404 Chapter1
No ratings yet
CSC404 Chapter1
45 pages
Factors Affecting Software Maintenance
No ratings yet
Factors Affecting Software Maintenance
22 pages
Limitations of FSM
No ratings yet
Limitations of FSM
1 page
VHDL Data Types
No ratings yet
VHDL Data Types
34 pages
Week 2 Solution
No ratings yet
Week 2 Solution
4 pages
21 01 2022 06 39 42 Net
No ratings yet
21 01 2022 06 39 42 Net
9 pages
Problem Set 1
No ratings yet
Problem Set 1
3 pages
Business MFB
No ratings yet
Business MFB
8 pages
MCA - Syllabi Sem I and II 2019-2020
No ratings yet
MCA - Syllabi Sem I and II 2019-2020
28 pages
XIInfo Pract pt3433
No ratings yet
XIInfo Pract pt3433
2 pages