When will you use this?

You need this before writing any React code — same as installing Word before writing a document.

• Every React job expects you to run projects locally with Node and a build tool like Vite.
• Interviewers often ask you to clone a repo and run npm install && npm run dev on day one.

Real-world: Toolliyo LMS tech stack

Toolliyo ships as a single React SPA today but the team already picked libraries for routing, forms, and API caching. They add tools only when a feature needs them — not on day one.

Production-style code

// package.json (excerpt) — real Toolliyo-style stack
{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.0.0",
    "@tanstack/react-query": "^5.0.0",
    "react-hook-form": "^7.0.0",
    "axios": "^1.7.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext js,jsx"
  }
}

// Added over time:
// Week 1: Vite + React only
// Week 4: react-router-dom (multiple pages)
// Week 8: TanStack Query (course API caching)
// Week 12: react-hook-form (instructor onboarding)

What happens in production: Developers onboard faster because the stack is documented in package.json — same pattern at Flipkart, Zoho, and most product teams.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// Typical stack for a new app
// Build: Vite
// Pages: react-router-dom
// Server data: @tanstack/react-query
// Forms: react-hook-form

Line-by-line walkthrough

How it works (big picture)

• Think of React as the engine.
• Vite starts the project, Router handles URLs, and Query manages API data.
• Each tool solves one problem well.

Do this on your computer

1. Create a Vite React app.
2. When you need multiple pages, install react-router-dom.
3. When you fetch from an API, consider TanStack Query in a later lesson.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

React = UI library; other tools handle build, routing, and data. Start small: Vite + React only. Add libraries when you hit a real need.

Common questions