When you call an API from React running on localhost:3000, the browser blocks the request if the API doesn't allow cross-origin requests. This is CORS (Cross-Origin Resource Sharing) protection.

**Error Message:**
```
Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
```

## Understanding the Problem

The browser checks if the API server explicitly allows requests from your origin (localhost:3000). If the API doesn't send the right headers, the browser blocks the response.

## Solution 1: Development Proxy (Quick Fix)

Add this to your package.json:

```json
{
  "proxy": "https://api.example.com"
}
```

Change your fetch calls:

```javascript
// Before
fetch('https://api.example.com/users')

// After
fetch('/users')
```

The React dev server forwards requests to the API. CORS error disappears.

## Solution 2: Backend Configuration (Production Fix)

If you control the backend, add CORS headers. For Express.js:

```javascript
const cors = require('cors');

app.use(cors({
  origin: 'http://localhost:3000',  // development
  // origin: 'https://yourapp.com', // production
  credentials: true
}));
```

## Solution 3: Backend Proxy (Best Practice)

Create an endpoint in your backend that calls the external API:

```javascript
// Node.js backend
app.get('/api/weather', async (req, res) => {
  const response = await fetch('https://external-api.com/data');
  const data = await response.json();
  res.json(data);
});
```

Your React app calls your backend:

```javascript
fetch('http://localhost:5000/api/weather')
```

Backend-to-backend calls don't have CORS restrictions.

## Common Mistakes

### Using mode: 'no-cors'

```javascript
fetch(url, { mode: 'no-cors' })  // Don't do this
```

This sends the request but you can't read the response. The response becomes "opaque" - completely useless.

### CORS Browser Extensions

Chrome extensions like "CORS Unblock" only work in development. They don't solve production issues.

## Which Solution to Use

| Scenario | Solution |
|----------|----------|
| Development | Use proxy in package.json |
| You own the API | Configure CORS on backend |
| Third-party API | Create backend proxy |
| Production | Backend proxy or proper CORS config |

## Key Points

CORS is a security feature, not a bug. The proper fix depends on whether you control the API server. For third-party APIs, always route through your backend.

Getting 'No Access-Control-Allow-Origin header is present'? Here's how I fixed this CORS error in my React app.

Fix CORS Error in React - No Access-Control-Allow-Origin Header

Hydration errors occur when server-rendered HTML doesn't match what React renders on the client. This happens in Next.js and other SSR frameworks.

**Error Message:**
```
Warning: Text content did not match. 
Server: "December 19" Client: "December 20"

Hydration failed because the initial UI does not match 
what was rendered on the server
```

## Root Cause

The server renders your component at one time. The client hydrates at a different time. If they produce different output, React throws a hydration error.

## Common Causes

### 1. Date and Time Rendering
```javascript
function Component() {
  return <div>{new Date().toString()}</div>  // Different every render
}
```

### 2. Random Values
```javascript
function Component() {
  return <div>{Math.random()}</div>  // Different every time
}
```

### 3. Browser-Only APIs
```javascript
function Component() {
  return <div>{window.innerWidth}</div>  // window doesn't exist on server
}
```

### 4. localStorage Access
```javascript
function Component() {
  const theme = localStorage.getItem('theme');
  return <div className={theme}>...</div>  // localStorage is client-only
}
```

## Solution 1: useEffect for Client-Only Code

Move dynamic content to useEffect:

```javascript
function Component() {
  const [time, setTime] = useState('');
  
  useEffect(() => {
    setTime(new Date().toString());
  }, []);
  
  return <div>{time}</div>;
}
```

Server renders empty string. Client renders empty string, then updates. No mismatch.

## Solution 2: Check Window Existence

```javascript
function Component() {
  const width = typeof window !== 'undefined' ? window.innerWidth : 1200;
  return <div>Width: {width}</div>;
}
```

Both server and client render the same initial value.

## Solution 3: Suppress Hydration Warning

For intentional mismatches like timestamps:

```javascript
<div suppressHydrationWarning>
  {new Date().toString()}
</div>
```

Use sparingly. Only when you know the mismatch is acceptable.

## Solution 4: Dynamic Import (Next.js)

Disable SSR for specific components:

```javascript
import dynamic from 'next/dynamic';

const ClientComponent = dynamic(
  () => import('./ClientOnly'),
  { ssr: false }
);

function Page() {
  return <ClientComponent />;
}
```

Component only renders on client.

## Practical Example

**Problem:** Showing "Last updated X minutes ago"

```javascript
// This breaks
function UpdateTime({ timestamp }) {
  return <span>{getTimeSince(timestamp)}</span>;
}
```

Server calculates "2 minutes ago". User visits later, client calculates "62 minutes ago". Mismatch.

**Solution:**

```javascript
function UpdateTime({ timestamp }) {
  const [timeAgo, setTimeAgo] = useState('');

  useEffect(() => {
    setTimeAgo(getTimeSince(timestamp));
    
    const interval = setInterval(() => {
      setTimeAgo(getTimeSince(timestamp));
    }, 60000);

    return () => clearInterval(interval);
  }, [timestamp]);

  return <span>{timeAgo}</span>;
}
```

## Debugging Tips

1. Check browser console for the exact mismatch
2. Look for Date, Math.random, or window usage
3. Search for localStorage or sessionStorage
4. Verify all server/client code paths are identical

## Prevention Checklist

- Use useEffect for time-dependent values
- Check `typeof window !== 'undefined'` before using browser APIs
- Load localStorage values in useEffect
- Use suppressHydrationWarning only when necessary
- Consider dynamic imports for client-only components

## Key Takeaway

If a value changes between server and client render, move it to useEffect or use proper guards. Hydration errors indicate a real problem in SSR logic.

Getting hydration errors in Next.js or React? Here's why it happens and how to fix it without breaking your app.

React Hydration Error: Text Content Does Not Match

React is a JavaScript library for building websites. Created by Facebook, used by millions of developers worldwide.

## Why Use React?

- **Fast** - Updates only what changes
- **Easy** - Break projects into small pieces
- **Popular** - Facebook, Instagram, Netflix use it
- **Jobs** - High demand for React developers

## Simple Example

```javascript
function Welcome() {
  return <h1>Hello, World!</h1>;
}
```

## What You Need First

- HTML basics (tags, elements)
- CSS basics (styling)
- JavaScript basics (variables, functions)

## How It Works

**Regular JavaScript:** Changes whole page (slow)

**React:** Changes only what's needed (fast)

> Next: Install React and create your first app!

Learn what React is and why developers love using it to build modern websites.

React Introduction

Create your first React app in minutes!

## Install Required Tools

1. **Node.js** - Download from nodejs.org
2. **VS Code** - Code editor

## Create App

```bash
npx create-react-app my-app
cd my-app
npm start
```

Browser opens at http://localhost:3000

## File Structure

```
my-app/
  src/App.js    ← Your code here
  src/index.js  ← Entry point
  public/       ← Static files
```

## First Change

Edit **src/App.js**:

```javascript
function App() {
  return (
    <div>
      <h1>My First React App</h1>
      <p>Hello World!</p>
    </div>
  );
}

export default App;
```

Save and see changes automatically!

## Quick Fixes

- **"npx not found"** → Install Node.js
- **Port 3000 busy** → Use port 3001
- **Stop app** → Ctrl + C

> Next: Learn JSX syntax!

Set up React and create your first app in minutes. Step-by-step guide for beginners.

React Get Started

JSX is how we write HTML inside JavaScript in React. It looks like HTML, but it's actually JavaScript!

## What is JSX?

JSX stands for JavaScript XML. It lets you write HTML-like code inside JavaScript.

### Normal HTML:
```html
<h1>Hello World</h1>
```

### React JSX:
```javascript
const element = <h1>Hello World</h1>;
```

See? It looks the same! But this is actually JavaScript.

## Why JSX is Useful

JSX makes React code easier to read and write. Compare these:

### Without JSX (Hard to read):
```javascript
React.createElement('h1', null, 'Hello World');
```

### With JSX (Easy to read):
```javascript
<h1>Hello World</h1>
```

Which one is easier? JSX, right?

## JSX Rules

JSX has a few simple rules:

### 1. Close All Tags

In HTML, some tags don't need closing:
```html
<img src="photo.jpg">
<br>
```

In JSX, you MUST close them:
```javascript
<img src="photo.jpg" />
<br />
```

### 2. One Parent Element

Your JSX must have ONE parent element:

❌ **Wrong:**
```javascript
return (
  <h1>Hello</h1>
  <p>Welcome</p>
);
```

✅ **Correct:**
```javascript
return (
  <div>
    <h1>Hello</h1>
    <p>Welcome</p>
  </div>
);
```

### 3. Use className Instead of class

In HTML you write: `class="big"`

In JSX you write: `className="big"`

```javascript
<h1 className="big">Hello</h1>
```

Why? Because "class" is a reserved word in JavaScript.

## Putting JavaScript Inside JSX

You can put any JavaScript inside JSX using curly braces `{ }`:

```javascript
const name = "John";
const element = <h1>Hello {name}!</h1>;
// Shows: Hello John!
```

### More Examples:

```javascript
// Math
<p>2 + 2 = {2 + 2}</p>
// Shows: 2 + 2 = 4

// Variables
const age = 25;
<p>I am {age} years old</p>

// Functions
function getGreeting() {
  return "Good Morning";
}
<h1>{getGreeting()}</h1>
```

## JSX with Conditions

You can use conditions in JSX:

```javascript
const isLoggedIn = true;

return (
  <div>
    {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please login</h1>}
  </div>
);
```

This is called a "ternary operator". It's like an if-else in one line.

## JSX with Styles

You can add styles in JSX:

```javascript
const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

<div style={divStyle}>Hello!</div>
```

Or inline:

```javascript
<div style={{color: 'red', fontSize: '20px'}}>Hello!</div>
```

Notice the double braces `{{ }}` - one for JSX, one for the object!

## Complete Example

```javascript
function App() {
  const name = "Ahmad";
  const age = 20;
  const isStudent = true;

  return (
    <div className="container">
      <h1>Hello {name}!</h1>
      <p>You are {age} years old.</p>
      {isStudent && <p>You are a student.</p>}
      <img src="photo.jpg" alt="Profile" />
    </div>
  );
}
```

## Remember

- JSX looks like HTML but is actually JavaScript
- Close all tags
- Use `{ }` to put JavaScript inside JSX
- Use `className` instead of `class`
- Must have one parent element

> Next lesson: We'll learn about Components - the building blocks of React!

Learn JSX - the special way React writes HTML inside JavaScript code. Easy to learn!

React JSX

Components are the heart of React. They are like LEGO blocks - small pieces that you connect together to build something big!

## What is a Component?

A component is a piece of your website. It's like a small, reusable part.

Think of a website like a house:
- Navigation bar = One component
- Footer = One component  
- Button = One component

You build each part separately, then put them together!

## Creating Your First Component

Here's a simple component:

```javascript
function Welcome() {
  return <h1>Hello, Welcome to React!</h1>;
}
```

That's it! A component is just a JavaScript function that returns JSX.

## Using Your Component

Once you create a component, you can use it like an HTML tag:

```javascript
function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
      <Welcome />
    </div>
  );
}
```

