React Programming Course
Learn React from scratch with live examples, quizzes, and hands-on practice.
What you'll learn
- ✓Environment Setup & Tooling
- ✓JSX & Rendering Fundamentals
- ✓Components & Props
- ✓State & Event Handling
- ✓Core Hooks
- ✓Custom Hooks & Advanced Patterns
- ✓Forms & User Input
- ✓Routing
Skills you'll gain
Details to know
- Certificate of completion
- Flexible schedule
- 100% Free
- 12.1 hours total
Requirements
- No prior experience needed
- A computer with internet connection
- Passion to learn!
Description
This React course takes you from the very basics to real, practical skills you can use right away. Across 14 chapters and 145 lessons, you'll build a solid foundation in React through short, focused lessons paired with live, editable code examples.
Each chapter builds on the last, so concepts stick. You'll get quizzes after every chapter to check your understanding, and a live code editor to practice as you go — no separate setup or installation required.
Whether you're completely new to programming or picking up React as an additional skill, this course is self-paced and free, with lifetime access so you can revisit any lesson whenever you need a refresher.
Course Content
14 chapters · 145 lessons · 12.1 hours
- 📄 What is React? 5 min
- 📄 Installing Node.js and npm 5 min
- 📄 npm vs yarn vs pnpm 5 min
- 📄 Creating an App with Create React App 5 min
- 📄 Creating an App with Vite 5 min
- 📄 React Project Folder Structure 5 min
- 📄 React Developer Tools Extension 5 min
- 📄 Your First Component 5 min
- 📄 Understanding npm Scripts 5 min
- 📄 VS Code Setup for React 5 min
- 📄 Introduction to JSX 5 min
- 📄 Embedding Expressions in JSX 5 min
- 📄 JSX Attributes and className 5 min
- 📄 Children and Nesting in JSX 5 min
- 📄 React Fragments 5 min
- 📄 Conditional Rendering 5 min
- 📄 Rendering Lists and the key Prop 5 min
- 📄 The Virtual DOM Explained 5 min
- 📄 React StrictMode 5 min
- 📄 How Rendering Works in React 5 min
- 📄 Function Components 5 min
- 📄 Class Components (Legacy) 5 min
- 📄 Passing Props 5 min
- 📄 The children Prop 5 min
- 📄 Default Props 5 min
- 📄 Type-Checking Props with PropTypes 5 min
- 📄 Component Composition 5 min
- 📄 Reusable Component Patterns 5 min
- 📄 Conditional and Optional Props 5 min
- 📄 Component Naming Conventions 5 min
- 📄 Splitting UI into Components 5 min
- 📄 Introduction to useState 5 min
- 📄 Updating State Correctly 5 min
- 📄 State with Objects and Arrays 5 min
- 📄 Handling Events in React 5 min
- 📄 SyntheticEvent Explained 5 min
- 📄 Controlled Input Basics 5 min
- 📄 Lifting State Up 5 min
- 📄 State vs Props 5 min
- 📄 Functional State Updates 5 min
- 📄 React State Batching 5 min
- 📄 Introduction to useEffect 5 min
- 📄 The Dependency Array 5 min
- 📄 Cleanup Functions in useEffect 5 min
- 📄 useContext Hook 5 min
- 📄 useReducer Hook 5 min
- 📄 useRef Hook 5 min
- 📄 useMemo Hook 5 min
- 📄 useCallback Hook 5 min
- 📄 useLayoutEffect Hook 5 min
- 📄 Rules of Hooks 5 min
- 📄 Hooks vs Class Lifecycle Methods 5 min
- 📄 Common Hook Mistakes 5 min
- 📄 Building Your First Custom Hook 5 min
- 📄 Building a useFetch Hook 5 min
- 📄 Building a useLocalStorage Hook 5 min
- 📄 Building a useDebounce Hook 5 min
- 📄 Building a useToggle Hook 5 min
- 📄 Composing Custom Hooks 5 min
- 📄 Render Props Pattern 5 min
- 📄 Higher-Order Components (HOC) 5 min
- 📄 Compound Component Pattern 5 min
- 📄 Context Provider Pattern 5 min
- 📄 Setting Up React Router 5 min
- 📄 Defining Routes 5 min
- 📄 Navigation with Link and NavLink 5 min
- 📄 URL Parameters 5 min
- 📄 Nested Routes 5 min
- 📄 The Outlet Component 5 min
- 📄 Programmatic Navigation 5 min
- 📄 Protected/Private Routes 5 min
- 📄 Handling 404 Pages 5 min
- 📄 Query Parameters and Search State 5 min
- 📄 State Management with Context API 5 min
- 📄 Combining useReducer and Context 5 min
- 📄 Introduction to Redux 5 min
- 📄 Redux Toolkit Basics 5 min
- 📄 Store, Actions, and Reducers 5 min
- 📄 useSelector and useDispatch 5 min
- 📄 State Management with Zustand 5 min
- 📄 Atomic State: Recoil and Jotai 5 min
- 📄 Choosing a State Management Solution 5 min
- 📄 Global vs Local State 5 min
- 📄 Fetching Data with fetch() 5 min
- 📄 Using Axios in React 5 min
- 📄 async/await Inside useEffect 5 min
- 📄 Loading and Error States 5 min
- 📄 Introduction to React Query 5 min
- 📄 Mutations with React Query 5 min
- 📄 Data Fetching with SWR 5 min
- 📄 Working with WebSockets 5 min
- 📄 Pagination and Infinite Scroll 5 min
- 📄 Optimistic UI Updates 5 min
- 📄 Introduction to Testing React Apps 5 min
- 📄 Setting Up React Testing Library 5 min
- 📄 Rendering and Querying Elements 5 min
- 📄 Simulating User Events 5 min
- 📄 Testing Custom Hooks 5 min
- 📄 Mocking API Calls in Tests 5 min
- 📄 Jest Basics for React 5 min
- 📄 Snapshot Testing 5 min
- 📄 End-to-End Testing with Cypress 5 min
- 📄 Error Boundaries 5 min
- 📄 React Portals 5 min
- 📄 Modals using Portals (practical use) 5 min
- 📄 React Suspense 5 min
- 📄 Code Splitting with React.lazy 5 min
- 📄 Introduction to Server Components 5 min
- 📄 Introduction to Next.js (server-side React) 5 min
- 📄 Using React with TypeScript 5 min
- 📄 Scalable Folder Architecture 5 min
- 📄 Common React Design Patterns 5 min
- 📄 Component Documentation with Storybook 5 min
- 📄 Accessibility (a11y) in React 5 min
- 📄 i18n with react-i18next 5 min
- 📄 React Security Best Practices 5 min
- 📄 Why Performance Matters 5 min
- 📄 Optimizing with React.memo 5 min
- 📄 Avoiding Unnecessary Re-renders 5 min
- 📄 Using the React Profiler 5 min
- 📄 Analyzing Bundle Size 5 min
- 📄 Image Optimization Techniques 5 min
- 📄 React as a PWA 5 min
- 📄 Creating a Production Build 5 min
- 📄 Environment Variables in React 5 min
- 📄 Deploying to Netlify 5 min
- 📄 Deploying to Vercel 5 min
- 📄 Basic CI/CD for React Apps 5 min
- 📄 SEO Basics for React SPAs 5 min
Reviews
Be the first to review this course
Offered by
Cookies & Cursor Technologies
Free, quality programming tutorials for everyone.
Frequently Asked Questions
Yes, completely free — no signup required to start, and no hidden costs.
Yes, on completion of all 145 lessons you'll earn a React certificate of completion.
About 12.1 hours at your own pace — go as fast or slow as you like.
Use our Try it live code editor to experiment, and the quizzes after each chapter to check your understanding as you go.
No separate app needed — access every lesson and the code editor from any device via your browser.