Building Applications with React and Redux

Learn how to use React, Redux, React Router, and modern JavaScript to build an app with React. Use Webpack, Babel, Jest, React Testing Library, Enzyme, and more to build a custom React development environment and build process from the ground up.
Course info
Rating
(1328)
Level
Intermediate
Updated
Mar 12, 2019
Duration
6h 39m
Table of contents
Course Overview
Intro
Environment Build
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
(1328)
Level
Intermediate
Updated
Mar 12, 2019
Duration
6h 39m
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. Learn how to use React, Redux, React Router, and modern JavaScript to build powerful and fast React applications from the ground up. Use Webpack, Babel, ESLint, npm scripts, Jest, React Testing Library, Enzyme, and more. Create a rapid feedback development environment that runs linting and tests, transpiles modern JavaScript, runs a local webserver, opens the application, and reloads changes when you hit save. Deploy with a single command. This course lays out a clear path for building robust, scalable React applications using today's modern and popular technologies.

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
Building Applications with React and Flux
Intermediate
5h 11m
Jun 19, 2019
Securing React Apps with Auth0
Intermediate
3h 18m
Nov 30, 2018
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 what 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 1 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.

Intro
Hi there, I'm Cory House, and welcome to Building Applications with React and Redux. React is one of the world's most popular UI libraries, and Redux has become React's most popular state management library. Along with React and Redux, we're going to use a variety of other popular tools, including React Router, Babel, Webpack, Jest, and much more. In this course, we'll use some of the most popular and powerful tools that are available for building web apps today. Before we get started, I'd love feedback. I'm active on Twitter as housecor, and I offer React consulting and training services at reactjsconsulting.com. Here's the high-level course outline. Most modules are around 20 minutes. In this module, I'll quickly discuss the intended audience for this course so that you can decide if this is the right course for you. I'll also share why Redux has become so popular. Then, we'll set up an awesome development environment. But if you're in a hurry, you can skip this module and download the finished environment. We'll move on to explore the many approaches to creating React components. Then, we'll build our initial app structure and set up React Router so that we have a useful app to work with. After setting this foundation, we'll be ready to explore Redux in detail for the rest of the course. We'll build a course management app from scratch so that we can learn Redux by example. It will support creating, editing, and deleting course data. And it will make calls to a local mock API. We'll wrap up the course by exploring automated testing in both React and Redux, as well as creating a production build. Most of the first half of the course is conceptual, and most of the last half is coding. Alright, with the outline out of the way, the next question is who's this course for? Let's address that next.

React Component Approaches
If you're watching this course, I assume that you're already generally familiar with React. But there are 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 today. You may be surprised how many ways you can create a React component these days. And we'll wrap up by contrasting container versus presentational components. You'll see that each has a unique purpose. Understanding the difference will help us write clean, reusable components and help us assure that our application is easier to maintain and scale. 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 into the code. In this module, we'll fire up the editor and create our first few React components that will form our app's foundation. We'll create our application's first pages, and we'll create a layout that's utilized on all these pages. We'll use React Router for configure our routing and set up navigation between our app's first few pages. Let's dive in.

Intro to Redux
In the first few modules, we've 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 manage our app data flows and what problems Redux solves. 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 useful for those who already know Flux. Then we'll wrap up by reviewing a simple example of the Redux flow. Alright, let's dive into Redux.

Actions, Stores, and Reducers
We've discussed Redux's core concepts in the previous modules, but we don't know enough yet to start writing code. So now's the time to dive deeper into the core pieces of Redux. In this module, we'll 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 write reducers. And we'll close out by discussing how Redux handles state updates with reducers. Alright, let's start by exploring actions further.

Connecting React to Redux
We've explored nearly all the Redux pieces that we're going to use in this course. But the one obvious remaining question is, how do I connect my React components to Redux? The great news is Redux pulls this off in an 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 the 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. We'll wrap up our discussion with a summary style inspired by the great Kathy Sierra that I call a chat with Redux. This will help you understand Redux by thinking about each of the pieces as different people that are having a conversation. The rest of the course is almost exclusively writing code, so let's wrap up these final key concepts.

Redux Flow
We've spent the last few modules building a strong foundation. Now we have all the pieces in place to finally dive into the code for the rest of the course. There are very few slides from here on out. We have the knowledge that we need, so let's put it to use and start coding. Before we start setting up Redux, I want to warn you. Redux will likely feel intimidating at first. There are a lot of moving pieces to set up, which is going to make it look like adding a feature is a lot of work. There are eight steps to initially set up Redux. But after this initial setup, things will get much easier. Adding additional features requires much less work. So you'll notice that things get easier as we progress through the course. So please be patient. After we set up the first feature, you'll see that adding more features takes much less time and also has a clear predictable flow. If you're confused after we add this first feature, don't worry. I was too. We'll add a few more features, and I think you'll find that the repetition will help the flow sink in. 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. We'll set up our Redux store. We'll handle state changes via a reducer and ultimately complete the loop by wiring our first container component, which will connect to our Redux store using Redux Connect. In this module, we'll experience the full flow of working with Redux by building a single feature from the ground up.

Async in Redux
So far, we've only created synchronous actions. What happens when we want to do async activities, like make API 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. And we'll quickly set up a mock API by pulling in some files from the course exercises. Before we start calling web APIs with Redux, it's useful to understand Redux middleware. So I'll introduce the concept of Redux middleware. We won't need to write our own middleware though because there's a variety of mature Redux middleware libraries that are available for handling async flows in Redux. And once this foundation is set, we'll be back in the code for nearly the rest of the course as we implement asynchronous flows using Redux Thunk. Alright, let's get started by discussing 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. This module is all code. We're going to 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 we'll initially populate the form using our Redux store's data via a combination of mapStateToProps and the useEffect hook. Alright, back to the editor. Let's keep coding.

Testing React
Testing the front-end can be tricky. 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 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 use Jest as our testing framework, and we'll test the same React component using two popular options, Enzyme and React Testing Library. This way you can see the benefits of each approach. As you'll see, we can simulate a render without opening a real browser, pass properties to our component, simulate interactions, and assert on the results of these interactions. Let's begin by discussing testing frameworks and libraries.

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 is really just a final integration test. And we'll continue to use Jest to write our tests. Let's begin by writing a test for a connected component.

Production Builds
This may be the final module, but it's seriously important. Today's front-end development stack requires a modern and powerful production build to prepare the app for deployment. If you've opened up the Network tab in the browser, you might have noticed that the dev build for our application is seriously huge. That's obviously not going to work for production, so let's solve this. In this final module, you'll see how to make a real production build happen. To close out the course, let's set up our production build process.