Bắt đầu
Create React App là một cách được hỗ trợ chính thức để tạo các ứng dụng React một trang. Nó cung cấp thiết lập xây dựng hiện đại mà không cần cấu hình.
Bắt đầu nhanh
npx create-react-app my-appcd my-appnpm start
Sao chép
Nếu trước đây bạn đã cài đặt
create-react-apptoàn cầu quanpm install -g create-react-app, chúng tôi khuyên bạn nên gỡ cài đặt gói bằngnpm uninstall -g create-react-apphoặcyarn global remove create-react-appđể đảm bảonpxluôn sử dụng phiên bản mới nhất.
( npx đi kèm với npm 5.2+ trở lên, xem hướng dẫn cho các phiên bản npm cũ hơn )
Sau đó mở http://localhost:3000/ để xem ứng dụng của bạn.
Khi bạn đã sẵn sàng triển khai vào sản xuất, hãy tạo một gói thu nhỏ bằng npm run build.
Bắt đầu ngay lập tức
Bạn không cần phải cài đặt hoặc cấu hình các công cụ như webpack hoặc Babel. Chúng được cấu hình sẵn và ẩn để bạn có thể tập trung vào mã.
Tạo một dự án và bạn đã sẵn sàng.
Tạo ứng dụng
Bạn sẽ cần phải có Node >= 14 trên máy phát triển cục bộ của mình (nhưng không bắt buộc trên máy chủ). Bạn có thể sử dụng nvm (macOS/Linux) hoặc nvm-windows để chuyển đổi phiên bản Node giữa các dự án khác nhau.
Để tạo ứng dụng mới, bạn có thể chọn một trong các phương pháp sau:
npx
npx create-react-app my-app
Sao chép
( npx đi kèm với npm 5.2+ trở lên, xem hướng dẫn cho các phiên bản npm cũ hơn )
npm
npm init react-app my-app
Sao chép
npm init <initializer>có sẵn trong npm 6+
Sợi len
yarn create react-app my-app
Sao chép
yarn createcó sẵn trong Yarn 0.25+
Chọn mẫu
Bây giờ bạn có thể tùy chọn khởi động một ứng dụng mới từ mẫu bằng cách thêm --template [template-name]vào lệnh tạo.
Nếu bạn không chọn mẫu, chúng tôi sẽ tạo dự án của bạn bằng mẫu cơ sở của chúng tôi.
Các mẫu luôn được đặt tên theo định dạng cra-template-[template-name], tuy nhiên bạn chỉ cần cung cấp [template-name]cho lệnh tạo.
npx create-react-app my-app --template [template-name]
Sao chép
Bạn có thể tìm danh sách các mẫu có sẵn bằng cách tìm kiếm "cra-template- * " trên npm.
Tài liệu Mẫu tùy chỉnh của ch úng tôi mô tả cách bạn có thể xây dựng mẫu của riêng mình.
Tạo ứng dụng
Bạn có thể bắt đầu một ứng dụng TypeScript mới bằng cách sử dụng mẫu. Để sử dụng mẫu TypeScript do chúng tôi cung cấp, hãy thêm --template typescriptvào lệnh tạo.
npx create-react-app my-app --template typescript
Sao chép
Nếu bạn đã có một dự án và muốn thêm TypeScript, hãy xem tài liệu Thêm TypeScript của chúng tôi .
Chọn trình quản lý
Khi bạn tạo một ứng dụng mới, CLI sẽ sử dụng npm hoặc Yarn để cài đặt các phụ thuộc, tùy thuộc vào công cụ bạn sử dụng để chạy create-react-app. Ví dụ:
# Run this to use npmnpx create-react-app my-app# Or run this to use yarnyarn create react-app my-app
Sao chép
Đầu ra
Chạy bất kỳ lệnh nào trong số các lệnh này sẽ tạo một thư mục có tên my-appbên trong thư mục hiện tại. Bên trong thư mục đó, nó sẽ tạo cấu trúc dự án ban đầu và cài đặt các phụ thuộc chuyển tiếp:
my-app├── README.md├── node_modules├── package.json├── .gitignore├── public│ ├── favicon.ico│ ├── index.html│ ├── logo192.png│ ├── logo512.png│ ├── manifest.json│ └── robots.txt└── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js └── setupTests.js
Sao chép
Không cần cấu hình hay cấu trúc thư mục phức tạp, chỉ cần các tệp bạn cần để xây dựng ứng dụng. Sau khi cài đặt xong, bạn có thể mở thư mục dự án của mình:
cd my-app
Sao chép
Kịch bản
Bên trong dự án mới tạo, bạn có thể chạy một số lệnh tích hợp:
npm starthoặcyarn start
Chạy ứng dụng ở chế độ phát triển. Mở http://localhost:3000 để xem trong trình duyệt.
Trang sẽ tự động tải lại nếu bạn thay đổi mã. Bạn sẽ thấy lỗi xây dựng và cảnh báo lint trong bảng điều khiển.
npm testhoặcyarn test
Chạy trình theo dõi thử nghiệm ở chế độ tương tác. Theo mặc định, chạy các thử nghiệm liên quan đến các tệp đã thay đổi kể từ lần xác nhận cuối cùng.
npm run buildhoặcyarn build
Xây dựng ứng dụng để sản xuất vào buildthư mục. Nó đóng gói React đúng cách ở chế độ sản xuất và tối ưu hóa bản dựng để có hiệu suất tốt nhất.
Bản dựng được thu nhỏ và tên tệp bao gồm các giá trị băm.
Ứng dụng của bạn đã sẵn sàng để triển khai.