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 Introduction
5:27 What we’ll learn
7:03 Fun facts about react link: https://www.figma.com/file/xA1rJVQOorqMW6xjGdBLcI/ReactFacts?node-id=0%3A1
9:08 First react
https://reactjs.org/docs/cdn-links.html
17:13 First React Practice
19:04 Local Setup (the quick way)
21:03 Why React?
30:38 JSX
40:19 Goodbye, CDNs!
44:27 Thought Experiment
49:57 Project 1 Part 1 – MarkUp
57:44 Pop Quiz!
59:55 Components
1:33:07 Setup a local React environment w/ Create React App
1:33:53 Babel, Bundler, Build
1:34:47 Create React app: https://create-react-app.dev/
1:35:56 How to install Node.js
1:36:06 Use nvm or nvm-windows
1:36:33 How to install Node.js
1:41:30 Styles and images with CRA
https://create-react-app.dev/docs/adding-images-fonts-and-files/
https://create-react-app.dev/docs/using-the-public-folder/
1:46:03 Quick Mental Outline of Project
1:50:00 Quick Figma Walkthrough

1:51:43 Project Setup
https://www.figma.com/file/xA1rJVQOorqMW6xjGdBLcI/ReactFacts?node-id=0%3A1
1:59:00 Navbar and Styling
2:06:18 Main Section
2:14:04 Color The Bullets
2:16:30 Add Background Logo
2:20:50 Section 1 Solo Project
2:22:23 Digital Business Card https://scrimba.com/links/figma-digital-business-card-sp
2:24:05 Share your work https://scrimba.com/links/solo-project-tweet https://scrimba.com/links/discord-i-built-this
2:24:45 Section 1 Recap
https://scrimba.com/links/discord-today-i-did

Build an AirBnb Experiences Clone
2:27:26 Section intro & Figma File
https://scrimba.com/links/figma-airbnb-experiences
2:31:40 Project Setup: NavBar & Hero
2:43:11 Project Card Component
2:50:32 Problem – Not Reusable
2:52:29 Props
3:18:42 Prop Quiz (Get it?)
3:23:10 Destructuring Props
3:27:05 Props practice
3:36:12 Passing in non-string Props
3:40:11 Project: Pass props to component
3:47:08 Review – Array.map()
3:55:37 React render array
4:00:10 Mapping Components
4:04:46 Map Quiz
4:08:26 Loading Images from .map()
4:10:02 Projects
4:32:34 Spread objects as props
4:36:30 Section 2 solo project
4:37:14 Travel journal: https://scrimba.com/links/figma-travel-journal-sap
4:39:24 Share your work
4:39:52 Section 2 recap

Build a Meme Generator
4:41:37 Section into and figma file
https://scrimba.com/links/figma-meme-generator
4:45:48 Meme Generator: Header & Form
4:57:13 Project Analysis
4:58:20 Event Listeners
5:04:31 Project: Get random meme
5:10:15 Our current conundrum
5:18:26 Props vs. State
5:32:13 useState
5:37:57 Changing State
5:41:03 useState – Counter Practice
5:45:51 useState – Changing state with a callback Function
5:51:12 hanging State Quiz!
5:53:44 Project: Assign images to the meme generator
5:56:43 Challenge: Ternary Practice & flipping State back and forth
6:06:37 Complex State
6:27:46 Project: Refactor State
6:31:59 Passing state as props
6:37:54 Setting state from child components
6:44:25 Passing data around
6:50:53 Boxes Challenge
7:28:46 Conditional Rendering
7:48:49 React forms intro
7:52:17 Watch for input changes in React
7:56:49 Form inputs practice
7:59:13 Forms state object
8:07:18 Controlled inputs
8:11:35 Forms in React
8:47:04 Project: add text to image
8:51:05 Making API Calls
8:55:08 Intro to useEffect
https://reactjs.org/docs/hooks-effect.html
9:00:54 useEffect()
9:24:46 Project:get memes from API
9:33:00 State and Effect Practices
9:40:05 useEffect cleanup function
9:46:00 Using an sync function inside useEffect
9:49:14 Section3 recap

Build a Notes app and Tenzies Game
9:51:34 Section 4 Intro
https://scrimba.com/links/figma-reactfacts-light-dark
https://scrimba.com/links/figma-tenzies-game
9:54:09 Warm-up:Add Dark/Light modes to ReactFacts Site
10:00:50 Notes App Intro
10:10:47 Notes App Development
10:44:17 Tenzies Project Intro
https://scrimba.com/links/figma-tenzies-game
10:45:38 Tenzies Setup & Game Development
11:24:35 Hold dice part 3
11:28:39 End game
https://github.com/alampros/react-confetti#readme
11:40:31 Tenzies: New Game & Extra Credit ideas
11:44:15 Section 4 Solo Project
11:45:53 quiz https://scrimba.com/links/figma-quizzical
11:47:26 OTDB API https://opentdb.com/api_config.php
Check out the class components crash course: https://scrimba.com/playlist/pBpayAz
11:49:32 Congrats on completing Module 1!

source