markdown
Copy
# Understanding React: Key Concepts with Uses & Code Examples
---
## 1. Component-Based Architecture
**Use**: Build reusable UI elements.
```jsx
// Functional Component
function Button(props) {
return <button onClick={props.onClick}>{props.label}</button>;
}
// Usage
<Button label="Click Me" onClick={() => console.log("Clicked!")} />
2. JSX (JavaScript XML)
Use: Write HTML-like syntax in JavaScript.
jsx
Copy
const element = <h1 className="title">Hello, React!</h1>;
3. State Management with useState
Use: Track dynamic data in functional components.
jsx
Copy
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
4. Props
Use: Pass data from parent to child components.
jsx
Copy
function UserCard({ name, age }) {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
</div>
);
}
// Usage
<UserCard name="John Doe" age={30} />
5. useEffect Hook
Use: Handle side effects (e.g., API calls).
jsx
Copy
import { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []); // Empty dependency array = runs once on mount
return <div>{data ? data.message : 'Loading...'}</div>;
}
6. Conditional Rendering
Use: Show/hide elements based on conditions.
jsx
Copy
function Greeting({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>}
</div>
);
}
7. List Rendering with Keys
Use: Render dynamic lists efficiently.
jsx
Copy
function TodoList({ todos }) {
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
}
8. Context API
Use: Share global state without prop drilling.
jsx
Copy
import { createContext, useContext } from 'react';
const ThemeContext = createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = useContext(ThemeContext);
return <div>Current Theme: {theme}</div>;
}
9. React Router
Use: Handle client-side navigation.
jsx
Copy
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<Link to="/about">About</Link>
<Route path="/about" component={AboutPage} />
</Router>
);
}
10. Forms (Controlled Components)
Use: Manage form data with React state.
jsx
Copy
function LoginForm() {
const [email, setEmail] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
console.log('Email:', email);
};
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}
11. Performance Optimization (React.memo, useMemo)
Use: Avoid unnecessary re-renders.
jsx
Copy
const MemoizedComponent = React.memo(function ExpensiveComponent({ value }) {
// Renders only when `value` changes
return <div>{value}</div>;
});
// Usage
<MemoizedComponent value={someValue} />
12. Styling with CSS Modules
Use: Scope CSS to components.
jsx
Copy
// Button.module.css
.error { color: red; }
// Button.jsx
import styles from './Button.module.css';
function Button() {
return <button className={styles.error}>Error Button</button>;
}
13. Testing with React Testing Library
Use: Test component behavior.
jsx
Copy
import { render, screen } from '@testing-library/react';
import Button from './Button';
test('renders a button', () => {
render(<Button label="Test" />);
expect(screen.getByText(/Test/i)).toBeInTheDocument();
});
14. Best Practices
Folder Structure:
Copy
src/
components/
hooks/
contexts/
utils/
State Management: Use Redux/Zustand for complex apps.
2. JSX Deep Dive
Use: Mix JavaScript logic with HTML-like syntax.
jsx
Copy
function DynamicList({ items }) {
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li> // Use unique keys for production
))}
</ul>
);
}
3. State Management
useState
Use: Track component-specific data.
jsx
Copy
const [count, setCount] = useState(0);
// Update state based on previous value
setCount(prev => prev + 1);
useReducer
Use: Handle complex state logic.
jsx
Copy
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
default:
return state;
}
}
const [state, dispatch] = useReducer(reducer, initialState);
// Usage: dispatch({ type: 'increment' });
4. Advanced Hooks
useContext
Use: Access context values globally.
jsx
Copy
const UserContext = createContext();
function App() {
return (
<UserContext.Provider value="Alice">
<Profile />
</UserContext.Provider>
);
}
function Profile() {
const user = useContext(UserContext);
return <div>User: {user}</div>;
}
Custom Hooks
Use: Reuse logic across components.
jsx
Copy
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return width;
}
// Usage: const width = useWindowWidth();
5. Side Effects & Lifecycle
useEffect Cleanup
Use: Prevent memory leaks (e.g., subscriptions).
jsx
Copy
useEffect(() => {
const timer = setInterval(() => console.log('Tick'), 1000);
return () => clearInterval(timer); // Cleanup on unmount
}, []);
6. Forms & Validation
Uncontrolled Components with useRef
Use: Directly access DOM elements.
jsx
Copy
function FileUpload() {
const fileInput = useRef();
const handleSubmit = (e) => {
e.preventDefault();
console.log(fileInput.current.files[0]);
};
return (
<form onSubmit={handleSubmit}>
<input type="file" ref={fileInput} />
<button>Upload</button>
</form>
);
}
Form Validation with react-hook-form
jsx
Copy
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 is required</span>}
<button type="submit">Submit</button>
</form>
);
}
7. Routing with React Router v6
Use: Nested routes and dynamic parameters.
jsx
Copy
import { Routes, Route, Link, useParams } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/users/:userId" element={<UserProfile />} />
</Routes>
);
}
function UserProfile() {
const { userId } = useParams();
return <h1>User ID: {userId}</h1>;
}
8. State Management with Redux
Use: Global state for large apps.
jsx
Copy
// Store setup
import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
reducer: {
counter: counterReducer,
},
});
// Slice
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
},
});
// Component usage
import { useSelector, useDispatch } from 'react-redux';
const count = useSelector(state => state.counter);
const dispatch = useDispatch();
<button onClick={() => dispatch(increment())}>+</button>
9. Error Boundaries
Use: Catch JavaScript errors in components.
jsx
Copy
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
logErrorToService(error, info);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
// Usage
<ErrorBoundary>
<BuggyComponent />
</ErrorBoundary>
10. Server-Side Rendering (Next.js)
Use: SEO-friendly pages and faster load times.
jsx
Copy
// pages/index.js (Next.js)
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data } };
}
function HomePage({ data }) {
return <div>{data.message}</div>;
}
11. Performance Optimization
Lazy Loading with React.lazy
Use: Reduce initial bundle size.
jsx
Copy
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<HeavyComponent />
</Suspense>
);
}
useMemo for Expensive Calculations
jsx
Copy
const sortedList = useMemo(() => {
return bigList.sort((a, b) => a - b);
}, [bigList]);
12. Testing Advanced Scenarios
Use: Mock API calls and test hooks.
jsx
Copy
// Mock API with Jest
jest.mock('axios', () => ({
get: jest.fn(() => Promise.resolve({ data: 'Mock Data' })),
}));
// Test useEffect and state
test('fetches data on mount', async () => {
render(<DataFetcher />);
await waitFor(() => expect(screen.getByText('Mock Data')).toBeInTheDocument());
});
13. TypeScript with React
Use: Type-safe components.
tsx
Copy
interface UserProps {
name: string;
age: number;
isAdmin?: boolean;
}
const UserCard: React.FC<UserProps> = ({ name, age, isAdmin = false }) => (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
{isAdmin && <p>Admin User</p>}
</div>
);
14. Deployment
Use: Deploy to Vercel/Netlify.
bash
Copy
# Build the app
npm run build
# Deploy using Vercel CLI
npm install -g vercel
vercel deploy
15. Best Practices & Pitfalls
Immutability: Always return new state objects/arrays.
jsx
Copy
// Bad: Direct mutation
state.items.push(newItem);
// Good: Spread operator
setItems([...items, newItem]);
Keys in Lists: Avoid using array indices for dynamic data.
Dependency Arrays: Include all variables used in useEffect.
16. Advanced Patterns
Render Props
jsx
Copy
function MouseTracker({ render }) {
const [position, setPosition] = useState({ x: 0, y: 0 });
// Track mouse...
return render(position);
}
// Usage
<MouseTracker render={({ x, y }) => <div>X: {x}, Y: {y}</div>} />
Higher-Order Components (HOCs)
jsx
Copy
function withLogger(WrappedComponent) {
return function (props) {
useEffect(() => {
console.log('Component rendered:', WrappedComponent.name);
}, []);
return <WrappedComponent {...props} />;
};
}
17. Ecosystem Tools
Bundlers: Webpack, Parcel.
Styling: Styled Components, Sass.
State Management: Zustand, Jotai.
Data Fetching: React Query, SWR.
18. Resources