This will show "Hello, Welcome to React!" three times!

## Component Rules

### 1. Component Names Start with Capital Letter

✅ **Correct:**
```javascript
function Button() { ... }
function UserProfile() { ... }
```

❌ **Wrong:**
```javascript
function button() { ... }
function userProfile() { ... }
```

### 2. Components Return JSX

Every component must return something (usually JSX):

```javascript
function MyComponent() {
  return <h1>Hello!</h1>;  // Returns JSX
}
```

## Practical Example - Making a Button Component

Let's make a reusable button:

```javascript
function Button() {
  return <button>Click Me</button>;
}

function App() {
  return (
    <div>
      <Button />
      <Button />
      <Button />
    </div>
  );
}
```

Now you have 3 buttons with just 3 lines of code!

## Multiple Components Example

Let's build a simple profile card:

```javascript
function ProfilePicture() {
  return <img src="user.jpg" alt="User" />;
}

function UserName() {
  return <h2>Michael Smith</h2>;
}

function UserBio() {
  return <p>I love coding!</p>;
}

function ProfileCard() {
  return (
    <div className="profile">
      <ProfilePicture />
      <UserName />
      <UserBio />
    </div>
  );
}
```

See how we broke everything into small components? Each component does ONE thing!

## Components Inside Components

You can put components inside other components (like nesting boxes):

```javascript
function Header() {
  return <h1>My Website</h1>;
}

function Content() {
  return <p>Welcome to my website!</p>;
}

function Footer() {
  return <p>© 2025 My Website</p>;
}

function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}
```

## Why Use Components?

### 1. Reusability
Write once, use everywhere:

```javascript
function LikeButton() {
  return <button>👍 Like</button>;
}

// Use it many times!
<LikeButton />
<LikeButton />
<LikeButton />
```

### 2. Organization
Your code stays clean and organized. Instead of one huge file, you have many small, simple files.

### 3. Easy to Fix
If a button is broken, you only fix it in one place, not everywhere on your website!

## Arrow Function Components

You can also write components using arrow functions:

```javascript
const Welcome = () => {
  return <h1>Hello!</h1>;
};
```

Both ways work the same. Use what you like!

## Complete Example

Let's build a simple blog post component:

```javascript
function BlogPost() {
  return (
    <article>
      <h2>My First Blog Post</h2>
      <p>Posted on: January 1, 2025</p>
      <p>This is my first blog post about React. It's really cool!</p>
      <button>Read More</button>
    </article>
  );
}

function App() {
  return (
    <div>
      <h1>My Blog</h1>
      <BlogPost />
      <BlogPost />
      <BlogPost />
    </div>
  );
}
```

## Remember

- Components are like LEGO blocks
- Start component names with capital letters
- Components must return JSX
- You can use components inside other components
- Break big things into small components

> Next lesson: We'll learn about Props - how to pass data to components to make them dynamic!

Learn how to create and use React components. Components are like LEGO blocks for your website!

React Components - Building Blocks of Your App

Props let you pass data to components, like passing ingredients to a recipe. This makes components dynamic and reusable!

## What are Props?

Props (short for "properties") are how you pass data from one component to another.

Think of it like this:
- You're giving instructions to someone
- Props are the instructions
- The component follows those instructions

## Simple Props Example

```javascript
function Welcome(props) {
  return <h1>Hello {props.name}!</h1>;
}

function App() {
  return <Welcome name="John" />;
}
```

**Result:** "Hello John!"

See what happened? We passed `name="John"` to the Welcome component, and it used that name!

## How Props Work

1. You pass props when using a component
2. The component receives props as an argument
3. The component uses the props

```javascript
// 1. Pass the prop
<Welcome name="John" />

// 2. Receive it
function Welcome(props) {
  // 3. Use it
  return <h1>Hello {props.name}!</h1>;
}
```

## Multiple Props

You can pass many props:

```javascript
function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      <p>City: {props.city}</p>
    </div>
  );
}

function App() {
  return <UserCard name="Michael" age={25} city="New York" />;
}
```

**Result:**
```
Michael
Age: 25
City: New York
```

## Props with Numbers and Booleans

For numbers and booleans, use curly braces `{ }`:

```javascript
<UserCard
  name="John"          // String - no braces needed
  age={25}             // Number - needs braces
  isStudent={true}     // Boolean - needs braces
/>
```

## Destructuring Props (Easier Way!)

Instead of writing `props.name`, `props.age` every time, you can destructure:

### Before (Long way):
```javascript
function UserCard(props) {
  return <h2>{props.name}</h2>;
}
```

### After (Short way):
```javascript
function UserCard({ name, age, city }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>City: {city}</p>
    </div>
  );
}
```

Much cleaner!

## Reusing Components with Different Props

This is where props shine! Same component, different data:

```javascript
function ProductCard({ name, price, image }) {
  return (
    <div className="card">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p>Price: ${price}</p>
      <button>Buy Now</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <ProductCard name="Laptop" price={500} image="laptop.jpg" />
      <ProductCard name="Phone" price={300} image="phone.jpg" />
      <ProductCard name="Tablet" price={200} image="tablet.jpg" />
    </div>
  );
}
```

One component, three different products!

## Props for Styling

You can pass CSS classes or styles as props:

```javascript
function Button({ text, color }) {
  return (
    <button style={{ backgroundColor: color }}>
      {text}
    </button>
  );
}

function App() {
  return (
    <div>
      <Button text="Save" color="green" />
      <Button text="Delete" color="red" />
      <Button text="Cancel" color="gray" />
    </div>
  );
}
```

## Default Props

You can set default values if no prop is passed:

```javascript
function Welcome({ name = "Guest" }) {
  return <h1>Hello {name}!</h1>;
}

<Welcome />               // Shows: Hello Guest!
<Welcome name="John" />  // Shows: Hello John!
```

## Children Prop

There's a special prop called `children` for content inside a component:

```javascript
function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

function App() {
  return (
    <Card>
      <h2>My Card Title</h2>
      <p>This is inside the card!</p>
    </Card>
  );
}
```

Everything between `<Card>` and `</Card>` becomes `children`!

## Props are Read-Only

**Important:** You CANNOT change props inside a component!

❌ **Wrong:**
```javascript
function Welcome({ name }) {
  name = "New Name";  // ❌ Don't do this!
  return <h1>Hello {name}</h1>;
}
```

