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

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

freeCodeCamp.org via freeCodeCamp Direct link

Introduction

1 of 101

1 of 101

Introduction

Class Central Classrooms beta

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

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.