2 Cách Bắt Đầu Với Công Nghệ Hiện Tại - React Native - RN-3

Có một số thuật ngữ bạn cần biết. React Native là một phần mở rộng của React. Đó chỉ là một mục tiêu khách hàng khác đang sử dụng React và các nguyên tắc của nó để tạo ứng dụng. Học một chút về React là cách sử dụng thời gian hiệu quả.Tôi cũng đề nghị bạn xem qua hướng dẫn chính thức để hiểu rõ hơn. Nhưng nếu bạn không muốn làm điều đó hoặc bạn đã làm rồi thì hãy bắt đầu.

Sau đây, chúng tôi sẽ đề xuất các bước chính cần thiết để bắt đầu làm việc với React Native.

Cài đặt nodejs và npm

Trước hết, bạn cần cài đặt nodejs và npm là một trình quản lý node. Để cài đặt node và npm trên máy của bạn. Bạn có thể làm theo Hướng dẫn này để cài đặt npm và nodejs.

Xây dựng ứng dụng React Native với hai cách
 

1. react-native init

Đó là một cách để bắt đầu. Trước bài đăng này vào ngày 13 tháng 3 năm 2017, mọi người đều sử dụng như nhau. Bạn sẽ cần Node, React Native CLI (Giao diện dòng lệnh), JDK, Android Studio, Xcode và tất cả các phụ thuộc khác mà bạn cần trong khi tạo ứng dụng gốc của mình. Nếu bạn là nhà phát triển ứng dụng gốc có kinh nghiệm trong cả hai môi trường phát triển ứng dụng thì bạn có thể bắt đầu với điều này nhưng nếu bạn có kinh nghiệm trong bất kỳ môi trường phát triển ứng dụng nào thì sẽ rất khó để bạn thiết lập môi trường phát triển cho môi trường còn lại. Vì vậy, đề xuất của tôi là bắt đầu với một cách khác đó là react-native CLI.

1.1. Cài đặt React Native CLI

Để bắt đầu với điều này, bạn cần cài đặt react-native-cli. Giả sử rằng bạn đã cài đặt Node, bạn có thể sử dụng npm để cài đặt react-native CLI. Chạy lệnh sau trong Command Prompt hoặc shell:
Có hai cách để bắt đầu với react native và chúng tôi sẽ cho bạn biết sự khác biệt giữa chúng.

npm install -g react-native-cli

1.2. Cài đặt Android Studio và định cấu hình Biến môi trường ANDROID_HOME

Sau khi cài đặt react-native-cli, chúng ta phải thiết lập môi trường cho một trong các nền tảng (Android / IOS).

Tải xuống và cài đặt Android Studio từ trang web chính thức. Để cài đặt android studio và định cấu hình biến môi trường ANDROID_HOME cho react, bạn có thể làm theo bài đăng về cài đặt android studio và thiết lập môi trường phát triển Android sẽ hiển thị cho bạn cài đặt tất cả những thứ bạn cần. Bạn sẽ cần những thứ sau nếu bạn đã cài đặt android studio.

JDK (Bộ phát triển Java)
Android Studio.
SDK.
Thiết bị ảo Android - Android Virtual Device.

1.3. Tạo dự án đầu tiên với react-native init

react-native init my-project

cd my-project

react-native run-android
 

1.4. Sửa đổi ứng dụng của bạn

Bây giờ bạn đã chạy ứng dụng thành công, hãy sửa đổi nó.

Mở App.js trong trình soạn thảo văn bản mà bạn chọn và chỉnh sửa một số dòng.
Nhấn phím R hai lần hoặc chọn Tải lại từ Menu Nhà phát triển (Ctrl + M) để xem các thay đổi của bạn!
 

Chúc mừng

Bạn đã chạy và sửa đổi thành công ứng dụng React Native đầu tiên của mình bằng cách sử dụng ứng dụng react-native.

2. Expo CLI (create-react-native-app)
Expo CLI là cách dễ nhất để bắt đầu xây dựng một ứng dụng React Native mới. Nó cho phép bạn bắt đầu một dự án mà không cần cài đặt hoặc định cấu hình bất kỳ công cụ nào để tạo mã gốc native code - không cần cài đặt Xcode hoặc Android Studio và bạn có thể phát triển cho thiết bị iOS của mình bằng Linux hoặc Windows. Bạn chỉ cần cài đặt node và npm để bắt đầu. Nó được lấy cảm hứng từ thiết kế của Create React App và là sản phẩm của sự hợp tác giữa Facebook và Expo (trước đây là Exponent).

2.1. Tạo dự án đầu tiên với Expo CLI

Giả sử rằng bạn đã cài đặt Node, bạn có thể sử dụng npm để cài đặt tiện ích Expo CLI:

npm install -g expo-cli
expo init AwesomeProject
cd my-project

npm start

Thao tác này sẽ khởi động trình đóng gói React Native và in mã QR.

2.2. Chạy ứng dụng React Native của bạn

Mở nó trong ứng dụng Expo để tải JavaScript của bạn. Cài đặt ứng dụng khách Expo trên điện thoại iOS hoặc Android của bạn và kết nối với cùng một mạng không dây với máy tính của bạn. Trên Android, sử dụng ứng dụng Expo để quét mã QR từ thiết bị đầu cuối của bạn để mở dự án của bạn. Trên iOS, hãy làm theo hướng dẫn trên màn hình để nhận liên kết.

2.3. Sửa đổi ứng dụng của bạn

Bây giờ bạn đã chạy ứng dụng thành công, hãy sửa đổi nó. Mở App.js trong trình soạn thảo văn bản mà bạn chọn và chỉnh sửa một số dòng. Ứng dụng sẽ tự động tải lại sau khi bạn lưu các thay đổi của mình.

Chúc mừng. Bạn đã chạy và sửa đổi thành công ứng dụng React Native đầu tiên của mình bằng Expo CLI.

Chạy ứng dụng của bạn trên trình mô phỏng hoặc thiết bị ảo

Tạo ứng dụng React Native giúp bạn thực sự dễ dàng chạy ứng dụng React Native trên thiết bị vật lý mà không cần thiết lập môi trường phát triển. Nếu bạn muốn chạy ứng dụng của mình trên Trình mô phỏng iOS hoặc Thiết bị ảo Android, vui lòng tham khảo hướng dẫn xây dựng dự án với mã gốc để tìm hiểu cách cài đặt Xcode và thiết lập môi trường phát triển Android của bạn.

Sau khi thiết lập những điều này, bạn có thể khởi chạy ứng dụng của mình trên Thiết bị ảo Android bằng cách chạy npm run android hoặc trên iOS Simulator bằng cách chạy npm run ios (chỉ macOS).

Để cài đặt tất cả các mô-đun gốc tùy chỉnh -  To Include all the custom native module

Vì bạn không tạo bất kỳ mã gốc nào khi sử dụng Create React Native App để tạo dự án, nên bạn không thể bao gồm các mô-đun gốc tùy chỉnh ngoài các API React Native và các thành phần có sẵn trong ứng dụng khách Expo.

Nếu bạn muốn tự mình xây dựng và triển khai ứng dụng của mình, bạn cần phải bỏ CRNA (create-react-native-app) và sử dụng Xcode và Android Studio. Điều này thì bạn chỉ cần gõ:  npm run eject  dự án của bạn, nó sẽ hướng dẫn bạn qua quy trình. Đảm bảo cài đặt react-native-cli bằng npm install -g react-native-cli.