🚀 React Native là framework xây dựng dựa trên hệ sinh thái React của facebook, cung cấp công cụ xây dựng ứng dụng cross-platform. Phát triển từ năm 2015, tới nay React Native là một trong những opensource được cộng đồng phát triển nhiều nhất với các ưu điểm:

  • 👨‍💻 Sử dụng Javascript là ngôn ngữ markup layout để xây dựng giao diện
  • 🌎 Web Developer có thể dễ dàng xây dựng ứng dụng, dựa trên kiến trúc web
  • 📱Hiệu suất cao, 100% native, bạn không thể phân biệt giữa ứng dụng được viết bằng ngôn ngữ thường và native language.

👨‍💻 Tùng đã bắt đầu với React Native từ năm 2017, và xây dựng một ứng dụng với hơn 100,000 lượt tải từ appstore, và chplay. Bạn có thể xem tại đây

Đăng ký tham gia toàn bộ qui trình xây dựng sản phẩm

☀️ Bài viết này sẽ hướng dẫn bạn bắt đầu với React Native từ zero, Tùng sẽ cung cấp cho bạn các resources bổ ích, và steps by steps để bắt đầu với các mục

  • Bắt đầu với React Native, thư viện nên cài đặt
  • Automate setup screenshots, code signing
  • Auto deploy beta testing,  production app
A big picture mobile app

Bắt đầu với React Native

Tài liệu bắt đầu

🤳Điều bạn cần ngay bây giờ chính là truy cập

http://facebook.github.io/react-native/docs/getting-started

để thực hiện việc cài đặt các môi trường. Hiện tại trang chủ của react-native hướng dẫn khá chi tiết cho từng platform khác nhau.

https://facebook.github.com/react-native

Ngoài ra bạn cần bổ sung thêm các kiến thức

Thư viện nên sử dụng với React Native

📱 UI

  • react-native-elements: đây là bộ UI cơ bản dễ bắt đầu với nhiều components hữu ích và tiện lợi
  • react-navigation: bộ thư viện cung cấp việc quản lý và di chuyển giữa các màn hình với nhau một cách dễ dàng

Animation

Môt ví dụ: https://github.com/ggomaeng/react-native-card-modal
  • react-native-animatable: cung cấp thư viện xây dựng các hiệu ứng dễ dàng, giúp cho ứng dụng của bạn trở nên mượt hơn
  • lottie-react-native: cung cấp các animation chuyển động từ adobe effects, giúp ứng dụng bạn mang tính chuyên nghiệp và độc đáo hơn

📕 State management

Redux or Mobx
  • redux: quản lý state tập trung, đảm bảo tính toàn vẹn dữ liệu
  • mobx: tương tự như redux, nhưng được phát triển theo mô hình observer mang lại hiệu suất cao

📈 Network interface

Ví dụ về network interface
  • axios: cung cấp thư viện tương tác với API

Automate setup screenshots, code signing

Để có thể phát hành được phiên bản Beta, hoặc đưa ứng dụng của bên lên AppStore, hoặc CHPlay, việc này là cực kỳ tốn rất nhiều thời gian, nếu bạn là người mới bắt đầu, bạn có thể mất đến hơn 2 ngày để có thể deploy được ứng dụng. Còn nếu bạn đã có kinh nghiệm thì cũng sẽ mất từ 2-3 tiếng 😭.

Các khái niệm bạn cần nắm rõ khi deploy ứng dụng

  • Code signing
  • Thông tin ứng dụng bao gồm: screenshots cho các devices. Việc này chiếm khá nhiều thời gian và khá tẻ nhạt

Các công việc trên cần tự động hóa, và giải pháp là

Fastlane- "App automation done right"
Cách dễ dàng nhất để phát hành ứng dụng

✍️ Hướng dẫn tích hợp fastlane với React Native

Auto deploy beta testing,  production app

People think, and machine work

Việc deploy và build các ứng dụng là việc được lặp đi lặp lại, việc này khá nhàm chán vì không nâng cao trình độ của bạn lên. Hãy sử dụng công cụ tự động hóa

AppCenter - Liên tục xây dựng, kiểm tra, phát hành và giám sát các ứng dụng cho mọi nền tảng.

Tích hợp với github, các ứng dụng của bạn sẽ dễ dàng được tự động build và phát hành mỗi khi code commit. Thời gian còn lại hãy làm 1 tách coffee ☕️ với đợi đến tay người dùng   🤖

Phần sau mình sẽ hướng dẫn chi tiết từng phần, để các bạn có thể xây dựng và phát hành ứng dụng, thời gian dự kiến

Đăng ký tham gia toàn bộ qui trình xây dựng sản phẩm