Setup: Vite + First Component

The Modern Setup (Vite)

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev   # http://localhost:5173

Vite replaced Create React App: instant start, fast refresh, tiny config.

Your First Component

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>
}
// usage: <Welcome name="Ravi" />

JSX Rules in 60 Seconds

• Return one root element (or a fragment <>...</>).
• className not class, htmlFor not for.
• Curly braces embed any JS expression: {user.name}.
• Components start with a capital letter.

Project Layout That Scales

src/
  components/   # reusable UI (Button, Card)
  pages/        # route screens (Home, About)
  hooks/        # custom hooks
  api/          # fetch functions
  App.jsx       # routes + layout

Key Points

• Vite for every new project, no exceptions.
• Components are capitalised functions with props.
• JSX is JS with angle brackets - expressions go in braces.