The ultimate React 101 – the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects.
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
Local setup
Why React?
JSX
ReactDOMrender()
Custom components
Organizing components
Reusable components
JS inside JSX
Props
Destructuring props
Rendering arrays
Mapping components
Key prop
Passing objects as props
Props vs state
useState
useState array destructuring
Changing state
Complex state
Refactoring state
Passing state as props
Local state
Unified state
Conditional rendering
React forms
Forms input
Forms state object
Submitting forms in React
Making API calls
useEffect
Async functions inside useEffect
Local storage with React
Lazy state initialization
01. Build a React Info Site
- Introduction to React
- What We’ll Learn
- First React
- First React Practice
- Local Setup (The Quick Way)
- Why React? It’s Composable!
- Why React? It’s Declarative
- JSX
- Drag and Drop Deploy with Netlify
- Get Detailed Reviews of Your React Projects – Scrimba Bootcamp
- Goodbye, CDNs!
- Update: New React 18 createRoot API
- Thought Experiment: Use .append() Instead of ReactDOM.render()?
- Project Part 1 – Markup
- Pop Quiz!
- Custom Components
- Custom Components Part 2
- Custom Components Quiz
- Parent/Child Components
- Styling with Classes
- Organize Components
- Run React Locally with Vite
- Quick Mental Outline of Project
- Project Setup
- Quick Figma Walkthrough
- Navbar & Styling
- Main Section
- Color the Bullets
- Add Background Logo
- Why Are Solo Projects Important?
- Solo Project (PRO) – Digital Business Card
- Deploy Your React App with Netlify
- Get a Code Review!
- React Section 1 Recap
02. Build an AirBnb Experiences Clone
- Section Intro & Figma File
- Project Setup: Navbar
- Project Setup: Hero
- Project: Card Component
- Problem – Not Reusable
- Props Part 1: Understanding the Concept
- Props Part 2: Reusable Components
- Aside: JS Inside JSX
- Props Part 3: Create a Contact Component
- Props Part 4: Receiving Props in a Component
- Prop Quiz! (Get It?? 😆)
- Destructuring Props
- Props Practice
- Passing in Non-String Props
- Project: Pass Props to Card Component
- Review – Array .map()
- React Renders Arrays
- Mapping Components
- Map Quiz!
- Loading Images from .map()
- Project: Map Experiences Data into Components
- Project: Key Prop
- Project: Sold Out Badge
- Project: Pass Object as Props
- Project: Spread Object as Props
- Solo Project (PRO) – Travel Journal
- React Section 2 Recap
03. Build a Meme Generator
- Section Intro & Figma File
- Meme Generator: Header
- Meme Generator: Form
- Project Analysis
- Event Listeners
- Project: Get Random Meme
- Our Current Conundrum
- Props vs. State: Props
- Props vs. State: State
- Props vs. State Quiz!
- useState
- useState Array Destructuring
- Changing State
- useState – Counter Practice
- useState – Changing State with a Callback Function
- Changing State Quiz!
- Project: Add Images to the Meme Generator
- Challenge: Ternary Practice
- Challenge: Flipping State Back and Forth
- Complex State: Arrays
- Complex State: Objects
- Complex State: Updating State Objects
- Project: Refactor State
- Passing State as Props
- Setting State from Child Components
- Passing Data Around
- Boxes Challenge Part 1
- Dynamic Styles
- Boxes Challenge Part 2
- Boxes Challenge Part 3.1 – Local State
- Boxes Challenge Part 3.2 – Unified State
- Boxes Challenge Part 4
- Boxes Challenge Part 5
- Conditional Rendering: &&
- Conditional Rendering: && Practice
- Conditional Rendering: Ternary
- Conditional Rendering Practice
- Conditional Rendering Quiz!
- React Forms Intro
- Watch for Input Changes in React
- Form Inputs Practice
- Forms State Object
- Form State Object Practice
- Controlled Inputs
- Forms in React: Textarea
- Forms in React: Checkbox
- Forms in React: Radio Buttons
- Forms in React: Select & Option
- Forms in React: Submitting the Form
- Forms Quiz!
- Sign Up Form Practice
- Project: Add Text to Image
- Making API Calls
- Intro to useEffect
- useEffect() Syntax and Default Behavior
- useEffect Dependencies Array
- useEffect Quiz!
- useEffect for Fetching Data
- useEffect: When to Use Dependencies
- **Project: Get Memes from API
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
Local setup
Why React?
JSX
ReactDOMrender()
Custom components
Organizing components
Reusable components
JS inside JSX
Props
Destructuring props
Rendering arrays
Mapping components
Key prop
Passing objects as props
Props vs state
useState
useState array destructuring
Changing state
Complex state
Refactoring state
Passing state as props
Local state
Unified state
Conditional rendering
React forms
Forms input
Forms state object
Submitting forms in React
Making API calls
useEffect
Async functions inside useEffect
Local storage with React
Lazy state initialization
COURSE OUTLINE
01. Build a React Info Site
- Introduction to React
- What We’ll Learn
- First React
- First React Practice
- Local Setup (The Quick Way)
- Why React? It’s Composable!
- Why React? It’s Declarative
- JSX
- Drag and Drop Deploy with Netlify
- Get Detailed Reviews of Your React Projects – Scrimba Bootcamp
- Goodbye, CDNs!
- Update: New React 18 createRoot API
- Thought Experiment: Use .append() Instead of ReactDOM.render()?
- Project Part 1 – Markup
- Pop Quiz!
- Custom Components
- Custom Components Part 2
- Custom Components Quiz
- Parent/Child Components
- Styling with Classes
- Organize Components
- Run React Locally with Vite
- Quick Mental Outline of Project
- Project Setup
- Quick Figma Walkthrough
- Navbar & Styling
- Main Section
- Color the Bullets
- Add Background Logo
- Why Are Solo Projects Important?
- Solo Project (PRO) – Digital Business Card
- Deploy Your React App with Netlify
- Get a Code Review!
- React Section 1 Recap
02. Build an AirBnb Experiences Clone
- Section Intro & Figma File
- Project Setup: Navbar
- Project Setup: Hero
- Project: Card Component
- Problem – Not Reusable
- Props Part 1: Understanding the Concept
- Props Part 2: Reusable Components
- Aside: JS Inside JSX
- Props Part 3: Create a Contact Component
- Props Part 4: Receiving Props in a Component
- Prop Quiz! (Get It?? 😆)
- Destructuring Props
- Props Practice
- Passing in Non-String Props
- Project: Pass Props to Card Component
- Review – Array .map()
- React Renders Arrays
- Mapping Components
- Map Quiz!
- Loading Images from .map()
- Project: Map Experiences Data into Components
- Project: Key Prop
- Project: Sold Out Badge
- Project: Pass Object as Props
- Project: Spread Object as Props
- Solo Project (PRO) – Travel Journal
- React Section 2 Recap
03. Build a Meme Generator
- Section Intro & Figma File
- Meme Generator: Header
- Meme Generator: Form
- Project Analysis
- Event Listeners
- Project: Get Random Meme
- Our Current Conundrum
- Props vs. State: Props
- Props vs. State: State
- Props vs. State Quiz!
- useState
- useState Array Destructuring
- Changing State
- useState – Counter Practice
- useState – Changing State with a Callback Function
- Changing State Quiz!
- Project: Add Images to the Meme Generator
- Challenge: Ternary Practice
- Challenge: Flipping State Back and Forth
- Complex State: Arrays
- Complex State: Objects
- Complex State: Updating State Objects
- Project: Refactor State
- Passing State as Props
- Setting State from Child Components
- Passing Data Around
- Boxes Challenge Part 1
- Dynamic Styles
- Boxes Challenge Part 2
- Boxes Challenge Part 3.1 – Local State
- Boxes Challenge Part 3.2 – Unified State
- Boxes Challenge Part 4
- Boxes Challenge Part 5
- Conditional Rendering: &&
- Conditional Rendering: && Practice
- Conditional Rendering: Ternary
- Conditional Rendering Practice
- Conditional Rendering Quiz!
- React Forms Intro
- Watch for Input Changes in React
- Form Inputs Practice
- Forms State Object
- Form State Object Practice
- Controlled Inputs
- Forms in React: Textarea
- Forms in React: Checkbox
- Forms in React: Radio Buttons
- Forms in React: Select & Option
- Forms in React: Submitting the Form
- Forms Quiz!
- Sign Up Form Practice
- Project: Add Text to Image
- Making API Calls
- Intro to useEffect
- useEffect() Syntax and Default Behavior
- useEffect Dependencies Array
- useEffect Quiz!
- useEffect for Fetching Data
- useEffect: When to Use Dependencies
- **Project: Get Memes from API
