BrainBit Infotech TeachingWeb Development · Beginner · 88 hours
Free React teaching slides, beginner to advanced
Take students from their first component to hooks, React Router, Redux Toolkit, TypeScript, testing and deployed projects, with every example running live inside the slides.
What you get
- 403 projector-ready slides in 5 parts — nothing to install, no account
- 20 modules, each with a real-app example, animated explainers, a quiz and a recap
- 200 practice examples (easy, medium and hard) and 10 capstone projects
- Live code beside the running app, and a Code Lab where students edit and run any example, even offline
How to teach it
About 88 hours across 20 modules: 14 to 21 hours per part, with 8 hours for the capstone projects and deployment.
Slide decks in this course
- Part 1: React Foundations 88 slides
- Part 2: Making Apps Interactive 85 slides
- Part 3: Hooks & Real Data 80 slides
- Part 4: Building Real Apps 76 slides
- Part 5: Advanced & Professional React 74 slides
Syllabus
| Module | Covers |
|---|---|
| Part 1 · React Foundations | Meet React and project setup, JSX in depth, components and props, styling React apps |
| Part 2 · Making Apps Interactive | Events and state (useState), conditional rendering and lists, forms, sharing state and thinking in React |
| Part 3 · Hooks & Real Data | useEffect and the lifecycle, fetching data from APIs, useRef and the DOM, custom hooks |
| Part 4 · Building Real Apps | useReducer and the Context API, React Router, Redux Toolkit, performance optimization |
| Part 5 · Advanced & Professional React | Advanced patterns and React 19, TypeScript with React, testing React apps, capstone projects and deployment |
What your students will be able to do
- Set up a React project with Vite and write JSX
- Build reusable components with props, and style React apps
- Handle events and state with useState, and render conditions and lists
- Build controlled forms, and share state between components
- Use useEffect, fetch data from APIs, work with useRef and write custom hooks
- Manage app state with useReducer, the Context API and Redux Toolkit
- Add pages with React Router and keep apps fast
- Use advanced patterns, React 19 features and TypeScript with React
- Test React apps, and build and deploy complete capstone projects
Questions teachers ask
Do students need to know JavaScript first?
Yes, basic JavaScript. The JavaScript course on this site covers it.
Do students need to install anything?
Not to follow the slides: they run in any browser, and every example runs live inside them. For their own projects, students install Node.js LTS and create an app with Vite.
How is the course split?
Five decks: React Foundations, Making Apps Interactive, Hooks & Real Data, Building Real Apps, and Advanced & Professional React — 20 modules with 10 practice examples each.