Một project React Native được cấu trúc như thế nào?

Question

Accepted Answer

Một project React Native có cấu trúc kết hợp **code JavaScript/TypeScript** với **các project native iOS/Android** và cấu hình. Hiểu cấu trúc và các file chính giúp định hướng và xây dựng ứng dụng React Native.

## Các phần chính của cấu trúc

```text
my-app/
  App.js / App.tsx       → component gốc (điểm khởi đầu của app)
  src/ (hoặc app/)       → code JS/TS của bạn (component, màn hình, v.v.) — tổ chức ở đây
  package.json           → dependency và script (npm/yarn) — như mọi project JS
  node_modules/          → các dependency npm đã cài
  ios/                   → project native iOS (Xcode) — cho RN thuần
  android/               → project native Android (Gradle) — cho RN thuần
  index.js               → đăng ký component gốc
  app.json / app.config  → cấu hình app (tên, icon) — đặc biệt trong Expo
  (Project Expo ẩn ios/android; do Expo quản lý)
```

## Hệ sinh thái JavaScript

```text
→ package.json → dependency (React Native, navigation, thư viện) + script
→ npm / yarn → cài package (npm install); hệ sinh thái npm khổng lồ luôn sẵn có
→ Metro → bundler JavaScript của React Native (bundle JS của bạn cho app)
→ Babel → transpile JS/JSX/TypeScript hiện đại
```

## Tổ chức code

```text
→ Tổ chức src/ thành các thư mục (phổ biến):
  src/components/ (UI tái sử dụng), src/screens/ (component màn hình),
  src/navigation/, src/services/ (API), src/hooks/, src/utils/, src/store/ (state)
→ Giữ code có tổ chức khi app lớn lên (tách theo feature hoặc theo loại).
```

## Tại sao điều này quan trọng

Hiểu một project React Native được cấu trúc như thế nào là kiến thức thực hành cần thiết để định hướng, xây dựng, và tổ chức ứng dụng React Native, nên đây là kiến thức nền tảng hữu ích.

Biết các **phần chính** — rằng **App.js/App.tsx là component gốc** (điểm khởi đầu), code **JS/TS của bạn nằm trong `src/`** (nơi bạn dành phần lớn thời gian), **package.json** quản lý dependency và script (như mọi project JavaScript), và các **project native `ios/` và `android/`** tồn tại (cho React Native thuần, trong khi Expo quản lý chúng) — là cần thiết để tìm đường trong một project React Native vốn kết hợp code JavaScript với các project native.

Hiểu khía cạnh **hệ sinh thái JavaScript** là quan trọng: project React Native dùng **package.json và npm/yarn** cho dependency (với hệ sinh thái npm khổng lồ luôn sẵn có — một lợi thế lớn), **Metro** (bundler của React Native), và Babel — phản ánh rằng phát triển React Native là phát triển JavaScript với tooling quen thuộc, có giá trị với lập trình viên web.

Hiểu cách **tổ chức code** (cấu trúc `src/` thành các thư mục theo feature hoặc loại — components, screens, navigation, services, hooks, utils, store) phản ánh thực hành tốt cho project dễ bảo trì khi chúng lớn lên.

Vì làm việc với React Native cần định hướng cấu trúc project (code JS cộng các project native), quản lý dependency qua package.json và npm, hiểu bundler, và tổ chức code, và vì kiến thức này là nền tảng thực hành cần thiết cho bất kỳ phát triển React Native nào, hiểu một project React Native được cấu trúc như thế nào — các file chính, hệ sinh thái JavaScript, và tổ chức code — là kiến thức thực hành có giá trị, nền tảng để làm việc với project React Native, cần thiết để xây dựng và bảo trì app và một năng lực cơ bản đặc biệt dễ tiếp cận với lập trình viên quen thuộc với hệ sinh thái JavaScript/npm.