✅ **Correct:**
Props should only be read, not changed. If you need to change data, use State (we'll learn that next!).

## Practical Example - Social Media Post

```javascript
function Post({ author, time, content, likes }) {
  return (
    <div className="post">
      <div className="post-header">
        <strong>{author}</strong>
        <span>{time}</span>
      </div>
      <p>{content}</p>
      <button>👍 {likes} Likes</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <Post
        author="John Davis"
        time="2 hours ago"
        content="Learning React is fun!"
        likes={10}
      />
      <Post
        author="Sarah Johnson"
        time="5 hours ago"
        content="Just finished my first project!" 
        likes={25} 
      />
    </div>
  );
}
```

## Remember

- Props pass data to components
- Use props to make components reusable
- Props go inside curly braces for numbers/booleans
- Destructure props to make code cleaner
- Props are read-only (cannot be changed)
- Use `children` prop for content inside components

> Next lesson: We'll learn about State - how to make components remember and change data!

Learn how to pass data between components using props. Make your components dynamic and reusable!

React Props - Passing Data to Components

State lets your component remember information and update it. Think of it like a component's memory!

## What is State?

State is data that can change in your component. When state changes, React automatically updates what shows on the screen.

**Example:**  
A counter button needs to remember how many times it was clicked. That number is stored in state!

## Using State

To use state, we need the `useState` hook:

```javascript
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click Me
      </button>
    </div>
  );
}
```

**What's happening:**

- `useState(0)` creates state with initial value 0
- `count` is the current value
- `setCount` is a function to update the value

## How useState Works

```javascript
const [value, setValue] = useState(initialValue);
```

- **value** - Current state value
- **setValue** - Function to change the value
- **initialValue** - Starting value (0, "", true, etc.)

## Simple Examples

### Example 1: Toggle Button

```javascript
function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}
```

### Example 2: Text Input

```javascript
function NameInput() {
  const [name, setName] = useState('');

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <p>Hello, {name}!</p>
    </div>
  );
}
```

### Example 3: Like Button

```javascript
function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤️ {likes} Likes
    </button>
  );
}
```

## Multiple State Variables

You can have many state variables in one component:

```javascript
function UserProfile() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(25);
  const [city, setCity] = useState('New York');

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>City: {city}</p>
    </div>
  );
}
```

## Updating State with Objects

When state is an object, create a new object when updating:

```javascript
function UserForm() {
  const [user, setUser] = useState({
    name: 'Sarah',
    age: 28
  });

  const updateName = () => {
    setUser({
      ...user,           // Keep old values
      name: 'Jennifer'   // Update name
    });
  };

  return (
    <div>
      <p>{user.name}, {user.age} years old</p>
      <button onClick={updateName}>Change Name</button>
    </div>
  );
}
```

The `...user` is called "spread operator" - it copies the old values.

## Common Mistakes

### ❌ Don't Modify State Directly

```javascript
// Wrong
count = count + 1;
```

### ✅ Use setState Function

```javascript
// Correct
setCount(count + 1);
```

## State vs Props

**Props:**  
- Passed from parent component
- Cannot be changed by component
- Like function parameters

**State:**  
- Managed inside component
- Can be changed by component
- Like variables inside a function

## Remember

- State is component's memory
- Use `useState` to create state
- State changes trigger re-render
- Always use setState function to update
- Each component has its own state

> Next: Learn React Events - How to handle clicks, typing, and more!

Learn React State to make your components remember and update information.

React State

React Events let your app respond to user actions - clicks, typing, hovering, and more!

## What are Events?

Events happen when users interact with your app:

- **Click** a button
- **Type** in an input
- **Hover** over an image
- **Submit** a form

React makes handling these super easy!

## Click Events

The most common event is `onClick`:

```javascript
function ClickButton() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click Me</button>;
}
```

### Shorter Version

```javascript
<button onClick={() => alert('Clicked!')}>
  Click Me
</button>
```

## Common Events

### onClick - Button Clicks

```javascript
function App() {
  return (
    <button onClick={() => console.log('Clicked!')}>
      Click Me
    </button>
  );
}
```

### onChange - Input Changes

```javascript
function SearchBox() {
  const handleChange = (event) => {
    console.log('User typed:', event.target.value);
  };

  return (
    <input
      type="text"
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}
```

### onSubmit - Form Submit

```javascript
function LoginForm() {
  const handleSubmit = (event) => {
    event.preventDefault(); // Don't reload page
    console.log('Form submitted!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">Login</button>
    </form>
  );
}
```

### onMouseEnter & onMouseLeave - Hover

```javascript
function HoverCard() {
  return (
    <div
      onMouseEnter={() => console.log('Mouse entered')}
      onMouseLeave={() => console.log('Mouse left')}
    >
      Hover over me!
    </div>
  );
}
```

## Events with State

Events usually update state:

```javascript
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrease
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}
```

## Passing Arguments to Event Handlers

Sometimes you need to pass data to your event handler:

```javascript
function ButtonList() {
  const handleClick = (buttonName) => {
    alert(`You clicked ${buttonName}`);
  };

  return (
    <div>
      <button onClick={() => handleClick('Button 1')}>
        Button 1
      </button>
      <button onClick={() => handleClick('Button 2')}>
        Button 2
      </button>
    </div>
  );
}
```

## Getting Input Values

```javascript
function NameInput() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={handleChange}
      />
      <p>Hello, {name}!</p>
    </div>
  );
}
```

## Preventing Default Behavior

Some events have default behavior (like form submission reloading the page). Prevent it with `event.preventDefault()`:

```javascript
function ContactForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted without page reload!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Your email" />
      <button type="submit">Send</button>
    </form>
  );
}
```

## Complete Example - Todo Input

```javascript
function TodoInput() {
  const [task, setTask] = useState('');
  const [todos, setTodos] = useState([]);

  const handleSubmit = (event) => {
    event.preventDefault();
    if (task.trim()) {
      setTodos([...todos, task]);
      setTask(''); // Clear input
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={task}
          onChange={(e) => setTask(e.target.value)}
          placeholder="Add a task"
        />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}
```

## Event Naming Convention

React events use camelCase (not lowercase):

- ❌ `onclick` (HTML)
- ✅ `onClick` (React)

- ❌ `onchange`  
- ✅ `onChange`

## Remember

- Events respond to user actions
- Use onClick for button clicks
- Use onChange for inputs
- Use onSubmit for forms
- Use event.preventDefault() to stop default behavior
- Combine events with state for interactive apps

> Next: Learn React Lists - Display arrays of data!

Handle user interactions like clicks, keyboard input, and form submissions in React.

React Events

Lists let you display multiple items in React - like a shopping list, user list, or product catalog.

## Displaying Lists

Use JavaScript's `.map()` function to display arrays in React:

```javascript
function FruitList() {
  const fruits = ['Apple', 'Banana', 'Orange'];

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}
```

**Output:**
- Apple
- Banana
- Orange

## The key Prop

Every list item needs a unique `key` prop. This helps React track which items changed.

### Using Index as Key

```javascript
{items.map((item, index) => (
  <li key={index}>{item}</li>
))}
```

### Using Unique ID as Key (Better!)

```javascript
const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Sarah' },
  { id: 3, name: 'Mike' }
];

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
```

## List of Objects

When you have objects in an array:

```javascript
function ProductList() {
  const products = [
    { id: 1, name: 'Phone', price: 699 },
    { id: 2, name: 'Laptop', price: 1299 },
    { id: 3, name: 'Tablet', price: 499 }
  ];

  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>${product.price}</p>
        </div>
      ))}
    </div>
  );
}
```

## List with Components

Create a separate component for list items:

```javascript
function TodoItem({ todo }) {
  return (
    <div>
      <h4>{todo.title}</h4>
      <p>{todo.description}</p>
    </div>
  );
}

function TodoList() {
  const todos = [
    { id: 1, title: 'Learn React', description: 'Complete tutorial' },
    { id: 2, title: 'Build Project', description: 'Create todo app' }
  ];

  return (
    <div>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </div>
  );
}
```

## Lists with Events

Add interactivity to list items:

```javascript
function NameList() {
  const names = ['John', 'Sarah', 'Mike', 'Emma'];

  const handleClick = (name) => {
    alert(`You clicked ${name}`);
  };

  return (
    <ul>
      {names.map((name, index) => (
        <li
          key={index}
          onClick={() => handleClick(name)}
          style={{ cursor: 'pointer' }}
        >
          {name}
        </li>
      ))}
    </ul>
  );
}
```

## Dynamic Lists with State

Add and remove items from lists:

```javascript
function ShoppingList() {
  const [items, setItems] = useState(['Milk', 'Bread', 'Eggs']);
  const [newItem, setNewItem] = useState('');

  const addItem = () => {
    if (newItem.trim()) {
      setItems([...items, newItem]);
      setNewItem('');
    }
  };

  const removeItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h2>Shopping List</h2>

      <input
        value={newItem}
        onChange={(e) => setNewItem(e.target.value)}
        placeholder="Add item"
      />
      <button onClick={addItem}>Add</button>

      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeItem(index)}>
              Remove
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

## Filtering Lists

Show only certain items:

```javascript
function UserList() {
  const [search, setSearch] = useState('');

  const users = [
    { id: 1, name: 'John Smith', age: 25 },
    { id: 2, name: 'Sarah Johnson', age: 30 },
    { id: 3, name: 'Mike Davis', age: 22 }
  ];

  const filteredUsers = users.filter((user) =>
    user.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div>
      <input
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Search users..."
      />

      <ul>
        {filteredUsers.map((user) => (
          <li key={user.id}>
            {user.name} - {user.age} years old
          </li>
        ))}
      </ul>
    </div>
  );
}
```

## Empty List Message

Show a message when list is empty:

```javascript
function TaskList() {
  const tasks = [];

  return (
    <div>
      {tasks.length === 0 ? (
        <p>No tasks yet! Add your first task.</p>
      ) : (
        <ul>
          {tasks.map((task, index) => (
            <li key={index}>{task}</li>
          ))}
        </ul>
      )}
    </div>
  );
}
```

## Common Mistakes

### ❌ Forgetting the key

```javascript
{items.map((item) => <li>{item}</li>)}
```

### ✅ Always add key

```javascript
{items.map((item, index) => <li key={index}>{item}</li>)}
```

### ❌ Using non-unique keys

```javascript
{items.map((item) => <li key="same">{item}</li>)}
```

### ✅ Use unique keys

```javascript
{items.map((item) => <li key={item.id}>{item}</li>)}
```

## Remember

- Use `.map()` to display lists
- Always add a unique `key` prop
- Use object IDs as keys when available
- Filter lists with `.filter()`
- Combine lists with state for dynamic updates
- Show empty state messages when list is empty

> Next: Learn React Forms - Handle user input professionally!

Learn how to display lists of data in React using the map function and keys.

React Lists

Forms let users enter data - login forms, signup forms, contact forms. Let's learn how to build them in React!

## Simple Text Input

```javascript
function NameForm() {
  const [name, setName] = useState('');

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <p>Hello, {name}!</p>
    </div>
  );
}
```

## Complete Form Example

```javascript
function SignupForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
        placeholder="Username"
      />

      <input
        name="email"
        type="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />

      <input
        name="password"
        type="password"
        value={formData.password}
        onChange={handleChange}
        placeholder="Password"
      />

      <button type="submit">Sign Up</button>
    </form>
  );
}
```

## Checkbox

```javascript
function TermsForm() {
  const [agreed, setAgreed] = useState(false);

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={agreed}
          onChange={(e) => setAgreed(e.target.checked)}
        />
        I agree to the terms and conditions
      </label>

      <button disabled={!agreed}>
        Continue
      </button>
    </div>
  );
}
```

## Radio Buttons

```javascript
function GenderForm() {
  const [gender, setGender] = useState('');

  return (
    <div>
      <label>
        <input
          type="radio"
          value="male"
          checked={gender === 'male'}
          onChange={(e) => setGender(e.target.value)}
        />
        Male
      </label>

      <label>
        <input
          type="radio"
          value="female"
          checked={gender === 'female'}
          onChange={(e) => setGender(e.target.value)}
        />
        Female
      </label>

      <p>Selected: {gender}</p>
    </div>
  );
}
```

## Select Dropdown

```javascript
function CountryForm() {
  const [country, setCountry] = useState('usa');

  return (
    <div>
      <select
        value={country}
        onChange={(e) => setCountry(e.target.value)}
      >
        <option value="usa">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="canada">Canada</option>
        <option value="australia">Australia</option>
      </select>

      <p>You selected: {country}</p>
    </div>
  );
}
```

## Textarea

```javascript
function MessageForm() {
  const [message, setMessage] = useState('');

  return (
    <div>
      <textarea
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Enter your message"
        rows={5}
      />

      <p>Characters: {message.length}</p>
    </div>
  );
}
```

## Form Validation

Add simple validation to forms:

```javascript
function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};

    if (!email) {
      newErrors.email = 'Email is required';
    } else if (!email.includes('@')) {
      newErrors.email = 'Email is invalid';
    }

    if (!password) {
      newErrors.password = 'Password is required';
    } else if (password.length < 6) {
      newErrors.password = 'Password must be at least 6 characters';
    }

    return newErrors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const newErrors = validate();

    if (Object.keys(newErrors).length === 0) {
      console.log('Form is valid!');
      // Submit form
    } else {
      setErrors(newErrors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
        />
        {errors.email && <p style={{color: 'red'}}>{errors.email}</p>}
      </div>

      <div>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Password"
        />
        {errors.password && <p style={{color: 'red'}}>{errors.password}</p>}
      </div>

      <button type="submit">Login</button>
    </form>
  );
}
```

## Multiple Inputs with One Handler

Handle multiple inputs efficiently:

```javascript
function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    message: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <form>
      <input name="name" value={formData.name} onChange={handleChange} placeholder="Name" />
      <input name="email" value={formData.email} onChange={handleChange} placeholder="Email" />
      <input name="phone" value={formData.phone} onChange={handleChange} placeholder="Phone" />
      <textarea name="message" value={formData.message} onChange={handleChange} placeholder="Message" />
      <button type="submit">Send</button>
    </form>
  );
}
```

## Clear Form After Submit

```javascript
function FeedbackForm() {
  const [feedback, setFeedback] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Feedback:', feedback);
    setFeedback(''); // Clear form
    alert('Thanks for your feedback!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={feedback}
        onChange={(e) => setFeedback(e.target.value)}
        placeholder="Share your feedback"
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

## Form Tips

**Controlled Components:**  
- Form value is stored in state
- React controls the input value
- More predictable behavior

```javascript
<input value={name} onChange={(e) => setName(e.target.value)} />
```

**Prevent Default:**  
Always use `e.preventDefault()` in onSubmit to stop page reload

**Validation:**  
Validate before submitting - check required fields, email format, etc.

## Remember

- Store form data in state
- Use `value` and `onChange` for controlled inputs
- Use `e.preventDefault()` in onSubmit
- Validate data before submission
- Show error messages clearly
- Clear form after successful submit
- Use `name` attribute for multiple inputs

> Next: Learn Conditional Rendering - Show/hide content based on conditions!

Build forms in React - handle text inputs, checkboxes, dropdowns, and form submission.

React Forms

Conditional Rendering means showing different things based on conditions - like showing a login button if user is not logged in.

## What is Conditional Rendering?

Show or hide elements based on:

- User logged in or not
- Loading state
- Error messages
- Empty data
- User permissions

## Using if Statement

```javascript
function Greeting() {
  const isLoggedIn = true;

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please log in</h1>;
  }
}
```

## Using Ternary Operator (? :)

This is more common in React:

```javascript
function Greeting() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please log in</h1>
      )}
    </div>
  );
}
```

**Format:** `condition ? ifTrue : ifFalse`

## Logical AND (&&)

Show something only if condition is true:

```javascript
function Notifications() {
  const hasMessages = true;

  return (
    <div>
      <h1>Dashboard</h1>
      {hasMessages && <p>You have new messages!</p>}
    </div>
  );
}
```

If `hasMessages` is false, nothing shows. If true, the message shows!

## Showing/Hiding with State

```javascript
function App() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle
      </button>

      {isVisible && (
        <div>
          <h2>Secret Content!</h2>
          <p>You can see this only when visible!</p>
        </div>
      )}
    </div>
  );
}
```

## Loading States

Show loading message while fetching data:

```javascript
function UserProfile() {
  const [isLoading, setIsLoading] = useState(true);
  const [user, setUser] = useState(null);

  return (
    <div>
      {isLoading ? (
        <p>Loading user data...</p>
      ) : (
        <div>
          <h2>{user.name}</h2>
          <p>{user.email}</p>
        </div>
      )}
    </div>
  );
}
```

## Error Messages

```javascript
function LoginForm() {
  const [error, setError] = useState('');

  const handleLogin = () => {
    if (password.length < 6) {
      setError('Password too short!');
    } else {
      setError('');
      // Login user
    }
  };

  return (
    <div>
      <input type="password" />
      <button onClick={handleLogin}>Login</button>

      {error && <p style={{color: 'red'}}>{error}</p>}
    </div>
  );
}
```

## Multiple Conditions

```javascript
function StatusMessage({ status }) {
  return (
    <div>
      {status === 'loading' && <p>Loading...</p>}
      {status === 'success' && <p>Success! ✓</p>}
      {status === 'error' && <p>Error occurred! ✗</p>}
    </div>
  );
}
```

## Empty State

Show message when list is empty:

```javascript
function TodoList() {
  const todos = [];

  return (
    <div>
      <h2>My Todos</h2>

      {todos.length === 0 ? (
        <p>No todos yet! Add your first task.</p>
      ) : (
        <ul>
          {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
          ))}
        </ul>
      )}
    </div>
  );
}
```

## Conditional CSS Classes

Apply different styles based on conditions:

```javascript
function Button({ isPrimary }) {
  const className = isPrimary ? 'btn-primary' : 'btn-default';

  return <button className={className}>Click Me</button>;
}
```

Or inline:

```javascript
function Alert({ isWarning }) {
  return (
    <div style={{
      backgroundColor: isWarning ? 'yellow' : 'green',
      color: isWarning ? 'red' : 'white'
    }}>
      Alert Message
    </div>
  );
}
```

## Complete Example - User Dashboard

```javascript
function Dashboard() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const handleLogin = () => {
    setIsLoading(true);
    // Simulate login
    setTimeout(() => {
      setIsLoading(false);
      setIsLoggedIn(true);
    }, 2000);
  };

  return (
    <div>
      {isLoading && <p>Logging in...</p>}

      {error && <p style={{color: 'red'}}>{error}</p>}

      {!isLoggedIn ? (
        <div>
          <h2>Please Login</h2>
          <button onClick={handleLogin}>Login</button>
        </div>
      ) : (
        <div>
          <h2>Welcome to Dashboard!</h2>
          <p>You are now logged in</p>
          <button onClick={() => setIsLoggedIn(false)}>
            Logout
          </button>
        </div>
      )}
    </div>
  );
}
```

## When to Use What

**If/Else Statement:**  
Complex logic, multiple lines

**Ternary Operator (? :):**  
Choose between two options

**Logical AND (&&):**  
Show something or nothing

**Multiple &&:**  
Show different things based on different conditions

## Common Patterns

### Show/Hide Button

```javascript
{isEditing ? (
  <button onClick={handleSave}>Save</button>
) : (
  <button onClick={handleEdit}>Edit</button>
)}
```

### Feature Flag

```javascript
const showNewFeature = true;

{showNewFeature && <NewFeatureComponent />}
```

### Permission Check

```javascript
{user.isAdmin && <AdminPanel />}
```

## Remember

- Use `? :` for if-else (two options)
- Use `&&` for showing/hiding (one option)
- Always handle loading states
- Show clear error messages
- Handle empty states
- Keep conditions simple and readable

> Congratulations! You've completed the React basics! Now you can build interactive React applications. Keep practicing and building projects!

Learn to show or hide content based on conditions - if statements, ternary operators, and logical AND.

React Conditional Rendering

Learn different ways to add styles to React components.

## 1. Regular CSS File

Create **App.css** and import it:

```css
.button {
  background: blue;
  color: white;
  padding: 10px 20px;
}
```

```javascript
import './App.css';

function App() {
  return <button className="button">Click</button>;
}
```

## 2. Inline Styles

Use JavaScript objects:

```javascript
function Button() {
  const style = {
    background: 'blue',
    color: 'white',
    padding: '10px 20px'
  };

  return <button style={style}>Click</button>;
}
```

Or directly:

```javascript
<button style={{background: 'blue', color: 'white'}}>
  Click
</button>
```

## 3. CSS Modules

Create **Button.module.css**:

```css
.button {
  background: blue;
  color: white;
}
```

Use it:

```javascript
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click</button>;
}
```

## Dynamic Styling

```javascript
function Button({ isPrimary }) {
  return (
    <button style={{
      background: isPrimary ? 'blue' : 'gray',
      color: 'white'
    }}>
      Click
    </button>
  );
}
```

## Remember

- Use className, not class
- Inline styles use camelCase (backgroundColor)
- CSS Modules prevent naming conflicts

> Next: Learn React useEffect hook!

Learn different ways to style React components - CSS, inline styles, CSS modules.

React Styling

useEffect lets you perform side effects - data fetching, timers, subscriptions.

## Basic useEffect

Runs after every render:

```javascript
import { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  });

  return <button onClick={() => setCount(count + 1)}>Click</button>;
}
```

## useEffect with Dependencies

Run only when specific values change:

```javascript
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // Only runs when count changes
```

## Run Once (On Mount)

Empty dependency array:

```javascript
useEffect(() => {
  console.log('Component mounted!');
}, []); // Runs only once
```

## Cleanup Function

Clean up subscriptions/timers:

```javascript
useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);

  return () => clearInterval(timer); // Cleanup
}, []);
```

## Fetching Data

```javascript
function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);

  return <div>{user?.name}</div>;
}
```

## Common Patterns

**Multiple Effects:**

```javascript
useEffect(() => {
  // Effect 1
}, [dep1]);

useEffect(() => {
  // Effect 2
}, [dep2]);
```

## Remember

- Empty [] = runs once
- No [] = runs every render
- [count] = runs when count changes
- Always cleanup subscriptions/timers

> Next: Learn custom hooks!

Master useEffect hook to handle side effects like API calls, timers, and subscriptions.

React useEffect

Custom hooks let you reuse logic across components.

## Creating Custom Hook

Custom hooks start with "use":

```javascript
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}
```

## Using Custom Hook

```javascript
function App() {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}
```

## useFetch Hook

```javascript
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}
```

Using it:

```javascript
function Users() {
  const { data, loading } = useFetch('/api/users');

  if (loading) return <p>Loading...</p>;
  return <div>{data.map(user => <p>{user.name}</p>)}</div>;
}
```

## useLocalStorage Hook

```javascript
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved || initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, value);
  }, [key, value]);

  return [value, setValue];
}
```

## Remember

- Hook names start with "use"
- Can use other hooks inside
- Reuse logic easily
- Keep them simple

> Next: Learn React Router!

Create reusable custom hooks to share logic across components.

React Custom Hooks

React Router enables navigation between pages in your app.

## Install

```bash
npm install react-router-dom
```

## Basic Setup

```javascript
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}
```

## URL Parameters

```javascript
import { useParams } from 'react-router-dom';

<Route path="/user/:id" element={<User />} />

function User() {
  const { id } = useParams();
  return <h1>User ID: {id}</h1>;
}
```

## Navigate Programmatically

```javascript
import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // After login
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
}
```

## 404 Page

```javascript
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<NotFound />} />
</Routes>
```

## Remember

- Use Link for navigation
- Routes define pages
- useParams gets URL parameters
- useNavigate for programmatic navigation

> Next: Learn Context API!

Add navigation to your React app with React Router.

React Router Basics

Context API solves prop drilling - passing data through many components.

## Creating Context

```javascript
import { createContext, useState, useContext } from 'react';

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Header />
      <Content />
    </ThemeContext.Provider>
  );
}
```

## Using Context

```javascript
function Header() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <header style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        Toggle Theme
      </button>
    </header>
  );
}
```

## Auth Context Example

```javascript
const AuthContext = createContext();

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = (userData) => setUser(userData);
  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

function useAuth() {
  return useContext(AuthContext);
}
```

Using it:

```javascript
function Profile() {
  const { user, logout } = useAuth();

  return (
    <div>
      <h1>Welcome {user.name}</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
}
```

## Remember

- Avoid prop drilling
- Wrap app with Provider
- useContext to access values
- Good for theme, auth, language

> Congratulations on completing beginner React! Moving to intermediate topics!

Share data across components without prop drilling using Context API.

React Context API

useReducer manages complex state logic better than useState.

## Basic Example

```javascript
import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}
```

## When to Use

- Complex state logic
- Multiple sub-values
- Next state depends on previous

## With Payload

```javascript
function reducer(state, action) {
  switch (action.type) {
    case 'add':
      return { count: state.count + action.value };
    default:
      return state;
  }
}

dispatch({ type: 'add', value: 5 });
```

> Next: Learn useRef hook!

Manage complex state logic with useReducer hook.

React useReducer Hook

useRef accesses DOM elements and stores values without re-render.

## Accessing DOM Elements

```javascript
import { useRef } from 'react';

function Input() {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus</button>
    </div>
  );
}
```

## Storing Values

```javascript
function Timer() {
  const countRef = useRef(0);

  const increment = () => {
    countRef.current += 1;
    console.log(countRef.current); // Doesn't trigger re-render
  };

  return <button onClick={increment}>Increment</button>;
}
```

## Remember

- Use for DOM access
- Values persist across renders
- Changing ref doesn't trigger re-render

> Next: Learn React performance optimization!

Access DOM elements and store mutable values with useRef.

React useRef Hook

useMemo caches expensive calculations to improve performance.

## Problem - Expensive Calculation

```javascript
function App() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');

  // Runs on every render!
  const expensiveResult = calculateExpensive(count);

  return <div>{expensiveResult}</div>;
}
```

## Solution - useMemo

```javascript
import { useMemo } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');

  const expensiveResult = useMemo(() => {
    return calculateExpensive(count);
  }, [count]); // Only recalculates when count changes

  return <div>{expensiveResult}</div>;
}
```

## Filtering Example

```javascript
function UserList({ users }) {
  const [search, setSearch] = useState('');

  const filteredUsers = useMemo(() => {
    return users.filter(user =>
      user.name.toLowerCase().includes(search.toLowerCase())
    );
  }, [users, search]);

  return (
    <div>
      <input value={search} onChange={e => setSearch(e.target.value)} />
      {filteredUsers.map(user => <p key={user.id}>{user.name}</p>)}
    </div>
  );
}
```

## Remember

- Use for expensive calculations
- Specify dependencies
- Don't overuse (has overhead)

> Next: Learn useCallback!

Optimize performance by memoizing expensive calculations with useMemo.

React Performance - useMemo

useCallback memoizes functions to prevent unnecessary child re-renders.

## Problem

```javascript
function Parent() {
  const [count, setCount] = useState(0);

  // New function on every render
  const handleClick = () => {
    console.log('Clicked');
  };

  return <Child onClick={handleClick} />;
}
```

## Solution

```javascript
import { useCallback } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []); // Function created once

  return <Child onClick={handleClick} />;
}
```

## With Dependencies

```javascript
function Parent() {
  const [userId, setUserId] = useState(1);

  const fetchUser = useCallback(() => {
    fetch(`/api/users/${userId}`);
  }, [userId]); // Recreates when userId changes

  return <Child onFetch={fetchUser} />;
}
```

## Remember

- Use with React.memo on child
- Specify dependencies
- Prevents child re-renders

> Next: Learn React.memo!

Prevent unnecessary re-renders by memoizing functions with useCallback.

React Performance - useCallback

React.memo prevents re-renders when props haven't changed.

## Without Memo

```javascript
function Child({ name }) {
  console.log('Child rendered');
  return <div>{name}</div>;
}

// Re-renders even if name hasn't changed
```

## With Memo

```javascript
import { memo } from 'react';

const Child = memo(function Child({ name }) {
  console.log('Child rendered');
  return <div>{name}</div>;
});

// Only re-renders when name changes
```

## Custom Comparison

```javascript
const Child = memo(function Child({ user }) {
  return <div>{user.name}</div>;
}, (prevProps, nextProps) => {
  return prevProps.user.id === nextProps.user.id;
});
```

## Remember

- Wrap functional components
- Shallow comparison by default
- Use with useCallback

> Next: Learn error boundaries!

Prevent unnecessary component re-renders with React.memo.

React.memo for Components

Error Boundaries catch errors in component tree and show fallback UI.

## Creating Error Boundary

```javascript
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log('Error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}
```

## Using It

```javascript
function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}
```

## Multiple Boundaries

```javascript
<ErrorBoundary>
  <Header />
  <ErrorBoundary>
    <Content />
  </ErrorBoundary>
  <Footer />
</ErrorBoundary>
```

## Remember

- Must be class component
- Catches render errors
- Shows fallback UI
- Doesn't catch event handler errors

> Next: Learn API integration!

Catch JavaScript errors in components and show fallback UI.

React Error Boundaries

Learn to fetch data from APIs in React.

## Using Fetch

```javascript
function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}
```

## POST Request

```javascript
const createUser = async (userData) => {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData)
  });
  return response.json();
};
```

## With Axios

```bash
npm install axios
```

```javascript
import axios from 'axios';

useEffect(() => {
  axios.get('https://api.example.com/users')
    .then(res => setUsers(res.data))
    .catch(err => setError(err.message));
}, []);
```

## Remember

- Handle loading states
- Handle errors
- Clean up with AbortController
- Use try-catch with async/await

> Next: Learn form validation!

Fetch data from APIs and handle loading and error states.

React API Integration

Learn to validate forms and show errors.

## Basic Validation

```javascript
function LoginForm() {
  const [email, setEmail] = useState('');
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};
    
    if (!email) {
      newErrors.email = 'Email required';
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      newErrors.email = 'Email invalid';
    }

    return newErrors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = validate();
    
    if (Object.keys(newErrors).length === 0) {
      // Submit form
    } else {
      setErrors(newErrors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      {errors.email && <p style={{color: 'red'}}>{errors.email}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}
```

## Real-time Validation

```javascript
const [email, setEmail] = useState('');
const [emailError, setEmailError] = useState('');

const handleEmailChange = (e) => {
  const value = e.target.value;
  setEmail(value);

  if (!value) {
    setEmailError('Email required');
  } else if (!/\S+@\S+\.\S+/.test(value)) {
    setEmailError('Email invalid');
  } else {
    setEmailError('');
  }
};
```

## Remember

- Validate on submit
- Show clear error messages
- Disable submit if errors
- Use regex for patterns

> Next: Learn lazy loading!

Validate forms and show error messages in React.

React Form Validation

Lazy load components to reduce initial bundle size.

## Basic Lazy Loading

```javascript
import { lazy, Suspense } from 'react';

const Heavy Component = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}
```

## With Router

```javascript
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading page...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}
```

## Multiple Components

```javascript
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));
const Profile = lazy(() => import('./Profile'));
```

## Remember

- Wrap with Suspense
- Use for large components
- Improve initial load time
- Show loading fallback

> Next: Learn component patterns!

Load components lazily to improve initial load time.

React Lazy Loading

Common React patterns for reusable components.

## Higher-Order Component (HOC)

```javascript
function withAuth(Component) {
  return function AuthComponent(props) {
    const isLoggedIn = checkAuth();
    
    if (!isLoggedIn) {
      return <Login />;
    }
    
    return <Component {...props} />;
  };
}

const ProtectedDashboard = withAuth(Dashboard);
```

## Render Props

```javascript
function Mouse({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  return (
    <div onMouseMove={e => setPosition({ x: e.clientX, y: e.clientY })}>
      {render(position)}
    </div>
  );
}

<Mouse render={({ x, y }) => (
  <p>Mouse: {x}, {y}</p>
)} />
```

## Compound Components

```javascript
function Tabs({ children }) {
  const [active, setActive] = useState(0);
  return <div>{children}</div>;
}

Tabs.Tab = function Tab({ children, index }) {
  return <button>{children}</button>;
};

<Tabs>
  <Tabs.Tab index={0}>Tab 1</Tabs.Tab>
  <Tabs.Tab index={1}>Tab 2</Tabs.Tab>
</Tabs>
```

## Remember

- HOC for cross-cutting concerns
- Render props for flexibility
- Compound for related components
- Custom hooks are often simpler

> Next: Learn prop types!

Learn common React patterns - HOC, Render Props, Compound Components.

React Component Patterns

PropTypes validate props at runtime.

## Install

```bash
npm install prop-types
```

## Basic Usage

```javascript
import PropTypes from 'prop-types';

function User({ name, age, email }) {
  return <div>{name}, {age}</div>;
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  email: PropTypes.string
};
```

## Common Types

```javascript
PropTypes.string
PropTypes.number
PropTypes.bool
PropTypes.array
PropTypes.object
PropTypes.func
PropTypes.node // Anything renderable
PropTypes.element // React element
```

## Array/Object Of

```javascript
PropTypes.arrayOf(PropTypes.string)
PropTypes.objectOf(PropTypes.number)
```

## Shape

```javascript
PropTypes.shape({
  name: PropTypes.string,
  age: PropTypes.number
})
```

## Default Props

```javascript
User.defaultProps = {
  age: 18,
  email: 'no-email@example.com'
};
```

## Remember

- Use in development
- Catches prop bugs early
- Remove in production build
- TypeScript is better alternative

> Congratulations! You've completed intermediate React! Ready for advanced topics!

Validate component props with PropTypes for better debugging.

React PropTypes

Portals render components outside parent DOM.

## Creating Portal

```javascript
import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}
```

## index.html Setup

```html
<div id="root"></div>
<div id="modal-root"></div>
```

## Usage

```javascript
function App() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(true)}>Open Modal</button>
      {show && (
        <Modal>
          <h2>Modal Content</h2>
          <button onClick={() => setShow(false)}>Close</button>
        </Modal>
      )}
    </div>
  );
}
```

## Remember

- Use for modals, tooltips
- Renders outside parent DOM
- Events still bubble to parent

> Next: Learn fragments!

Render components outside parent DOM hierarchy with Portals.

React Portal

Fragments group elements without extra DOM nodes.

## Long Syntax

```javascript
import { Fragment } from 'react';

function List() {
  return (
    <Fragment>
      <li>Item 1</li>
      <li>Item 2</li>
    </Fragment>
  );
}
```

## Short Syntax

```javascript
function List() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
    </>
  );
}
```

## With Keys

```javascript
function List({ items }) {
  return (
    <>
      {items.map(item => (
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </>
  );
}
```

## Remember

- No extra DOM nodes
- Use short syntax <> usually
- Long syntax needed for keys

> Next: Learn strict mode!

Group elements without extra DOM nodes using Fragments.

React Fragments

Strict Mode helps find problems in development.

## Usage

```javascript
import { StrictMode } from 'react';

function App() {
  return (
    <StrictMode>
      <MyComponent />
    </StrictMode>
  );
}
```

## What It Does

- Warns about deprecated APIs
- Detects unsafe lifecycles
- Warns about legacy string refs
- Detects unexpected side effects
- Ensures reusable state

## Double Rendering

In development, renders components twice to catch bugs:

```javascript
useEffect(() => {
  console.log('Effect runs');  // Runs twice in StrictMode
}, []);
```

## Remember

- Only in development
- No visual output
- Helps catch bugs early
- Applies to children only

> Next: Learn code splitting strategies!

Find potential problems in your app with Strict Mode.

React Strict Mode

Split code into smaller chunks for better performance.

## Route-Based Splitting

```javascript
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const Contact = lazy(() => import('./routes/Contact'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Suspense>
  );
}
```

## Component-Based Splitting

```javascript
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<p>Loading chart...</p>}>
        <HeavyChart />
      </Suspense>
    </div>
  );
}
```

## Named Exports

```javascript
const { Chart } = lazy(() =>
  import('./charts').then(module => ({ default: module.Chart }))
);
```

## Preloading

```javascript
const HeavyComponent = lazy(() => import('./Heavy'));

// Preload on hover
<button onMouseEnter={() => import('./Heavy')}>
  Load Heavy
</button>
```

## Remember

- Split by route first
- Split heavy components
- Use Suspense for loading
- Preload on interaction

> Next: Learn environment variables!

Split code into smaller bundles for faster load times.

React Code Splitting Strategies

Store configuration in environment variables.

## Create .env File

```
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your-api-key
```

## Using in Code

```javascript
const apiUrl = process.env.REACT_APP_API_URL;
const apiKey = process.env.REACT_APP_API_KEY;

fetch(`${apiUrl}/users`, {
  headers: { 'API-Key': apiKey }
});
```

## Multiple Environments

```.env.development
REACT_APP_API_URL=http://localhost:3001
```

```.env.production
REACT_APP_API_URL=https://api.mysite.com
```

## Rules

- Must start with REACT_APP_
- Restart server after changes
- Don't commit .env to git
- Use .env.example for template

## .gitignore

```
.env
.env.local
```

## Remember

- Never expose secrets in client code
- Use for non-sensitive config
- Different .env per environment

> Next: Learn testing basics!

Use environment variables for API keys and config.

React Environment Variables

Test components to ensure they work correctly.

## Simple Test

```javascript
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('renders button', () => {
  render(<Button>Click Me</Button>);
  const button = screen.getByText('Click Me');
  expect(button).toBeInTheDocument();
});
```

## Testing User Events

```javascript
import { fireEvent } from '@testing-library/react';

test('button click', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click</Button>);
  
  const button = screen.getByText('Click');
  fireEvent.click(button);
  
  expect(handleClick).toHaveBeenCalledTimes(1);
});
```

## Testing State

```javascript
test('counter increments', () => {
  render(<Counter />);
  
  const button = screen.getByText('+');
  fireEvent.click(button);
  
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});
```

## Async Testing

```javascript
test('loads users', async () => {
  render(<UserList />);
  
  const users = await screen.findByText('John Doe');
  expect(users).toBeInTheDocument();
});
```

## Remember

- Test user behavior
- Don't test implementation details
- Use findBy for async
- Mock API calls

> Next: Learn debugging techniques!

Test React components with Jest and React Testing Library.

React Testing Basics

Essential debugging techniques for React.

## React DevTools

Install browser extension:
- Chrome/Edge: React Developer Tools
- Firefox: React DevTools

Features:
- Inspect component tree
- View props/state
- Edit values live
- Track renders

## Console Methods

```javascript
// Log state changes
useEffect(() => {
  console.log('Count changed:', count);
}, [count]);

// Debug object
console.table(users);

// Group logs
console.group('User Details');
console.log('Name:', user.name);
console.log('Age:', user.age);
console.groupEnd();
```

## Debugging useEffect

```javascript
useEffect(() => {
  console.log('Effect ran');
  return () => console.log('Cleanup');
}, [dependency]);
```

## Error Boundaries

```javascript
componentDidCatch(error, info) {
  console.error('Error:', error);
  console.error('Info:', info);
}
```

## Performance Profiling

Use React DevTools Profiler:
- Record interactions
- See render times
- Find slow components

## Remember

- Use React DevTools
- Log state changes
- Profile performance
- Use Error Boundaries

> Next: Learn best practices!

Debug React apps effectively with DevTools and techniques.

React Debugging

Best practices for writing clean React code.

## Component Structure

```javascript
// Good - Small, focused component
function UserCard({ user }) {
  return (
    <div>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
}
```

## State Management

```javascript
// Good - Minimal state
const [user, setUser] = useState(null);

// Bad - Derived state
const [user, setUser] = useState(null);
const [userName, setUserName] = useState(''); // Derive from user instead
```

## Naming Conventions

- Components: PascalCase (UserProfile)
- Functions: camelCase (handleClick)
- Constants: UPPER_CASE (API_URL)
- Hooks: useSomething (useAuth)

## File Organization

```
src/
  components/
    Button/
      Button.js
      Button.css
      Button.test.js
  hooks/
    useAuth.js
  utils/
    api.js
```

## Avoid

- Inline functions in JSX (use useCallback)
- Too many props (refactor)
- Deep nesting (extract components)
- Magic numbers (use constants)

## Performance Tips

- Use React.memo wisely
- Avoid inline object creation
- Lazy load heavy components
- Use keys correctly in lists

> Next: Learn folder structure!

Follow best practices for clean, maintainable React code.

React Best Practices

Organize your React project effectively.

## Basic Structure

```
src/
  components/     # Reusable components
  pages/          # Page components
  hooks/          # Custom hooks
  utils/          # Helper functions
  services/       # API calls
  contexts/       # Context providers
  assets/         # Images, fonts
  styles/         # Global styles
```

## Feature-Based Structure

```
src/
  features/
    auth/
      components/
      hooks/
      services/
    dashboard/
      components/
      hooks/
  shared/
    components/
    hooks/
```

## Component Folders

```
Button/
  index.js        # Export
  Button.js       # Component
  Button.css      # Styles
  Button.test.js  # Tests
```

## Naming Files

- Components: PascalCase.js
- Hooks: useSomething.js
- Utils: camelCase.js
- Constants: CONSTANTS.js

## Environment Files

```
.env              # Default
.env.development  # Development
.env.production   # Production
.env.local        # Local overrides (gitignored)
```

## Remember

- Group by feature or type
- Keep components focused
- Consistent naming
- Separate concerns

> Next: Learn deployment!

Organize your React project for scalability and maintenance.

React Project Structure

Deploy your React app to production.

## Build for Production

```bash
npm run build
```

Creates optimized production build in `build/` folder.

## Vercel Deployment

1. Install Vercel CLI:
```bash
npm i -g vercel
```

2. Deploy:
```bash
vercel
```

## Netlify Deployment

1. Install Netlify CLI:
```bash
npm i -g netlify-cli
```

2. Deploy:
```bash
netlify deploy --prod
```

## GitHub Pages

1. Install gh-pages:
```bash
npm i gh-pages
```

2. Add to package.json:
```json
{
  "homepage": "https://username.github.io/repo-name",
  "scripts": {
    "deploy": "gh-pages -d build"
  }
}
```

3. Deploy:
```bash
npm run deploy
```

## Environment Variables

Set in platform settings:
- Vercel: Project Settings → Environment Variables
- Netlify: Site Settings → Build & deploy → Environment

## Remember

- Build before deploying
- Set environment variables
- Test production build locally
- Use HTTPS in production

> Next: Learn forms with libraries!

Deploy your React app to production platforms.

React Deployment

Simplify form handling with libraries.

## React Hook Form

Install:
```bash
npm install react-hook-form
```

Usage:
```javascript
import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: true })} />
      {errors.email && <span>Email required</span>}

      <input {...register('password', { minLength: 6 })} />
      {errors.password && <span>Min 6 characters</span>}

      <button type="submit">Submit</button>
    </form>
  );
}
```

## With Validation

```javascript
<input {...register('email', {
  required: 'Email is required',
  pattern: {
    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
    message: 'Invalid email'
  }
})} />
```

## Formik

Install:
```bash
npm install formik
```

Usage:
```javascript
import { Formik, Form, Field } from 'formik';

<Formik
  initialValues={{ email: '', password: '' }}
  onSubmit={values => console.log(values)}
>
  <Form>
    <Field name="email" type="email" />
    <Field name="password" type="password" />
    <button type="submit">Submit</button>
  </Form>
</Formik>
```

## Remember

- React Hook Form: Lightweight, fast
- Formik: Feature-rich, easy
- Both handle validation
- Reduce boilerplate code

> Next: Learn data fetching libraries!

Use form libraries like Formik and React Hook Form for complex forms.

React Form Libraries

React Query simplifies data fetching and caching.

## Install

```bash
npm install @tanstack/react-query
```

## Setup

```javascript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Users />
    </QueryClientProvider>
  );
}
```

## Fetching Data

```javascript
import { useQuery } from '@tanstack/react-query';

function Users() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(res => res.json())
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {data.map(user => <p key={user.id}>{user.name}</p>)}
    </div>
  );
}
```

## Mutations

```javascript
import { useMutation, useQueryClient } from '@tanstack/react-query';

function CreateUser() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: (newUser) => fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(newUser)
    }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
    }
  });

  return (
    <button onClick={() => mutation.mutate({ name: 'John' })}>
      Add User
    </button>
  );
}
```

## Remember

- Automatic caching
- Background refetching
- Optimistic updates
- Better than useState + useEffect

> Next: Learn state management with Zustand!

Fetch, cache, and sync server data with React Query.

React Query

Zustand is a simple state management library.

## Install

```bash
npm install zustand
```

## Creating Store

```javascript
import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 })
}));
```

## Using Store

```javascript
function Counter() {
  const { count, increment, decrement, reset } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}
```

## Async Actions

```javascript
const useStore = create((set) => ({
  users: [],
  fetchUsers: async () => {
    const response = await fetch('/api/users');
    const users = await response.json();
    set({ users });
  }
}));
```

## Selectors

```javascript
const count = useStore((state) => state.count); // Only re-renders when count changes
```

## Remember

- Simpler than Redux
- No boilerplate
- Works outside React
- Good for medium apps

> Next: Learn Redux Toolkit!

React State Management - Zustand

Redux Toolkit simplifies Redux development.

## Install

```bash
npm install @reduxjs/toolkit react-redux
```

## Create Store

```javascript
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

export const { increment, decrement } = counterSlice.actions;
export default store;
```

## Setup Provider

```javascript
import { Provider } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}
```

## Using in Components

```javascript
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}
```

## Async with createAsyncThunk

```javascript
import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUsers = createAsyncThunk(
  'users/fetch',
  async () => {
    const response = await fetch('/api/users');
    return response.json();
  }
);
```

## Remember

- Use for large apps
- Predictable state updates
- DevTools support
- More boilerplate than Zustand

> Congratulations! Intermediate React completed! Ready for advanced topics!

Manage complex app state with Redux Toolkit.

React Redux Toolkit

Add TypeScript to React for type safety.

## Setup

```bash
npx create-react-app my-app --template typescript
```

## Component with Props

```typescript
interface UserProps {
  name: string;
  age: number;
  email?: string;
}

function User({ name, age, email }: UserProps) {
  return <div>{name}, {age}</div>;
}
```

## useState with Types

```typescript
const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);
```

## Event Types

```typescript
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value);
};

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
};
```

## Remember

- Define prop interfaces
- Type state and events
- Better IDE support
- Catch errors early

> Next: Learn Next.js basics!

Add type safety to React apps with TypeScript.

TypeScript with React

Next.js adds server-side rendering and routing to React.

## Create App

```bash
npx create-next-app@latest my-app
```

## File-Based Routing

```
pages/
  index.js        → /
  about.js        → /about
  blog/
    [id].js       → /blog/:id
```

## Page Component

```javascript
// pages/index.js
export default function Home() {
  return <h1>Home Page</h1>;
}
```

## Dynamic Routes

```javascript
// pages/blog/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Post: {id}</h1>;
}
```

## Link Component

```javascript
import Link from 'next/link';

<Link href="/about">About</Link>
```

## Remember

- File-based routing
- Built-in optimization
- Server-side rendering
- API routes included

> Next: Learn Next.js data fetching!

Build full-stack React apps with Next.js framework.

Next.js Basics

Different ways to fetch data in Next.js.

## getServerSideProps (SSR)

Runs on every request:

```javascript
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return { props: { posts } };
}

export default function Posts({ posts }) {
  return (
    <div>
      {posts.map(post => <p key={post.id}>{post.title}</p>)}
    </div>
  );
}
```

## getStaticProps (SSG)

Runs at build time:

```javascript
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 60 // Regenerate every 60 seconds
  };
}
```

## getStaticPaths

For dynamic routes:

```javascript
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return { paths, fallback: false };
}
```

## Remember

- SSR: Fresh data every request
- SSG: Fast, static pages
- ISR: Regenerate periodically
- Choose based on needs

> Next: Learn Next.js API routes!

Fetch data with getServerSideProps and getStaticProps in Next.js.

Next.js Data Fetching

Build API endpoints in Next.js.

## Creating API Route

```javascript
// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello' });
}
```

Access at: `/api/hello`

## GET Request

```javascript
// pages/api/users.js
export default async function handler(req, res) {
  if (req.method === 'GET') {
    const users = await fetchUsers();
    res.status(200).json(users);
  }
}
```

## POST Request

```javascript
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body;
    const user = await createUser(name, email);
    res.status(201).json(user);
  }
}
```

## Dynamic API Routes

```javascript
// pages/api/users/[id].js
export default function handler(req, res) {
  const { id } = req.query;
  res.json({ userId: id });
}
```

## Remember

- Files in pages/api/
- Handle HTTP methods
- Use for backend logic
- Connect to databases

> Next: Learn Server Components!

Next.js API Routes

Server Components render on server, reducing client bundle.

## Server Component (Default)

```javascript
// app/page.js
async function Users() {
  const users = await fetch('https://api.example.com/users');
  const data = await users.json();

  return (
    <div>
      {data.map(user => <p key={user.id}>{user.name}</p>)}
    </div>
  );
}
```

## Client Component

Add 'use client' for interactivity:

```javascript
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

## Mixing Both

```javascript
// Server Component
import ClientCounter from './Counter'; // Client component

export default async function Page() {
  const data = await fetchData(); // Server-side

  return (
    <div>
      <h1>{data.title}</h1>
      <ClientCounter /> {/* Client interactivity */}
    </div>
  );
}
```

## Remember

- Default = Server Component
- Use 'use client' for interactivity
- Reduces JavaScript bundle
- Better performance

> Next: Learn Suspense patterns!

Use React Server Components for better performance.

React Server Components

Advanced Suspense patterns for better UX.

## Multiple Suspense Boundaries

```javascript
function Page() {
  return (
    <div>
      <Suspense fallback={<HeaderSkeleton />}>
        <Header />
      </Suspense>

      <Suspense fallback={<ContentSkeleton />}>
        <Content />
      </Suspense>

      <Suspense fallback={<SidebarSkeleton />}>
        <Sidebar />
      </Suspense>
    </div>
  );
}
```

## Streaming SSR

```javascript
import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <h1>Page Title</h1>
      <Suspense fallback={<Spinner />}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}
```

## Error Boundaries with Suspense

```javascript
<ErrorBoundary fallback={<Error />}>
  <Suspense fallback={<Loading />}>
    <DataComponent />
  </Suspense>
</ErrorBoundary>
```

## Remember

- Multiple boundaries for granular loading
- Stream content to client
- Combine with Error Boundaries
- Better perceived performance

> Next: Learn concurrent features!

Advanced Suspense patterns for data fetching and streaming.

React Suspense Advanced

Concurrent features improve responsiveness.

## useTransition

Keep UI responsive during updates:

```javascript
import { useState, useTransition } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setQuery(e.target.value);
    startTransition(() => {
      // Expensive update
      filterLargeList(e.target.value);
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <Results />
    </div>
  );
}
```

## useDeferredValue

Defer less important updates:

```javascript
import { useState, useDeferredValue } from 'react';

function Search() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <Results query={deferredQuery} />
    </div>
  );
}
```

## Remember

- useTransition: Mark updates as transitions
- useDeferredValue: Defer value updates
- Keeps UI responsive
- Use for expensive operations

> Next: Learn advanced hooks!

Use useTransition and useDeferredValue for better UX.

React Concurrent Features

Advanced hooks for specific use cases.

## useLayoutEffect

Runs before browser paint:

```javascript
import { useLayoutEffect, useRef } from 'react';

