Project Setup 🛠️

Good tooling makes React learning smoother. This guide covers Vite scaffolding, folder structure, and essential developer utilities.

1) Choose Vite for Speed ⚡

Vite delivers instant dev servers and modern build tooling.


"npm create vite@latest react-basics -- --template react";
"cd react-basics";
"npm install";
"npm run dev";

✅ Minimal config, fast HMR.
✅ Ships ES modules and modern TypeScript support out of the box.
🔄 Works great for both quick prototypes and production apps.

2) Understand Folder Structure 🧱

A predictable layout reduces cognitive load.


src/
  main.jsx        // entry (createRoot)
  App.jsx         // top-level component
  components/     // shared UI pieces
  hooks/          // custom hooks
  assets/         // images, fonts
public/
  index.html      // root div for React

Keep UI primitives in components/.
Store feature-specific data or services in domain folders (e.g., features/todos).
Mirror test files next to their components: Button.jsx + Button.test.jsx.

3) Add DevTools 🛠️

Install the React DevTools browser extension to inspect component trees, props, and hooks.
Use the Components tab to verify props and state flows.
Use the Profiler tab to measure renders when apps grow.

🧠 Treat DevTools like an MRI for your component tree.

4) Configure ESLint + Prettier ✅


"npm install -D eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier";
"npm init @eslint/config";

Suggested .eslintrc.cjs snippet:


module.exports = {
  env: { browser: true, es2021: true },
  extends: [
    "eslint:recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  plugins: ["react", "react-hooks"],
  rules: {}
};

ESLint catches anti-patterns (missing dependencies, unsafe APIs).
Prettier enforces consistent formatting.
Run them via npm run lint and npm run format scripts.

5) Quality-of-Life Scripts 🧠

Add package.json scripts to keep commands memorable:


{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext .jsx,.js",
    "format": "prettier --write ."
  }
}

✅ Developers know exactly how to run, lint, and build the app.
🔄 Keep lint in CI to stop regressions early.

Key Takeaways ✅

Vite is the quickest route to a modern React environment.
Clear folder boundaries (components, hooks, features) maintain sanity.
React DevTools, ESLint, and Prettier act as copilots that flag issues instantly.
Scripts turn one-off commands into reusable habits.

Recap 🔄

Spin up Vite, organize your src/ like a tidy workshop, and install DevTools plus linting/formatting guards. These steps provide a fast feedback loop, letting you focus on learning React rather than wrestling with configuration.