This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Table of Contents
Let’s Build an App with React
React Introduction
Ryan Florence begins the course with a brief explanation of how to download and install the course files. He then codes a simple application to demonstrate the React development workflow. Ryan also discusses at a high level the ECMAScript 6 features that ship with React.
React Introduction Questions
With the first React application finished, Ryan takes a few minutes to answer some audience questions. He discusses the Webpack build process and how the output is generated.
Your First Component
JSX vs. Pure JavaScript
DOM elements can be created with JavaScript functions or with JSX. JSX is often preferred because it looks like HTML and is easier to visualize. When the application is built, the JSX code is transpiled back into JavaScript functions so there isn’t any performance difference between these two methods.
Composite Components
When you use the React.createClass method, you are creating a composite component. These components use a render() method to return the user interface elements.
Exercise 1: Rendering Data
Ryan introduces the first exercise. In this exercise, you will need to to render the data stored in the DATA property to the page. Ryan gives a few hints on how to get started as well as a brief code snippet on how to inject data into JSX. - exercises/1-your-first-component
Exercise 1: Solution
Ryan walks through the solution to Exercise 1. He also explains the ReactElement object in a little more detail.
Props
Creating Props
All UI elements in React are JavaScript functions. Props are the primary interface for all these functions and they can alter the way elements are rendered. While there are many Props available as attributes of HTML elements, developers can also create their own custom Props. Ryan demonstrates how to create a Gravatar class with a few custom Props.
PropTypes and Keys
The propTypes property of a React component allows developers to declare the data type of each prop. Custom propTypes can also be created. Ryan gives a propTypes demonstration and also explains why specifying keys are helpful when working with arrays.
Exercise 2: Props
In this exercise, you will add a prop so the USERS array is not accessed directly in the application. You will also use PropTypes to add data validation. - exercises/2-props/
Exercise 2: Solutions
After answering a couple audience questions, Ryan demonstrates the solution to Exercise 2.
Events and State
Understanding Events
One way to add events to DOM element in React is within the JSX code. Events can be added inline as a prop. Custom parameters can be passed to event handlers by utilizing the bind() method. Ryan demonstrates this technique and answers a few audience questions about debugging.
Setting State
Generally, it’s better if components don’t have state and only function based on the props they are passed. However, when state is required, React has an API for setting the initial state and updating the state. Ryan creates a summary/details component to explain how React manages state.
State Best Practices
Ryan demonstrates how to keep the render() method “stateless”. By doing this, the component will render no matter what state is currently set. He also talks in more depth about the setState method and how it triggers a new render cycle.
Exercise 3: Events and States
In this exercise, you will create a tabs component. You will need to add events and manage the state of the component to make the correct content show as the users clicks each tab. - exercises/3-events-and-states
Exercise 3: Solution
Ryan demonstrates the solution to Exercise 3. He also addresses a few questions about styles and the use of the bind method.
Props vs. States
Props vs States vs Stores
Props and States can behave in similar ways. When to use a Prop versus a State depends on what you need to do with the data. Ryan explains the differences between Props, States and Stores and demonstrates why trying to manage multiple states can be problematic.
Replacing States with Props
Since managing multiple States for related objects can be confusing, Ryan walks through an example where he replaces the State management with PropsTypes. This way all toggle components will be managed by the parent.
Implementing toggleAll
Now that all toggle components are managed by their parent, the toggleAll method can be implemented. Ryan adds the toggleAll functionality and also briefly discusses the JavaScript reduce() method.
Exercise 4: Props v State
In this exercise, you will make the tabs component a “pure component” by not managing any of its own states. - exercises/4-props-v-state
Exercise 4: Solution
Ryan demonstrates the solution to Exercise 4. He also talks a little more in detail about why you would want the parent to control which tab is active and answers a few audience questions.
Flux
Flux Overview
Ryan begins his discussion about Flux by showing a diagram that illustrates what Flux provides. Action Creators spawned by events in the application will facilitate the communication with the server through web APIs. A Dispatcher will then complete the cycle through a system of callbacks to update any Stores and allow the change events to be processed by the UI.
Flux Example
Ryan walks through the code of a simple application that uses Flux. He shows how each Action is created and how the UI is passed the data retrieved from the server. He also talks briefly about tokens and how they aid in the management of dependent Stores.
Exercise 5: Flux
In this exercise, you will modify the Flux application so it can delete a contact from the database. Before starting the exercise, Ryan answers a few audience questions and provides some direction on where to begin. - exercises/5-flux
Exercise 5: Solution
Ryan begins explaining the solution to Exercise 5.
Exercise 5: Solutions, continued
After adding all the code for the solution to Exercise 5, Ryan walks through the solution one more time to reinforce the flow of data through the application. He also answers a few additional audience questions.
Routing
Basic Routing
Ryan helped develop React Router which is a complete routing library for React. He did this because he felt React was lacking many of the routing features he liked in Ember. Ryan first codes a routing example that doesn’t use any external libraries.
React Router
Ryan talks about why he created React Router. This library facilitates more complex routing scenarios like nested user interfaces or route cancellation.
Routing Questions
Ryan continues to answer audience questions about the routing capabilities of React Router. Some of the questions include server-side rendering, transitions, and life-cycles.
Exercise 6: Routing
In this exercise, you will add a route to the “about” page above the new contact area.
Exercise 6: Solution
Ryan demonstrates the solution to Exercise 6. He also shows a couple examples of using animations with routes.
Migrating to React
Adding React to an Existing App
Since completely rewriting an application with a new technology can be a hard sell, Ryan demonstrates how to migrate an application to React. The first step is to begin replacing existing components with React components. In this example, the existing components are built using Backbone.js.
Migration Considerations
Ryan discusses a few things that can cause headaches when migrating to React. For example, since libraries like jQuery UI have components that manipulate the DOM. In this case, React may have issues referencing elements that have been added or removed. Wrapping a third-party component with a React component can make the migration easier.
Wrap Up
What’s Coming Next
Ryan talks about the future of React. For example, instead of using mix-ins or the createClass method, you can declare a new application using the JavaScript class keyword and extend the React.Component class. He also talks about React Native.
Final Questions
Ryan concludes the course by answering a few final audience questions.