Sau khi Create React App bị deprecated, React hiện chính thức khuyến nghị bắt đầu bằng framework.
Cách mới để bắt đầu với React: từ Create React App sang framework
Nếu bạn muốn xây dựng một ứng dụng hoặc website mới bằng React, tốt nhất nên bắt đầu từ framework.
Nếu ứng dụng của bạn có những ràng buộc mà các framework hiện có không đáp ứng tốt, hoặc bạn thích tự xây dựng framework riêng, hoặc chỉ muốn học những kiến thức cơ bản của ứng dụng React, bạn có thể xây dựng ứng dụng React từ đầu.
Framework full-stack
Các framework được khuyến nghị này hỗ trợ mọi tính năng cần thiết để triển khai và mở rộng ứng dụng trong môi trường production. Chúng tích hợp các tính năng React hiện đại và tận dụng kiến trúc của React.
Framework full-stack không bắt buộc phải có server
Tất cả framework trên trang này đều hỗ trợ client-side rendering (CSR), single-page app (SPA) và static site generation (SSG). Các ứng dụng này có thể được triển khai lên CDN hoặc dịch vụ static hosting mà không cần server. Ngoài ra, các framework này cũng cho phép bạn thêm server-side rendering theo từng route nếu phù hợp với trường hợp sử dụng.
Điều này có nghĩa là bạn có thể bắt đầu với một ứng dụng chỉ chạy phía client, rồi sau này nếu yêu cầu thay đổi, bạn có thể chọn dùng tính năng phía server cho từng route riêng lẻ mà không cần viết lại ứng dụng. Hãy tham khảo tài liệu của framework để biết cách cấu hình chiến lược render.
Next.js (App Router)
App Router của Next.js là một React framework cho phép xây dựng ứng dụng React full-stack bằng cách tận dụng tối đa kiến trúc của React.
npx create-next-app@latest
Next.js được Vercel duy trì. Bạn có thể build ứng dụng Next.js để triển khai trên Node.js, serverless hosting hoặc server riêng. Next.js cũng hỗ trợ static export không cần server. Vercel ngoài ra còn cung cấp các dịch vụ cloud trả phí theo hình thức opt-in.
React Router (v7)
React Router là thư viện routing phổ biến nhất trong hệ sinh thái React, và khi dùng cùng Vite, nó có thể tạo thành một React framework full-stack. Nó nhấn mạnh vào Web API tiêu chuẩn và có sẵn các template triển khai được chuẩn bị cho nhiều JavaScript runtime và nền tảng khác nhau.
Để tạo một framework React Router mới, hãy dùng lệnh sau.
npx create-react-router@latest
React Router được Shopify duy trì.
Expo (cho ứng dụng native)
Expo là một React framework cho phép tạo ứng dụng đa nền tảng cho Android, iOS và web bằng native UI. Nó cung cấp React Native SDK giúp việc sử dụng các phần native trở nên dễ dàng hơn. Để tạo một dự án Expo mới, hãy dùng lệnh sau.
npx create-expo-app@latest
Nếu bạn mới dùng Expo, hãy tham khảo hướng dẫn Expo.
Expo được duy trì bởi Expo (the company). Việc build ứng dụng với Expo là miễn phí và bạn có thể gửi lên Google hoặc Apple Store mà không bị hạn chế. Expo ngoài ra còn cung cấp các dịch vụ cloud trả phí theo hình thức opt-in.
Các framework khác
Còn có một số framework mới nổi khác đang tiến tới tầm nhìn React full-stack.
- TanStack Start (Beta): TanStack Start là một React framework full-stack dựa trên TanStack Router. Nó cung cấp SSR toàn bộ tài liệu, streaming, server function, bundling và nhiều công cụ hữu ích khác thông qua Nitro hoặc Vite.
- RedwoodJS: Redwood là một React framework full-stack với các package và cấu hình được tích hợp sẵn để giúp tạo ứng dụng web full-stack một cách dễ dàng.
Những tính năng nào tạo nên tầm nhìn kiến trúc full-stack của đội ngũ React?
Bundler của App Router trong Next.js triển khai đầy đủ đặc tả chính thức của React Server Components. Điều này cho phép bạn kết hợp component chạy lúc build, component chỉ chạy trên server và component tương tác trong cùng một React tree.
Ví dụ, bạn có thể viết một React component chỉ chạy trên server dưới dạng một hàm async đọc cơ sở dữ liệu hoặc file. Sau đó bạn có thể truyền dữ liệu đó sang component tương tác.
// Component này *chỉ* chạy trên server (hoặc chỉ trong lúc build).
async function Talks({ confId }) {
// 1. Nếu ở server, bạn có thể giao tiếp với tầng dữ liệu. Không cần API endpoint.
const talks = await db.Talks.findAll({ confId });
// 2. Ngay cả khi thêm logic render, kích thước JavaScript bundle cũng không tăng đáng kể.
const videos = talks.map(talk => talk.video);
// 3. Truyền dữ liệu sang component sẽ chạy trong trình duyệt.
return <SearchableVideoList videos={videos} />;
}
App Router của Next.js tích hợp Suspense với việc truy xuất dữ liệu. Nó cho phép bạn chỉ định trực tiếp trạng thái loading (ví dụ: skeleton placeholder) cho các giao diện người dùng khác nhau trong React tree.
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
Server Components và Suspense là tính năng của React, không phải của riêng Next.js. Tuy nhiên, để áp dụng chúng ở cấp độ framework cần có sự đầu tư và công sứ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. Đội ngũ React đang hợp tác với các nhà phát triển bundler để giúp các framework thế hệ tiếp theo triển khai những tính năng này dễ dàng hơn.
Bắt đầu từ đầu
Nếu ứng dụng của bạn có những ràng buộc mà các framework hiện có không đáp ứng tốt, hoặc bạn thích tự xây dựng framework riêng, hoặc muốn học các kiến thức nền tảng của ứng dụng React, vẫn có những lựa 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 nhiều sự linh hoạt hơn, nhưng bạn sẽ phải tự chọn công cụ cho routing, lấy dữ liệu và các kiểu sử dụng phổ biến khác. Nó khá giống với việc tự xây dựng framework của riêng mình thay vì dùng framework đã có sẵn. Các framework mà chúng tôi khuyến nghị đều có giải pháp tích hợp sẵn cho những vấn đề này.
Nếu muốn tự xây dựng giải pháp riêng, hãy tham khảo hướng dẫn tạo ứng dụng React từ đầu, nơi bạn có thể bắt đầu với các build tool như Vite, Parcel hoặc RSbuild.
6 bình luận
React chỉ là một thư viện UI dựa trên component. Chỉ riêng việc hiển thị component trên HTML thì rất dễ, nhưng để xây dựng một website hay ứng dụng thì cần rất nhiều tính năng. Vì vậy, framework được khuyến nghị. Điều này không chỉ đúng với React, mà phần lớn web hiện đại ngày nay cũng được xây dựng thông qua các web framework. Ngoài ra, React không nhất thiết phải đi cùng framework dựa trên React; nó cũng có thể được sử dụng cùng các web framework được xây dựng bằng nhiều ngôn ngữ khác nhau (ví dụ: Go, Rust, Java, v.v.), vì thế lựa chọn cuối cùng luôn thuộc về người dùng.
Mình nghĩ rằng trong tình huống không biết lập trình viên sẽ dùng React dưới những ràng buộc nào, tài liệu chính thức nên được viết trong một môi trường gần với vanilla nhất có thể.
React không nhất thiết phải đi kèm với framework dựa trên React mà có thể dùng cùng các web framework được xây dựng bằng nhiều ngôn ngữ khác nhau (ví dụ: Go, Rust, Java, v.v.), nên
-> thực ra vì lý do này, tôi nghĩ phần get started trong tài liệu chính thức của React ít nhất nên được hướng dẫn theo cách dùng riêng React với ít phụ thuộc khác nhất có thể.
Ừm... xét từ góc độ một người cũng mới học React gần đây,
việc CRA bị ngừng phát triển khiến mình khá bối rối vì tài liệu mình có đều dựa trên CRA, nên mình cũng đã tìm hiểu qua Next, React Router các thứ, nhưng chúng đều là những dạng đã được thêm vào các công nghệ riêng của chúng, nên với người đang học React thì có vẻ không thật sự phù hợp.. Cá nhân mình thấy Vite có lẽ vẫn ổn hơn.
React hiện chính thức khuyến nghị bắt đầu bằng framework -> dù đây cũng là câu chuyện đã quá muộn, nhưng ngay từ tài liệu chính thức của React đã khuyên nên bắt đầu với một framework hay build tool cụ thể thì liệu có thật sự hợp lý không.
Cũng có những trường hợp không thể dùng framework hay build tool đó trong codebase hiện có, và bản thân việc tăng thêm dependency cũng có thể khiến người ta thấy khá áp lực.
Có lẽ hồi chỉ cần nhét một thẻ script vào HTML là có thể dùng ngay tính năng của thư viện đó vẫn khiến tôi thấy thoải mái hơn. Có phải là câu chuyện quá xưa rồi không...
Tôi cũng thấy không nhất thiết phải như vậy.