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:

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:
Bob on Twitter:

0:00 Introduction
5:27 What we’ll learn
7:03 Fun facts about react link:
9:08 First react

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:
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

1:46:03 Quick Mental Outline of Project
1:50:00 Quick Figma Walkthrough

1:51:43 Project Setup

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
2:24:05 Share your work
2:24:45 Section 1 Recap

Build an AirBnb Experiences Clone
2:27:26 Section intro & Figma File

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:
4:39:24 Share your work
4:39:52 Section 2 recap

Build a Meme Generator
4:41:37 Section into and figma file

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: Ass 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

9:00:54 useEffect()
9:42: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

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

10:45:38 Tenzies Setup & Game Development
11:24:35 Hold dice part 3
11:28:39 End game

11:40:31 Tenzies: New Game & Extra Credit ideas
11:44:15 Section 4 Solo Project
11:45:53 quiz
11:47:26 OTDB API
Check out the class components crash course:
11:49:32 Congrats on completing Module 1!