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