![React Course - Beginner's Tutorial for React JavaScript Library [2022]](https://d3f1iyfxxz8i1e.cloudfront.net/courses/course_image/efa465c3a72b.jpg)
Completed
First React Practice
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
React Course - Beginner's Tutorial for React JavaScript Library [2022]
Automatically move to the next video in the Classroom when playback concludes
- 1 Introduction
- 2 What we’ll learn
- 3 Fun facts about react link: https://www.figma.com/file/xA1rJVQOorqMW6xjGdBLcI/ReactFacts?node-id=0%3A1
- 4 First react
- 5 First React Practice
- 6 Local Setup (the quick way)
- 7 Why React?
- 8 JSX
- 9 Goodbye, CDNs!
- 10 Thought Experiment
- 11 Project 1 Part 1 - MarkUp
- 12 Pop Quiz!
- 13 Components
- 14 Setup a local React environment w/ Create React App
- 15 Babel, Bundler, Build
- 16 Create React app: https://create-react-app.dev/
- 17 How to install Node.js
- 18 Use nvm or nvm-windows
- 19 How to install Node.js
- 20 Styles and images with CRA
- 21 Quick Mental Outline of Project
- 22 Quick Figma Walkthrough
- 23 Project Setup
- 24 Navbar and Styling
- 25 Main Section
- 26 Color The Bullets
- 27 Add Background Logo
- 28 Section 1 Solo Project
- 29 Digital Business Card https://scrimba.com/links/figma-digital-business-card-sp
- 30 Share your work https://scrimba.com/links/solo-project-tweet https://scrimba.com/links/discord-i-built-this
- 31 Section 1 Recap
- 32 Section intro & Figma File
- 33 Project Setup: NavBar & Hero
- 34 Project Card Component
- 35 Problem - Not Reusable
- 36 Props
- 37 Prop Quiz (Get it?)
- 38 Destructuring Props
- 39 Props practice
- 40 Passing in non-string Props
- 41 Project: Pass props to component
- 42 Review - Array.map()
- 43 React render array
- 44 Mapping Components
- 45 Map Quiz
- 46 Loading Images from .map()
- 47 Projects
- 48 Spread objects as props
- 49 Section 2 solo project
- 50 Travel journal: https://scrimba.com/links/figma-travel-journal-sap
- 51 Share your work
- 52 Section 2 recap
- 53 Section into and figma file
- 54 Meme Generator: Header & Form
- 55 Project Analysis
- 56 Event Listeners
- 57 Project: Get random meme
- 58 Our current conundrum
- 59 Props vs. State
- 60 useState
- 61 Changing State
- 62 useState - Counter Practice
- 63 useState - Changing state with a callback Function
- 64 hanging State Quiz!
- 65 Project: Assign images to the meme generator
- 66 Challenge: Ternary Practice & flipping State back and forth
- 67 Complex State
- 68 Project: Refactor State
- 69 Passing state as props
- 70 Setting state from child components
- 71 Passing data around
- 72 Boxes Challenge
- 73 Conditional Rendering
- 74 React forms intro
- 75 Watch for input changes in React
- 76 Form inputs practice
- 77 Forms state object
- 78 Controlled inputs
- 79 Forms in React
- 80 Project: add text to image
- 81 Making API Calls
- 82 Intro to useEffect
- 83 useEffect()
- 84 Project:get memes from API
- 85 State and Effect Practices
- 86 useEffect cleanup function
- 87 Using an sync function inside useEffect
- 88 Section3 recap
- 89 Section 4 Intro
- 90 Warm-up:Add Dark/Light modes to ReactFacts Site
- 91 Notes App Intro
- 92 Notes App Development
- 93 Tenzies Project Intro
- 94 Tenzies Setup & Game Development
- 95 Hold dice part 3
- 96 End game
- 97 Tenzies: New Game & Extra Credit ideas
- 98 Section 4 Solo Project
- 99 quiz https://scrimba.com/links/figma-quizzical
- 100 OTDB API https://opentdb.com/api_config.php
- 101 Congrats on completing Module 1!
