Danh sách đồ chơi để bắt đầu với React Native

• đồ chơi Development

  • SDK
  • Check code chuẩn
  • Debugging
• Boilerplate và UI Frameworks
• Thư viện và components

• Web Services

  • Database
  • Analytics
  • Push Notifications
  • Code update

đồ chơi Development

SDK

Chưa ai qua mặt được Expo. Expo cho phép dựng app mà ko cần Android Studio hay Xcode.

Workflow để làm việc với Expo

1. Tạo project mới sử dụng create-react-native-app
2. Code, code và code...
3. Chạy thử bằng Expo app có thể tìm thấy trong app store, google play

Không cần kết nối điện thoại với máy tính, chỉ cần điện thoại kết nối cùng mạng với localhost đang chạy, điện thoại có cài Expo app, scan đoạn QR code trên command line là được.

Điều hạn chế của Expo là nó ko cho phép cài thêm một số package khác nữa ngoài những package đã được cài sẵn của Expo như Camera, Facebook, Map. Trường hợp cần những package này, sử dụng react-native init, lúc đó bạn phải handle mọi thứ, phức tạp hơn dùng Expo.

Check code chuẩn

Nếu bị nghiện code cho chuẩn như lê duẩn, ESLint là người bạn đồng hành, mình hay sử dụng bộ style guide cấu hình sẵn của Airbnb's Javascript Style Guide.

Nếu sử dụng ESLint thì mình nghĩ bạn nên dùng thêm một số plugin của VSCode hay Atom, một số plugin của Sublime text mình cài về thì chạy không như ý lắm.

Debugging

Ứng dụng chạy trên desktop Reactotron cho phép debug React và React Native với những tính năng như: inspecting, mofifying, subscribing, tracking HTTP, đo performance ứng dụng, track error...

Boilerplate và UI Frameworks

Snowflake bao gồm cả Frontend đến Back-End code của ứng dụng, một lựa chọn tốt để bắt đầu dự án mới nhanh nhất.

React Native có sẵn một số components UI cơ bản, nếu muốn custome style thì chúng ta phải viết thêm CSS, còn không, nếu muốn nhiều hơn những component đã được viết sẵn, màu mè hoa lá hẹ hết rồi thì có thể dùng NativeBase tương đối kế thừa khái niệm của Bootstrap, hoặc React Native Kittens có một số components cũng hay ho.

Thư viện và components

Làm navigation thì nghĩ ngày đến React navigatio của chính facebook luôn.

Quản lý state thì dùng Mobx hoặc Redux, redux thì thường cho những dữ liệu nhiều và lớn, năm 2018 chúng ta sẽ vẫn sử dụng Redux nhé, đừng tưởng là nó đã cũ và có cái khác thay thế.

Animatable rất có ích khi muốn làm animation cho layout hay mấy cái micro animation trên component.

Một số UI Components khác có thể tham khảo

react-native-calendar
• react-native-datepicker
• react-native-progress
• react-native-spinkit
• Vector Icons
• react-native-swiper
• react-native-scrollable-tab-view
• react-native-lightbox
• react-native-maps
• SGListView
• Formik
• react-native-i18n
• react-native-push-notification
• InstantSearch
• react-native-fs
• react-native-camera
• react-native-video
• react-native-sqlite-storage
• react-native-store
• react-native-webrtc

Web Services

Database

Realm real-time database chuyên cho mobile app, bào gồm các tính năng như two-way data sync, offline-first, data push.

Nếu Realm có quá nhiều tính năng ko dùng đến, thì có thể sử dụng AsyncStorage đi kèm React Native

Analytics

Fabric bộ công cụ tất cả trong một hoặc nếu thích Google Analytics thì có nhiều thư viện khác hỗ trợ

Push Notifications

Cái này thì ko có nhiều service lắm, nói cách khác Firebase Cloud Messaging (trước đây là Google Cloud Messaging) gần như thống trị, để sử dụng FCM chúng ta sẽ cần tới react-native-fcm package

Code update

CodePush cho phép deploy code mới nhất trực tiếp đến device của user, nó giống như kho trung tâm, nơi chúng ta quăng hết HTML, CSS, Javascript, assets lên đó hết. Thông qua CodePush chúng ta không cần upload những thay đổi lên app store và đợi user chọn update ứng dụng. Sử dụng với đống thư viện này