Giới thiệu Expo, nhập môn React Native

• Expo là cái gì
• Hạn chế của Expo
• App sẽ viết
• Cài Expo
• Tạo một dự án Expo mới
• Chạy code ví dụ

Expo là cái gì

Expo là một framework để đẩy nhanh việc viết app React Native. Giống như Laravel hay Symphony cho PHP, Ruby on Rail của Ruby. Đồng thời cung cấp một công cụ để chạy thử và debug.

Hạn chế của Expo

Trước khi nghiên cứu tiếp, một vài vấn đề quan trọng sau cần biết

1. Expo chỉ hỗ trợ những API mà Expo SDK hỗ trợ, có nghĩa là, nếu ứng dụng đang viết cần tương tác với Bluetooh, vốn không được hỗ trợ bởi Expo SDK thì bạn phải viết code React Native thuần luôn, hoặc tự viết thêm native code sử dụng thư viện ExpoKit.
2. Sử dụng Expo là chết dính với bộ toolset của nó. Một số đồ chơi sẽ không chạy được với Expo, trong trường hợp cần xài tới, phải eject cái app ra khỏi Expo, mà khi đã eject thì sẽ ko thể có inject ngược lại.
3. Ứng dụng Expo chỉ build online. Expo cung cấp một công cụ command-line là Exp, cho phép việc build lên Expo Server, một khi hoàn tất, một URL để download .apk hoặc ipa, Bài hướng dẫn

Mặc dù nghe có vẻ khá hạn chế, nhưng thực sự Expo rất mạnh, rất nhiều thứ hỗ trợ sẵn cho Android và iOS. Có nghĩa là nếu app đang viết không có gì quá đặc biệt, quá "đỉnh của đỉnh" thì việc sử dụng Expo sẽ mang tới rất nhiều lợi ích.

App sẽ viết

Làm cái game kiểu tìm cặp

Và đây là mặt kia của thẻ

Sau khi tìm ra được hết các cặp, user nhấn reset để chơi lại

Cài Expo

Không giống với việc viết React Native thuần, chúng ta phải cài và cấu hình Android Studio, Xcode và một số thứ linh tinh khác, tất cả những gì để bắt đầu với Expo là

Dạo này nó có thêm cái service Snack để làm online khá ngon.

1. Cài Node.js, viết React thì phải có rồi
2. Cài Expo Client trên thiết bị iOS hoặc Android, cái này để preview app. Lên App Store, Google Play tải về
3. Cài bộ CLI tool của Expo, để mà khởi chạy một dự án Expo mới, chạy build,... dễ lắm như sau

npm install expo --global

// init một project mới
expo init luckyluu-project
cd luckyluu-project
expo start

Tạo một dự án Expo mới

Một khi hoàn tất 3 thứ công việc đơn giản trên, giờ chúng ta tạo một app mới

exp init MemoryGame

// trỏ vô thư mục mới tạo
cd MemoryGame

// Let ruuuuuuun
exp start

Nếu sử dụng Expo XDE thì có thể tạo và chạy Expo app qua giao diện, tải ở đây nè. Sau khi chạy xong thì trên màn hình command-line sẽ có đoạn QR code

Rút điện thoại ra, mở app Expo lên, quét đoạn QR code này và xong. Sẽ thấy màn hình mặc định của ứng dụng, mỗi lần bấm Ctrl + S là nó sẽ tự động load lại.

Với bạn nào đang xài Iphone, gần đây Expo phải xóa cái quét mã QR ra khỏi app vì bị Apple chửi bới, trên bộ công cụ debug mới (lúc chạy expo start nó sẽ mở lên trình duyệt), bạn chỉ cần chọn gửi link qua email

Chạy code ví dụ

Toàn bộ code ví dụ có thể download ở đây, bạn có thể down về chạy thử. Mình không phân tích toàn bộ code vì mình chỉ tập trung giới thiệu về Expo, mình mặc định các bạn đã biết React, React Native căn bản nhé.

Wern Ancheta