Learn React

The ultimate React 101 - the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects.

• Local setup
• Why React?
• JSX
• ReactDOM.render()
• Custom components
• Organizing components
• Reusable components
• JS inside JSX
• Props
• Destructuring props
• Rendering arrays
• Mapping components
• Key prop
• Passing objects as props
• Spreading objects as props
• Props vs state
• useState
• useState array destructuring
• Changing state
• Complex state
• Refactoring state
• Passing state as props
• Local state
• Unified state
• Conditional rendering
• React forms
• Forms input
• Forms state object
• Submitting forms in React
• Making API calls
• useEffect
• Async functions inside useEffect
• Local storage with React
• Lazy state initialization

• Build a React info site
• 1. Introduction to React
• 2. What we'll learn
• 3. First React
• 4. First React Practice
• 5. Local setup (the quick way)
• 6. Libraries/Frameworks
• 7. Why React? It's Composable!
• 8. Why React? It's declarative
• 9. JSX
• 10. Drag and Drop Deploy with Netlify
• 11. Get detailed reviews of your React projects – Scrimba Bootcamp
• 12. Goodbye, CDNs!
• 13. UPDATE: New React 18 createRoot API
• 14. Thought experiment: use .append() instead of ReactDOM.render()?
• 15. Project part 1 - markup (Update)
• 16. Pop quiz!
• 17. Custom Components
• 18. Custom Components part 2
• 19. Custom Components Quiz
• 20. Parent/Child Components
• 21. Styling with Classes
• 22. Organize components
• 23. Run React locally with Vite
• 24. Quick mental outline of project
• 25. Project setup
• 26. Quick Figma Walkthrough
• 27. Navbar & Styling
• 28. Main Section
• 29. Color the bullets
• 30. Add background logo
• 31. Why are Solo Projects important?
• 32. Solo Project (PRO) - Digital Business Card
• 33. Deploy Your React App with Netlify
• 34. Get a code review!
• 35. React Section 1 Recap
• Build an AirBnb Experiences clone
• 1. Section intro & Figma file
• 2. Project setup: Navbar
• 3. Project setup: Hero
• 4. Project: Card Component
• 5. Update: A11Y Audit
• 6. Problem - not reusable
• 7. Props Part 1: Understanding the Concept
• 8. Props Part 2: Reusable Components
• 9. Aside: JS inside JSX
• 10. Props part 3: Create a contact component
• 11. Props part 4: receiving props in a component
• 12. Prop quiz! (Get it?? 😆)
• 13. Destructuring props
• 14. Props practice
• 15. Passing in non-string props
• 16. Project: pass props to card component
• 17. Review - array .map()
• 18. React renders arrays
• 19. Mapping components
• 20. Map quiz!
• 21. Loading images from .map()
• 22. Project: Map experiences data into components
• 23. Project: key prop
• 24. Project: Sold Out Badge
• 25. Project: Pass object as props
• 26. Project: Spread object as props
• 27. Solo Project (PRO) - Travel Journal
• 28. React Section 2 Recap
• Build a meme generator
• 1. Section Intro & Figma file
• 2. Meme Generator: Header
• 3. Meme Generator: Form
• 4. Update: Accessibility Audit
• 5. Project analysis
• 6. Event Listeners
• 7. Project: Get random meme
• 8. Our current conundrum
• 9. Props vs. State: Props
• 10. Props vs. State: State
• 11. Props vs. State Quiz!
• 12. useState
• 13. useState array destructuring
• 14. Changing state
• 15. useState - Counter practice
• 16. useState - Changing state with a callback function
• 17. Changing state quiz!
• 18. Project: Add images to the meme generator
• 19. Challenge: ternary practice
• 20. Challenge: flipping state back and forth
• 21. A11y Update - replace div
• 22. Complex state: arrays
• 23. Complex state: objects
• 24. Complex state: updating state objects
• 25. Project: Refactor state
• 26. Passing state as props
• 27. Setting state from child components
• 28. Update: addressing a11y issues
• 29. Passing data around
• 30. Boxes challenge part 1
• 31. Dynamic styles
• 32. Boxes challenge part 2
• 33. Boxes challenge part 3.1 - local state
• 34. Boxes challenge part 3.2 - unified state
• 35. Boxes challenge part 4
• 36. Boxes challenge part 5
• 37. Boxes update: a11y fixes
• 38. Conditional rendering: &&
• 39. Conditional rendering: && practice
• 40. Conditional rendering: ternary
• 41. Conditional rendering practice
• 42. Conditional rendering quiz!
• 43. React forms intro
• 44. Watch for input changes in React
• 45. Form inputs practice
• 46. Forms state object
• 47. Form state object practice
• 48. Controlled inputs
• 49. Forms in React: Textarea
• 50. Forms in React: Checkbox
• 51. Forms in React: Radio buttons
• 52. Forms in React: Select & Option
• 53. Forms in React: Submitting the form
• 54. Accessible labels - useId
• 55. Forms quiz!
• 56. Sign up form practice
• 57. Project: Add text to image
• 58. Making API calls
• 59. Intro to useEffect
• 60. useEffect() syntax and default behavior
• 61. useEffect dependencies array
• 62. useEffect quiz!
• 63. useEffect for fetching data
• 64. useEffect: when to use dependencies
• 65. Project: Get Memes from API
• 66. State and Effect practices
• 67. useEffect cleanup function
• 68. Using an async function inside useEffect
• 69. React Section 3 Recap
• Build a notes app and Tenzies game
• 1. Section 4 Intro
• 2. Warm-up: Add Dark/Light modes to ReactFacts site
• 3. Notes App: Intro
• 4. Notes App: Features to add
• 5. Notes App: Sync notes with localStorage
• 6. Lazy State Initialization
• 7. Notes App: Note summary title
• 8. Notes App: Bump recent note to the top
• 9. Notes App: Delete note
• 10. Update to Notes app - adding Firebase! 🔥
• 11. Updating to Vite
• 12. Small refactors
• 13. Local Setup
• 14. Firebase Intro & Setup
• 15. Firebase Code Setup
• 16. onSnapshot - part 1
• 17. onSnapshot - part 2
• 18. Create new blank note
• 19. Delete Note
• 20. Update note - part 1
• 21. Update note - part 2
• 22. Challenge: createdAt and updatedAt
• 23. Challenge: sort notes
• 24. Debouncing updates - part 1
• 25. Debouncing updates - part 2
• 26. Debouncing updates - part 3
• 27. Tenzies Project Intro
• 28. Tenzies: Setup
• 29. Tenzies: Die components
• 30. Tenzies: Generate array of 10 random numbers
• 31. Tenzies: Map array to Die components
• 32. Tenzies: Roll dice button
• 33. Tenzies: Change dice to objects
• 34. Tenzies: Styling held dice
• 35. Tenzies: Hold dice part 1
• 36. Tenzies: Hold dice part 2
• 37. Tenzies: Hold dice part 3
• 38. Tenzies: End game part 1
• 39. Tenzies: End game part 2
• 40. Tenzies: End game part 3
• 41. Tenzies: New Game
• 42. Tenzies: Extra Credit Ideas
• 43. Solo Project (PRO) - Quizzical
• 44. Check out the class components crash course!
• 45. Congratulations on completing Learn React! 🤩