1. Functional Component (Basic)
import React from 'react';
const MyComponent = () => {
return <h2>Hello, World!h2>;
};
export default MyComponent;
2. Functional Component with Props
import React from 'react';
const Greeting = ({ name }) => <h1>Hello, {name}!h1>;
export default Greeting;
3. Class Component
import React, { Component } from 'react';
class MyClassComponent extends Component {
render() {
return <p>Hello from Class Componentp>;
}
}
export default MyClassComponent;
II. State Management with Hooks
4. useState for Counter
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<>
<p>{count}p>
<button onClick={() => setCount(count + 1)}>+button>
>
);
};
export default Counter;
5. useState with Object
import React, { useState } from 'react';
const Profile = () => {
const [user, setUser] = useState({ name: 'John', age: 25 });
return (
<>
<p>{user.name} - {user.age}p>
<button onClick={() => setUser({ ...user, age: user.age + 1 })}>
Aging...
button>
>
);
};
export default Profile;
6. useEffect on Mount
import React, { useEffect } from 'react';
const Hello = () => {
useEffect(() => {
console.log('Mounted!');
}, []);
return <p>Hello Effectp>;
};
export default Hello;
7. useEffect with Fetch
import React, { useEffect, useState } from 'react';
const FetchUser = ({ id }) => {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then(res => res.json())
.then(setUser);
}, [id]);
if (!user) return <p>Loading...p>;
return <p>{user.name}p>;
};
export default FetchUser;
8. useContext for Theme
import React, { createContext, useContext, useState } from 'react';
const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
ThemeContext.Provider>
);
};
export const ThemeButton = () => {
const { theme, setTheme } = useContext(ThemeContext);
return (
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Theme: {theme}
button>
);
};
9. useRef Focus Input
import React, { useRef } from 'react';
const FocusInput = () => {
const inputRef = useRef();
return (
<>
<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>Focusbutton>
>
);
};
export default FocusInput;
10. useCallback
import React, { useState, useCallback } from 'react';
const Button = React.memo(({ onClick }) => <button onClick={onClick}>+button>);
const App = () => {
const [count, setCount] = useState(0);
const inc = useCallback(() => setCount(c => c + 1), []);
return <><p>{count}p><Button onClick={inc} />>;
};
export default App;
11. useMemo
import React, { useState, useMemo } from 'react';
const Expensive = ({ n }) => {
const result = useMemo(() => {
let res = 0;
for (let i = 0; i < n * 100000; i++) res += i;
return res;
}, [n]);
return <p>{result}p>;
};
export default Expensive;
12. useReducer
import React, { useReducer } from 'react';
const reducer = (state, action) => {
switch (action.type) {
case 'inc': return { count: state.count + 1 };
case 'dec': return { count: state.count - 1 };
default: return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<>
<p>{state.count}p>
<button onClick={() => dispatch({ type: 'inc' })}>+button>
<button onClick={() => dispatch({ type: 'dec' })}>-button>
>
);
};
export default Counter;
III. Conditional Rendering
13. With &&
{isLoggedIn && <p>Welcome!p>}
14. With Ternary
{isAdmin ? <p>Admin Panelp> : <p>User Panelp>}
15. With Switch-like Logic
const Status = ({ code }) => {
switch (code) {
case 200: return <p>Successp>;
case 400: return <p>Errorp>;
default: return <p>Unknownp>;
}
};
IV. List Rendering
16. Map Over Array
<ul>
{items.map(i => <li key={i.id}>{i.name}li>)}
ul>
17. Nested Lists
{data.map(cat => (
<div key={cat.id}>
<h3>{cat.name}h3>
<ul>
{cat.items.map(it => <li key={it}>{it}li>)}
ul>
div>
))}
V. Event Handling
18. onClick Handler
<button onClick={() => alert('Clicked!')}>Clickbutton>
19. Input Change
<input value={text} onChange={e => setText(e.target.value)} />
20. Prevent Form Submit
<form onSubmit={e => { e.preventDefault(); save(); }}>
<button>Savebutton>
form>
VI. Forms
21. Controlled Input
<input value={value} onChange={e => setValue(e.target.value)} />
22. Multiple Inputs
<input name="username" onChange={e => setForm({...form, [e.target.name]: e.target.value})} />
23. Checkbox Group
<input type="checkbox" checked={checked} onChange={e => setChecked(e.target.checked)} />
24. Form Reset
<button onClick={() => setForm(initial)}>Resetbutton>
VII. Styling
25. Inline Style
<div style={{ color: 'red', padding: 10 }}>Styled Textdiv>
26. Conditional Class
<div className={isActive ? 'active' : 'inactive'}>Statusdiv>
27. CSS Modules
import styles from './Button.module.css';
<button className={styles.primary}>Clickbutton>
VIII. Component Patterns
28. Higher-Order Component
const withLogger = Comp => props => {
console.log(props);
return <Comp {...props} />;
};
29. Render Props
const Mouse = ({ children }) => {
const [pos, setPos] = useState({x:0,y:0});
return <div onMouseMove={e => setPos({x:e.clientX,y:e.clientY})}>
{children(pos)}
div>;
};
30. Custom Hook
const useWindowWidth = () => {
const [w, setW] = useState(window.innerWidth);
useEffect(() => {
const h = () => setW(window.innerWidth);
window.addEventListener('resize', h);
return () => window.removeEventListener('resize', h);
}, []);
return w;
};
IX. Error Handling
31. Error Boundary
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
render() {
if (this.state.hasError) return <h3>Error Occurredh3>;
return this.props.children;
}
}
X. Performance & Optimization
32. React.memo
const MyComp = React.memo(({ value }) => <p>{value}p>);
33. Lazy Loading
const LazyComp = React.lazy(() => import('./LazyComp'));
<Suspense fallback={<p>Loading...p>}>
<LazyComp />
Suspense>
34. Dynamic Import
import('./math').then(module => module.add(2,3));
XI. Miscellaneous
35. Fragment
<>
<p>Onep>
<p>Twop>
>
36. Children Prop
const Card = ({children}) => <div className="card">{children}div>;
37. Spread Props
<input {...props} />
38. forwardRef
const MyInput = React.forwardRef((props, ref) => <input ref={ref} {...props} />);
39. useId (for accessibility)
const id = useId();
<label htmlFor={id}>Namelabel>
<input id={id} />
40. useLayoutEffect
useLayoutEffect(() => { console.log('DOM ready'); }, []);
41. useImperativeHandle
useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus() }));
42. Portals
ReactDOM.createPortal(<Modal />, document.getElementById('modal-root'));
43. Suspense with Data
<Suspense fallback={<p>Loading...p>}>
<Profile />
Suspense>
44. useTransition
const [isPending, start] = useTransition();
45. useDeferredValue
const deferred = useDeferredValue(value);
46. Debounce with useEffect
useEffect(() => {
const id = setTimeout(() => search(query), 500);
return () => clearTimeout(id);
}, [query]);
47. Throttling Scroll
useEffect(() => {
const onScroll = throttle(() => setY(window.scrollY), 200);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
48. Key Press Hook
const useKey = (key, cb) => {
useEffect(() => {
const handler = e => e.key === key && cb();
window.addEventListener('keydown', handler);
return () => window.removeEventListener('keydown', handler);
}, [key, cb]);
};
49. Dark Mode Hook
const useDarkMode = () => {
const [dark, setDark] = useState(false);
useEffect(() => {
document.body.classList.toggle('dark', dark);
}, [dark]);
return [dark, setDark];
};
50. Custom Fetch Hook
const useFetch = url => {
const [data, setData] = useState(null);
useEffect(() => { fetch(url).then(r => r.json()).then(setData); }, [url]);
return data;
};