function Tooltip() {
  const ref = useRef();

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    // Position tooltip based on height
  }, []);

  return <div ref={ref}>Tooltip</div>;
}
```

## useImperativeHandle

Customize ref value:

```javascript
import { forwardRef, useImperativeHandle, useRef } from 'react';

const Input = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => inputRef.current.value = ''
  }));

  return <input ref={inputRef} />;
});

// Usage
const ref = useRef();
<Input ref={ref} />
ref.current.focus();
ref.current.clear();
```

## useId

Generate unique IDs:

```javascript
import { useId } from 'react';

function Form() {
  const id = useId();

  return (
    <>
      <label htmlFor={id}>Name:</label>
      <input id={id} />
    </>
  );
}
```

## Remember

- useLayoutEffect: Synchronous DOM reads
- useImperativeHandle: Custom ref API
- useId: Stable unique IDs
- Use only when needed

> Next: Learn render optimization!

Master useLayoutEffect, useImperativeHandle, and useId.

Advanced React Hooks

Advanced techniques to minimize re-renders.

## Windowing/Virtualization

For long lists, use react-window:

```bash
npm install react-window
```

```javascript
import { FixedSizeList } from 'react-window';

function VirtualList({ items }) {
  return (
    <FixedSizeList
      height={500}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>{items[index]}</div>
      )}
    </FixedSizeList>
  );
}
```

## Debouncing

```javascript
import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

