Cấu trúc một project của React Native trông như thế nào?

Cấu trúc một dự án React Native có thể trông như sau:

YourReactNativeProject/
├── __tests__/                    // Thư mục chứa các test unit (nếu bạn sử dụng Jest)
├── android/                      // Thư mục chứa mã nguồn cho ứng dụng Android
├── ios/                          // Thư mục chứa mã nguồn cho ứng dụng iOS
├── node_modules/                  // Thư mục chứa các gói npm đã cài đặt
├── src/                          // Thư mục chứa mã nguồn của ứng dụng React Native
│   ├── components/               // Thư mục chứa các thành phần giao diện (có thể được tách thành con thư mục khác)
│   ├── screens/                  // Thư mục chứa các màn hình của ứng dụng
│   ├── navigation/               // Thư mục chứa mã nguồn cho việc định tuyến (điều hướng) trong ứng dụng
│   ├── utils/                    // Thư mục chứa các tiện ích và hàm phụ trợ
│   ├── App.js                    // Tệp mã nguồn gốc của ứng dụng
├── index.js                       // Tệp mã nguồn khởi đầu của ứng dụng
├── package.json                   // Tệp cấu hình npm
├── package-lock.json              // Tệp npm lock
├── yarn.lock                     // Tệp Yarn lock (nếu bạn sử dụng Yarn)
├── .babelrc                       // Tệp cấu hình Babel
├── .eslintrc.js                   // Tệp cấu hình ESLint (nếu bạn sử dụng ESLint)
├── .gitignore                    // Tệp cấu hình Git ignore
└── README.md                     // Tệp README cho dự án của bạn

Một số điểm chính:

Thư mục android/ và ios/ chứa mã nguồn native của ứng dụng cho Android và iOS tương ứng.
Thư mục src/ chứa mã nguồn chính của ứng dụng React Native, bao gồm các thành phần giao diện, màn hình, điều hướng, và tiện ích.
Tệp index.js là tệp khởi đầu của ứng dụng, và tệp App.js thường là tệp chính của ứng dụng.
Tệp package.json chứa thông tin về các gói npm đã cài đặt và các cấu hình liên quan đến dự án.
Các thư mục __tests__/, .babelrc, .eslintrc.js, và .gitignore chứa cấu hình cho kiểm tra, Babel, ESLint, và Git tương ứng.
Tệp README.md là tệp tài liệu giới thiệu dự án của bạn.

Cấu trúc này có thể được tùy chỉnh theo nhu cầu của bạn và dự án cụ thể của bạn. Ngoài ra, nếu bạn sử dụng các thư viện hoặc công cụ bổ sung như Redux, MobX, hoặc TypeScript, cấu trúc dự án của bạn có thể có thêm các thư mục và tệp liên quan đến chúng.

Nguyễn Tuấn Minh

Xin chào,
99,99% nội dung trên website này là nhờ hỏi ChatGPT, rồi mình biên tập lại để dễ hiểu và dùng lâu dài. Một vài bài tự viết, còn lại là “làm việc nhóm với AI”
Mình lưu tại đây để tra cứu, học tập và chia sẻ với bạn bè. Nếu bạn tìm được gì hữu ích, cứ đọc thoải mái – miễn phí, không quảng cáo.
Mình cũng có vài app cá nhân:

QuestionBank – Ôn thi vào 10 (iOS, Android)

TypingTest by QuestionBank (iOS, Android)

Cảm ơn bạn đã ghé qua!

Các bài liên quan khác: