Bí kíp React Native toàn tập

Đã lâu rồi mình chưa viết blog. Cũng phần vì gần đây mình khá bận (và cũng không có hứng để viết). Nhân tiện hôm nay chủ nhật rảnh rỗi ngồi tổng hợp lại những kinh nghiệm sau vài tháng tìm hiểu và đi làm về React Native của mình cho các bạn mới bắt đầu.

Tổng quan một chút về React Native

React Native là gì?

  • React Native là một framework do Facebook phát triển, cho phép các developers phát triển các ứng dụng (hoặc một phần ứng dụng) mobile nativeđa nền tảng (IOSAndroid) chỉ bằng Javascript (hay nói cụ thể hơn là thư viện React cũng của chính Facebook phát triển)

React Native hoạt động như thế nào?

  • Khi một ứng dụng React Native chạy, sẽ có 2 thành phần chạy song song là NativeJavascript, phần Javascript sẽ điều khiển phần Native thông qua Bridge.

React Native architecture

Ưu nhược điểm của React Native?

Ưu điểm:

  • Hoàn toàn miễn phí với mã nguồn mở
  • Phát triển ứng dụng mobile đa nền tảng chỉ bằng Javascript.
  • Ứng dụng sẽ được biên dịch Native Code, nên Performance sẽ gần tương đương như viết bằng Native.
  • Hiện được cộng đồng hỗ trợ rất nhiệt tình, nhiều thư viện có sẵn.
  • Tốc độ phát triển app được tăng lên đáng kể, với những chức năng như Hot Reloading, bạn không cần phải rebuild lại app mỗi khi chỉnh sửa.

Nhược điểm:

  • Đang còn trong quá trình phát triển nên có rất nhiều bug, đặc biệt là khi bạn upgrade phiên bản React Native (u will know how that feel :"3).
  • Thư viện thường được viết bằng developer cá nhân, nên chất lượng không được tốt, không được bảo trì và support thường xuyên.
Bắt đầu với React Native như thế nào?

Kiến thức cơ bản:

  • Cách sử dụng NPM hoặc Yarn để quản lý các dependencies.
  • Javascript ES6
  • React (không cần thiết phải học ReactJS, nhưng bạn cần nắm concept chính của React).
  • Kiến thức về CSS để dựng UI, đặc biệt là Flexbox.
  • Native Code cơ bản (kiểu như xài XCode hay Android Studio =]])

Một vài câu lệnh đơn giản:

  • react-native init : Khởi tạo Project React Native
  • react-native run-android/run-ios: Chạy ứng dụng React Native để Debug.
  • npm install --save hoặc yarn add : Cài một dependency vào Project.
  • npm start: Chạy server bundle JS.

Mở Dev Menu trên Simulator hoặc máy thật:

Thông thường thì bạn lắc (shake) thì menu dưới đây sẽ hiện lên. Tuy nhiên đối với Simulator (lắc kiểu gì giờ?) thì có thể sử dụng cách sau:

  • Command + D đối với simulator IOS.
  • Command + M hoặc adb shell input keyevent 82 đối với simulator Android.

React Native Dev Menu

Hệ sinh thái của React Native

Bạn cần biết rằng tuy React Native là một framework tuy nhiên để làm một Mobile App thực thụ và nhanh chóng thì cần kết hợp rất nhiều thư viện khác trong hệ sinh thái. Dưới đây là danh sách những thành phần mà tôi đánh giá là không thể thiếu trong một ứng dụng React Native.

  • Redux: Thư viện quản lí State.
  • Redux Saga: Một middleware của Redux, giúp quản lí các side effects (gọi API, ...). Tránh được callback hellpromise hell (gọi nôm na là hứa thật nhiều thất hứa cũng thật nhiều :v).
  • Một thư viện về Navigation để quản lí chuyển màn hình. Ví dụ như: React Navigation, React Native Navigation, React Router Flux,...
Dựng UI trong React Native

Đây là một trong những thế mạnh của React Native. Dựng rất nhanh, giống với CSS mà còn đa nền tảng nữa.

React Native sử dụng một cú pháp gần giống như CSS để cấu hình UI và dụng Flexbox để Layout. Bạn có thể mường tượng qua đoạn code đơn giản sau.

 const styles = StyleSheet.create({
    bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
   },
   red: {
    color: 'red',
  },
});
Debug trong React Native
  • Để bật debug, mở menu Dev trong Simulator lên và chọn JS Remote Debugging và sử dụng Chrome Developer Tool như phát triển một trong web.
  • Cá nhân tôi khuyên dùng phần mềm: React Native Debugger (có sẵn Redux DevTools,...)
Xài IDE nào khi dev React Native?

Hiện tại rất nhiều IDE (cũng có thể là Text Editor nhưng cài thêm Plugin) rất tốt như Atom, WebStorm, Sublime. Tuy nhiên cá nhân tôi thích sử dụng Visual Code hơn cả. Tiện lợi và miễn phí.

Combo quen thuộc khi dev React Native

Tôi luôn mặc định mở những App sau để dev React Native:

  • IDE: Visual Code.
  • Debug Tool: React Native Debugger.
  • Một Simulator mở sẵn JS Remote DebuggingHot Reloading.
  • Một cái terminal để chạy một vài câu lệnh, ví dụ như npm start.
Một vài lời khuyên nhỏ:
  • Nên sử dụng một máy Mac để code React Native, vì chính sách của Apple nên bạn không thể phát triển ứng dụng IOS trên các hệ điều hành khác như Windows hoặc Linux. Ngoài ra theo mình đánh giá thì Mac chạy rất ổn định (hiện tại mình đang xài Hackintosh :v).

  • Về cấu hình máy, bạn nên có ít nhất 8GB RAM và một ổ cứng SSD (mình từng xài một máy 4GB RAM và HDD 5200rpm, và bạn biết nó đau khổ cỡ nào rồi đấy :"3).

  • Khi code React Native, nên né các UI Kit làm sẵn ra, tuy rất dễ sử dụng, nhưng lại khó tùy biến theo cách bạn muốn và làm bạn không học được cách tự dựng UI.

  • Bình tĩnh và đừng nóng nảy vì rất nhiều các Bug huyền thoại của React Native sẽ làm bạn nổi điên. Tuy nhiên sau một thời gian tra google và khắc phục, bạn sẽ quen dần thôi.

  • Nếu sử dụng Emulator Android thì nên sử dụng hàng chính chủ của Android Studio, và có thể mở simulator từ command line bằng câu lệnh sau: emulator -avd tên_avd.

  • Mua một máy thật Android để Dev, có máy thật sẽ tiện hơn rất nhiều.

  • Với IOS, bạn nên sử dụng CocoaPods khi cài đặt các thư viện, tiện lợi hơn rất nhiều.

Seal niêm phong