Building Applications with React and Flux

React: Creating Components Introduction
Now we've set the foundation by covering a few core concepts in React so we're ready to start building components. In this module we'll begin building our example application which is a web-based tool for managing Pluralsight authors. Let's begin by diving right into the code. In this first coding module we'll create our first React components, implement simple, custom routing and create a centralized layout for our application. And we'll close out this module by quickly discussing the naming conventions that I'll use throughout this course. All right, open up your editor of choice, mine happens to be Sublime Text. Let's start coding.

React Lifecycle
In the previous module, we created our first React components and we utilized custom routing and a centralized header to support client-side navigation. Now it's time to discuss the tools we need to create more dynamic components. So we'll begin this module by discussing props and state. And we'll learn how to handle dynamic child components by assigning keys. Then we'll discuss React's multiple lifecycle functions which give us hooks for initializing our components and attaching behaviors at specific points in time. Once you understand these concepts, you'll be ready for the second half of this module where we get back into the code and we put these concepts to use. We'll create a simple mock API that we'll use throughout the course, and then we'll create some dynamic components that put these principles to work.

React Composition
In the previous module, we created the author page component. That component contains all the logic and markup for displaying author data. In this module, we'll learn about the importance of composition, and we'll see how to break our author page component down into the controller view pattern. Let's begin by discussing composition and controller views. Then we'll move on to PropTypes, which help us clearly convey the data that we expect to recieve in our child components. Then we'll wrap up by quickly discussing Mixins for handling cross-cutting concerns, which we'll put to further use in the following module.

React Router
Hi, I'm Cory House. 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 way to route between the different parts of our application. So to get that done, we need to select a router. In this module, we'll implement the most popular routing solution for React called React Router. Since React is a small, focused view engine, it has no opinion on how to handle routing built-in. And for small apps you may have no need for a fully-featured router. But as your application grows, you'll likely find you want to split the application into multiple client rendered pages with deep linking. And that's where a routing library comes in handy. So for routing on our app, we'll use React Router. React Router offers a simple, nested approach to routing. You declaratively configure your routes and the ability to nest routes means that it can support complex UIs that are many layers deep. And React Router isn't just used at Facebook, it's also supported by Facebook employees full-time. Finally, if you're already familiar with Ember, you'll find React Router is very easy to pick up since it's heavily inspired by Ember's approach to routing. Regardless, I'm sure you'll find the declarative and centralized approach easy to understand.

React Forms
So far, we've learned how to create reusable components with React, and we've seen how to handle client-side routing using React Router. Now it's time to enable writing and editing author 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 in Angular, Knockout, Backbone or Ember. We've been doing forms for years, so forms should be easy, right? Well, if you've built forms for long, you have likely learned that 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'll implement a form to handle adding and editing author data. This sounds simple enough, but we'll cover a long list of concerns, including validation, redirects, reusable inputs, user notifications, and saving and populating data on load. You'll learn when and where to wire these up, and some best practices for creating forms in React. Bottom line, forms can be complicated, but this module will set a clear path for implementing robust, responsive forms that make users happy.

Flux Demos
Welcome to the final capstone module for the course. In the previous module, we learned about the Flux pattern. We discussed the core concepts in Flux, including actions, dispatchers and stores, but that's enough concept because now it's time for demos. Let's get back into the code and put these ideas to work.