React Beginner

Course · Web Development · 8 Weeks

A free reading course that teaches you to build real web applications with React. Twelve chapters take you from setting up a project with Vite to components and props, lists and conditions, state, events and forms, effects, fetching data from an API, sharing state with context and reducers, routing with React Router, and custom hooks. The course finishes with a complete project, Posts Reader, which you build step by step and publish on GitHub Pages. Every chapter has clear explanations, real code and output that was run and checked, common mistakes, multiple-choice questions you answer as you read, and practice exercises, with a practice assignment for each chapter and an answer key. You need HTML, CSS and JavaScript Beginner first, and Git and GitHub Beginner helps for the last chapter. React needs a one-time setup of Node.js and a terminal, which the first chapter explains in detail. You read at your own pace and type the code yourself.

Program fee: ₹0 (excl. GST). Certificate on completion, tied to a verifiable Intern ID.

Learning Roadmap

  1. Weeks 1-2: Getting started: Set up Node.js and a Vite project, learn JSX, and build your first components with props, lists and conditions.
  2. Weeks 3-4: State and forms: Make pages that respond with useState, handle clicks and forms with controlled inputs, and keep your data safe from mistakes.
  3. Weeks 5-6: Data and sharing: Run effects and fetch data with loading and error states, avoid race conditions, and share state with context and reducers.
  4. Weeks 7-8: Pages and publishing: Add routing with React Router, write your own hooks, handle errors with an error boundary, and publish the finished Posts Reader app.

Syllabus — What You'll Learn

  • What React Is, and Setting Up: Node.js, Vite, the project files, hot updates
  • JSX: expressions, className, style, fragments, safe text
  • Components and Props: your own components, children, defaults, read-only props
  • Lists and Conditions: map, keys, filtering, conditional rendering, empty states
  • State with useState: renders, updating from the old value, arrays and objects
  • Events and Forms: handlers, controlled inputs, validation, one handler for many fields
  • Effects with useEffect: dependencies, cleanup, stale values, when not to use one
  • Fetching Data: loading and error states, the 404 trap, race conditions
  • Sharing State: lifting state, context, useReducer
  • Routing with React Router: routes, links, parameters, layouts, search parameters
  • Hooks That Remember and Reuse: useRef, custom hooks, error boundaries
  • Final Project: build Posts Reader and publish it with GitHub Pages

Career Opportunities

  • Web Development (fifth step after HTML, CSS, JavaScript and Git)
  • Junior Front-End Developer (React is the most requested front-end library)
  • Front-End Framework Developer (first step towards Next.js)
  • Web Application Developer for small business and start-up projects
  • Freelance Website and Web App Builder