Learn React by building eight real-world projects and solving 140+ coding challenges. You can also follow this course interactively on Scrimba: https://scrimba.com/learn/learnreact
React is one of the most popular front-end JavaScript libraries for building user interfaces. After completing this course, you will be able to build web apps in modern React, using patterns like functional components and hooks.
Course Contents
(0:00:00) Build a React info site
Welcome to an Introduction to React!
What we’ll learn
First React
First React Practice
Local setup (the quick way)
Why React? It’s Composable!
Why React? It’s declarative
JSX
Goodbye, CDNs!
Thought experiment: use .append() instead of ReactDOM.render()?
Project part 1 – markup
Pop quiz!
Custom Components
Custom Components 2
Custom Components Quiz
Parent/Child Components
Styling with Classes
Organize components
Set up a local React env with Create React App
Styles and images with CRA
Quick mental outline of project
Project setup
Quick Figma Walkthrough
Navbar & Styling
Main Section
Color the bullets
Add background logo
Section 1 Solo Project
Section 1 Recap
(2:27:26) Build an AirBnb Experiences clone
Section intro & Figma file
Project setup: Navbar
Project setup: Hero
Project: Card 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: receiving props in component
Prop quiz!
Destructuring props
Props practice
Passing in non-string props
Project: pass props to card component
Review – array .map()
React renders arrays
Mapping components
Map quiz!
Loading images from .map()
Project: Map experiences data into components
Project: key prop
Project: Sold Out Badge
Project: Pass object as props
Project: Spread object as props
Section 2 Solo Project
Section 2 recap
(4:41:37) Build a meme generator
Section Intro & Figma file
Meme Generator: Header
Meme Generator: Form
Project analysis
Event Listeners
Project: Get random meme
Our current conundrum
State: Props
State: State
State Quiz!
useState
useState array destructuring
Changing state
useState – Counter practice
useState – Changing state with a callback function
Changing state quiz!
Project: Add images
Challenge: ternary practice
Challenge: flipping state back and forth
Complex state: arrays
Complex state: objects
Complex state: updating state objects
Project: Refactor state
Passing state as props
Setting state from child components
Passing data around
Boxes challenge part 1
Dynamic styles
Boxes challenge part 2
Boxes challenge part 3.1 – local state
Boxes challenge part 3.2 – unified state
Boxes challenge part 4
Boxes challenge part 5
Conditional rendering: &&
Conditional rendering: && practice
Conditional rendering: ternary
Conditional rendering practice
Conditional rendering quiz!
React forms intro
Watch for input changes in React
Form inputs practice
Forms state object
Form state object practice
Controlled inputs
Formst: Textarea
Forms: Checkbox
Forms: Radio buttons
Forms: Select & Option
Forms: Submitting the form
Forms quiz!
Sign up form practice
Project: Add text to image
Making API calls
Intro to useEffect
useEffect() syntax and default behavior
useEffect dependencies array
useEffect quiz!
useEffect for fetching data
useEffect: when to use dependencies
Project: Get Memes from API
State and Effect practices
useEffect cleanup function
Using an async function inside useEffect
Section 3 Recap
(9:51:33) Build a notes app and Tenzies game
Section 4 Intro
Warm-up: Add Dark/Light modes to ReactFacts site
Notes App: Intro
Notes App: Features to add
Notes App: Sync notes with localStorage
Lazy State Initialization
Notes App: Note summary title
Notes App: Bump recent note to the top
Notes App: Delete note
Tenzies Project Intro
Tenzies: Setup
Tenzies: Die components
Tenzies: Generate array of 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: New Game
Tenzies: Extra Credit Ideas
Section 4 Solo Project
Check out the class components crash course!
Congrats!