Learn React by Scrimba
Welcome to the ultimate React 101 course! Designed with MDN Web Docs, it’s the perfect place to learn modern React basics interactively. You’ll tackle 170+ coding challenges and build six projects, gaining confidence to create real-world applications.
Skills you will learn!
Curriculum
28 Topics
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
25 Topics
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
Section 2 Recap
57 Topics
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
Challenge quiz: prep to get recipe from the AI chef 🤖👨🍳
Challenge: Get recipe from the AI chef 🤖👨🍳
Format recipe response
Section 3 Outro
22 Topics
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
19 Topics
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
30 Topics
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
Certificate of Completion
Learn React
Related React JS Courses
Thank You!
Your review has been submitted successfully.