Bài 2: Hướng dẫn cài đặt react native trên window

Sau đây mình sẽ hướng dẫn các bạn cài đặt môi trường để code react native trên window

Công Cụ

  1.  Genymotion:  máy ảo để test app các bạn đăng kí 1 account trên Genymotion và tải về bản cài Đặt with VirtualBox: theo link https://www.genymotion.com/download/
  2. IDE để code react tùy các bạn có thể dùng IDE theo sở thích ở đây mình dùng visual code các bạn có thể download tại trang chủ https://code.visualstudio.com/
  3.  nodejs: các bạn download tại trang chủ https://nodejs.org và cài đặt như bình thường
  4.  Expo xde: Dùng để quản lý và phát truyển các ứng dụng react native các bạn có thể download tại https://xde-updates.exponentjs.com/download/win32

Cài Đặt

Sau khi tải về các bạn cài đặt như bình thường sau đó tạo 1 thư mục react native ngoài desktop  và mở cmd

Sau khi mở CMD gõ lệnh npm install -g create-react-native-app để cài đặt 

Sau khi cài đặt xong lib create-react-native-app thì chúng ta có thể bắt đầu đi vào tạo ứng dụng hello world và chiêm ngưỡng thành quả bằng các thực hiện các câu lệnh sau

Mở CMD và gõ create-react-native-app <tên project>  để tạo project 

Việc tạo project có thể mất tới vài phút

sau khi tạo xong project các bạn gõ cd <tên project> để trỏ tới project và gõ npm start để khởi chạy

khi start xong ấn phím a để mở project trên máy ảo geonymotion để npm nhận dạng được máy ảo ta cần sửa path để sửa path các bạn làm như sau

mở This PC  chọn chuột phải chọn propety

Sau đó chọn Advanced system settings -> Environment Variables -> Edit

Tiếp theo Chọn new và thêm đường dẫn C:\Program Files\Genymobile\Genymotion\tools

Vậy là xong ấn OK để lưu lại bật máy ảo và quay trở lại CMD  ấn a để khởi chạy project trên máy ảo

Vậy là xong việc cài đặt và chạy ứng dụng hello world đầu tiên bằng CMD

Ngoài cách dùng cmd thì các bạn có thể tạo và dev 1 cách dễ dàng hơn với Expo XDE các bạn tiến hành như sau:

Download expo từ link bên trên mở expo lên và thực hiện tạo project

Điền tên project và đường dẫn

Chọn Lan để tăng tộc độ build và debug

  • ấn chọn Share để chia sẻ mã QR giúp build trên điện thoại thật qua ứng dụng expo
  • Chọn Devece để build trên máy ảo geonymotion

Vậy là chúng ta đã hoàn thành bài học số 1 cài đặt và chạy ứng dụng hello world.

Chúc các bạn thành công…!