Quick Start

Get up and running right away:

1
2
3
4
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Or use Create React App:

1
2
3
npx create-react-app my-app
cd my-app
npm start

Tutorial: Tic‑Tac‑Toe

Build a working Tic‑Tac‑Toe game from scratch, learn components, props, state, and “time travel”.
Fully implemented using Hooks in functional components :contentReference[oaicite:1]{index=1}.

Thinking in React

Learn how to break a UI into components, build a static mock, identify state, and add interactivity :contentReference[oaicite:2]{index=2}.

Installation

Install React via npm, CDN, or manually:

1
npm install react react-dom

Or add via script in HTML:

1
<script src="https://unpkg.com/react@latest/umd/react.development.js"></script>

Setup

Configure your environment:

• Setup editor (VS Code or WebStorm)
• Optionally add TypeScript
• Install React Developer Tools browser extension :contentReference[oaicite:3]{index=3}
• Optionally use React Compiler or Vite

Describing the UI

Start with components and JSX. Build reusable UI elements in isolation :contentReference[oaicite:4]{index=4}.

Your First Component

Create your first functional component, render JSX, and reason about trees of components :contentReference[oaicite:5]{index=5}.

Writing Markup with JSX

JSX lets you mix HTML-like syntax and JavaScript—learn conversion, expression usage, and stricter syntax rules :contentReference[oaicite:6]{index=6}.

Adding Interactivity

Add event handlers and use useState for simple interactivity (carousels, toggles, etc.) :contentReference[oaicite:7]{index=7}.

Reacting to Input with State

Model visual states, use declarative useState, and avoid imperative UI updates :contentReference[oaicite:8]{index=8}.

Managing State

Structure state properly, lift it up, avoid duplication, and handle deeper component interactions :contentReference[oaicite:9]{index=9}.

Passing Data with Context

Learn about prop‑drilling issues and use of Context API to provide data deeply without props :contentReference[oaicite:10]{index=10}.

Escape Hatches

Explore refs for DOM access, effects for external synchronization, and how to avoid unnecessary useEffect :contentReference[oaicite:11]{index=11}.