Building Applications with React and Redux in ES6

Learn how to use Redux, React Router, and ES6 to build a real world app with React. Use Webpack, Babel, ESLint, npm scripts, Mocha, Enzyme, and more to build a rich, one step, custom React development environment and build process from the ground up.
Course info
Rating
(1154)
Level
Intermediate
Updated
May 20, 2016
Duration
6h 13m
Table of contents
Course Overview
Intro
Environment Setup
React Component Approaches
Initial App Structure
Intro to Redux
Actions, Stores, and Reducers
Connecting React to Redux
Redux Flow
Async in Redux
Async Writes in Redux
Async Status and Error Handling
Testing React
Testing Redux
Production Builds
Description
Course info
Rating
(1154)
Level
Intermediate
Updated
May 20, 2016
Duration
6h 13m
Description

React is a library with so much power, but so few strong opinions. So building something significant requires a large number of decisions and work to build the foundation. In Building Applications with React and Redux in ES6, you will learn how to use Redux, React Router, and ES6 to build powerful and fast React applications from the ground up, as well as use Webpack, Babel, ESLint, npm scripts, Mocha, Enzyme. Finally, you will create a rapid feedback development environment that runs linting and tests, transpiles ES6 to ES5, starts up Express as a webserver, opens the application, and hot reloads changes every time you hit save and deploys with a single command. When you're finished with this course, you will have a foundational knowledge of React and Redux in ES6 that will help you as you move forward building robust, scalable React applications using a custom, rapid feedback development environment.

About the author
About the author

Cory is an independent consultant with over 15 years of experience in software development. He is the principal consultant at reactjsconsulting.com and a Microsoft MVP.

More from the author
React: The Big Picture
Beginner
1h 11m
21 Nov 2017
Creating Reusable React Components
Intermediate
6h 20m
5 Jun 2017
More courses by Cory House
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi! I'm Cory House. I really love React. And if you're watching this, I'm betting that you do too. Now, I assume you already know the basics of React. Yet, React presents a simple problem, decision fatigue. You may understand the basics of React, but can you build something big, complicated, interactive, and testable with it? React is just a library, so chances are you're going to need a variety of other tools, libraries, and patterns to build something real. Redux is one such library. Redux has eclipsed a long list of alternatives to become the de facto Flux implementation. So we're going to explore Redux from the ground up, and you'll see why it's been so widely embraced. Yet even after you've chosen well with React and Redux, you still have two hard problems to solve. Problem one is what libraries should I compose with these two technologies? And problem two is once I've decided, how do I connect it all together in a way that makes sense and is maintainable and testable? This course answers both of these questions in a comprehensive manner. We'll build a real-world style React and Redux application from the ground up. With one command, we'll lint our code, run our tests, transpile ES6 to ES5, bundle, minify, start up a web server, open the application in the default browser, and hot reload our changes all along the way. Trust me, once you experience React development this way, you won't want to go back.

React Component Approaches
If you're watching this course, I assume you're already generally familiar with React, so this module isn't going to start from the beginning. I assume you already know about the virtual DOM, JSX, lifecycle methods, props, state, and React's component composition model. If you're not, refer to the React module in my React and Flux course where I start with React from the beginning. With that said, there're a few important React-specific topics that I want to discuss before we dive into Redux. In this module, I have two core goals. First, we'll discuss the many approaches that you can consider for creating React components. You'll be surprised how many ways you can create a React component these days. And we'll wrap up by contrasting container and presentational components. You'll see that each has a unique purpose. Understanding the difference will help us write clean reusable components and help assure that our application is easier to maintain and scale. Alright, let's get started by exploring the surprising number of ways that you can create a React component.

Initial App Structure
Enough concepts. It's time to get back into code. In this module, we'll fire up the editor and create our first few React components that will form our app's foundation. To create the foundation of our app, in this module we'll create our first React components. We'll create our application's first pages. We'll create a layout that's utilized on all those pages. We'll use React Router to configure routing and set up navigation as well. So you can think of this module as a fast-paced review of React and React Router that also serves to create the foundation that we need so that we have a solid app we can enhance with Redux. Alright, let's get started.

Intro to Redux
In the first few modules, we created a solid foundation with a robust development environment and a solid application structure using React and React Router. In this module, we'll explore how Redux can help us manage our application's data flows via a quick introduction. In this module, we'll begin by asking the most obvious question. Do I need Redux? Like any tool, it's useful in certain contexts and not necessary for everyone. Then we'll consider Redux's three core principles. From there, I'll show how these three principles impact Redux's design. I'll contrast Flux with Redux in detail. This section is really useful for those who already know Flux well. It should help you get up to speed on Redux pretty quickly. Then we'll wrap up by reviewing a simple example of the full Redux flow. Alright, let's dive into Redux.

