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