// Usage
const [search, setSearch] = useState('');
const debouncedSearch = useDebounce(search, 300);
```

## Memoization Strategy

```javascript
// Expensive component
const ExpensiveComponent = memo(({ data }) => {
  return <div>{/* Heavy rendering */}</div>;
});

// Memoize props
const memoizedData = useMemo(() => processData(rawData), [rawData]);
const memoizedCallback = useCallback(() => doSomething(), []);

<ExpensiveComponent
  data={memoizedData}
  onClick={memoizedCallback}
/>
```

## Remember

- Virtualize long lists
- Debounce frequent updates
- Memoize expensive operations
- Profile before optimizing

> Next: Learn Web Workers!

React Render Optimization

Use Web Workers for heavy computations.

## Create Worker

```javascript
// worker.js
self.addEventListener('message', (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
});

function heavyComputation(data) {
  // Complex calculations
  return processedData;
}
```

## Use in React

```javascript
import { useState, useEffect } from 'react';

function App() {
  const [result, setResult] = useState(null);

  useEffect(() => {
    const worker = new Worker(new URL('./worker.js', import.meta.url));

    worker.postMessage(largeData);

    worker.onmessage = (e) => {
      setResult(e.data);
    };

    return () => worker.terminate();
  }, []);

  return <div>{result}</div>;
}
```

## Custom Hook

```javascript
function useWorker(workerFunction) {
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);

  const runWorker = useCallback((data) => {
    const worker = new Worker(workerFunction);
    worker.postMessage(data);
    worker.onmessage = (e) => setResult(e.data);
    worker.onerror = (e) => setError(e.message);
    return () => worker.terminate();
  }, [workerFunction]);

  return { result, error, runWorker };
}
```

## Remember

- Offload heavy computations
- Don't block main thread
- Workers can't access DOM
- Terminate when done

> Next: Learn PWA features!

Offload heavy computations to Web Workers.

React with Web Workers

Make your React app work offline as a PWA.

## Create PWA Template

```bash
npx create-react-app my-app --template cra-template-pwa
```

## Register Service Worker

```javascript
// index.js
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

