SWP

1. Cấu trúc dự án:

Sau khi clone source code thành công, bạn sẽ thấy 1 bộ source code được tạo bởi Vite và được viết bằng TypeScript có cấu trúc cơ bản như sau:

lua
my-react-ts-app/
├── src/
│   ├── App.tsx
│   ├── index.tsx
├── package.json
├── tsconfig.json
├── vite.config.js
  • "src/": Đây là nơi lưu trự tất cả code trong dự án bao gồm giao diện và cả các xử lý logic.
  • "src/App.tsx": Đây là component chính mà chúng ta sẽ tương tác.
  • "src/index.tsx": Đây là nơi cấu hình của ReactJS để render ra giao diện người dùng.
  • "package.json": Đây là nơi lưu các thông số dự án như tên dự án, version dự án. Ngoài ra còn là nơi chưa các thư viện dùng trong dự án
  • "tsconfig.json": Đây là file để lưu các cấu hình của TypeScript . Đây giống như 1 bảng hướng dẫn giúp reactjs có thể dễ dàng build dự án TypeScript và chuyển đổi nó về ngôn ngữ JavaScript một cách dễ dàng
  • "vite.config.js": Đây là file cấu hình của Vite.

2. Các thư viện

Như đã đề cập ở trên "package.json" sẽ lưu tất cả thông tin dự án kể cả các thư viện dự án đang sử dụng. Các thư viện ở đây bao gồm cả những thư viện trong gia đoạn phát triển như TypeScript , Sass,... cũng như các thư viện sử dụng trong giai đoạn production.

3. Nguyên lý vận hành

Khi chạy source code, ReactJS sẽ chạy lệnh document.getElementById('root')để tìm ra thư mục root trong file /index.html và sau đó react sẽ làm nhiệm vụ render hết tất cả các giao diện và logic có trong App component vào root. Sau đó người dùng sẽ thấy được giao diện hoàn chỉnh.

javascript
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
)

aaa