Welcome
  • Welcome & Asking Good Questions
  • "Why should I learn React?"
Setting up Your Environment
  • Section Intro: Setting up Your Environment
  • Installing Visual Studio Code
  • Installing Node.js & Yarn
Hello React
  • Section Intro: Hello React
  • Setting up a Web Server
  • Hello React
  • Setting up Babel
  • Exploring JSX
  • JSX Expressions
  • Conditional Rendering in JSX
  • ES6 Aside: const and let
  • ES6 Aside: Arrow Functions
  • ES6 Aside: Arrow Functions Part II
  • Events and Attributes
  • Manual Data Binding
  • Forms and Inputs
  • Arrays in JSX
  • Picking an Option
  • Build It: Visibility Toggle
React Components
  • Section Intro: React Components
  • Thinking in React
  • ES6 Classes: Part I
  • ES6 Classes: Part II
  • Creating a React Component
  • Nesting Components
  • Component Props
  • Events & Methods
  • Method Binding
  • What Is Component State?
  • Adding State to Counter App: Part I
  • Adding State to Counter App: Part II
  • Alternative setState Syntax
  • Build It: Adding State to VisibilityToggle
  • Indecision State: Part I
  • Indecision State: Part II
  • Summary: Props vs. State
Stateless Functional Components
  • Section Intro: Stateless Functional Components
  • The Stateless Functional Component
  • Default Prop Values
  • React Dev Tools
  • Removing Individual Options
  • Lifecycle Methods
  • Saving and Loading Options Data
  • Saving and Loading the Count
Webpack
  • Section Intro: Webpack
  • What Is Webpack?
  • Avoid Global Modules
  • Installing & Configuring Webpack
  • ES6 import/export
  • Default Exports
  • Importing npm Modules
  • Setting up Babel with Webpack
  • One Component per File
  • Source Maps with Webpack
  • Webpack Dev Server
  • ES6 class properties
Using a Third-Party Component
  • Section Intro: Using a Third-Party Component
  • Passing Children to Component
  • Setting up React-Modal
  • Bonus: Refactoring Other Stateless Functional Components
Styling React
  • Section Intro: Styling React
  • Setting up Webpack with SCSS
  • Architecture and Header Styles
  • Reset That $#!*
  • Theming with Variables
  • Big Button & Options List
  • Styling the Options List
  • Styling Option Item
  • Styling React-Modal
  • Mobile Considerations
  • Bonus: Favicon
React-Router
  • Section Intro: React Router
  • Server vs. Client Routing
  • Setting Up Budget App
  • React-Router 101
  • Setting up a 404
  • Linking Between Routes
  • Organizing Our Routes
  • Query Strings and URL Parameters
  • Build It: Router for Portfolio Site
Redux
  • Section Intro: Redux
  • Why Do We Need Something Like Redux?
  • Setting up Redux
  • Dispatching Actions
  • Subscribing and Dynamic Actions
  • ES6 Object Destructuring
  • ES6 Array Destructuring
  • Refactoring and Organizing