Cài đặt môi trường React

1. Cài đặt Node.js và npm/yarn

React yêu cầu Node.js và một trình quản lý gói như npm hoặc yarn để hoạt động.

Bước 1: Tải và cài đặt Node.js từ trang web chính thức: https://nodejs.org

• Node.js bao gồm npm (Node Package Manager) đi kèm.

Bước 2: Kiểm tra cài đặt:

node -v					
npm -v					
yarn -v					

Nếu bạn muốn sử dụng Yarn, hãy cài đặt nó thông qua npm:

npm install -g yarn					

2. Tạo dự án React với Create React App

Create React App là công cụ giúp khởi tạo nhanh một dự án React với cấu hình sẵn.

Sử dụng npm:

npx create-react-app my-app					

Sử dụng yarn:

yarn create react-app my-app					

3. Chạy ứng dụng React

Di chuyển vào thư mục dự án và khởi chạy ứng dụng:

cd my-app					
npm start					

Hoặc nếu bạn sử dụng Yarn:

	yarn start					

Ứng dụng sẽ chạy tại http://localhost:3000.

Cấu trúc thư mục trong dự án React

Khi khởi tạo dự án React bằng Create React App, bạn sẽ thấy cấu trúc thư mục như sau:

my-app/					
├── node_modules/   // Thư viện phụ thuộc					
├── public/         // Tệp tĩnh, index.html					
├── src/            // Mã nguồn chính					
│   ├── App.js      // Component chính					
│   ├── index.js    // Điểm vào ứng dụng					
│   ├── components/ // Các component					
│   ├── assets/     // Hình ảnh, CSS					
├── .gitignore      // Các tệp cần bỏ qua khi commit					
├── package.json    // Cấu hình dự án					
├── README.md       // Hướng dẫn sử dụng		

Giải thích thư mục:

• public/: Chứa các tài nguyên tĩnh như hình ảnh, favicon, và tệp index.html.
• src/: Chứa mã nguồn chính của ứng dụng.
• components/: Nơi lưu trữ các thành phần React.
• assets/: Chứa hình ảnh, biểu tượng và file CSS.
• package.json: Thông tin và cấu hình dự án.
• node_modules/: Chứa tất cả các thư viện và phụ thuộc được cài đặt.

4. Tổng kết

• Node.js và npm/yarn là công cụ cần thiết để cài đặt và chạy ứng dụng React.
• Create React App giúp khởi tạo dự án React dễ dàng.
• Cấu trúc thư mục rõ ràng giúp quản lý dự án hiệu quả và dễ bảo trì.

Bây giờ bạn đã sẵn sàng để phát triển ứng dụng React của mình!