Nếu bạn muốn xây dựng một ứng dụng hoặc trang web mới bằng React, chúng tôi khuyên bạn nên bắt đầu với một framework.
Nếu ứng dụng của bạn có những hạn chế mà các framework hiện có không đáp ứng được, bạn thích tự xây dựng framework của riêng mình hoặc bạn chỉ muốn tìm hiểu những điều cơ bản của một ứng dụng React, bạn có thể xây dựng một ứng dụng React từ đầu.
Các framework Full-stack
Các framework được đề xuất này hỗ trợ tất cả các tính năng bạn cần để triển khai và mở rộng ứng dụng của mình trong môi trường production. Chúng đã tích hợp các tính năng React mới nhất và tận dụng kiến trúc của React.
Next.js (App Router)
App Router của Next.js là một framework React tận dụng tối đa kiến trúc của React để cho phép các ứng dụng React full-stack.
Next.js được duy trì bởi Vercel. Bạn có thể triển khai một ứng dụng Next.js tới bất kỳ Node.js hoặc dịch vụ lưu trữ serverless nào hoặc tới máy chủ của riêng bạn. Next.js cũng hỗ trợ xuất tĩnh mà không yêu cầu máy chủ. Vercel cũng cung cấp các dịch vụ đám mây trả phí tùy chọn.
React Router (v7)
React Router là thư viện định tuyến phổ biến nhất cho React và có thể được ghép nối với Vite để tạo một framework React full-stack. Nó nhấn mạnh các API Web tiêu chuẩn và có một số template sẵn sàng để triển khai cho các runtime và nền tảng JavaScript khác nhau.
Để tạo một dự án framework React Router mới, hãy chạy:
React Router được duy trì bởi Shopify.
Expo (cho ứng dụng native)
Expo là một framework React cho phép bạn tạo các ứng dụng Android, iOS và web đa năng với giao diện người dùng native thực sự. Nó cung cấp một SDK cho React Native giúp các phần native dễ sử dụng hơn. Để tạo một dự án Expo mới, hãy chạy:
Nếu bạn mới làm quen với Expo, hãy xem hướng dẫn về Expo.
Expo được duy trì bởi Expo (công ty). Xây dựng ứng dụng bằng Expo là miễn phí và bạn có thể gửi chúng lên các cửa hàng ứng dụng của Google và Apple mà không bị hạn chế. Expo cũng cung cấp các dịch vụ đám mây trả phí tùy chọn.
Các framework khác
Có những framework mới nổi khác đang hướng tới tầm nhìn React full-stack của chúng tôi:
- TanStack Start (Beta): TanStack Start là một framework React full-stack được hỗ trợ bởi TanStack Router. Nó cung cấp SSR toàn bộ tài liệu, streaming, các hàm server, bundling và hơn thế nữa bằng cách sử dụng các công cụ như Nitro và Vite.
- RedwoodJS: Redwood là một framework React full-stack với rất nhiều gói và cấu hình được cài đặt sẵn, giúp bạn dễ dàng xây dựng các ứng dụng web full-stack.
Tìm hiểu sâu
Bundler App Router của Next.js triển khai đầy đủ đặc tả React Server Components chính thức. Điều này cho phép bạn kết hợp các thành phần build-time, chỉ dành cho server và tương tác trong một cây React duy nhất.
Ví dụ: bạn có thể viết một thành phần React chỉ dành cho server dưới dạng một hàm async đọc từ cơ sở dữ liệu hoặc từ một tệp. Sau đó, bạn có thể truyền dữ liệu từ đó xuống các thành phần tương tác của mình:
// Thành phần này chỉ chạy trên server (hoặc trong quá trình build).
async function Talks({ confId }) {
// 1. Bạn đang ở trên server, vì vậy bạn có thể nói chuyện với lớp dữ liệu của mình. Không yêu cầu API endpoint.
const talks = await db.Talks.findAll({ confId });
// 2. Thêm bất kỳ lượng logic hiển thị nào. Nó sẽ không làm cho bundle JavaScript của bạn lớn hơn.
const videos = talks.map(talk => talk.video);
// 3. Truyền dữ liệu xuống các thành phần sẽ chạy trong trình duyệt.
return <SearchableVideoList videos={videos} />;
}App Router của Next.js cũng tích hợp tìm nạp dữ liệu với Suspense. Điều này cho phép bạn chỉ định trạng thái tải (như một placeholder skeleton) cho các phần khác nhau của giao diện người dùng của bạn trực tiếp trong cây React của bạn:
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>Server Components và Suspense là các tính năng của React chứ không phải là tính năng của Next.js. Tuy nhiên, việc áp dụng chúng ở cấp độ framework đòi hỏi sự chấp thuận và công việc triển khai không hề nhỏ. Hiện tại, Next.js App Router là triển khai hoàn chỉnh nhất. Nhóm React đang làm việc với các nhà phát triển bundler để giúp các tính năng này dễ triển khai hơn trong thế hệ framework tiếp theo.
Bắt đầu từ đầu
Nếu ứng dụng của bạn có những hạn chế mà các framework hiện có không đáp ứng được, bạn thích tự xây dựng framework của riêng mình hoặc bạn chỉ muốn tìm hiểu những điều cơ bản của một ứng dụng React, thì có những tùy chọn khác để bắt đầu một dự án React từ đầu.
Bắt đầu từ đầu mang lại cho bạn sự linh hoạt hơn, nhưng đòi hỏi bạn phải đưa ra lựa chọn về công cụ nào sẽ sử dụng cho định tuyến, tìm nạp dữ liệu và các mẫu sử dụng phổ biến khác. Nó giống như việc xây dựng framework của riêng bạn hơn là sử dụng một framework đã tồn tại. Các framework mà chúng tôi khuyên dùng có các giải pháp tích hợp cho những vấn đề này.
Nếu bạn muốn xây dựng các giải pháp của riêng mình, hãy xem hướng dẫn của chúng tôi về xây dựng một ứng dụng React từ đầu để biết hướng dẫn về cách thiết lập một dự án React mới bắt đầu với một công cụ build như Vite, Parcel hoặc RSbuild.
Nếu bạn là tác giả của một framework và muốn được đưa vào trang này, vui lòng cho chúng tôi biết.