2.1. Cấu trúc dự án

Với mỗi dự án sẽ có những quy định riêng cho cấu trúc mã nguồn. Dưới đây là cấu trúc phổ biến thường gặp của một dự án React.js

ptit_react_app/
├── node_modules/
├── 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
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock (hoặc package-lock.json nếu bạn dùng npm)

Giải thích:

• node_modules/: Chứa tất cả các package mà dự án cần sử dụng.

• public/: Thư mục này chứa các file tĩnh như HTML, hình ảnh.

  • index.html: Đây là file chính mà ứng dụng React sẽ render vào.

  • Các file khác như favicon.ico, logo192.png, logo512.png, manifest.json, và robots.txt là những tài nguyên cần thiết cho ứng dụng.

• src/: Thư mục chứa mã nguồn chính của ứng dụng.

  • App.js: Component chính của ứng dụng.

  • App.css: Styles cho App.js.

  • index.js: Điểm vào chính của ứng dụng, nơi mà React bắt đầu render.

  • index.css: Styles chung cho toàn bộ ứng dụng.

  • Các file khác như App.test.js, logo.svg, reportWebVitals.js, và setupTests.js dùng để test và theo dõi hiệu suất ứng dụng.

• .gitignore: Liệt kê các file/thư mục mà bạn không muốn commit vào Git.

• package.json: Chứa các thông tin về dự án, các dependencies, và các script để chạy hoặc build ứng dụng.

• README.md: Thông tin và hướng dẫn cho dự án.

• yarn.lock hoặc package-lock.json: Khóa các phiên bản của dependencies để đảm bảo tính nhất quán khi cài đặt trên các máy khác nhau.