React là gì? Thư viện JavaScript xây dựng giao diện

React là một thư viện JavaScript để xây dựng giao diện người dùng từ các component. Bạn mô tả màn hình cần hiển thị gì với dữ liệu hiện tại, và React giữ cho trang luôn khớp khi dữ liệu đó thay đổi.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

React là một thư viện JavaScript để xây dựng giao diện người dùng từ các component. Bạn mô tả màn hình trông như thế nào với dữ liệu hiện tại, và khi dữ liệu thay đổi, React cập nhật trang cho khớp. React, React JS và ReactJS là cùng một thứ: một thư viện mã nguồn mở được tạo ra tại Facebook (nay là Meta).

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Bấm cả hai nút. Mỗi Counter giữ con số riêng của nó, vì mỗi cái là một bản sao riêng của component với state riêng. Thêm dòng thứ ba, <Counter label="Plums" />, và một bộ đếm độc lập mới xuất hiện.

Ví dụ ngắn đó đã cho thấy ba ý tưởng làm nền tảng cho React: component (Counter và App là các hàm trả về giao diện), JSX (cú pháp giống HTML bên trong return) và state (count, một giá trị khiến React vẽ lại component khi nó thay đổi).

Vấn đề mà React giải quyết

Giao diện người dùng là hình ảnh của một dữ liệu nào đó. Khi dữ liệu thay đổi, hình ảnh cũng phải thay đổi theo, và mọi phần của màn hình phụ thuộc vào dữ liệu đó đều phải thay đổi cùng. Không có thư viện, bạn phải tự viết code đó: tìm từng phần tử, rồi tự đặt nội dung chữ, class hoặc trạng thái hiển thị của nó. Mỗi tính năng mới lại thêm một chỗ bạn phải nhớ cập nhật.

React đảo ngược cách làm này. Bạn viết một hàm cho biết màn hình phải như thế nào với một state nhất định, và React tự tính xem những phần nào của trang cần thay đổi. Cách này gọi là giao diện khai báo (declarative), trái ngược với code mệnh lệnh (imperative) liệt kê từng thay đổi DOM theo từng bước. Đây là cả hai phong cách đặt cạnh nhau trong cùng một ví dụ:

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

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

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

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand giao đoạn văn của nó cho code DOM thuần (effect chỉ chạy code đó sau khi React đã tạo đoạn văn). Nó giữ con số trong một biến, tìm từng phần tử bằng querySelector và tự đặt nội dung chữ. Declarative chỉ nói "hiển thị số đếm, và hiển thị nó chẵn hay lẻ". Xóa dòng trong handleClick đặt .parity rồi bấm vài lần: hàng đầu tiên giờ khẳng định 3 là số chẵn, trong khi hàng thứ hai không thể lệch đi, vì nội dung chữ được tính từ count ở mỗi lần render.

React cập nhật trang như thế nào

Khi state thay đổi, React gọi lại hàm component của bạn. Lời gọi đó là một lần render. Hàm trả về một bản mô tả giao diện mới, React so sánh nó với bản trước, rồi chỉ thay đổi những phần khác nhau trên trang thật. Bản mô tả nằm trong bộ nhớ đó thường được gọi là virtual DOM.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

Mở console bên dưới phần xem trước và gõ vài chữ cái. Mỗi lần gõ phím ghi một lần render với giá trị mới. Ô nhập vẫn giữ focus và vị trí con trỏ, vì React chỉ đụng đến nội dung chữ của đoạn văn và giá trị của ô nhập, chứ không phải toàn bộ trang. Trang về render giải thích chính xác khi nào một component render lại.

Component, JSX và state trong nháy mắt

Component là các hàm JavaScript có tên bắt đầu bằng chữ in hoa. Chúng trả về những gì cần xuất hiện trên màn hình, và bạn dùng chúng như thẻ HTML: <Counter />. Một trang là một cây component, từ những cái nhỏ như một nút bấm đến những cái lớn như cả một màn hình cài đặt. Xem component.

JSX là cú pháp cho phép bạn viết markup ngay trong JavaScript. Dấu ngoặc nhọn đưa bạn trở lại JavaScript, nên {count} hiển thị một giá trị và {items.map(...)} biến một mảng thành một danh sách. Một công cụ build biên dịch JSX thành các lời gọi hàm thông thường trước khi trình duyệt chạy nó.

