React.js

React là thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, được sử dụng để xây dựng giao diện người dùng, đặc biệt là các ứng dụng web đơn trang (SPA).

⚛️ React là gì?

React cho phép bạn xây dựng các component có thể tái sử dụng và quản lý state một cách hiệu quả. Nó sử dụng Virtual DOM để tối ưu hiệu năng.

Tại sao học React?

Framework phổ biến nhất hiện nay
Cộng đồng lớn và tài nguyên phong phú
Nhiều cơ hội việc làm
Được sử dụng bởi các công ty lớn (Facebook, Netflix, Airbnb)

🎬 Video hướng dẫn

🖼️ Hình ảnh minh họa

📚 Các khái niệm cơ bản

1. Components

1
2
3
4
5
6
7
8
9
// Functional Component
function Welcome(props) {
    return <h1>Hello, {props.name}!</h1>;
}

// Arrow Function Component
const Welcome = (props) => {
    return <h1>Hello, {props.name}!</h1>;
}

2. JSX

1
2
3
const element = <h1>Hello, World!</h1>;
const name = "John";
const element = <h1>Hello, {name}!</h1>;

3. Props

1
2
3
4
5
6
7
8
9
function UserCard({ name, email, avatar }) {
    return (
        <div className="user-card">
            <img src={avatar} alt={name} />
            <h2>{name}</h2>
            <p>{email}</p>
        </div>
    );
}

4. State với Hooks

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

5. useEffect Hook

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { useState, useEffect } from 'react';

function DataFetcher() {
    const [data, setData] = useState(null);
    
    useEffect(() => {
        fetch('/api/data')
            .then(res => res.json())
            .then(data => setData(data));
    }, []);
    
    return <div>{data && <p>{data.message}</p>}</div>;
}

📖 Nội dung cần học

Components và JSX
Props và State
Hooks (useState, useEffect, useContext)
Event Handling
Conditional Rendering
Lists và Keys
Forms
React Router
Context API