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

React Course - Beginner's Tutorial for React JavaScript Library [2022]
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.

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.

⌨️ 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!

Suggest:

JavaScript for React Developers | Mosh

Learn React - Full Course for Beginners - React Tutorial 2019

React + TypeScript : Why and How

Getting Closure on React Hooks

React Tutorial - Learn React - React Crash Course [2019]

Page Transitions In React - React Router V6 and Framer Motion Tutorial