Learn React Lessons

Course Introduction

What we'll learn

First React Code 🎉

First React Challenge

Local Setup w/ Vite

Libraries/Frameworks

React.createElement()

JSX

Why React? It's Composable!

Why React? It's Declarative!

Random housekeeping

ReactFacts Project - Markup

Pop quiz

Custom Components

Custom Components Challenge Part 2

Custom Components Quiz

Fragments

Custom Components - Parent/Child Components

Styling with Classes

Organizing Components

Make Mental Outline of Project

Initial Project Setup

ReactFacts Project - Navbar & Styling

ReactFacts Project - Main Content Section

ReactFacts Project - Coloring the Bullets

ReactFacts Project - Add Background Image

Section 1 Recap

Solo Project (PRO) - Digital Business Card

Learning in public

Section 2 Intro

Travel Journal - Header

Travel Journal - Entry Component

Problem - Not reusable

Props Part 1: Understanding the Concept

Props Part 2: Reusable Components

Aside: JS inside JSX

Props part 3: Create a contact component

Props part 4: Passing data into a component

Props part 5: Receiving props in a component

Prop quiz! (Get it?? 😆)

Destructuring props

Props practice

Non-string props

Importing static assets

Pass props to Entry component

Review - array .map()

React can render arrays

Mapping components

Map quiz!

Travel Journal: Map Entry components

Travel Journal: key prop

Travel Journal: Pass object as props

Travel Journal: Spread object as props

Want to become a Scrimbassador?

Section 2 Recap

Section 3 Intro

Chef Claude: Header

Chef Claude: form

Chef Claude: Project overview

Event Listeners

Chef Claude: Map ingredients list

Props vs. State: Props

Props vs. State: State

useState

useState array destructuring

Changing state

State practice

Updating state with a callback function

Changing state quiz

Ternary practice

Toggling state

Complex state: Arrays

Chef Claude: Refactor array state

Complex state: Objects

Complex state: updating state objects

React forms intro

Form basics

Form submission

Form action

Chef Claude: Refactor form submission

Forms: textarea & defaultValue

Forms: radio

Forms: checkbox

Forms: select and option

Forms: Object.fromEntries

Chef Claude: conditional rendering intro

Conditional rendering: &&

Conditional rendering: Why does && work?

Conditional rendering practice: &&

Conditional rendering: ternary

Conditional rendering practice

Conditional rendering quiz

Chef Claude: conditional rendering challenge 1

Chef Claude: conditional rendering challenge 2

Chef Claude: Get recipe placeholder challenge

Passing state as props

Setting state from child components

Passing data around React

Sound pads challenge, part 1

Dynamic styles

Sound pads challenge, part 2

Sound pads challenge, part 3

Sound pads challenge part 4.1 - local state

Sound pads challenge part 4.2 - shared state

Sound pads challenge part 4.3 - updating item in array

Chef Claude challenge: refactor to separate components

API Sign Ups

AI code walkthrough

Quick AI Update

Challenge quiz: prep to get recipe from the AI chef 🤖👨‍🍳

Challenge: Get recipe from the AI chef 🤖👨‍🍳

Format recipe response

Section 3 Outro

Section 4 Intro

Meme Generator Starting Point

Meme Generator State

Meme Generator - Controlled Components - part 1

Meme Generator - Controlled Components - part 2

Meme Generator - Planning data fetch

Functional programming in React

Fetching data in React

Intro to useEffect

useEffect() syntax and default behavior

useEffect() Dependencies array

useEffect empty dependencies array

useEffect quiz!

useEffect practice!

Meme Generator - Fetch Memes

State and Effect practices

useEffect cleanup function

Meme Generator - Get random meme

Sneak peak: refs

useEffect practice: scrollIntoView()

scrollIntoView() iFrame bug fix 🐜

Section 4 Outro

Tenzies Intro

Tenzies: Setup

Tenzies: Die component

Tenzies: Generate 10 random numbers

Tenzies: Map array to Die components

Tenzies: Roll dice button

Tenzies: Change dice to objects

Tenzies: Styling held dice

Tenzies: Hold dice - part 1

Tenzies: Hold dice - part 2

Tenzies: Hold dice - part 3

Tenzies: End game - part 1

Tenzies: End game - part 2

Tenzies: End game - part 3

Tenzies: Lazy State Initialization

Tenzies: New game

Tenzies: Accessibility Improvements

Tenzies: Accessibility Improvements - part 2

Tenzies Outro

Assembly Endgame Intro

Assembly Endgame - Project Planning

Assembly Endgame - Header Section

Assembly Endgame - Status Section

Assembly Endgame - Languages List

Assembly Endgame - Word Display

Assembly Endgame - Keyboard

Assembly Endgame - Save the guessed letters

Assembly Endgame - Keyboard letter styles for guesses

Assembly Endgame - Only display correctly guessed letters in word

Assembly Endgame - Wrong guess count

Assembly Endgame - Lost languages

Assembly Endgame - isGameOver

Assembly Endgame - Display won/lost status

Assembly Endgame - Quick CSS alignment fix 🤦🏻‍♂️

Assembly Endgame - Conditional rendering with a helper function

Assembly Endgame - Backlog inventory

Assembly Endgame - Farewell messages

Assembly Endgame - Disable keyboard when the game is over

Assembly Endgame - Make the game more a11y-friendly part 1

Assembly Endgame - Make the game more a11y-friendly part 2

Assembly Endgame - Choose random word

Assembly Endgame - New game button resets the game

Assembly Endgame - Display missed letters when lost

Assembly Endgame - 🎊🎊🎊🎊🎊

Solo Project (PRO) - Quizzical

Assembly Endgame Outro

Course Outro

Turn your certificate into an asset