CONCEPTS
Components
🧩- ❯ Functional Components
- ❯ Class Components
- ❯ JSX
- ❯ Props
- ❯ Children
Hooks
🪝- ❯ useState
- ❯ useEffect
- ❯ useContext
- ❯ useReducer
- ❯ useMemo
- ❯ useCallback
State Management
📦- ❯ Local State
- ❯ Context API
- ❯ Redux
- ❯ Zustand
- ❯ Recoil
Routing
🛣️- ❯ React Router
- ❯ Navigation
- ❯ Dynamic Routes
- ❯ Protected Routes
HOOKS
01
useState
Manage component state
const [count, setCount] = useState(0)02
useEffect
Side effects and lifecycle
useEffect(() => { /* effect */ }, [deps])03
useContext
Access context values
const value = useContext(MyContext)04
useReducer
Complex state logic
const [state, dispatch] = useReducer(reducer, initial)05
useMemo
Memoize expensive calculations
const value = useMemo(() => compute(), [deps])06
useCallback
Memoize callback functions
const fn = useCallback(() => {}, [deps])07
useRef
Persist values, DOM access
const ref = useRef(initialValue)08
Custom Hooks
Reusable stateful logic
const data = useCustomHook()PATTERNS
Container/Presentational
Separate logic from UI components
Higher-Order Components
Wrap components to add functionality
Render Props
Share code using props with function values
Compound Components
Components that work together
Controlled Components
Form inputs controlled by React state
Error Boundaries
Catch JavaScript errors in component tree
EXERCISES
Build Todo App with Hookseasy
Create Custom Hookmedium
Implement Context APImedium
Build E-commerce Carthard
Create Infinite Scrollhard
SYNTAX_DEMO
Components.jsx
// ============================================
// FUNCTIONAL COMPONENTS & JSX
// ============================================
// Basic Functional Component
function Welcome() {
return <h1>Hello, React!</h1>;
}
// Component with Props
function Greeting({ name, age }) {
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old.</p>
</div>
);
}
// Usage
<Greeting name="Alice" age={25} />
// Props with Default Values
function Button({ text = "Click me", onClick }) {
return <button onClick={onClick}>{text}</button>;
}
// Children Props
function Card({ children, title }) {
return (
<div className="card">
<h2>{title}</h2>
<div className="card-content">
{children}
</div>
</div>
);
}
// Usage
<Card title="My Card">
<p>This is the content</p>
</Card>
// ============================================
// HOOKS - useState
// ============================================
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
<button onClick={() => setCount(count - 1)}>
Decrement
</button>
<button onClick={() => setCount(0)}>
Reset
</button>
</div>
);
}
// ============================================
// HOOKS - useEffect
// ============================================
import { useEffect } from 'react';
function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('https://api.example.com/users')
.then(res => res.json())
.then(data => {
setUsers(data);
setLoading(false);
});
}, []); // Run on mount
if (loading) return <div>Loading...</div>;
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
// ============================================
// CUSTOM HOOKS
// ============================================
function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}
// Usage
function Settings() {
const [theme, setTheme] = useLocalStorage('theme', 'light');
return (
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Current: {theme}
</button>
);
}
// ============================================
// PERFORMANCE OPTIMIZATION
// ============================================
import { memo } from 'react';
// React.memo - Prevent Unnecessary Re-renders
const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
console.log('Rendering ExpensiveComponent');
return <div>{data}</div>;
});