React from Scratch: Fundamentals, Hooks & Routing

CompoundPattern.jsx
1 / 6
React Hook Logic
CompoundComponent.jsx
🧩

Advanced Hook Patterns

Compound Components & Context

value={{ on: false, toggle }}
<Toggle.Button />
The Switch is OFF 🌑
<Toggle.Off />
The Switch is ON 💡
<Toggle.On />

Guide:Advanced Patterns: Let's build a 'Compound Component' using Hooks & Context. This allows flexible parent-child state sharing.

React from Scratch: Fundamentals, Hooks & Routing

Duration: 4.0 hours
Lessons: 25
(4.6)

Start your journey with React, the most popular UI library. Learn to create components, manage state with Hooks (useState, useEffect, useContext), and handle navigation in Single Page Applications.

Curriculum

  • Introduction to React and its Ecosystem
  • Setting up the Development Environment
  • Component Concepts (Functional and Class)
  • JSX: Syntax and Usage
  • Props: Communication Between Components
  • State Management with useState
  • Lifecycle with useEffect
  • Event Handling
  • Conditional Rendering and Lists
  • Forms in React
  • Component Communication (Lifting State Up)
  • Context API for State Management
  • Custom Hooks
  • React Router (Basic Concepts)
  • Route Parameters and Nested Routes
  • Route Protection
  • Styling in React (CSS Modules, Styled Components, Tailwind CSS)
  • Controlled and Uncontrolled Components
  • Refs
  • Portals
  • High-Performance Rendering (memo, useCallback, useMemo)
  • Component Testing (Introduction)
  • Deploying React Applications
  • React Best Practices
  • Additional Resources and Community