Getting Started
  • Introduction
  • What is React?
  • Real-World SPAs & React Web Apps
  • Writing our First React Code
  • Why Should we Choose React?
  • React Alternatives
  • Understanding Single Page Applications and Multi Page Applications
  • Course Outline
  • How to get the Most out of This Course
  • Useful Resources & Links
Refreshing Next Generation JavaScript (Optional)
  • Module Introduction
  • Understanding "let" and "const"
  • Arrow Functions
  • Exports and Imports
  • Understanding Classes
  • Classes, Properties and Methods
  • The Spread & Rest Operator
  • Destructuring
  • Reference and Primitive Types Refresher
  • Refreshing Array Functions
  • Wrap Up
  • Next-Gen JavaScript - Summary
  • JS Array Functions
Understanding the Base Features & Syntax
  • Module Introduction
  • The Build Workflow
  • Using Create React App
  • Understanding the Folder Structure
  • Understanding Component Basics
  • Understanding JSX
  • JSX Restrictions
  • Creating a Functional Component
  • Components & JSX Cheat Sheet
  • Working with Components & Re-Using Them
  • Outputting Dynamic Content
  • Working with Props
  • Understanding the Children Property
  • Understanding & Using State
  • Props & State
  • Handling Events with Methods
  • To Which Events Can You Listen?
  • Manipulating the State
  • Function Components Naming
  • Using the useState() Hook for State Manipulation
  • Stateless vs Stateful Components
  • Passing Method References Between Components
  • Adding Two Way Binding
  • Adding Styling with Stylesheets
  • Working with Inline Styles
  • Time to Practice - The Base Syntax
  • [OPTIONAL] Assignment Solution
  • Useful Resources & Links
Working with Lists and Conditionals
  • Module Introduction
  • Rendering Content Conditionally
  • Handling Dynamic Content "The JavaScript Way"
  • Outputting Lists (Intro)
  • Outputting Lists
  • Lists & State
  • Updating State Immutably
  • Lists & Keys
  • Flexible Lists
  • Wrap Up
  • Time to Practice - Lists & Conditionals
  • [OPTIONAL] Assignment Solution
  • Useful Resources & Links
Styling React Components & Elements
  • Module Introduction
  • Outlining the Problem Set
  • Setting Styles Dynamically
  • Setting Class Names Dynamically
  • Adding and Using Radium
  • Using Radium for Media Queries
  • MUST READ: Enabling CSS Modules
  • Enabling & Using CSS Modules
  • More on CSS Modules
  • Adding Pseudo Selectors
  • Working with Media Queries
  • Useful Resources & Links
Debugging React Apps
  • Module Introduction
  • Understanding Error Messages
  • Finding Logical Errors by using Dev Tools & Sourcemaps
  • The React Developer Tools
  • Working with the React Developer Tools
  • Using Error Boundaries (React 16+)
  • Wrap Up
  • Useful Resources & Links
Diving Deeper into Components & React Internals
  • Module Introduction
  • A Better Project Structure
  • Splitting an App Into Components
  • Comparing Stateless and Stateful Components
  • Class-based vs Functional Components
  • class Component Lifecycle Overview
  • Component Creation Lifecycle in Action
  • Component Update Lifecycle (for props Changes)
  • Component Update Lifecycle (for state Changes)