Tạo mới một ứng dụng React.

Sử dụng một chuỗi công cụ tích hợp để cho trải nghiệm của người dùng và nhà phát triển tốt nhất.

Trang này mô tả một số công cụ React phổ biến giúp thực hiện các tác vụ như sau:

• Mở rộng quy mô cho nhiều file và component.
• Sử dụng thư viện của bên thứ ba từ npm.
• Phát hiện sớm các lỗi thường gặp
• Chỉnh sử trực tiếp CSS và JS đang được phát triển.
• Tối ưu hóa đầu ra cho sản phẩm.

Các công cụ được đề xuất trên trang này không yêu cầu bắt buộc cấu hình để bắt đầu.

Bạn có thể không cần chuỗi công cụ này

Nếu bạn không gặp phải các vấn đề được mô tả ở trên hoặc chưa cảm thấy thoải mái khi sử dụng JavaScript tools, hãy xem xét thêm React dưới dạng thẻ <script> thuần túy trên trang HTML, tùy chọn với JSX.

Đây cũng là cách dễ nhất để tích hợp React vào một trang web hiện có. Bạn luôn có thể thêm một chuỗi công cụ lớn hơn nếu bạn thấy nó hữu ích!

Các loại công cụ được đề xuất

Nhóm React chủ yếu đề xuất các giải pháp này:

• Nếu bạn đang học React hoặc tạo một ứng dụng single-page mới, hãy sử dụng Tạo Ứng Dụng React.
• Nếu bạn đang xây dựng một server-rendered website với Node.js, hãy thử Next.js.
• Nếu bạn đang xây dựng một static content-oriented website, hãy thử Gatsby.
• Nếu bạn đang xây dựng một component library hoặc tích hợp với một codebase hiện có, hãy thử Các Loại Công Cụ Linh Hoạt Hơn.

Tạo Ứng Dụng React

Tạo Ứng Dụng React là một môi trường thoải mái để học React, và là cách tốt nhất để bắt đầu xây dựng một ứng dụng single-page mới trong React.

Nó thiết lập môi trường phát triển của bạn để bạn có thể sử dụng các tính năng JavaScript mới nhất, cung cấp trải nghiệm tốt cho nhà phát triển và tối ưu hóa ứng dụng của bạn để sản xuất. Bạn sẽ cần có Node> = 10.16 và npm> = 5.6 trên máy của mình. Để tạo một dự án, hãy chạy:

npx create-react-app my-app
cd my-app
npm start

Ghi chú

npx trên dòng đầu tiên không phải là lỗi đánh máy — nó là một công cụ chạy package đi kèm với npm 5.2+.

Tạo Ứng Dụng React không xử lý logic backend hay databases; nó chỉ tạo ra một đường dẫn xây dựng frontend, vì vậy bạn có thể sử dụng nó với bất cứ backend nào bạn muốn. Lớp bên dưới, nó sử dụng Babel và webpack, nhưng bạn không cần bất biết bất cứ thứ gì về chúng.

Khi bạn sẵn sàng để deploy lên production, hãy chạy npm run build sẽ tạo ra một bản ứng dụng của bạn đã được tối ưu hóa trong thư mục build. Bạn có thể học thêm về Tạo Ứng Dụng React từ chính README và Hướng Dẫn Sử Dụng.

Next.js

Next.js là một thư viện phổ biến và nhẹ cho static and server‑rendered applications được xây dựng bằng React. Nó bao gồm styling và routing solutions out of the box, và giả sử rằng bạn đang sử dụng Node.js như là môi trường máy chủ.

Học Next.js từ hướng dẫn chính thức của nó.

Gatsby

Gatsby là cách tốt nhất để tạo static websites với React. Nó cho phép bạn sử dụng React components, nhưng xuất ra HTML và CSS được kết xuất trước để đảm bảo thời gian tải nhanh nhất.

Học Gatsby từ hướng dẫn chính thức của nó và gallery of starter kits.

Các loại công cụ linh hoạt hơn

Các công cụ sau cung cấp nhiều sự lựa chọn và linh hoạt hơn. Chúng tôi giới thiệu chúng cho những người dùng có kinh nghiệm hơn:

• Neutrino kết hợp sức mạnh của webpack với sự đơn giản của các cài đặt trước và bao gồm một cài đặt trước cho React apps và React components.
• Nx là một bộ công cụ để phát triển full-stack monorepo, với hỗ trợ tích hợp cho React, Next.js, Express, và hơn thế nữa.
• Parcel là một gói ứng dụng web nhanh, không cấu hình hoạt động với React.
• Razzle là một server-rendering framework không yêu cầu bất kỳ cấu hình nào, nhưng nó cung cấp tính linh hoạt hơn Next.js.

Tạo một chuỗi công cụ từ đầu

Một chuỗi công cụ xây dựng JavaScript thường bao gồm:

• Một package manager, như là Yarn hoặc npm. Nó cho phép bạn tận dụng hệ sinh thái rộng lớn của các gói bên thứ ba và dễ dàng cài đặt hoặc cập nhật chúng.
• Một bundler, như là webpack hoặc Parcel. Nó cho phép bạn viết modular code và bundle nó lại với nhau thành các package nhỏ để tối ưu hóa thời gian tải.
• Một compiler như là Babel. Nó cho phép bạn viết code JavaScript hiện đại vẫn hoạt động trong các trình duyệt cũ hơn.

Nếu bạn muốn thiết lập chuỗi công cụ JavaScript của riêng mình từ đầu, hãy xem hướng dẫn này tái tạo một số chức năng Tạo Ứng Dụng React.

Đừng quên đảm bảo chuỗi công cụ tùy chỉnh của bạn được thiết lập chính xác cho production.