Actions, Stores, and Reducers
We discussed Redux's core concepts in the previous modules, but we don't know enough yet to start writing code, so it's time to dive deeper into the core pieces of Redux. Here's the plan. In this module, we're going to look at actions, the Redux store, we'll discuss immutability in detail since you need to understand how to handle this concept in JavaScript before you can write reducers, and we'll close out by discussing how Redux handles state updates using reducers. Alright, let's start by exploring actions further.

Connecting React to Redux
We've explored nearly all of the Redux API that we're going to use in detail at this point. The one obvious unanswered question is how do I connect my React components to Redux? The great news is Redux pulls this off in a really elegant way. So in this module, we'll begin by quickly reviewing the difference between container and presentation components. Then we'll check out react-redux, the Redux companion library that will connect our React components to our Redux store. You'll see how the Provider component wraps the application so that the Redux store is available, and you'll see how to use the connect function to connect React components to the store and specify what properties and actions you'd like to attach to your component. And we'll wrap up our discussion with a summary style that's inspired by the great Kathy Sierra that I like to call A Chat with Redux. The rest of the course is almost exclusively writing code, so let's quickly wrap up these final key concepts.

Redux Flow
Alright, we've spent the last few modules building a strong foundation. Now we have all the pieces in place to finally dive into code for the rest of the course. There are very few slides from here on out. We already have the knowledge we need, so let's put it to use and start coding. In this module, we'll build our first feature using Redux. We'll create a simple form for adding courses. We'll define actions and action creators and set up our Redux store. We'll handle state changes via a reducer and ultimately complete the loop by wiring up our first container component, which will connect to our Redux store using Redux connect. In this single module, we'll experience the flow of working in Redux from the ground up by building our first feature. Alright, fire up your editor of choice. Let's get coding!

Async in Redux
So far, we've only created asynchronous actions, so what happens when we want to do asynchronous activities like make AJAX calls to the server? Here's the plan for this module. We'll begin by discussing the merits of creating and using a mock API throughout development. Then we'll discuss the various libraries available for enabling asynchronous flows in Redux. Once this foundation is set, we'll be back in code for nearly all the rest of the course as we implement asynchronous flows using redux-thunk. Let's get started by considering the merits of mock APIs.

Async Writes in Redux
Now that we're comfortable using thunks to load course data asynchronously, let's put these new skills to use for creating and updating courses. In this module, we'll create a full course management page that allows us to asynchronously create and update course data. We'll compose the form by creating a few reusable form inputs, and you'll see how to populate the form using our Redux stores data via a combination of mapStateToProps and componentWillReceiveProps. Alright, time to get back to the editor. Let's keep coding.

Async Status and Error Handling
Welcome back! Our application is coming together nicely, but there's still a lot of room for improvement. We're completely ignoring async status and error handling. So in this module, let's use React, Redux, promises, and a few other tricks to polish our application's user experience. This short module is all code, so we're going to jump right back into the editor and continue coding. Here's some specific issues that we want to address with the current user experience. First, when the app first loads on the Courses page, you see a blank white screen until the API call to retrieve course data is complete. Our form experience is poor too. When the user hits Save, we have no indication that an async save is in progress. Instead, we're being redirected to the Course page before our save is complete. So we're seeing the updates plop in after our redirect, which is rather clunky. Finally, if the API call fails for some reason, it currently does so silently because we're not properly handling rejected promises. So in this module, let's jump back into the editor and address these key issues. The first is to start tracking and displaying the status of asynchronous calls like AJAX calls to the server, and the second is to elegantly address errors that may occur when making API calls in our thunks. That's the plan. Alright, let's get to it!

Testing React
Usually, testing the front end is hard. With React, life has gotten significantly simpler. React is built on the idea that components produce HTML based on props and state. This simple design makes testing React components quite straightforward compared to many alternative UI designs. Here's the plan. If you're new to automated testing, just deciding what to use can be a major hurdle, so we'll begin by reviewing the long list of options to consider in this space, including testing frameworks, assertion libraries, and helper libraries. Once we've clarified our testing stack, we'll spend the rest of our time back in the editor writing tests. We'll test the same component using both ReactTestUtils and Enzyme in order to contrast the benefits of each approach. As you'll see, we can simulate a render without opening a real browser, and we can pass properties to our component, simulate interactions, and assert on the results of these interactions. Now this is a big topic with a lot of ground to cover, so I'm just going to show one way to get it done with my preferred tooling. But know this. There're many other options out there if you don't like what you see here.

Testing Redux
We just saw how React's design lends itself very nicely to testing, and as you're about to see, Redux was designed with testing in mind from the beginning as well. In this module, we'll focus on how to test all the pieces of Redux. We'll write tests for React components that are connected to Redux and all the discrete pieces of Redux including action creators, thunks, reducers, and the Redux store, which, as you'll see, is really just a final integration test. We'll continue to use Mocha and expect to get all this done. Let's begin by writing a test for a connected component.