State là dữ liệu mà component ghi nhớ giữa các lần render. Bạn tạo nó bằng hook useState, và gọi hàm setter của nó là cách bạn báo cho React biết có gì đó đã thay đổi. Dữ liệu truyền từ component cha xuống component con thông qua props, tức các đối số của một component.

Ví dụ này dùng tất cả những thứ đó: một danh sách render từ một mảng trong state, và một biểu mẫu để thêm phần tử vào mảng.

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

Thêm một công việc và hai thứ thay đổi cùng lúc: danh sách và con số đếm bên dưới. Bạn chưa hề bảo con số đếm cập nhật. Cả hai đều đọc từ tasks, nên cả hai đều đi theo nó. Đổi mảng ban đầu thành [] và danh sách sẽ hiển thị "Nothing to do." thay thế.

Những gì React không phải

React là một thư viện, không phải một framework đầy đủ. Nó lo phần component, state và việc biến chúng thành giao diện, và cố ý bỏ qua một số thứ mà một ứng dụng hoàn chỉnh cần:

Định tuyến (routing). Không có sẵn cách ánh xạ URL tới các trang. React Router và router của các framework lấp vào chỗ trống đó.
Tải dữ liệu và render phía máy chủ. React cho bạn các công cụ như effect và Suspense, nhưng không quy định dữ liệu đến từ đâu hay trang được render trên máy chủ ra sao.
Thiết lập build. Trình duyệt không hiểu JSX, nên bạn cần một công cụ như Vite để biên dịch nó.

Các framework xây dựng trên React để cung cấp những phần này. Next.js và chế độ framework của React Router bổ sung routing, render phía máy chủ và tải dữ liệu, và đội ngũ React khuyên nên bắt đầu một ứng dụng đầy đủ với một trong số chúng. Với ứng dụng chạy phía máy khách hoặc để học, Vite cùng React thuần là điểm khởi đầu nhỏ gọn và nhanh; xem cách cài đặt React.

React và React Native

Bản thân React chỉ mô tả các component và cách chúng thay đổi. Một renderer riêng biến chúng thành thứ bạn nhìn thấy được. React DOM render ra trang web, và đó là thứ mọi ví dụ trên trang này dùng. React Native render cùng loại component thành các view gốc của iOS và Android, nên bạn viết <View> và <Text> thay cho <div> và <p>, và không có tệp HTML hay CSS nào. Component, props, state và hook hoạt động giống nhau ở cả hai, nên những gì bạn học ở đây dùng được ngay bên đó.

Khi nào nên học React

Hãy học React sau khi đã nắm JavaScript cơ bản, vì mọi thứ trong React đều là JavaScript. Trước khi bắt đầu, bạn nên thành thạo:

biến, hàm và arrow function
mảng cùng các phương thức map và filter của chúng
object, destructuring và cú pháp spread (...)
import và export
promise và async/await, để tải dữ liệu

Nếu những thứ đó đã quen thuộc, hãy bắt đầu với JSX và component, rồi đến props và state. Effect, ref, context và các công cụ tối ưu hiệu năng đến sau, khi việc xây dựng các component tương tác nhỏ đã trở nên tự nhiên.

Câu hỏi thường gặp

React dùng để làm gì?

React được dùng để xây dựng giao diện người dùng có tính tương tác: ứng dụng web, dashboard, biểu mẫu, ứng dụng một trang (single page app) và các phần của những trang web thông thường. Với React Native, cùng mô hình component đó còn xây dựng được ứng dụng iOS và Android.

React là framework hay thư viện?

React là một thư viện. Nó lo phần component, state và render, nhưng không có sẵn router, lớp tải dữ liệu hay thiết lập build. Các framework như Next.js và chế độ framework của React Router bổ sung những phần đó bên trên React.

React JS có giống React không?

Có. React, React JS và ReactJS là ba tên gọi của cùng một thư viện. Chữ "JS" có mặt vì React được viết bằng JavaScript và dành cho JavaScript.

Có cần biết JavaScript trước khi học React không?

Có. Component trong React là các hàm JavaScript, nên trước tiên bạn cần nắm vững hàm, mảng (map, filter), object, destructuring, arrow function, module và promise.

React và React Native khác nhau thế nào?

React mô tả giao diện dưới dạng các component. React DOM render các component đó thành trang web, còn React Native render chúng thành các view gốc trên thiết bị di động. Component, props, state và hook hoạt động giống nhau ở cả hai.

Khái niệm liên quan