serviceWorkerRegistration.register();
```

## manifest.json

```json
{
  "short_name": "MyApp",
  "name": "My React App",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
```

## Offline Detection

```javascript
function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}
```

## Remember

- Works offline
- Installable on mobile
- Add to home screen
- Requires HTTPS

> Next: Learn GraphQL!

Convert React app to Progressive Web App.

React Progressive Web App

Use GraphQL for efficient data fetching.

## Install Apollo Client

```bash
npm install @apollo/client graphql
```

## Setup

```javascript
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
});

function App() {
  return (
    <ApolloProvider client={client}>
      <Users />
    </ApolloProvider>
  );
}
```

## Query Data

```javascript
import { useQuery, gql } from '@apollo/client';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

function Users() {
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {data.users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}
```

## Mutation

```javascript
import { useMutation, gql } from '@apollo/client';

const CREATE_USER = gql`
  mutation CreateUser($name: String!, $email: String!) {
    createUser(name: $name, email: $email) {
      id
      name
    }
  }
`;

function CreateUser() {
  const [createUser] = useMutation(CREATE_USER);

  const handleSubmit = () => {
    createUser({ variables: { name: 'John', email: 'john@example.com' } });
  };

  return <button onClick={handleSubmit}>Create</button>;
}
```

## Remember

- Fetch only needed data
- Strong typing
- Real-time subscriptions
- Caching built-in

> Next: Learn testing advanced!

Fetch data efficiently with GraphQL and Apollo Client.

React with GraphQL

Advanced testing techniques.

## Testing Custom Hooks

```javascript
import { renderHook, act } from '@testing-library/react';

test('useCounter', () => {
  const { result } = renderHook(() => useCounter());

  expect(result.current.count).toBe(0);

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});
```

## Mocking API Calls

```javascript
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve([{ id: 1, name: 'John' }])
  })
);

