#### Phase 1: React Fundamentals (Basics)
**Goal**: Understand what React is and build simple UIs.
1. **What is React?**
- React is a **library** (not a full framework) for building **component-
based** UIs.
- It uses a **Virtual DOM** for efficient updates (only changes what needs
to change).
- In React 19, the **React Compiler** automatically optimizes your code
(less manual `useMemo`/`useCallback` needed).
2. **Setting Up a React Project**
- Use **Vite** (fastest way in 2026) instead of the old Create React App.
- Command:
```
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
```
- This gives you a modern setup with React 19 support.
3. **JSX (JavaScript XML)**
- JSX lets you write HTML-like code inside JavaScript.
- Example:
```jsx
function Welcome() {
return <h1>Hello, React! 👋</h1>;
```
- Rules: One root element, `className` instead of `class`, `{}` for JS
expressions.
4. **Components**
- **Functional Components** (preferred in modern React):
```jsx
function Button({ text }) {
return <button>{text}</button>;
```
- Nest them: `<Button text="Click me" />`
5. **Props** (Passing Data)
- Props are like function arguments — immutable data from parent to child.
6. **Rendering Lists & Conditional Rendering**
- Use `.map()` for lists (always add `key` prop).
- Conditionals: `{isLoggedIn ? <Dashboard /> : <Login />}` or `&&`.
**Mini Project for Basics**: Build a simple **Counter** or **Todo List** (static
version first).
#### Phase 2: State & Interactivity (Hooks Basics)
**Goal**: Make your app dynamic.
1. **State with `useState`**
```jsx
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
```
2. **Side Effects with `useEffect`**
- Runs after render (for data fetching, subscriptions, etc.).
- Dependency array is key: `useEffect(() => {}, [dependencies])`
3. **Event Handling**
- `onClick`, `onChange`, etc. (camelCase).
4. **Forms & Controlled Components**
- Manage input values with state.
**React 19 Bonus**: New hooks like `useActionState` for easier form
handling and async actions.
**Mini Project**: Interactive **Todo App** with add/delete/toggle.
#### Phase 3: Intermediate Concepts
1. **More Hooks**
- `useRef` (access DOM elements)
- `useMemo` / `useCallback` (performance — less needed with React
Compiler)
- `useReducer` (complex state logic)
- `useContext` (avoid prop drilling)
2. **Component Composition & Children**
- Pass components as children.
3. **Routing** (React Router)
- Install `react-router-dom`
- Set up pages, nested routes, loaders/actions (great with React 19).
4. **Styling**
- CSS Modules, Tailwind CSS (very popular), Styled Components, or CSS-in-
JS.
5. **Data Fetching**
- `useEffect` + `fetch` / Axios
- Better: **TanStack Query** (formerly React Query) for caching, loading
states, etc.
**Mini Project**: Multi-page **Blog App** or **E-commerce Product List**
with fake API.
#### Phase 4: Advanced Concepts
1. **Performance Optimization**
- React Compiler (auto-optimizes in React 19)
- `[Link]`, code splitting, `Suspense` for lazy loading.
2. **State Management (Beyond Context)**
- **Zustand** or **Jotai** (lightweight & popular)
- Redux Toolkit (for very large apps)
- Server state with TanStack Query
3. **React Server Components (RSC) & Server Actions** (Big in React 19)
- Render components on the server → smaller bundle, better
SEO/performance.
- `'use server'` and `'use client'` directives.
- Forms become much simpler with **Actions**.
4. **Testing**
- React Testing Library + Vitest/Jest
- End-to-end: Playwright or Cypress
5. **TypeScript with React**
- Highly recommended for larger apps (props typing, etc.).
6. **Advanced Patterns**
- Custom Hooks
- Compound Components
- Render Props / Hooks pattern
- Error Boundaries, Portals
- Animations (Framer Motion)
7. **Full-Stack Integration**
- [Link] (most common pairing with React in 2026 — App Router, Server
Components)
- Authentication, API routes, databases
**Capstone Project Ideas**:
- Full **Dashboard App** with auth, charts, dark mode
- **Social Media Clone** or **E-commerce Site**
- AI-powered app (using React 19 + some backend)
### Recommended Resources (2026 Updated)
- **Official Docs**: [Link] (best starting point — Quick Start
+ Tutorial)
- Free interactive: Scrimba "Learn React"
- YouTube: Search "React 19 Crash Course 2026" or full tutorials
- Roadmap: [Link]/react
### Phase 1 – Fundamentals (Quick Review / Jump Start)
1. **JSX Deep Dive** – Syntax rules, expressions, fragments, why it’s not
HTML
2. **Components & Props** – Functional vs Class (we ignore class now), prop
drilling vs composition
3. **Conditional Rendering & Lists** – Best patterns with keys, avoiding index
as key
4. **Event Handling & Forms** – Controlled vs uncontrolled inputs
### Phase 2 – Hooks & State (Core Interactivity)
5. **useState** – Deep mechanics, updater function, lazy initialization
6. **useEffect** – Dependency array rules, cleanup, common mistakes (and
when to avoid it in 2026)
7. **useRef, useImperativeHandle, useLayoutEffect**
8. **useReducer** – When to prefer over useState + complex state logic
9. **useContext** – Context API + avoiding prop drilling
### Phase 3 – Intermediate / Performance
10. **Custom Hooks** – Creating reusable logic, rules to follow
11. **[Link], useMemo, useCallback** – (Much less needed thanks to
**React Compiler**)
12. **Code Splitting & Lazy Loading** with `[Link]` + `Suspense`
13. **Error Boundaries & Portals**
### Phase 4 – Advanced & React 19+ (2026 Modern React)
14. **React Compiler** – (We already did a deep dive — want to go deeper
with migration/examples?)
15. **React Server Components (RSC)** – `'use client'` vs Server
Components, how they work, when to use, big mental model shift, benefits
for performance/bundle size
16. **Server Actions** – `'use server'`, progressive enhancement, forms
without manual state
17. **New React 19 Hooks**:
- `useActionState` – Simplifies form + async action handling (replaces a
lot of useState + useEffect boilerplate)
- `useFormStatus` – Access form pending state from any child (no prop
drilling)
- `useOptimistic` – Instant UI feedback while async work happens in
background
- `use()` – Read Promises or Context directly in render (can be used
conditionally!)
- `useEffectEvent` (from React 19.2) – Separate non-reactive event logic
from effects
18. **Suspense for Data Fetching** – Declarative loading, streaming,
avoiding waterfalls
19. **Transitions & Concurrent Features** – `useTransition`,
`useDeferredValue`, marking non-urgent updates
20. **State Management Beyond Context** – When to use Zustand, Jotai, or
Redux Toolkit in 2026 (and how Compiler changes things)
21. **Routing with React Router** (or [Link] App Router) – Loaders, actions,
nested routes
22. **TypeScript with React** – Typing props, hooks, Server Components
23. **Testing** – React Testing Library best practices + Vitest
24. **Performance & Profiling** – React DevTools, why/when the Compiler
wins, measuring re-renders
25. **Full-Stack Patterns** – Combining React 19 + [Link] (recommended in
2026), authentication, optimistic updates, etc.
### Bonus / Ecosystem
- Styling approaches (Tailwind, CSS Modules, Styled Components)
- Animations (Framer Motion)
- Data fetching libraries (TanStack Query vs native Suspense)
We’re starting exactly where we should: the absolute foundation.
I’ll explain **each concept in detail**, show **real, copy-paste-ready code**,
explain **why it works**, highlight **common mistakes**, and give **2026
best practices**.
You can create a fresh Vite React project right now and follow along:
```bash
npm create vite@latest phase1-demo -- --template react
cd phase1-demo
npm install
npm run dev
```
Then replace `src/[Link]` with the examples below one by one.
---
### 1. JSX Deep Dive (The Heart of React)
JSX is **not** HTML. It’s syntactic sugar that gets compiled to
`[Link]()` calls.
#### Key Rules & Details
| Rule | What you must do | Wrong → Error |
|------|------------------|---------------|
| One root element | Wrap everything in one parent | Multiple top-level tags |
| `class` → `className` | Use `className` | `class` (reserved word) |
| `for` → `htmlFor` | Use `htmlFor` on labels | `for` |
| Comments | `{/* comment */}` | `//` or `<!-- -->` |
| JS expressions | Wrap in `{}` | Plain text outside |
| Self-closing tags | `<img />` or `<br />` | `<img>` (in strict mode) |
#### Full Example – `[Link]`
```jsx
import './[Link]';
function App() {
const name = "wasihoun"; // ← JS variable
const isLoggedIn = true;
const items = ["Coffee", "Tea", "Milk"];
return (
<>
{/* 1. Fragment – no extra DOM node */}
<div className="container">
<h1>Hello, {[Link]()}! 👋</h1>
{/* 2. Conditional inside JSX */}
<p>
Status: {isLoggedIn ? "✅ Logged in" : "🔴 Please log in"}
</p>
{/* 3. List rendering (we'll deep-dive this next) */}
<ul>
{[Link]((item, index) => (
<li key={index}>{item}</li> {/* temporary key – we'll fix this soon
*/}
))}
</ul>
{/* 4. Inline styles + JS expression */}
<button
style={{
backgroundColor: isLoggedIn ? "#22c55e" : "#ef4444",
color: "white",
padding: "12px 24px",
border: "none",
borderRadius: "8px",
fontSize: "1.1rem",
cursor: "pointer",
}}
>
{isLoggedIn ? "Logout" : "Login"}
</button>
{/* 5. Attribute with JS */}
<img
src="[Link]
alt={`Random image for ${name}`}
width="300"
/>
</div>
</>
);
export default App;
```
**Why this works**
- `{}` injects any JavaScript value (strings, numbers, arrays, JSX elements).
- Fragments (`<>...</>`) prevent unnecessary wrapper `<div>` in the DOM.
- Everything becomes plain JavaScript at build time (thanks to Babel).
**Common mistakes to avoid**
- Putting objects directly: `{ {color: "red"} }` → wrong. Use `style={{}}`
instead.
- Forgetting `key` on lists (React will warn you).
- Using HTML comments inside JSX → doesn’t work.
**2026 Tip**: With React Compiler enabled, you can write even cleaner JSX
without worrying about performance.
---
### 2. Components & Props (Building Blocks)
**Components** = reusable functions that return JSX.
**Props** = arguments you pass to components (read-only).
#### Two types (we only use Functional Components in 2026)
```jsx
// 1. Simple component with props
function Welcome({ name, age, children }) {
return (
<div>
<h2>Welcome, {name}!</h2>
<p>You are {age} years old.</p>
{children} {/* ← special prop for nested content */}
</div>
);
}
// 2. Using the component
function App() {
return (
<>
<Welcome name="wasihoun" age={28}>
<p>This is passed as children prop!</p>
</Welcome>
<Welcome name="Sara" age={25} /> {/* no children */}
</>
);
```
**Props best practices**
- Destructure in parameters: `function Card({ title, image })`
- Default values: `function Card({ title = "Untitled" })`
- Pass objects: `<Card data={userData} />` → `function Card({ data })`
- Avoid prop drilling with **Composition** (children) instead of 10 props.
**Full Card Component Example**
```jsx
// components/[Link]
function Card({ title, description, price, children }) {
return (
<div className="card">
<h3>{title}</h3>
<p>{description}</p>
{price && <p className="price">${price}</p>}
<div className="card-footer">{children}</div>
</div>
);
export default Card;
```
Usage in `[Link]`:
```jsx
import Card from './components/Card';
function App() {
return (
<Card
title="iPhone 17"
description="The future in your pocket"
price={1299}
>
<button>Buy Now</button>
</Card>
);
}
```
**Pro tip 2026**: React Compiler automatically memoizes components when
beneficial, so you rarely need `[Link]` anymore.
---
### 3. Conditional Rendering & Lists (The Most Used Patterns)
#### Conditional Rendering Options
```jsx
{isLoggedIn ? <Dashboard /> : <LoginForm />}
{isLoggedIn && <WelcomeMessage />}
{!isLoggedIn && <p>Please sign in</p>}
{status === "loading" && <Spinner />}
{status === "error" && <ErrorMessage />}
```
#### Lists – The Correct Way
```jsx
function TodoList() {
const todos = [
{ id: 1, text: "Learn React", done: true },
{ id: 2, text: "Build first app", done: false },
{ id: 3, text: "Master JSX", done: false },
];
return (
<ul>
{[Link]((todo) => (
<li key={[Link]} className={[Link] ? "done" : ""}>
{[Link]}
</li>
))}
</ul>
);
```
**Golden Rule**: Always use a **stable, unique `key`** (usually `id` from
database).
Never use `index` as key unless the list never reorders or filters.
**Full Combined Example** (Conditional + List)
```jsx
function Dashboard() {
const [todos, setTodos] = useState([
{ id: 1, text: "Finish Phase 1", done: false },
]);
const completed = [Link](t => [Link]).length;
return (
<div>
<h2>Tasks ({completed}/{[Link]})</h2>
{[Link] === 0 ? (
<p>No tasks yet! 🎉</p>
):(
<ul>
{[Link](todo => (
<li key={[Link]}>
{[Link]}
</li>
))}
</ul>
)}
</div>
);
```
---
### 4. Event Handling & Forms (Making It Interactive)
#### Basic Events
```jsx
<button onClick={() => alert("Hello!")}>Click me</button>
<button onClick={handleClick}>Better way</button>
```
#### Full Controlled Form Example (Recommended in 2026)
```jsx
import { useState } from 'react';
function SignupForm() {
const [formData, setFormData] = useState({
name: "",
email: "",
password: "",
});
const handleChange = (e) => {
setFormData({
...formData,
[[Link]]: [Link], // dynamic key
});
};
const handleSubmit = (e) => {
[Link]();
[Link]("Form submitted:", formData);
// In React 19 we can use Server Actions (later phase)
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
placeholder="Your name"
value={[Link]}
onChange={handleChange}
/>
<input
type="email"
name="email"
value={[Link]}
onChange={handleChange}
/>
<button type="submit">Sign Up</button>
</form>
);
```
**Controlled vs Uncontrolled**
- **Controlled** (above): React owns the value → recommended for
validation, live feedback.
- **Uncontrolled**: Use `ref` when you don’t need real-time validation.
---
**Phase 1 Complete!** 🎉
You now fully understand:
- JSX syntax & gotchas
- Components + Props + Composition
- Conditional rendering & proper lists with keys
- Events + modern controlled forms
**Next Step Suggestion**
Create a **small “Profile Card + Todo List”** app that combines **all four
concepts** above.
I can give you the complete starter code and we can build it together line-by-
line if you want.
Just say:
- “Let’s build the Profile + Todo app together”
- or “Explain one of them again with more examples”
- or “Ready for Phase 2 (Hooks)”
What do you want to do? 🔥
**Phase 3: Intermediate Concepts**
(React 19 – 2026 edition)
This phase bridges basic components into dynamic, performant apps. We'll
cover the most important topics with **detailed explanations**, **code
examples**, and **modern best practices** (including how the **React
Compiler** changes things).
### 1. More Hooks: useRef, useLayoutEffect, useReducer, useContext
#### useRef – Access DOM or persist values without re-renders
`useRef` creates a mutable object that survives re-renders.
```jsx
import { useRef, useState } from 'react';
function FocusInput() {
const inputRef = useRef(null); // DOM reference
const renderCount = useRef(0); // Persist value across renders
const [text, setText] = useState('');
[Link] += 1; // Doesn't trigger re-render
const focusInput = () => {
[Link](); // Direct DOM access
};
return (
<div>
<input
ref={inputRef}
value={text}
onChange={(e) => setText([Link])}
placeholder="Type something..."
/>
<button onClick={focusInput}>Focus Input</button>
<p>Component rendered {[Link]} times</p>
</div>
);
```
**When to use**: Measuring DOM elements, storing previous values,
integrating with third-party libraries (e.g., charts).
#### useReducer – Complex state logic
Better than multiple `useState` when state transitions are complex or
depend on previous state.
```jsx
import { useReducer } from 'react';
const initialState = { count: 0, step: 1 };
function reducer(state, action) {
switch ([Link]) {
case 'increment':
return { ...state, count: [Link] + [Link] };
case 'decrement':
return { ...state, count: [Link] - [Link] };
case 'setStep':
return { ...state, step: [Link] };
default:
return state;
function CounterWithReducer() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {[Link]}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<input
type="number"
value={[Link]}
onChange={(e) => dispatch({ type: 'setStep', payload: +[Link]
})}
/>
</div>
);
```
**When to prefer**: Cart logic, form wizards, game state.
#### useContext – Sharing data without prop drilling
```jsx
// [Link]
import { createContext, useContext } from 'react';
const ThemeContext = createContext();
export function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
return (
<[Link] value={{ theme, setTheme }}>
{children}
</[Link]>
);
export const useTheme = () => useContext(ThemeContext);
```
Usage in any child component:
```jsx
function ThemedButton() {
const { theme, setTheme } = useTheme();
return <button onClick={() => setTheme(theme === 'light' ? 'dark' :
'light')}>
Toggle Theme ({theme})
</button>;
```
**2026 Note**: For very large apps, lightweight alternatives like **Zustand**
or **Jotai** are popular because they avoid context re-render issues.
### 2. Custom Hooks – Reusable Logic
Extract logic into functions starting with `use`.
```jsx
// hooks/[Link]
import { useState, useEffect } from 'react';
export function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
const saved = [Link](key);
return saved ? [Link](saved) : initialValue;
});
useEffect(() => {
[Link](key, [Link](value));
}, [key, value]);
return [value, setValue];
```
Usage:
```jsx
function TodoApp() {
const [todos, setTodos] = useLocalStorage('todos', []);
// ... rest of component
```
**Rules**: Must call other hooks at the top level, only inside components or
other custom hooks.
### 3. Code Splitting & Lazy Loading with Suspense
```jsx
import { lazy, Suspense } from 'react';
const HeavyDashboard = lazy(() => import('./HeavyDashboard'));
function App() {
return (
<Suspense fallback={<div>Loading dashboard...</div>}>
<HeavyDashboard />
</Suspense>
);
```
This splits the bundle — the component loads only when needed.
### 4. Error Boundaries & Portals (Advanced Patterns)
Error Boundaries catch JavaScript errors in the component tree (use a class
component or a library like `react-error-boundary`).
Portals render children into a different DOM node (e.g., modals).
---
**Phase 4: Advanced Concepts & React 19+ (2026 Modern React)**
### 1. React Compiler (Quick Recap + 2026 Status)
The **React Compiler** is stable and widely adopted. It automatically
optimizes your code at build time:
- Handles memoization (no more manual `useMemo`/`useCallback` in most
cases)
- Reduces unnecessary re-renders
- Works best when you follow the **Rules of React**
Setup in Vite: Add `babel-plugin-react-compiler`.
In [Link]: `reactCompiler: true` in config.
You write clean code — the compiler does the heavy lifting.
### 2. React Server Components (RSC) – The Big Shift
**Mental Model**:
- **Server Components** (default): Run only on the server. No interactivity,
but can fetch data directly, access secrets, and reduce client bundle size
dramatically.
- **Client Components**: Marked with `'use client'` at the top. These run in
the browser and can use hooks, events, state.
```jsx
// Server Component (no 'use client')
async function ProductPage({ params }) {
const product = await fetchProduct([Link]); // Direct DB or API call on
server
return (
<div>
<h1>{[Link]}</h1>
<AddToCartButton productId={[Link]} /> {/* Client Component */}
</div>
);
// Client Component
'use client';
function AddToCartButton({ productId }) {
const [added, setAdded] = useState(false);
// interactivity here
```
**Benefits in 2026**:
- Smaller JavaScript bundles
- Better SEO and performance
- Data fetching directly in components (no useEffect waterfalls)
- Streaming with `<Suspense>`
**Best Practice**: Push `'use client'` as low as possible (leaf components).
### 3. Server Actions + New React 19 Hooks
Server Actions let you run server-side code from forms or events.
#### Key New Hooks (React 19)
- **`useActionState`** – Simplifies async form handling (replaces old
`useFormState` patterns).
```jsx
import { useActionState } from 'react';
async function createUser(prevState, formData) {
// Server action logic
const name = [Link]('name');
// ... save to DB
return { success: true, message: 'User created!' };
function SignupForm() {
const [state, formAction, isPending] = useActionState(createUser, null);
return (
<form action={formAction}>
<input name="name" required />
<button type="submit" disabled={isPending}>
{isPending ? 'Creating...' : 'Sign Up'}
</button>
{state?.message && <p>{[Link]}</p>}
</form>
);
```
- **`useFormStatus`** – Access form pending state from any child (no prop
drilling).
```jsx
function SubmitButton() {
const { pending } = useFormStatus();
return <button disabled={pending}>{pending ? 'Submitting...' :
'Submit'}</button>;
}
```
- **`useOptimistic`** – Instant UI feedback while async work happens.
```jsx
function LikeButton({ postId, initialLikes }) {
const [optimisticLikes, addOptimisticLike] = useOptimistic(
initialLikes,
(state, newLike) => state + 1
);
const handleLike = async () => {
addOptimisticLike(); // Instant update
await likePost(postId); // Real async call
};
return <button onClick={handleLike}>❤️{optimisticLikes}</button>;
```
- **`use()`** – Read promises or context directly in render (can be conditional
in some cases).
### 4. Performance, Testing & State Management
- **Profiling**: Use React DevTools to see re-renders (much fewer with
Compiler).
- **Testing**: React Testing Library + Vitest.
- **State Management**:
- Simple → Context + useReducer
- Medium → Zustand or Jotai (very popular in 2026)
- Large → Redux Toolkit or TanStack Query for server state
**Capstone Recommendation**: Build a full **Todo + Dashboard** app using:
- React Compiler
- Server Components (if using [Link])
- Server Actions + `useActionState` + `useOptimistic`
---
**Phase 3 & 4 Complete!** 🚀
You now have a solid understanding from intermediate hooks to the modern
React 19+ architecture that most production apps use in 2026.
**What’s next?**
- “Let’s build a complete example using Server Actions and useOptimistic”
- “Deep dive on one specific topic (e.g., React Server Components with
code)”
- “TypeScript with React”
- “Routing with React Router or [Link] App Router”
- Or jump to a full project together
Just tell me what you want to tackle! 😊