Bài 2 : Expo là gì ? Bắt đầu lập trình React Native với Expo

Posted on by

Bài viết này sẽ giới thiệu các vấn đề cơ bản về Expo. Các bạn đã sử dụng Expo trước đó thì có thế bỏ qua bài viết này.

  • Expo là gì ?

Expo là cách dễ nhất để bắt đầu xây dựng 1 ứng dụng React Native. Nó cho phép bạn bắt đầu lập trình React Native mà không cần cài đặt hay thiết lập công cụ, phần mềm hay 1 IDE nào như Xcode, Android Studio

Thêm nữa Expo là 1 tiện ích hỗ trợ lập trình React Native được Facebook giới thiệu và khuyên dùng. Expo dùng để build, tích hợp, quản lý các thư viện dùng trong React Native

Để có thể cài đặt Expo yêu cầu môi trường lập trình cần cài sẵn Node 8+ và Git (Các em lưu ý git cần được thiết lập trong biến môi trường variable environment của Windows )

Sau khi cài đặt Node 8+. tại cửa sổ CMD or Terminal (Mac OS) các em nhập :

npm install -g expo-cli

Quá trình cài đặt yêu cầu thiết bị được kết nối Internet ổn định . Sau khi cài đặt thành công sẽ hiển thị thông báo như hình


Sau khi cài đặt Expo thành công. Các em làm các thao tác sau để khởi tạo Project đầu tiên

Windows :
1 . Tạo New Folder
2 . Giữ Shift + Right Mouse vào thư mục mới chọn Open PowerCell or Open Command Line (cmd)
3. Nhập expo init AwesomeProject
4. Nhập cd AwesomeProject
5. Nhập npm start hoặc expo start

Mac OS :
1 . Tạo New Folder
2 . Chọn Right Mouse vào thư mục mới chọn Services -> New Terminal at Folder (Lưu ý : Nếu không có Services, các em làm theo hướng dẫn này để bật Services)
3. Nhập expo init AwesomeProject
4. Nhập cd AwesomeProject 
5. Nhập npm start hoặc expo start

Nếu chạy thành công, chương trình sẽ hiển thị cửa sổ trình duyệt như sau :

Chọn 1 project được thiết lập sẵn giao diện Tabs or Blank (giao diện trắng)
Truy cập thư mục project vào nhập expo start or npm start
Development Server được khởi tạo thành công

Các chức năng chính trên Development Server
1. Run on Android device/emulator : Chạy ứng dụng vừa tạo thông qua thiết bị Android thật được kết nối với máy tính hoặc máy ảo
2 . Run on iOS simulator : Chạy ứng dụng vừa tạo thông qua máy ảo iOS
3. Send link with email/SMS : gửi link cài đặt ứng dụng cho người khác
4. Publish or republish project : lưu trữ ứng dụng lên ứng dụng Expo
5.
Thiết bị Android :
Các em có thể chạy thử ứng dụng trên thiết bị Android bằng cách tải phần mềm Expo và chọn quét mã vạch
Thiết bị iOS :

Các em quét mã vạch trực tiếp từ Camera của thiết bị và làm theo hướng dẫn . (Lưu ý : cần bật chức năng quét mã vạch trong Cài đặt của thiết bị iOS nhé)

  • Viết dòng code đầu tiền

Để bắt đầu viết code cho project vừa tạo các em sẽ lựa chọn 1 trong các IDE phổ biến sau :

  1. Visual Studio Code (Khuyên dùng)
  2. Notepad ++
  3. Hoặc 1 code editor bất kì

Mọi thắc mắc, câu hỏi các em comment tại đây nhé

Còn nữa … 🙂