React Course - Beginner's Tutorial for React JavaScript Library [2022]

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.

✏️ This teacher is Bob Ziroll, Head of Education at Scrimba.

Code is available on the Scrimba course page for each lesson.

Scrimba on YouTube: https://www.youtube.com/c/Scrimba
Bob on Twitter: https://twitter.com/bobziroll

???? (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!