HomeReact
Chapter 1
01 — React Setup & JSX
Getting started with React using Vite (the modern build tool) and understanding JSX — the syntax extension that lets you write HTML-like code in JavaScript/TypeScript.
Quick Setup
# Create a new React + TypeScript project
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run devProject Structure (Vite + React)
my-app/
├── public/ # Static assets (served as-is)
├── src/
│ ├── App.tsx # Root component
│ ├── main.tsx # Entry point (renders App into DOM)
│ ├── index.css # Global styles
│ └── vite-env.d.ts # Vite type declarations
├── index.html # HTML shell (Vite entry)
├── package.json
├── tsconfig.json # TypeScript config
└── vite.config.ts # Vite configWhat is JSX?
JSX is a syntax extension that looks like HTML but compiles to JavaScript function calls:
// This JSX:
const element = <h1 className="title">Hello</h1>;
// Compiles to:
const element = React.createElement('h1', { className: 'title' }, 'Hello');JSX vs HTML Differences
| HTML | JSX | Why |
|---|---|---|
class | className | class is a reserved JS keyword |
for | htmlFor | for is a reserved JS keyword |
onclick | onClick | camelCase event names |
style="color: red" | style={{ color: 'red' }} | Object, not string |
tabindex | tabIndex | camelCase attributes |
| Self-closing optional | Self-closing required | <img />, <br />, <input /> |
JSX Rules
- Return a single root element — use
<div>or<>(Fragment) - Close all tags —
<img />,<input />,<br /> - camelCase for most attributes
- Expressions in
{}— any JS expression:{2 + 2},{user.name},{getTitle()} - No
ifstatements inside JSX — use ternary or&&
Key Concepts
- Fragment (
<>...</>) — group elements without adding a DOM node - Expressions —
{}can contain any JS expression, not statements - Comments —
{/* comment */}inside JSX - Boolean/null/undefined — not rendered (used for conditional rendering)
File
setup-jsx.tsx— Vite setup walkthrough, JSX syntax, expressions, fragments, JSX vs HTML examples