1. Component-Based Architecture
Create modular, reusable UI components with clear props and logical structure.
Card Component
{`function Card({ title, children }) {
return (
{title}
{children}
);
}`}
Usage Example
{`function App() {
return (
This is a reusable component pattern.
You can customize content dynamically.
);
}`}
2. Context API for State Management
newCreate global state that can be accessed by any component in your tree.
Auth Context
{`import { createContext, useState } from 'react';
const AuthContext = createContext();
export function AuthProvider({ children }) {
const [user, setUser] = useState(null);
return (
{children}
);
}
export const useAuth = () => useContext(AuthContext);`}
Usage Example
{`function Header() {
const { user, setUser } = useAuth();
return (
{user ? (
) : (
)}
);
}`}
3. API Integration and Data Fetching
Make API calls, handle loading states, and manage error states in your application.
Fetch Data Hook
{`async function fetchUser(userId) {
const res = await fetch(\`/api/users/\${userId}\`);
if (!res.ok) throw new Error('Failed to fetch user');
return await res.json();
}`}
Usage with Loading States
{`function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
fetchUser(userId)
.then(data => setUser(data))
.catch(error => setError(error.message));
}, [userId]);
if (error) return {error};
if (!user) return Loading...;
return (
{user.name}
{user.email}
);
}`}