Introduction
  • Course Outline
  • Join Our Online Classroom!
  • Exercise: Meet The Community
  • Monthly Coding Challenges, Free Resources and Guides
React Key Concepts
  • React Concepts
  • The Birth of React.js
  • Declarative vs Imperative
  • Component Architecture
  • One Way Data Flow
  • UI Library
  • How To Be A Great React Developer
  • React Latest Version!
  • Web Developer Monthly
React Basics
  • Section Overview
  • Environment Setup for Mac
  • Environment Setup For Windows
  • NPM vs YARN
  • Yihua's VSCode font and settings
  • VSCode settings update
  • Create React App
  • Create React App 2
  • React Project Setup
  • Don't Eject
  • Hooks vs Classes
  • Class Components
  • Thinking In JSX
  • Dynamic Content
  • Optional: map() + key attribute
  • Single Page Application
  • Fetching Content
  • Optional: Promises
  • Architecting Our App
  • Card List Component
  • Quick note on quotes for string interpolation
  • Card Component
  • Exercise: Breaking Into Components
  • State vs Props
  • SearchField State
  • React Events
  • Filtering State
  • Optional: filter(), includes()
  • Search Box Component
  • Exercise: Where To Put State?
  • Class Methods and Arrow Functions
  • Exercise: Event Binding
  • Quick Note: Binding in React
  • Optional: Git + Github
  • Optional: Connecting With SSH To Github
  • Deploying Our App
  • NOTE: CORS error
  • React and ReactDOM
  • Latest React Package Updates
  • Revisiting VirtualDOM + Unidirectional Data Flow
  • Asynchronous setState
  • Introducing Lifecycle Methods
  • React Lifecycle Methods - Mounting
  • React Lifecycle Methods - Updating
  • React Lifecycle Methods - Unmounting
  • When should we use a functional component vs a class component?
  • Section Review
Master Project: Setting Up E-commerce Project
  • Endorsements On LinkedIN
  • The Long Road Ahead
  • Project Overview
  • Github + Project Repositories
  • Course Guideline + Github Links
  • Quick Note About Github
  • Update for CRA v4.0.0+ and React 17+
  • E-commerce Homepage + SASS setup
  • Project Files + Modules
  • Project Component Architecture
  • CSS and SCSS files
  • Homepage and Directory Components
  • Styling Menu Items
  • Updated Google Fonts UI
  • Quick Note: React 17
  • React 17: Updating Packages + Latest Version Of React
Master Project: React Router and Routing
  • Routing In React
  • Routing In Our Project
  • React Router Dom
  • withRouter()
Master Project: Forms + Components
  • Shopping Data
  • Shop Page
  • Collection Item
  • Header Component
  • Resources: Importing SVG In React
  • Introducing Forms In React
  • Sign In Component
  • Form Input Component
  • Custom Button Component
Master Project: Firebase + User Authentication
  • Section Overview
  • Firebase Introduction
  • IMPORTANT NOTE: firebase version in the course!
  • Adding a Project to Firebase