Building Applications with React and Flux

By Cory House
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.
Play course overview
Course info
Rating
(1310)
Level
Intermediate
Updated
Jun 19, 2019
Duration
5h 12m
Table of contents
Course Overview
Course Overview 2m
Intro
Intro 1m Course Outline 1m Who Is This Course For? 1m Why React? 7m Tech Overview 1m React Router Overview 1m Flux Overview 1m Picking a Development Environment 2m Node and npm Overview 1m Babel Overview 3m Webpack Overview 1m ESLint Overview 1m Summary 1m
Environment Setup
Intro 1m Install Node 1m Install VS Code 0m Configure VS Code Extensions: Prettier and ESLint 2m Run create-react-app 6m Install Flux, React Router, and Bootstrap 2m Why a Mock API? 3m Create Mock API 10m Summary 1m
React Core Concepts
Intro 1m React vs. MVC 1m JSX Introduction 8m Virtual DOM 4m Rethinking Separation of Concerns 4m Four Ways to Declare Components 2m Class vs. Function Components 4m Summary 2m
Creating React Components
Intro 1m Demo: Create Function Component 4m Demo: Create App Entry Point 4m Demo: Create Class Component 4m Demo: Simple Routing 7m Summary 1m
Props, State, Lifecycle Methods, and Keys
Intro 1m Props and State 3m Lifecycle Methods 2m Demo: Lifecycle Methods and State 9m Demo: Display Array in a Table via Map 5m Keys 2m Summary 1m
Hooks, Component Composition, and PropTypes
Intro 1m Hooks 6m Demo: Hooks 7m Composing Components 2m Demo: Controller Views 4m PropTypes and Default Props 7m Summary 1m
React Router
Intro 1m Overview: Key Components 2m Demo: Initial Configuration 1m Demo: Declaring Routes 3m Links and NavLinks 2m Demo: Links 2m Demo: NavLinks 4m Switch and 404s 1m Demo: 404s 2m Redirects 2m Demo: Redirects 1m URL Parameters and Querystrings 1m Demo: URL Parameters 6m Prompt on Transition 1m Demo: Prompt on Transition 1m Summary 1m
Forms
Intro 1m Create Add Course Button 2m Create Course Form 2m Controlled Components 1m Form State and Change Handlers 9m Declaring State Change Handlers 5m Creating Reusable Inputs 6m Consuming Reusable Inputs 2m Saving Data 4m Programmatic Redirects with React Router 2m Notifications via a Third Party Component 3m Input Validation and PropTypes 7m Populate Form via the URL 7m Summary 2m
Flux
Intro 1m What Is Flux? 4m Three Core Flux Concepts 1m Actions 2m Dispatcher 1m Stores 4m Controller Views 2m Flux Flow and a Chat With Flux 4m Flux API 3m Summary 1m
Flux Demos
Intro 1m Dispatcher 1m Actions 6m Stores: Change Listeners 6m Stores: Registration 3m Stores: Private Storage 6m Stores: Interactions 5m Stores: Initialization 8m Update Course Flow with Flux 3m Adding Store Listeners 5m Delete Course via Flux 8m Summary: Stepping through Flux 3m Final Challenges 2m
Description
Course info
Rating
(1310)
Level
Intermediate
Updated
Jun 19, 2019
Duration
5h 12m
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
Cory House
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.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT