Learn React JS – Full Beginner’s Tutorial (2024) & Practice Projects

Post Content

​ Learn modern React basics in the most interactive, hands-on way possible in the full course for beginners.

Throughout this tutorial, you’ll tackle over 170 interactive coding challenges and build six exciting projects. If you’re tired of React courses that leave you staring blankly at an empty editor screen, you’re in the right place! Here, you’ll actually build React projects by the end, giving you the confidence and skills to tackle real-world applications.

Scrimba on YouTube: https://www.youtube.com/c/Scrimba

Bob Ziroll teaches this course.

Course Contents

(0:00:00) Section 1 – React Basics
Course Introduction
What we’ll learn
First React Code
First React Challenge
Local Setup w/ Vite
Libraries/Frameworks
React.createElement()
JSX
Why React? It’s Composable!
Why React? It’s Declarative!
Random housekeeping
ReactFacts Project – Markup
Pop Quiz
Custom Components
Custom Components Challenge Part 2
Custom Components Quiz
Fragments
Custom Components – Parent/Child Components
Styling with Classes
Organizing Components
Make Mental Outline of Project
Initial Project Setup
ReactFacts – Navbar & Styling
ReactFacts – Main Content Section
ReactFacts – Coloring the Bullets
ReactFacts – Add Background Image
Section 1 Recap

(2:17:59) Section 2 – Travel Journal Project
Section 2 Intro
Travel Journal – Header
Travel Journal – Entry Component
Problem – Not reusable
Props
Prop quiz! (Get it?? )
Destructuring props
Props practice
Non-string props
Importing static assets
Pass props to Entry component
Review – array .map()
React can render arrays
Mapping components
Map quiz!
Travel Journal: Map Entry components
Travel Journal: key prop
Travel Journal: Pass object as props
Travel Journal: Spread object as props
Section 2 Recap

(4:33:02) Section 3 – Chef Claude Project
Section 3 Intro
Chef Claude: Header
Chef Claude: form
Chef Claude: Project overview
Event Listeners
Chef Claude: Map ingredients list
Props vs. State: Props
Props vs. State: State
useState
useState array destructuring
Changing state
State practice
Updating state with a callback function
Changing state quiz
Ternary practice
Toggling state
Complex state: Arrays
Chef Claude: Refactor array state
Complex state: Objects
Complex state: updating state objects
React forms intro
Form basics
Form submission
Form action
Chef Claude: Refactor form submission
Forms: textarea & defaultValue
Forms: radio
Forms: checkbox
Forms: select and option
Forms: Object.fromEntries
Chef Claude: conditional rendering intro
Conditional rendering
Chef Claude
Chef Claude: Get recipe placeholder challenge
Passing state as props
Setting state from child components
Passing data around React
Sound pads challenge
Chef Claude challenge: refactor to separate components
API Sign Ups
AI code walkthrough
Challenge quiz: prep to get recipe from the AI chef
Challenge: Get recipe from the AI chef
Format recipe response
Section 3 Outro

(9:43:55) Section 4 – Meme Generator Project
Section 4 Intro
Meme Generator Starting Point
Meme Generator State
Controlled Components
Planning data fetch
Functional programming in React
Fetching data in React
useEffect()
Meme Generator – Fetch Memes
State and Effect practices
useEffect cleanup function
Meme Generator – Get random meme
Sneak peak: refs
useEffect practice: scrollIntoView()
scrollIntoView() iFrame bug fix
Section 4 Outro

(11:41:14) Section 5 – Tenzies Project
Tenzies Intro
Setup
Die component
Generate 10 random numbers
Map array to Die components
Roll dice button
Change dice to objects
Styling held dice
Hold dice
End game
Lazy State Initialization
New game
Accessibility Improvements
Tenzies Outro

(13:11:13) Section 6 – Assembly Endgame Project
Assembly Endgame Intro
Project Planning
Header Section
Status Section
Languages List
Word Display
Keyboard
Save the guessed letters
Keyboard letter styles for guesses
Only display correctly guessed letters in word
Wrong guess count
Lost languages
isGameOver
Display won/lost status
Quick CSS alignment fix
Conditional rendering with a helper function
Backlog inventory
Farewell messages
Disable keyboard when the game is over
Make the game more a11y-friendly
Choose random word
New game button resets the game
Display missed letters when lost

Assembly Endgame Outro
Course Outro

(15:18:12) Bonus Section – React and VS Code
Helpful React VS Code Extensions
Moving to VS Code
ES7 + React Snippets Extension
Import Extension
React Developer Tools Chrome Extension
React Component Tree
ReacTree   Read More freeCodeCamp.org 

#programming #freecodecamp #learn #learncode #learncoding