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.
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.
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.