⚛️ React

# Tạo project mới với Vite (khuyên dùng)
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

# Hoặc dùng Create React App
npx create-react-app my-app
cd my-app
npm start

import { useState } from 'react';

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

    return (
        <div>
            <h1>Xin chào, React! ⚛️</h1>
            <p>Bạn đã nhấn {count} lần</p>
            <button onClick={() => setCount(count + 1)}>
                Nhấn vào đây
            </button>
        </div>
    );
}

export default App;

import { useState } from 'react';

function Counter() {
    // State đơn giản
    const [count, setCount] = useState(0);

    // State với object
    const [user, setUser] = useState({
        name: 'An',
        age: 25
    });

    // Functional update (khi state mới phụ thuộc state cũ)
    const increment = () => {
        setCount(prev => prev + 1);
    };

    // Update object (phải spread toàn bộ)
    const updateName = (newName) => {
        setUser(prev => ({ ...prev, name: newName }));
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>+1</button>
            <p>User: {user.name}, {user.age} tuổi</p>
        </div>
    );
}

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        // Side effect: fetch data
        const fetchUser = async () => {
            setLoading(true);
            const res = await fetch(`/api/users/${userId}`);
            const data = await res.json();
            setUser(data);
            setLoading(false);
        };

        fetchUser();

        // Cleanup function (chạy khi unmount hoặc dependency thay đổi)
        return () => {
            console.log('Cleanup!');
        };
    }, [userId]); // Dependency array - chỉ re-run khi userId thay đổi

    if (loading) return <p>Đang tải...</p>;
    return <h2>{user?.name}</h2>;
}

import { useLayoutEffect, useRef, useState } from 'react';

function Tooltip({ text, children }) {
    const ref = useRef(null);
    const [position, setPosition] = useState({ top: 0, left: 0 });

    useLayoutEffect(() => {
        // Đo DOM TRƯỚC KHI browser paint
        // → Không bị "nhấp nháy" (flash)
        const rect = ref.current.getBoundingClientRect();
        setPosition({
            top: rect.top - 30,
            left: rect.left + rect.width / 2
        });
    }, [text]);

    return (
        <div ref={ref}>
            {children}
            <span style={{ position: 'fixed', ...position }}>
                {text}
            </span>
        </div>
    );
}

// ⚠️ useEffect: render → paint → effect (có thể thấy flash)
// ✅ useLayoutEffect: render → effect → paint (không flash)

import { useState, useEffect } from 'react';

// Custom hook tái sử dụng cho fetch data
function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const controller = new AbortController();

        const fetchData = async () => {
            try {
                setLoading(true);
                const res = await fetch(url, {
                    signal: controller.signal
                });
                if (!res.ok) throw new Error('Fetch failed');
                const json = await res.json();
                setData(json);
            } catch (err) {
                if (err.name !== 'AbortError') {
                    setError(err.message);
                }
            } finally {
                setLoading(false);
            }
        };

        fetchData();

        // Cleanup: hủy request nếu component unmount
        return () => controller.abort();
    }, [url]);

    return { data, loading, error };
}

// Sử dụng
function UserList() {
    const { data, loading, error } = useFetch('/api/users');

    if (loading) return <p>Đang tải...</p>;
    if (error) return <p>Lỗi: {error}</p>;

    return (
        <ul>
            {data.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    );
}

import { useReducer, useCallback } from 'react';

// Reducer pattern cho state phức tạp
const initialState = { items: [], filter: 'all', loading: false };

function todoReducer(state, action) {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                items: [...state.items, {
                    id: Date.now(),
                    text: action.payload,
                    completed: false
                }]
            };
        case 'TOGGLE_TODO':
            return {
                ...state,
                items: state.items.map(item =>
                    item.id === action.payload
                        ? { ...item, completed: !item.completed }
                        : item
                )
            };
        case 'SET_FILTER':
            return { ...state, filter: action.payload };
        default:
            return state;
    }
}

function TodoApp() {
    const [state, dispatch] = useReducer(todoReducer, initialState);

    const addTodo = useCallback((text) => {
        dispatch({ type: 'ADD_TODO', payload: text });
    }, []);

    const filteredItems = state.items.filter(item => {
        if (state.filter === 'active') return !item.completed;
        if (state.filter === 'completed') return item.completed;
        return true;
    });

    return (
        <div>
            <h1>Todo App ⚛️</h1>
            {/* ... render UI */}
        </div>
    );
}