Tạo giao diện người dùng từ các component
React cho phép bạn xây dựng giao diện người dùng từ các phần riêng lẻ được gọi là thành phần (component). Tạo các component riêng của bạn như Thumbnail, LikeButton, and Video. Sau đó kết hợp chúng thành toàn bộ màn hình, trang và ứng dụng
Cho dù bạn làm việc một mình hay với hàng ngàn nhà phát triển khác, sử dụng React đều mang lại cảm giác như nhau. Nó được thiết kế để cho phép bạn kết hợp liền mạch các thành phần được viết bởi những người, nhóm và tổ chức độc lập.
Viết các thành phần(components) với mã và đánh dấu
Các thành phần React là các hàm JavaScript. Bạn muốn hiển thị một số nội dung có điều kiện? Sử dụng một if câu lệnh. Hiển thị một danh sách? Hãy thử mảng map(). Học React là học lập trình.
Cú pháp đánh dấu này được gọi là JSX. Đây là phần mở rộng cú pháp JavaScript được React phổ biến. Đặt đánh dấu JSX gần với logic kết xuất liên quan giúp các thành phần React dễ tạo, bảo trì và xóa.
Thêm tính tương tác ở bất cứ đâu bạn cần
Các component trong React nhận dữ liệu và trả về những gì cần hiển thị trên màn hình. Bạn có thể truyền dữ liệu mới vào các component này khi có một sự kiện tương tác, ví dụ như khi người dùng nhập liệu vào ô input. React sẽ tự động cập nhật màn hình để hiển thị dữ liệu mới.
Bạn không cần phải xây dựng toàn bộ trang của mình bằng React. Bạn có thể thêm React vào trang HTML hiện tại và render các component React tương tác ở bất cứ đâu trên trang.
Xây dựng ứng dụng full-stack
với một framework
React là một thư viện. Nó cho phép bạn ghép các component lại với nhau, nhưng không hướng dẫn bạn cách làm routing hay lấy dữ liệu. Để xây dựng một ứng dụng hoàn chỉnh với React, chúng tôi khuyên bạn nên sử dụng một framework full-stack cho React như Next.js hoặc Remix.
confs/[slug].js
import { db } from './database.js';
import { Suspense } from 'react';
async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}
async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}
19 Videos
React cũng là một kiến trúc. Các framework áp dụng kiến trúc này cho phép bạn lấy dữ liệu trong các component bất đồng bộ chạy trên server hoặc thậm chí trong quá trình build. Bạn có thể đọc dữ liệu từ tệp hoặc cơ sở dữ liệu và truyền nó xuống các component tương tác của mình.
Sử dụng tốt nhất từ mỗi nền tảng
Người dùng yêu thích ứng dụng web và native vì những lý do khác nhau. React cho phép bạn xây dựng cả ứng dụng web và ứng dụng native sử dụng cùng một kỹ năng. Nó tận dụng các điểm mạnh riêng biệt của từng nền tảng để giúp giao diện của bạn cảm thấy hoàn hảo trên mọi nền tảng.
Hãy trung thành với Web
Mọi người mong đợi các trang web ứng dụng tải nhanh. Trên máy chủ, React cho phép bạn bắt đầu truyền phát HTML trong khi bạn vẫn đang lấy dữ liệu, dần dần điền vào nội dung còn lại trước khi bất kỳ mã JavaScript nào tải. Trên máy khách, React có thể sử dụng các API web chuẩn để giữ cho giao diện người dùng của bạn phản hồi ngay cả khi đang kết xuất.
Trở thành người bản sứ thực sự
Người dùng kỳ vọng các ứng dụng native phải trông và cảm nhận giống như nền tảng của chúngReact Native và Expo cho phép bạn xây dựng ứng dụng bằng React cho Android, iOS, và nhiều nền tảng khác. Chúng trông và hoạt động như ứng dụng native vì giao diện người dùng của chúng thực sự là native. Đây không phải là một web view — các component React của bạn sẽ render ra các view Android và iOS thực sự do nền tảng cung cấp.
Với React, bạn có thể trở thành lập trình viên web và native. Nhóm của bạn có thể triển khai lên nhiều nền tảng mà không làm giảm trải nghiệm người dùng. Tổ chức của bạn có thể kết nối các nền tảng riêng biệt và tạo nên các nhóm sở hữu toàn bộ tính năng từ đầu đến cuối.
Nâng cấp khi tương lai sẵn sàng
React tiếp cận các thay đổi một cách cẩn trọng. Mỗi lần commit của React đều được kiểm tra trên các nền tảng quan trọng với hơn một tỷ người dùng. Hơn 100.000 component React tại Meta giúp xác minh mọi chiến lược chuyển đổi.
Nhóm phát triển React luôn nghiên cứu cách cải tiến React. Một số nghiên cứu mất nhiều năm mới mang lại hiệu quả. React đặt ra tiêu chuẩn cao để một ý tưởng nghiên cứu được đưa vào sản phẩm. Chỉ những phương pháp đã được kiểm chứng mới trở thành một phần của React.
Tham gia cộng đồng
của hàng triệu người
Bạn không cô đơn. Hai triệu lập trình viên từ khắp nơi trên thế giới ghé thăm tài liệu React mỗi tháng. React là thứ mà mọi người và các nhóm có thể đồng ý.
Đây là lý do tại sao React không chỉ là một thư viện, một kiến trúc, hay thậm chí một hệ sinh thái. React là một cộng đồng. Đây là nơi bạn có thể yêu cầu sự giúp đỡ, tìm kiếm cơ hội, và gặp gỡ những người bạn mới. Bạn sẽ gặp cả lập trình viên và nhà thiết kế, người mới bắt đầu và người có kinh nghiệm, nhà nghiên cứu và nghệ sĩ, thầy cô và học sinh. Xuất thân của chúng ta có thể rất khác nhau, nhưng React giúp tất cả chúng ta cùng tạo ra giao diện người dùng.
