A Taste of React
  • Welcome to the Course!
  • Intro to React
  • Is React a Framework or Library?
  • Introducing Components!
  • Looking at a Large App
  • Setting Up Your Server
  • Writing Our First Component
  • Function Vs. Class Components
  • Download All Code, Slides, & Handouts
Introducing JSX
  • Basics Rules of JSX
  • How JSX Works Behind the Scenes
  • Embedding JavaScript in JSX
  • Conditionals in JSX
  • Standard React App Layout
Props and More
  • Intro to React Props
  • Props are Immutable?
  • Other Types of Props
  • Pie Chart Component Demo w/ Props
  • EXERCISE: Slot Machine
  • EXERCISE: Slot Machine Solution
  • Looping in JSX
  • Adding Default Props
  • Styling React
Introducing Create React App
  • Intro to Create React App
  • 2 Ways of Installing CRA
  • Creating a New App
  • Starting Up the Server
  • Modules: Import & Export Crash Course
  • EXERICSE: Fruits Modules
  • EXERCISE: Fruits Modules Solution
  • Create React App Conventions
  • CSS and Assets in Create React App
Pokedex Project
  • Intro To Pokedex Exercise
  • Creating Pokecard Component
  • Adding Pokedex Component
  • Styling PokeCard and Pokedex
  • Adding Fancier Images
  • The PokeGame Component
  • Styling Pokegame
Introducing State
  • State Goals
  • Quick Detour: React Dev Tools
  • State in General
  • Initializing State
  • IMPORTANT! ALTERNATE SYNTAX
  • WTF is super() Vs. super(props)
  • Setting State Correctly
  • Crash Course: Click Events in React
  • ALTERNATE SYNTAX PT 2
  • EXERCISE: State Clicker
  • EXERCISE: State Clicker Solution
  • The "State As Props" Design Pattern
React State Dice Exercise
  • Introduction to Dice Exercise
  • Writing the Die Component
  • Adding the RollDice Component
  • Styling RollDice
  • Animating Dice Rolls!
React State Patterns
  • Updating Existing State
  • Mutating State the Safe Way
  • Designing State: Minimizing State
  • Designing State: Downward Data Flow
  • State Design Example: Lottery
  • State Design Example: LottoBall Component
  • State Design Example: Lottery Component
State Exercises!
  • State Exercise 1: Coin Flipper
  • State Exercise 1: Coin Flipper Solution
  • State Exercise 2: Color Boxes
  • State Exercise 2: Color Boxes Solution
The World of React Events
  • Commonly Used React Events
  • The Joys of Method Binding :(
  • Alternative Binding With Class Properties
  • Binding With Arguments
  • Passing Methods to Child Components
  • Parent-Child Method Naming
  • Quick Detour: React Keys
Hangman Exercise
  • Introducing The Hangman Exercise
  • Starter Code Walkthrough
  • Adding Keys
  • Tracking Incorrect Guesses
  • Adding Game Over
  • Adding Alt Text
  • Randomizing Words
  • Adding a Reset Button
  • Making the Game Winnable & Styling
Lights Out Game
  • Introducing Lights Out
  • Exploring the Starter Code
  • Displaying the Game Board
  • Flipping Cells
  • Winning the Game