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 1:36:06 Use nvm or nvm-windows 1:36:33 How to install 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 - () 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: 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 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 #readme 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!