Giải Phẫu Cấu Trúc Thư Mục Dự Án React & Vòng Đời Bootstrapping

Khám phá vai trò của từng file và folder (index.html, package.json, src/, public/, main.tsx, App.tsx) và cách ReactDOM gắn kết ứng dụng vào trình duyệt.

Core Mental Model

Một ứng dụng React SPA chỉ có duy nhất một file HTML rỗng (index.html) chứa thẻ <div id='root'>. File main.tsx đóng vai trò cầu nối, dùng ReactDOM.createRoot để khởi động React và render Component gốc <App /> vào thẻ root đó.

Key Takeaways & Principles

index.html là cửa ngõ duy nhất của trình duyệt: Nó chỉ chứa thẻ <div id='root'></div> và thẻ nạp mã <script type='module' src='/src/main.tsx'>.

src/main.tsx là trái tim khởi động (Bootstrapping): Tìm phần tử root trên DOM thật và gọi ReactDOM.createRoot(...).render(<App />) để trao quyền điều khiển cho React.

src/ chứa toàn bộ mã nguồn do lập trình viên viết (App.tsx, components/, styles), trong khi public/ chứa các asset tĩnh nguyên bản (favicon, robots.txt) không qua xử lý bundler.

package.json khai báo danh tính dự án, phân biệt dependencies (chạy trên trình duyệt) và devDependencies (chỉ dùng lúc code/build).

React Core Foundations

beginner

15 phút

#React Basics

#Project Anatomy

#Folder Structure

#Bootstrapping

#index.html