Menu Close

[Reactjs] Hiểu cấu trúc của một project reactjs tạo ra bởi create-react-js

Cấu trúc của một react js app

Tổng quát cấu trúc

- node_modules
- public
    + index.html
- src
    + App.js
    + index.js
package-lock.json
package.json

Thư mục node_modules

  • Đây là nơi chứa các js module có liên quan đến project được tải về khi sử dụng npm install

package-lock.json và package.json

  • Đây là các file chứa danh sách các js module liên quan cũng như phiên bản của các js module để react js app hoạt động.
  • Và khi di chuyển project sang nơi khác thì chỉ cần npm install thì các js module liệt kê trong package.json sẽ được tải về và source code của các module này sẽ lưu ở thư mục node_modules

Thư mục public

  • Đây là thư mục chứa các resource public ra ngoài mà các từ trình duyệt có thể truy vấn và lấy trực tiếp
  • Trong này thường chứa file index.html. File này là file gốc của toàn bộ chưa trình, nội dung file này khá đơn giản chứa thành phần chính duy nhất là một div có id là root. Div này sẽ là nơi chứa nội dung từ react js app.
  • Ở thư mục này cũng là nơi chứa các resource khác như font, hình ảnh,….

Thư mục src

  • Đây là thư mục mà lập trình viên sẽ làm việc hính. Nó chứa toàn bộ source code react js ở đây.
  • Ở thư mục này thường có một file index.js. File này sẽ thực hiện là đổ nội dung chính vào file index.html ở thư mục public tại vị trí div có id là root

Leave a Reply

Your email address will not be published. Required fields are marked *