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

🎉 Watch the updated version of this course: https://youtu.be/x4rFhThSX04 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: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!