React Native Tutorials - Bài 1: Giới thiệu, cài đặt và xây dựng ứng dụng đầu tiên

Cập nhật: 02/04/2021

Chú ý: Tất cả hướng dẫn này thực hiện trên hệ điều hành Windows, các ví dụ được xây dựng cho nên tảng hệ điều hành di động Android.

Giới thiệu

React Native (RN) là một Framework mã nguồn mở do Facebook phát triển với ngôn ngữ lập trình là Javascript (ES6 sẽ được sử dụng chính), giúp bạn xây dựng ứng dụng di động trên cả Android và iOS, với việc dùng chung mã nguồn giúp tiết kiện thời gian phát triển ứng dụng rất nhiều.

Cài đặt

Đầu tiên cần cài đặt NodeJs

Lên trang chủ của NodeJs (nodejs.org), khi vào nó sẽ tự phát hiện máy tính sử dụng hệ điều hành 64bit hoặc 32bit sẽ gợi ý file (đuôi là .msi, sẽ là bản mới nhất thời điểm hiện tại) cài đặt tương ứng, chọn bản LST. Nếu muốn tải phiên bản khác thì vào mục downloads sẽ có danh sách lựa chọn.

Sau khi tải về máy xong, vào vị trí lưu tải về và click đúp vào file .msi và chọn Next trong quá trình cài đặt tới khi hoàn thành, trong quá trình cài đặt thì gói npm cũng sẽ được cài đặt cùng.

Kiểm tra việc cài đặt hoàn thành, bật Command line của Windows dùng lệnh node -v và npm -v, nếu thành công sẽ hiện thị ra phiên bản của node và npm

Cài đặt Android Studio (AS)

Để phục vụ việc build lần đầu tiên, build relase cho Android.

Bạn lên trang developer.android.com tải phiên bản mới nhất nhé.

Tạo project đầu tiên (FirstTime)

Một project RN được tạo mới từ Command Line (Cmd). Bật cmd, cd (di chuyển) tới thư mục bạn muốn để project (quá trình tạo một project có thể sẽ hơi lâu):

Chạy lệnh: npx react-native init FirstTime

Bạn cũng có thể khởi tạo project theo phiên bản react native như sau: npx react-native init FirstTime --version x.yy.z

Đây là cấu trúc thư mục của một project RN sau khi mới tạo:

- Thực mục android và ios (kiểu như project con cho mỗi nền tảng) dành cho cấu hình riêng cho từng nền tảng (tên ứng dụng, các quyền permission, ...), có thể mở bằng các IDE AS và Xcode tương ứng.

Thự mục node_modules chứ các modules (giống như các thư viện) mà ta sử dụng trong project, dụng lượng có thể lên tới vài trăm Mb nên khi copy project sang một máy khác hoặc đẩy lên svn, git ta sẽ bỏ qua thư mục này (khi copy sang máy khác làm thế nào để sử các modules trong project sẽ có ở phần sau), trong quá trình làm không cần quan tâm lắm đến thư mục này.

- File index.js là đầu vào cho ứng dụng.

- File package.json là chứa thông tin về project, các dependencies, các modules (tên modules, phiên bản modules)  mà sử dụng trong project

Build ứng dụng

Sử dụng máy ảo

Nếu sử dụng máy ảo (Genymotion, bluestacks, máy ảo tạo bởi AS, …. Nếu chưa biết dùng mấy cái này thì hãy sử dụng google nhé), bật máy ảo lên trước khi build. Sử dụng cmd để build project, cd vào thư mục project, chạy lệnh:

react-native run-android

Sử dụng thiết bị vật lý (máy android thật)

Cần một máy android thật, cáp (cable) kết nối với máy tính, phải đảm bảo máy tính nhận thiết bị android (nếu không nhận thường là do thiếu drive cho thiết bị android, hãy tìm trên google và cài đặt drive cho thiết bị nhé).

Dùng cmd cd vào thư mục platform-tools bên trong thư mục sdk, chạy lệnh:

adb devices

Nếu device được nhận sẽ hiển thị ra device đó (bao gồm cả máy ảo, nếu có)

Tiếp theo tại đây chạy lệnh:

adb reverse tcp:8081 tcp:8081

Lệnh này sẽ chuyển package .apk sang thiết bị android khi đó mới có thể chạy được.

Và cuối cùng cd vào thư mục project chạy lệnh:

react-native run-android

Sẽ mất thời gian đôi chút, hãy chờ đợi. Nếu mọi sự tốt đẹp, ở cả máy ảo và máy thật sẽ thấy kết quả

Vậy là xong ta đã cài đặt và build thành công một ứng dụng RN cho Android, chúc các bạn thành công nhé!