Learn modern React basics in the most interactive, hands-on way possible in the full course for beginners.
Throughout this tutorial, you'll tackle over 170 interactive coding challenges and build six exciting projects. If you're tired of React courses that leave you staring blankly at an empty editor screen, you're in the right place! Here, you'll actually build React projects by the end, giving you the confidence and skills to tackle real-world applications.
⚛️ (4:33:02) Section 3 – Chef Claude Project ⌨️ 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 ⌨️ Chef Claude ⌨️ Chef Claude: Get recipe placeholder challenge ⌨️ Passing state as props ⌨️ Setting state from child components ⌨️ Passing data around React ⌨️ Sound pads challenge ⌨️ Chef Claude challenge: refactor to separate components ⌨️ API Sign Ups ⌨️ AI code walkthrough ⌨️ Challenge quiz: prep to get recipe from the AI chef ⌨️ Challenge: Get recipe from the AI chef ⌨️ Format recipe response ⌨️ Section 3 Outro
⚛️ (9:43:55) Section 4 – Meme Generator Project ⌨️ Section 4 Intro ⌨️ Meme Generator Starting Point ⌨️ Meme Generator State ⌨️ Controlled Components ⌨️ Planning data fetch ⌨️ Functional programming in React ⌨️ Fetching data in React ⌨️ useEffect() ⌨️ 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
⚛️ (11:41:14) Section 5 – Tenzies Project ⌨️ Tenzies Intro ⌨️ Setup ⌨️ Die component ⌨️ Generate 10 random numbers ⌨️ Map array to Die components ⌨️ Roll dice button ⌨️ Change dice to objects ⌨️ Styling held dice ⌨️ Hold dice ⌨️ End game ⌨️ Lazy State Initialization ⌨️ New game ⌨️ Accessibility Improvements ⌨️ Tenzies Outro
⚛️ (13:11:13) Section 6 – Assembly Endgame Project ⌨️ Assembly Endgame Intro ⌨️ Project Planning ⌨️ Header Section ⌨️ Status Section ⌨️ Languages List ⌨️ Word Display ⌨️ Keyboard ⌨️ Save the guessed letters ⌨️ Keyboard letter styles for guesses ⌨️ Only display correctly guessed letters in word ⌨️ Wrong guess count ⌨️ Lost languages ⌨️ isGameOver ⌨️ Display won/lost status ⌨️ Quick CSS alignment fix ⌨️ Conditional rendering with a helper function ⌨️ Backlog inventory ⌨️ Farewell messages ⌨️ Disable keyboard when the game is over ⌨️ Make the game more a11y-friendly ⌨️ Choose random word ⌨️ New game button resets the game ⌨️ Display missed letters when lost ⌨️ 🎉🎉 ⌨️ Assembly Endgame Outro ⌨️ Course Outro
⚛️ (15:18:12) Bonus Section – React and VS Code ⌨️ Helpful React VS Code Extensions ⌨️ Moving to VS Code ⌨️ ES7 + React Snippets Extension ⌨️ Import Extension ⌨️ React Developer Tools Chrome Extension ⌨️ React Component Tree ⌨️ ReacTree