test('fetches users', async () => {
  render(<Users />);
  const user = await screen.findByText('John');
  expect(user).toBeInTheDocument();
});
```

## Testing Context

```javascript
test('uses theme context', () => {
  render(
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );

  const button = screen.getByRole('button');
  expect(button).toHaveClass('dark');
});
```

## Snapshot Testing

```javascript
test('matches snapshot', () => {
  const { container } = render(<Button>Click</Button>);
  expect(container).toMatchSnapshot();
});
```

## Remember

- Test user behavior
- Mock external dependencies
- Use renderHook for hooks
- Snapshot for UI changes

> Next: Learn micro-frontends!

Advanced testing with mocks, hooks, and integration tests.

React Testing Advanced

Split large apps into smaller, independent pieces.

## Module Federation (Webpack 5)

```javascript
// webpack.config.js (Host)
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js'
      }
    })
  ]
};

// webpack.config.js (Remote)
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button'
      }
    })
  ]
};
```

## Loading Remote Component

```javascript
const RemoteButton = React.lazy(() => import('app1/Button'));

function App() {
  return (
    <Suspense fallback="Loading...">
      <RemoteButton />
    </Suspense>
  );
}
```

## Benefits

- Independent deployment
- Technology diversity
- Team autonomy
- Scalability

## Challenges

- Shared dependencies
- Communication between apps
- Consistent UX
- Testing complexity

## Remember

- Use for large teams
- Independent deployments
- Shared state management
- Clear boundaries

> Next: Learn animation libraries!

Build scalable apps with micro-frontend architecture.

React Micro-Frontends

Add beautiful animations to React apps.

## Framer Motion

Install:
```bash
npm install framer-motion
```

Basic animation:
```javascript
import { motion } from 'framer-motion';

function Box() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
    >
      Animated Box
    </motion.div>
  );
}
```

Gesture animations:
```javascript
<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
>
  Click Me
</motion.button>
```

## React Spring

Install:
```bash
npm install react-spring
```

Usage:
```javascript
import { useSpring, animated } from 'react-spring';

function FadeIn() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
  return <animated.div style={props}>I fade in</animated.div>;
}
```

## Remember

- Framer Motion: Declarative, easy
- React Spring: Physics-based
- Use for better UX
- Don't overuse

> Next: Learn accessibility!

Add smooth animations with Framer Motion and React Spring.

React Animation Libraries

Build accessible React applications.

## Semantic HTML

```javascript
// Good
<button onClick={handleClick}>Click</button>

// Bad
<div onClick={handleClick}>Click</div>
```

## ARIA Labels

```javascript
<button aria-label="Close menu">
  <CloseIcon />
</button>

<nav aria-label="Main navigation">
  <ul>...</ul>
</nav>
```

## Focus Management

```javascript
function Modal({ isOpen, onClose }) {
  const closeButtonRef = useRef();

  useEffect(() => {
    if (isOpen) {
      closeButtonRef.current?.focus();
    }
  }, [isOpen]);

  return (
    <div role="dialog" aria-modal="true">
      <button ref={closeButtonRef} onClick={onClose}>
        Close
      </button>
    </div>
  );
}
```

## Keyboard Navigation

```javascript
function Menu() {
  const handleKeyDown = (e) => {
    if (e.key === 'Escape') {
      closeMenu();
    }
    if (e.key === 'ArrowDown') {
      focusNextItem();
    }
  };

  return <div onKeyDown={handleKeyDown}>...</div>;
}
```

## Testing Accessibility

```bash
npm install jest-axe
```

```javascript
import { axe } from 'jest-axe';

