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à component. Tạo các React component của riêng bạn như Thumbnail, LikeButton, và 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, việ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 component được viết bởi những người, nhóm và tổ chức độc lập.
Viết component bằng code và markup
React component 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 câu lệnh if. Hiển thị một danh sách? Hãy thử map() của mảng. 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
React component nhận dữ liệu và trả về những gì sẽ xuất hiện trên màn hình. Bạn có thể truyền cho chúng dữ liệu mới để đáp ứng một tương tác, chẳng hạn như khi người dùng nhập vào một input. Sau đó, React sẽ cập nhật màn hình để phù hợp với 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. Thêm React vào trang HTML hiện có của bạn và hiển thị các React component tương tác ở bất kỳ đâu trên đó.
Đi 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 nó không quy định cách thực hiện routing và tìm nạp dữ liệu. Để xây dựng toàn bộ ứng dụng bằng React, chúng tôi khuyên bạn nên sử dụng một React framework full-stack 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 triển khai nó cho phép bạn tìm nạp dữ liệu trong các component không đồng bộ chạy trên server hoặc thậm chí trong quá trình build. Đọc dữ liệu từ một file hoặc một database và chuyển nó xuống các component tương tác của bạn.
Sử dụng những gì tốt nhất từ mọi nền tảng
Mọi người yêu thích các ứ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 bằng cách sử dụng cùng một kỹ năng. Nó dựa vào những điểm mạnh riêng của mỗi nền tảng để cho phép giao diện của bạn có cảm giác phù hợp trên mọi nền tảng.
Luôn đúng với web
Mọi người mong đợi các trang ứng dụng web tải nhanh. Trên server, React cho phép bạn bắt đầu streaming HTML trong khi bạn vẫn đang tìm nạp dữ liệu, lần lượt điền vào nội dung còn lại trước khi bất kỳ code JavaScript nào được tải. Trên client, React có thể sử dụng các API web tiêu chuẩn để giữ cho UI của bạn phản hồi nhanh ngay cả khi đang hiển thị.
Đi thật sự native
Mọi người mong đợi các ứng dụng native trông và cảm thấy giống như nền tảng của họ.React Native và Expo cho phép bạn xây dựng các ứng dụng bằng React cho Android, iOS, v.v. Chúng trông và cảm thấy native vì UI của chúng là thực sự native. Đó không phải là một web view—các React component của bạn hiển thị các view Android và iOS thực do nền tảng cung cấp.
Với React, bạn có thể trở thành một nhà phát triển web và native. Nhóm của bạn có thể ship đế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ể thu hẹp các silo nền tảng và thành lập các nhóm sở hữu toàn bộ các tính năng đầu cuối.
Nâng cấp khi tương lai đã sẵn sàng
React tiếp cận những thay đổi một cách cẩn thận. Mọi commit React đều được kiểm tra trên các bề mặt quan trọng đối với doanh nghiệp với hơn một tỷ người dùng. Hơn 100.000 React component tại Meta giúp xác thực mọi chiến lược di chuyển.
Nhóm React luôn nghiên cứu cách cải thiện React. Một số nghiên cứu mất nhiều năm để đơm hoa kết trái. React có một tiêu chuẩn cao để đưa một ý tưởng nghiên cứu vào sản xuất. Chỉ những cách tiếp cận đã được chứng minh mới trở thành một phần của React.
Tham gia một cộng đồng
của hàng triệu người
Bạn không hề đơn độc. Hai triệu nhà phát triển từ khắp nơi trên thế giới truy cập tài liệu React mỗi tháng. React là một 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í là một hệ sinh thái. React là một cộng đồng. Đó là một nơi mà bạn có thể yêu cầu 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ả nhà phát triển và nhà thiết kế, người mới bắt đầu và chuyên gia, nhà nghiên cứu và nghệ sĩ, giáo viên và học sinh. Nền tảng của chúng ta có thể rất khác nhau, nhưng React cho phép tất cả chúng ta cùng nhau tạo ra giao diện người dùng.
