React.js (with Introduction to Flux Architecture)
This course has been updated! We now recommend you take the Complete Intro to React, v6 course.
Table of Contents
Let’s Build an App with React
React IntroductionRyan 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 QuestionsWith 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
Composite ComponentsWhen 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 DataRyan 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: SolutionRyan walks through the solution to Exercise 1. He also explains the ReactElement object in a little more detail.
PropTypes and KeysThe 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: PropsIn 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: SolutionsAfter answering a couple audience questions, Ryan demonstrates the solution to Exercise 2.
Events and State
Understanding EventsOne 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 StateGenerally, 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 PracticesRyan 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 StatesIn 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: SolutionRyan 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 StoresProps 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 PropsSince 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.
Exercise 4: Props v StateIn 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: SolutionRyan 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 OverviewRyan 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 ExampleRyan 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: FluxIn 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: SolutionRyan begins explaining the solution to Exercise 5.
Exercise 5: Solutions, continuedAfter 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.
Basic RoutingRyan 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 RouterRyan talks about why he created React Router. This library facilitates more complex routing scenarios like nested user interfaces or route cancellation.
Routing QuestionsRyan 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: RoutingIn this exercise, you will add a route to the “about” page above the new contact area.
Exercise 6: SolutionRyan 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 AppSince 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 ConsiderationsRyan 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.
Final QuestionsRyan concludes the course by answering a few final audience questions.