test('no accessibility violations', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});
```

## Remember

- Use semantic HTML
- Add ARIA when needed
- Manage focus properly
- Test with screen readers

> Next: Learn internationalization!

React Accessibility (a11y)

Add multi-language support to React apps.

## Install react-i18next

```bash
npm install react-i18next i18next
```

## Setup

```javascript
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        welcome: 'Welcome',
        goodbye: 'Goodbye'
      }
    },
    es: {
      translation: {
        welcome: 'Bienvenido',
        goodbye: 'Adiós'
      }
    }
  },
  lng: 'en',
  fallbackLng: 'en'
});

export default i18n;
```

## Using Translations

```javascript
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => changeLanguage('es')}>Español</button>
      <button onClick={() => changeLanguage('en')}>English</button>
    </div>
  );
}
```

## With Variables

```javascript
{
  welcome: 'Welcome, {{name}}!'
}

t('welcome', { name: 'John' })
```

## Remember

- Separate translation files
- Use translation keys
- Support plurals
- Format dates/numbers correctly

> Next: Learn SEO optimization!

Add multi-language support with react-i18next.

React Internationalization (i18n)

Optimize React apps for search engines.

## React Helmet

```bash
npm install react-helmet-async
```

```javascript
import { Helmet } from 'react-helmet-async';

function BlogPost({ post }) {
  return (
    <>
      <Helmet>
        <title>{post.title} - My Blog</title>
        <meta name="description" content={post.excerpt} />
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.excerpt} />
        <meta property="og:image" content={post.image} />
      </Helmet>
      <article>
        <h1>{post.title}</h1>
        {post.content}
      </article>
    </>
  );
}
```

## Next.js Head

```javascript
import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <title>Page Title</title>
        <meta name="description" content="Page description" />
      </Head>
      <main>Content</main>
    </>
  );
}
```

## Sitemap

Generate sitemap.xml for search engines.

## Structured Data

```javascript
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "author": "John Doe"
}
</script>
```

## Remember

- Use SSR/SSG for better SEO
- Add meta tags dynamically
- Create sitemap
- Use semantic HTML

> Next: Learn security best practices!

React SEO Optimization

Protect React apps from security threats.

## Prevent XSS

React escapes by default:
```javascript
// Safe
<div>{userInput}</div>

// Dangerous - avoid
<div dangerouslySetInnerHTML={{__html: userInput}} />
```

## Sanitize HTML

Use DOMPurify:
```bash
npm install dompurify
```

```javascript
import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(dirty);
<div dangerouslySetInnerHTML={{__html: clean}} />
```

## Secure API Keys

Don't expose in client:
```javascript
// Bad
const API_KEY = 'secret-key-123';

// Good - use environment variables
const API_KEY = process.env.REACT_APP_API_KEY;
```

## CSRF Protection

Use tokens for state-changing requests:
```javascript
fetch('/api/update', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': csrfToken
  },
  body: JSON.stringify(data)
});
```

## Content Security Policy

Add CSP headers:
```
Content-Security-Policy: default-src 'self'
```

## Remember

- Sanitize user input
- Secure API keys
- Use HTTPS
- Implement auth properly
- Keep dependencies updated

> Next: Learn monitoring and logging!

Secure your React applications from common vulnerabilities.

React Security

Monitor React apps in production.

## Sentry for Error Tracking

```bash
npm install @sentry/react
```

```javascript
import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: 'your-dsn',
  environment: 'production'
});

function App() {
  return (
    <Sentry.ErrorBoundary fallback={<ErrorPage />}>
      <MyApp />
    </Sentry.ErrorBoundary>
  );
}
```

## Custom Logging

```javascript
const logger = {
  info: (message, meta) => {
    console.log('[INFO]', message, meta);
    // Send to logging service
  },
  error: (message, error) => {
    console.error('[ERROR]', message, error);
    Sentry.captureException(error);
  }
};

logger.error('API call failed', error);
```

## Performance Monitoring

```javascript
// Measure component render time
const startTime = performance.now();
// Component renders
const endTime = performance.now();
console.log(`Render time: ${endTime - startTime}ms`);
```

## Analytics

```javascript
// Track page views
useEffect(() => {
  analytics.page(window.location.pathname);
}, []);

// Track events
const handleClick = () => {
  analytics.track('Button Clicked', { buttonName: 'signup' });
};
```

## Remember

- Use error tracking service
- Log important events
- Monitor performance
- Track user behavior
- Set up alerts

> Next: Learn design patterns!

Monitor and log React app errors and performance.

React Monitoring & Logging

Common patterns for scalable React apps.

## Container/Presentational Pattern

```javascript
// Container (logic)
function UserContainer() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  return <UserList users={users} />;
}

// Presentational (UI)
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}
```

## Provider Pattern

```javascript
const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);
```

## Compound Component Pattern

```javascript
function Select({ children, value, onChange }) {
  return (
    <select value={value} onChange={onChange}>
      {children}
    </select>
  );
}

Select.Option = function Option({ value, children }) {
  return <option value={value}>{children}</option>;
};

// Usage
<Select value={selected} onChange={setSelected}>
  <Select.Option value="1">Option 1</Select.Option>
  <Select.Option value="2">Option 2</Select.Option>
</Select>
```

## State Reducer Pattern

```javascript
function useCounter(reducer) {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(current => reducer(current, 'INCREMENT'));
  };

  return { count, increment };
}
```

## Remember

- Choose pattern based on needs
- Container/Presentational for separation
- Provider for global state
- Compound for flexible APIs

> Next: Learn clean code practices!

Master common React design patterns for better code.

React Design Patterns

Principles for clean React code.

## Single Responsibility

```javascript
// Bad - component does too much
function UserDashboard() {
  // Fetch users
  // Fetch posts
  // Handle auth
  // Render everything
}

// Good - split responsibilities
function UserDashboard() {
  return (
    <>
      <UserList />
      <PostList />
    </>
  );
}
```

## DRY (Don't Repeat Yourself)

```javascript
// Bad - repeated code
<button onClick={handleClick} style={{...}}>Submit</button>
<button onClick={handleCancel} style={{...}}>Cancel</button>

// Good - reusable component
function Button({ onClick, children, variant }) {
  return <button onClick={onClick} className={variant}>{children}</button>;
}
```

## Meaningful Names

```javascript
// Bad
const d = new Date();
const arr = users.map(u => u.n);

// Good
const currentDate = new Date();
const userNames = users.map(user => user.name);
```

## Keep Components Small

```javascript
// Aim for < 200 lines per component
// If larger, split into smaller components
```

## Early Returns

```javascript
function User({ user }) {
  if (!user) return <div>No user</div>;
  if (user.loading) return <Spinner />;
  if (user.error) return <Error />;

  return <div>{user.name}</div>;
}
```

## Remember

- One responsibility per component
- Don't repeat code
- Use meaningful names
- Keep components focused
- Early returns for readability

> Next: Learn performance profiling!

React Clean Code

Use React Profiler to find performance issues.

## React DevTools Profiler

1. Open React DevTools
2. Go to Profiler tab
3. Click Record
4. Interact with app
5. Stop recording
6. Analyze flame graph

## Profiler API

```javascript
import { Profiler } from 'react';

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime
) {
  console.log(`${id} took ${actualDuration}ms`);
}

<Profiler id="App" onRender={onRenderCallback}>
  <App />
</Profiler>
```

## Chrome Performance Tab

1. Open DevTools
2. Go to Performance
3. Record
4. Stop
5. Analyze timeline

## Lighthouse

```bash
npm install -g lighthouse
lighthouse http://localhost:3000
```

## Key Metrics

- FCP (First Contentful Paint)
- LCP (Largest Contentful Paint)
- TTI (Time to Interactive)
- CLS (Cumulative Layout Shift)

## Remember

- Profile before optimizing
- Focus on user experience
- Test on real devices
- Monitor in production

> Next: Learn bundle optimization!

Profile and optimize React app performance.

React Performance Profiling

Optimize React bundle for production.

## Analyze Bundle

```bash
npm install --save-dev webpack-bundle-analyzer
```

```javascript
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()]
};
```

## Tree Shaking

Import only what you need:

```javascript
// Bad
import _ from 'lodash';

// Good
import debounce from 'lodash/debounce';
```

## Dynamic Imports

```javascript
// Instead of
import HeavyComponent from './Heavy';

// Use
const HeavyComponent = lazy(() => import('./Heavy'));
```

## Remove Source Maps in Production

```javascript
// .env.production
GENERATE_SOURCEMAP=false
```

## Compress with Gzip/Brotli

Enable in server configuration.

## CDN for Dependencies

```html
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
```

## Remember

- Analyze bundle first
- Use dynamic imports
- Tree shake unused code
- Compress assets
- Use CDN when possible

> Next: Learn CI/CD!

Reduce bundle size for faster load times.

React Bundle Optimization

Automate testing and deployment.

## GitHub Actions

```.github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test

      - name: Build
        run: npm run build

      - name: Deploy
        run: npm run deploy
```

## Pre-commit Hooks

Install Husky:
```bash
npm install --save-dev husky lint-staged
npx husky install
```

```json
{
  "lint-staged": {
    "*.{js,jsx}": ["eslint --fix", "prettier --write"]
  }
}
```

## Automated Testing

Run tests before deploy:
```bash
npm test -- --coverage --watchAll=false
```

## Environment-based Builds

```bash
npm run build:dev
npm run build:staging
npm run build:prod
```

## Remember

- Automate everything
- Run tests in CI
- Use environment variables
- Deploy automatically
- Monitor deployments

> Congratulations! You've mastered React from beginner to advanced! Keep building amazing apps!

Set up continuous integration and deployment for React apps.

React CI/CD Pipeline

React Hooks revolutionized how we write React components. They allow you to use state and other React features without writing class components.

## useState Hook

The useState Hook lets you add state to functional components. It returns an array with two elements: the current state value and a function to update it.

## useEffect Hook

The useEffect Hook lets you perform side effects in functional components. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in class components.

## Best Practices

When using Hooks, always follow the Rules of Hooks: only call Hooks at the top level and only call Hooks from React functions.

Master the most commonly used React Hooks: useState and useEffect with practical examples.

React Hooks: A Complete Guide to useState and useEffect

This comprehensive guide covers 50 essential React.js interview questions that every developer should know. These questions cover fundamental concepts, hooks, performance optimization, and advanced patterns commonly asked in technical interviews.

## Core Concepts

Understanding React's core concepts is essential for any React developer. These questions test your knowledge of components, props, state, and the component lifecycle.

## React Hooks

Hooks revolutionized React development by allowing functional components to use state and lifecycle features. Master these questions to demonstrate your understanding of modern React patterns.

## Performance Optimization

React performance is crucial for building fast applications. These questions cover memoization, code splitting, lazy loading, and other optimization techniques.

## Advanced Patterns

Advanced React patterns include context API, error boundaries, render props, higher-order components, and custom hooks. These questions test your ability to solve complex problems.

Comprehensive collection of 50 essential React.js interview questions covering hooks, components, state management, performance, and advanced concepts.

React Resources

Browse React Content

Tutorials

Interview Questions

Practice Problems

Articles & Blog