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 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
https://www.youtube.com/watch?v=ybc2gkvjMDs&feature=youtu.be
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: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
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!