Ignite - The React Native boilerplate.
Mở đầu
React Native là 1 framework tốt để bắt đầu 1 dự án dành cho mobile, có 2 cách đơn giản để tạo 1 dự án với React Native như sau:
-
Sử dụng expo-cli: Với người chưa từng lập trình di động và chưa từng dùng React Native thì expo-cli là một lựa chọn ổn để bắt đầu. Bạn chỉ cần NodeJS, 1 chiếc điện thoại hoặc 1 trình giả lập điện thoại(emulator). Không cần mất công cài Android Studio hay Xcode, đỡ phí thời gian. Nhưng nó có 1 điểm hạn chế là mọi thứ phải dùng thông qua Expo-cli, các ứng dụng Expo bị giới hạn trong các API gốc mà Expo SDK hỗ trợ, ...
-
Sử dụng react-native-cli: Với người đã quen dùng React Native, đây là công cụ thường xuyên sử dụng khi tạo dự án mới. Ngoài ra cần cài thêm 1 số công cụ khác nữa như Android Studio, Xcode để chạy ứng dụng trên máy ảo, public ứng dụng lên Store, ... Bằng cách này, bạn có thể sử dụng những công cụ để phát triển ứng dụng như React Navigation, Redux, MobX, ... hay can thiệp sâu hơn vào hệ thống như Camera, Bluetooth, ... hay viết Native Module.
2 cách trên đều khá tốt nhưng đều phải thêm những thư viện cơ bản của 1 ứng dụng React Native thường có, chúng ta có thể sử dụng boilerplate để tạo ra khung của dự án và code trên boilerplate đó.
Bài viết này sẽ giới thiệu về Ignite(được phát triển bởi Infinite Red) và công cụ Ignite-cli để khởi tạo ứng dụng dựa trên boilerplate có sẵn.
Tại sao lại là ignite-cli?
Mình sử dụng Ignite vì những lý do sau:
- Tạo ra 1 ứng dụng React Native đã cài đặt sẵn những thư viện cần thiết(sẽ nói ở bên dưới).
- Dễ sử dụng, không cần developer nâng cấp hay cải tiến vì việc này để Infinite Red lo.
- Không cần tạo bằng tay các file screen, component, model, navigator vì những việc đó đã command line làm cho bạn.
- Hoạt động trên tất cả các nền tảng Windows, MacOS, Linux.
- Cộng đồng khá lớn từ GitHub, Slack, Twitter, ...
- Có thể thay đổi boilerplate của screen, component, model, navigator theo nhu cầu.
Cài đặt
Hãy đảm bảo rằng bạn đã cài đặt React-Native và những thứ cần thiết như môi trường, công cụ, ... Còn nếu bạn là người mới bắt đầu thì hãy làm theo hướng dẫn cài đặt React Native.
Cài đặt ignite-cli:
# Sử dụng npm:
$ npm i -g ignite-cli
# Sử dụng yarn:
$ yarn add global ignite-cli
Tạo 1 dự án mới:
# Sử dụng Expo:
$ npx ignite-cli new NewProjectExpo --expo
# Không sử dụng Expo:
$ npx ignite-cli new NewProject
Công nghệ sử dụng:
Những công nghệ sẽ sử dụng sau khi tạo dự án:
- React Native
- React Navigation 5
- MobX-State-Tree (Tại sao không phải Redux?)
- MobX-React-Lite (nhẹ hơn MobX-React)
- TypeScript (thay thế JavaScript)
- AsyncStorage (đã được tích hợp với MobX-State-Tree)
- apisauce (dùng cho kết nối với server thông qua API)
- Reactotron (dùng cho việc debug, đã được tích hợp với MobX-State-Tree)
Cấu trúc thư mục
Cấu trúc thư mục của Boilerplate sau khi tạo sẽ trông như thế này:
project
├── android
├── app
│ ├── components
│ ├── i18n
│ ├── utils
│ ├── models
│ ├── navigators
│ ├── screens
│ ├── services
│ ├── theme
│ ├── app.tsx
├── storybook
│ ├── views
│ ├── index.ts
│ ├── storybook-registry.ts
│ ├── storybook.ts
│ ├── toggle-storybook.tsx
├── test
│ ├── storyshots.test.ts
│ ├── mock-i18n.ts
│ ├── mock-reactotron.ts
│ ├── setup.ts
│ ├── storyshots.test.ts
├── ignite
│ └── templates
│ ├──component
│ ├──model
│ ├──navigator
│ └──screen
├── index.js
├── ios
├── README.md
└── package.json
./app Thư mục chính của dự án, bạn thường xuyên làm việc với thư mục này và chúng bao gồm:
componentsChứa những thành phần nhỏ dùng chung cho các màn hình(Button, Header, ...).i18nChứa bản dịch của các ngôn ngữ khác nhau, dùng cho chuyển đổi đa ngôn ngữ.modelsNơi quản lý state, xử lý logic, sử dụng MobX State Tree.navigatorĐiều hướng các màn hình, sử dụng react-navigation.screensChứa các màn hình để hiển thị, là 1 phần của hệ thống điều hướng ở trên.servicesChứa các hành động giao tiếp với API, Push Notifications, ...themeChứa màu, hình ảnh, cỡ chữ, font chữ, style, ... thường sử dụng.utilsChứa các khai báo biến, hàm, ... dùng chung.app.tsxĐiểm vào của app.
./ignite Nơi chứa các bản mẫu khi dùng command line tạo screen, component, model, navigator, bạn cũng có thể thêm các plugin.
./storybook Nơi cấu hình storybook.
./test Nơi chứa các cấu hình cho việc test bằng Jest và cấu hình snapshot của các storybook.
Lệnh khởi tạo
Như đã nói ở phần đầu bài viết, bạn không cần phải viết từng dòng code để tạo ra được 1 file component, screen, model hay navigator, ignite cung cấp cho bạn lệnh để tạo ra chúng, việc của bạn là sửa các mẫu của những phần tương ứng ở thư mục ./ignite/templates sao cho phù hợp với yêu cầu của dự án mà bạn đang làm và sử dụng những lệnh dưới đây để tạo.
- Tạo Component:
$ ignite g component <component_name> - Tạo Screen:
$ ignite g screen <screen_name> - Tạo Model:
$ ignite g model <model_name> - Tạo Navigator:
$ ignite g navigator <navigator_name>
Qua bài viết này, hy vọng bạn đọc có cái nhìn tổng quan về Ignite và Ignite-cli. Đồng thời cũng có thể cân nhắc sử dụng khi bắt đầu một dự án mới.
Và có lẽ có bạn thắc mắc là tại sao không sử dụng Redux mà lại sử dụng MobX State Tree thì xin hẹn bạn vào 1 bài viết khác giải thích lý do tại sao Infinite Red không sử dụng Redux mà lại sử dụng MobX State Tree để quản lý State cho ứng dụng.