React là gì?

Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 1 trên 42.

React là thư viện phổ biến nhất thế giới để xây dựng giao diện người dùng. Facebook, Netflix, Airbnb: những phần tương tác trên web mà bạn sử dụng hằng ngày đều được xây dựng bằng thư viện này.

Ý tưởng chính rất đơn giản: thay vì viết một trang thật lớn, bạn tạo những phần nhỏ có thể tái sử dụng, gọi là thành phần. Một nút là một thành phần. Một thẻ hồ sơ là một thành phần. Cả trang chỉ gồm các thành phần nằm bên trong những thành phần khác.

Component không có gì đáng sợ: đó là một hàm JavaScript trả về nội dung sẽ xuất hiện trên màn hình:

function App() {
    return <h1>Hello, React!</h1>;
}

Thứ trông giống HTML bên trong JavaScript này được gọi là JSX. Nó cho phép bạn mô tả màn hình ngay tại nơi chứa logic. React lấy nội dung mà các thành phần của bạn trả về và giữ cho trang thực tế luôn đồng bộ. Bạn mô tả điều mình muốn, React sẽ tìm cách cập nhật trình duyệt.

Trong khóa học này, bạn sẽ chỉnh sửa App.jsx, thành phần chính của một ứng dụng React nhỏ. Khung xem trước bên phải hiển thị ứng dụng trực tiếp khi bạn nhập. Cùng xây dựng một ứng dụng nhé.

Thử thách

Người mới

Đây là thành phần React đầu tiên của bạn, mình đã viết sẵn.

Bạn cần làm gì:

Đọc App.jsx: đây là một hàm trả về JSX.
Nhấn nút Chạy.
Xem bản xem trước ở bên phải hiển thị nội dung mà thành phần trả về.

Đó là toàn bộ vòng lặp React: một thành phần trả về JSX và React hiển thị nội dung đó trên màn hình. Bắt đầu từ bài học tiếp theo, bạn sẽ tự viết JSX.

Tự làm thử

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>