Bài 3: Cấu trúc file dự án React Native

🔗 Bài học khác trong chuyên mục:

Sau đây là Bài 3: Cấu trúc file dự án React Native. Đây là bài học cực kỳ quan trọng, giúp bạn hiểu bên trong một dự án React Native có gì, từ đó bạn sẽ dễ dàng tổ chức code gọn gàng, mở rộng và bảo trì ứng dụng về sau.

Sau khi bạn chạy lệnh expo init hello-react-native ở bài trước, Expo đã tạo sẵn cho bạn một bộ khung dự án. Nếu bạn mở thư mục đó trong VS Code, bạn sẽ thấy một loạt file và thư mục – có thể hơi rối rắm nếu bạn chưa quen.

Trong bài học này, mình sẽ giải thích từng phần trong dự án đó, gợi ý cách tổ chức code khi app lớn dần, và hướng dẫn thực hành để bạn làm quen với việc chỉnh sửa và thêm file mới.

Tổng quan các thành phần trong thư mục dự án

Khi bạn mở thư mục hello-react-native, bạn sẽ thấy cấu trúc như sau (nếu dùng Expo):

hello-react-native/
├── App.js
├── app.json
├── package.json
├── node_modules/
├── .gitignore
├── babel.config.js
├── assets/
└── ...

Chúng ta sẽ đi qua từng thành phần.

2. giải thích các file chính

1. App.js

Đây là file gốc của ứng dụng – là điểm bắt đầu khi bạn chạy app.
Có thể hiểu nó giống như “cổng vào” hay “màn hình khởi động” đầu tiên của ứng dụng React Native.

Tạm thời bạn sẽ viết toàn bộ giao diện và logic trong đây, nhưng khi app lớn dần, bạn sẽ tách từng phần ra thành component riêng.

2. app.json

Là file cấu hình cho Expo. Bạn có thể chỉnh các thông tin như:

{
  "expo": {
    "name": "hello-react-native",
    "slug": "hello-react-native",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png"
    },
    ...
  }
}

name: Tên app hiển thị khi cài lên máy
icon: Icon của app
splash: Hình ảnh màn hình chờ khi app khởi động

Sau này nếu bạn muốn đóng gói app để gửi khách hàng hay đưa lên App Store / CH Play, bạn sẽ cấu hình thêm ở đây.

3. package.json

File này giống như sổ ghi chép mọi thư viện bạn cài vào app. Nó cũng chứa:

Tên app
Phiên bản
Các script (cách chạy app, build, v.v.)
Danh sách các thư viện phụ thuộc

Ví dụ một đoạn trong đó:

"dependencies": {
  "expo": "~50.0.0",
  "react": "18.2.0",
  "react-native": "0.73.0"
}

Mỗi khi bạn cài thêm một thư viện (ví dụ React Navigation), nó sẽ được thêm vào đây.

4. node_modules/

Thư mục này chứa toàn bộ mã nguồn của thư viện bạn cài. Bạn không cần chỉnh sửa gì trong này, và cũng không nên gửi lên GitHub hoặc nén file gửi người khác. Vì người khác có thể chỉ cần dùng npm install để tự tạo lại.

5. .gitignore

File này quy định những gì sẽ bị bỏ qua khi đẩy code lên GitHub. Thường là node_modules/, file log, cache, thông tin bí mật…

6. babel.config.js

Là file cấu hình cho Babel – công cụ biên dịch code ES6/JSX của bạn thành code JavaScript thuần mà máy có thể hiểu. Bạn chưa cần quan tâm quá nhiều ở giai đoạn này.

7. assets/

Thư mục chứa tài nguyên tĩnh của app như ảnh, icon, font, âm thanh,…

Bạn có thể tạo thêm các thư mục con như:

assets/
├── images/
├── fonts/
├── icons/

Sau này, khi bạn cần dùng ảnh, bạn sẽ import kiểu như:

<Image source={require('./assets/images/logo.png')} />

Mở rộng cấu trúc thư mục khi dự án lớn

Khi ứng dụng lớn hơn, bạn không nên nhồi nhét mọi thứ vào App.js. Thay vào đó, hãy tách theo module như sau:

hello-react-native/
├── App.js
├── app.json
├── package.json
├── assets/
├── components/
│   ├── Header.js
│   ├── TodoItem.js
│   └── ...
├── screens/
│   ├── HomeScreen.js
│   ├── LoginScreen.js
│   └── ...
├── services/
│   └── api.js
├── constants/
│   └── colors.js
└── ...

components/: Chứa các khối giao diện có thể tái sử dụng (nút, danh sách, ô nhập,…)
screens/: Mỗi màn hình trong app là một file riêng
services/: Gọi API, thao tác với Firebase, v.v.
constants/: Chứa màu, font, giá trị dùng chung

Việc chia tách này giúp app dễ bảo trì hơn rất nhiều, nhất là khi bạn làm việc nhóm hoặc dự án kéo dài nhiều tháng.

Bài tập sau bài học

Bài tập 1:
Mở file App.js, thử chia giao diện ra thành component riêng. Ví dụ:

Tạo file WelcomeText.js trong thư mục components/
Di chuyển phần hiển thị “Hello React Native” vào đó
Import lại vào App.js và sử dụng

Bài tập 2:
Thêm một hình ảnh vào thư mục assets/images, hiển thị ảnh đó trong giao diện bằng component <Image />.

Bài tập 3:
Viết ghi chú tóm tắt lại:

Vai trò của từng file chính trong dự án
Những thư mục nào nên có khi app phát triển lớn

Kết luận

Bạn vừa tìm hiểu:

Cấu trúc cơ bản của một dự án React Native
Vai trò của từng file: App.js, app.json, package.json,…
Gợi ý tổ chức dự án khi làm việc thực tế
Thực hành chia component và thêm hình ảnh

Cấu trúc dự án giống như sườn nhà. Nếu bạn hiểu rõ nó từ đầu, bạn sẽ dễ dàng xây nhà cao tầng mà không đổ sập giữa chừng. Ở các bài tiếp theo, chúng ta sẽ bắt đầu xây dựng giao diện người dùng – nơi bạn thực sự nhìn thấy app mình đang tạo ra có hình dạng như thế nào.

Bài học trước ← Bài 2: Cài đặt Expo CLI & tạo app đầu tiên