Building Applications with React and Flux

Get started with React, React Router, and Flux by building a data-driven application that manages Pluralsight course data. This course uses a modern client-side development stack including create-react-app, Node, Webpack, Babel, and Bootstrap.
Course info
Rating
(1283)
Level
Intermediate
Updated
Jun 19, 2019
Duration
5h 11m
Table of contents
Course Overview
Intro
Environment Setup
React Core Concepts
Creating React Components
Props, State, Lifecycle Methods, and Keys
Hooks, Component Composition, and PropTypes
React Router
Forms
Flux
Flux Demos
Description
Course info
Rating
(1283)
Level
Intermediate
Updated
Jun 19, 2019
Duration
5h 11m
Description

Get started with React, React Router, and Flux by building a real-world style data-driven application that manages Pluralsight course data. This course uses a modern client-side development stack including create-react-app, Node, Webpack, Babel, and Bootstrap.

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 Redux
Intermediate
6h 39m
Mar 12, 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 everyone, my name is Cory house, and welcome to my course, Building Applications with React and Flux. I'm the principal consultant at reactjsconsulting.com. I've enjoyed working heavily with React since it was open source in 2013. React is one of the world's most popular technologies for building web apps today and for good reason. It's fast, it offers an elegant programming model, and it boasts a huge ecosystem of existing libraries and components. In this course, we're going to build a realistic data management app to explore the core features of React, Flux, and React Router. Some of the major topics that we'll cover include generating new React apps with create-react-app, handling state and props, performing client-side routing with React Router, creating reusable React components, and implementing one-way data flows with Flux. By the end of this course, you'll know how to build a realistic and scalable React app that supports creating, updating, and deleting data. Before beginning the course, you should be familiar with JavaScript, HTML, and some basic CSS. I'm assuming that you're new to React, and don't worry if you aren't up to speed on all the latest JavaScript features. I'll introduce modern JavaScript features along the way. I hope you'll join me on this journey to learn React, React Router, and Flux with the Building Applications with React and Flux course, at Pluralsight.

Intro
Hi, and welcome to Building Applications with React and Flux. I'm Cory House. In this course, we're going to use React, React Router, Flux, and a variety of related technologies to build a realistic course management application. You can find me on Twitter as @housecor or on my consulting site at reactjsconsulting.com. So who is this course for? Well, there are three core audiences for this course. If you're new to React and want to learn it by building a real app from the ground up, then this course is for you. I assume no previous knowledge of React. And if you're building a real app with React, you'll likely need to define routes so that users can navigate through your app, share deep links, and transition smoothly between different app states. React Router is a popular routing option that we'll use in this course to handle our routing. Finally, maybe you enjoy React, but you haven't yet tried out Flux. In this course, you'll learn how to implement unidirectional data flows using the Flux pattern, including actions, dispatchers, stores, and the various new jargon that comes along with using Flux. We'll explore the core concepts behind Flux and then use it to handle events and data flows in our app. Next, let's briefly look at the high-level course outline.

Environment Setup
These days, there's a wonderful variety of free tools available to do rapid client-side development. In the previous module, we discussed a few of these tools. In this module, we'll set up our environment so that we receive rapid feedback as we build our React app. In this module, we'll install Node. We'll install VS Code as our editor, although you're free to use the editor that you like best. We'll configure Prettier to autoformat our code. Then we'll run create-react-app to generate our app. We'll run the app and review what's inside. We'll also add a few other packages that we're going to use throughout this course, including React Router for routing, Flux for state management, and Bootstrap for styling. We'll close out the module by configuring a mock API that will host our course and author data that we're going to use to build our course management application.

React Core Concepts
Now that our development environment is set up, let's learn some key React features so that we can put it to use. In this module, we'll begin by comparing React's model to the MVC pattern. Then we'll explore one of the most unique aspects of React, which is JSX. We'll look at how React's innovative virtual DOM helps deliver exceptional performance and an excellent developer experience. We'll consider separation of concerns and discuss how React requires you to rethink how you separate your concerns. With these core concepts settled, we'll look at different ways that you can declare React components. And we'll close out this short module by creating our first React components. All right, let's begin.

Creating React Components
Now that we've set the foundation by covering a few core concepts in React, we're ready to start building components. In this module, we'll begin building our example app, which is a web-based tool for managing Pluralsight courses. So let's begin by diving right into the code. In this first coding module, we'll create our initial app structure including routing and a centralized layout for our application. Alright, open up your editor of choice. Let's get started.

Props, State, Lifecycle Methods, and Keys
In the previous module, we created our first React components. We utilized custom routing and a centralized header to support client-side navigation. Now it's time to discuss the tools that we need to create more dynamic components. First, in this module, we'll discuss props, which allow you to pass data to your components, and state, which allows you to declare local data in your component that can change over time. Then we'll discuss React's multiple lifecycle methods for class-based components. Lifecycle methods allow us to initialize class components and attach behaviors at specific points in time. We'll handle dynamic child components by assigning keys to elements. And don't worry, we'll do plenty of coding as well. Along the way, we'll enhance some components to put these features to work.

Hooks, Component Composition, and PropTypes
In the previous module, we covered many critical React features such as props and state. In this module, we'll explore a few more key features that you're likely to use on every app. We'll begin by exploring Hooks. Hooks perform a similar role as lifecycle methods, but Hooks only work with function components. We'll discuss component composition and separate our logic from our markup using the controller view pattern. Then we'll move on to PropTypes, which will help us clearly convey the data that we expect to receive in our child components.

React Router
In the previous module, we saw how React components give us the power to create rich web UIs using small, composable components, but now we need a new to route between the different parts of our application. To get that done, we need to select a router, so in this module, we're going to implement client-side routing using React Router. We'll declare routes, handle URL parameters, link between pages, perform redirects, implement a 404 page to display when a page isn't found, and we'll prompt the user before performing a page transition.

Forms
So far, we've learned how to create reusable components with React. We've seen how to handle client-side routing using React Router as well. Now it's time to enable writing and editing course data using forms. As you'll see, React's virtual DOM makes working with forms a bit different than what you might be used to. We've been doing forms for years, so you might think that forms should be easy. Well, if you've built forms for long, you've likely learned that actually there's a lot of pieces to get right. And watch out because React has some unique attributes that might surprise you when you start creating forms with it. In this module, we're going to implement a form to handle adding and editing course data. That sounds simple, but we're going to cover a long list of concerns including validation, redirects, reusable inputs, user notifications, saving, and population on load. All right, let's get started.

Flux
So far, we've learned how to create reusable components with React, and we've seen how to handle client-side routing with React Router. Now it's time to handle data flows throughout our app using Flux. Flux is a state management pattern that was popularized by Facebook. In this module, we'll explore Flux in detail, including actions for handling events, stores that hold app state, and a dispatcher that acts as the central hub.

Flux Demos
Welcome to the final capstone module for the course. In the last module, we learned about Flux. We discussed the core concepts in Flux including actions, dispatchers, and stores, but that's enough concepts because it's time for some action. Let's get back into the IDE and update our app to put Flux to use. This entire module is coding. We're going to build out actions for creating, updating, and deleting courses, emit those actions via the dispatcher, and create a course store to handle data changes and store course data. And we'll attach React to the Flux store so that it's notified and re-renders when the store changes.