Learn React by Coursera
Skills you will learn!
Curriculum
33 Topics
First steps in React Quiz
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 (JavaScript syntax extension)
Drag and Drop Deploy with Netlify
Goodbye CDNs!
UPDATE: New React 18 createRoot API
Thought experiment: use .append() instead of ReactDOM.render()?
Project part 1 - markup
Pop quiz!
Custom Components
Custom Components part 2
Custom Components Quiz
Parent/Child Components
Styling with Classes
Organize components
Run React locally with Vite
Quick mental outline of project
Project setup
Quick Figma Walkthrough
Navbar & Styling
Main Section
Color the bullets
Add background logo
Why are Solo Projects important?
Solo Project - Digital Business Card
Deploy Your React App with Netlify
React Section 1 Recap
28 Topics
Props and classes quiz
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 a component
Prop quiz! (Get it?? 😆)•
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
Solo Project - Travel Journal
React Section 2 Recap
65 Topics
Props state and forms quiz
Section Intro & Figma file
Meme Generator: Header
Meme Generator: Form
Project analysis
Event Listeners
Project: Get random meme
Our current conundrum
Props vs. State: Props
Props vs. State: State
Props vs. State Quiz!
useState
useState array destructuring
Changing state
useState - Counter practice
useState - Changing state with a callback function
Changing state quiz!
Project: Add images to the meme generator
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
Forms in React: Textarea
Forms in React: Checkbox
Forms in React: Radio buttons
Forms in React: Select & Option
Forms in React: 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
React Section 3 Recap
45 Topics
Final React Quiz
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
Update to Notes app - adding Firebase! 🔥
Updating to Vite
Small refactors
Local Setup
Firebase Intro & Setup
Firebase Code Setup
onSnapshot - part 1
onSnapshot - part 2
Create new blank note
Delete Note
Update note - part 1
Update note - part 2
Challenge: createdAt and updatedAt
Challenge: sort notes
Debouncing updates - part 1
Debouncing updates - part 2
Debouncing updates - part 3
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
Solo Project - Quizzical - NEW
Congratulations on completing Learn React! 🤩
Learn React
Related React JS Courses
Thank You!
Your review has been submitted successfully.