TOIT Training

Facebook X-twitter Linkedin Instagram
Menu
React Courses

Learn React

ToIT ToIT
0 (0)
Duration

0m

Students

0

Level

Intermediate

Last Updated

November 22, 2024

Learn React
  • Overview
  • Curriculum
  • Reviews

 

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.

  • 3 Sections
  • 119 Lessons
  • 0m Duration
Expand All

Build a React Info Site

34 Lessons
  • 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

 Build an AirBnb Experiences Clone

27 Lessons
  • 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

Build a Meme Generator

58 Lessons
  • Section Intro & Figma File
  • Meme Generator: Header
  • Meme Generator: Form
  • 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
  • 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 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: 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

0

0 Ratings
5 Star 0%
4 Star 0%
3 Star 0%
2 Star 0%
1 Star 0%

Reviews

Free

Start Course

Retake Course

Are you sure you want to retake the course? This action will permanently delete all your progress in this course.

Course Includes

  • 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

Deleting Course Review

Are you sure? You can't restore this back

Course Access

This course is password protected. To access it please enter your password below:

Buy for group

Learn React
No groups Found

You don't have any groups yet

Create a group and add group members. Sync Group(s)
Choose Group(s)
Sync Group(s)
Create a new group Go to Checkout