Cấp bậc tác giả:

TRAINING

[React Native]Bài 1: Hướng dẫn chạy ứng dụng React Native đầu tiên cho người mới bắt đầu học

Được viết bởi webmaster ngày 07/03/2023 lúc 04:17 PM
React Native là một framework cho phép phát triển ứng dụng di động đa nền tảng sử dụng ngôn ngữ lập trình JavaScript và React. Nó được phát triển bởi Facebook và được công bố lần đầu vào năm 2015.
  • 0
  • 3036

[React Native]Bài 1: Hướng dẫn chạy ứng dụng React Native đầu tiên cho người mới bắt đầu học

React Native là một framework cho phép phát triển ứng dụng di động đa nền tảng sử dụng ngôn ngữ lập trình JavaScript và React. Nó được phát triển bởi Facebook và được công bố lần đầu vào năm 2015.
Với React Native, người phát triển có thể sử dụng các thành phần React để xây dựng các giao diện người dùng đẹp và hiệu quả, và sử dụng JavaScript để xử lý logic của ứng dụng. React Native cũng cung cấp các module để truy cập các tính năng của điện thoại như máy ảnh, GPS và lưu trữ dữ liệu.
Một trong những ưu điểm lớn nhất của React Native là khả năng tái sử dụng mã nguồn. Khi phát triển ứng dụng React Native, bạn có thể sử dụng lại các thành phần và logic đã được xây dựng cho ứng dụng web bằng React, giúp tiết kiệm thời gian và tăng tính hiệu quả.
Ngoài ra, React Native cũng hỗ trợ các tính năng nâng cao như Hot Reloading, giúp người phát triển có thể thấy kết quả của công việc một cách nhanh chóng và dễ dàng.
Với những ưu điểm trên, React Native đã trở thành một trong những lựa chọn phổ biến cho việc phát triển ứng dụng di động đa nền tảng.
1. Cài đặt Android Studio
Để cài đặt Android Studio, bạn có thể làm theo các bước sau:
1.1. Tải xuống bản cài đặt Android Studio
Bạn có thể tải xuống bản cài đặt Android Studio từ trang web chính thức của nó. Truy cập vào đường dẫn https://developer.android.com/studio và chọn "Download Android Studio" để tải xuống bản cài đặt phù hợp với hệ điều hành của bạn.
Android-Studio.jpg
1.2. Cài đặt Android Studio
Sau khi tải xuống bản cài đặt, bạn chạy tệp tin .exe và nhấn vào nút "Next" để bắt đầu quá trình cài đặt. Hãy đọc và chấp nhận các điều khoản sử dụng trước khi cài đặt.

1.3. Cài đặt JDK
Android Studio yêu cầu JDK (Java Development Kit) phiên bản 8 trở lên để hoạt động. Nếu JDK đã được cài đặt trên máy tính của bạn, hãy bỏ qua bước này. Nếu chưa, bạn có thể tải xuống JDK từ trang web chính thức của Oracle và cài đặt nó.

1.4. Khởi động Android Studio và cập nhật các thành phần
Sau khi hoàn tất quá trình cài đặt, khởi động Android Studio. Bạn cần cập nhật các thành phần của nó, bao gồm các gói SDK và máy ảo Android, để bắt đầu phát triển ứng dụng. Bạn có thể thực hiện việc này bằng cách chọn "Configure" -> "SDK Manager" từ menu chính của Android Studio.

1.5. Tạo máy ảo Android
Nếu bạn không có một thiết bị Android thực để kiểm thử ứng dụng, bạn có thể sử dụng máy ảo Android để thực hiện việc này. Android Studio cung cấp cho bạn các công cụ để tạo và quản lý các máy ảo Android. Bạn có thể tạo máy ảo Android bằng cách chọn "Configure" -> "AVD Manager" từ menu chính của Android Studio.
Sau khi hoàn thành các bước này, bạn đã cài đặt thành công Android Studio và các thành phần liên quan để bắt đầu phát triển ứng dụng Android.

1.6. Tích hợp môi trường chạy SDK
Android platform-tools là một tập hợp các công cụ và tiện ích được cung cấp bởi Android SDK để phát triển ứng dụng Android. Các công cụ này bao gồm adb (Android Debug Bridge), fastboot, systrace và một số công cụ khác. 
Việc tích hợp môi trường chạy Android platform-tools vào biến môi trường là để cho phép các công cụ này có thể được sử dụng từ bất kỳ thư mục nào trong hệ thống của bạn, thay vì chỉ có thể sử dụng chúng từ một thư mục cụ thể trong Android SDK. Khi đã tích hợp môi trường chạy Android platform-tools, bạn có thể sử dụng các công cụ này để tương tác với thiết bị Android của bạn thông qua Terminal hoặc Command Prompt, hoặc sử dụng chúng trong các công cụ phát triển và đóng gói ứng dụng Android.
Để tích hợp môi trường chạy Android platform-tools vào biến môi trường (Environment Variable), bạn có thể làm theo các bước sau:
  1. Bước 1: Mở trình quản lý biến môi trường trên hệ thống của bạn. Trên Windows, bạn có thể tìm kiếm "Environment Variables" trong Start Menu và chọn "Edit the system environment variables". Trên macOS, bạn có thể mở Terminal và chạy lệnh "nano ~/.bash_profile" để mở file bash_profile.
  2. Bước 2: Trong phần biến môi trường, tìm kiếm biến "Path" và chọn "Edit".
  3. Bước 3: Thêm đường dẫn đến thư mục "platform-tools" của Android SDK vào cuối biến "Path". Ví dụ, nếu thư mục "platform-tools" của Android SDK của bạn nằm trong đường dẫn "C:\Android\SDK", bạn có thể thêm đường dẫn sau vào cuối biến "Path": ";C:\Android\SDK\platform-tools"
  4. Bước 4: Lưu các thay đổi và khởi động lại Terminal hoặc Command Prompt để biến môi trường mới có hiệu lực.
Sau khi tích hợp thành công, bạn có thể sử dụng các lệnh adb và fastboot để tương tác với thiết bị Android của bạn thông qua Terminal hoặc Command Prompt.

2. Chạy ứng dụng React Native
Để chạy ứng dụng React Native trên Visual Studio Code, bạn cần thực hiện các bước sau:
2.1. Cài đặt Node.js và npm
React Native yêu cầu Node.js phiên bản 10 trở lên và npm để quản lý các phụ thuộc của dự án. Bạn có thể tải Node.js từ trang chủ của nó và cài đặt theo hướng dẫn.

2.2. Cài đặt môi trường React Native 
Có 2 cách để thiết lập môi trường React Native đó là sử dụng Expo CLI và React Native CLI, nhưng đối với những người mới làm quen với việc trình ứng dụng thì việc sử dụng React Native CLI là khá phức tạp vì có nhiều bước cài đặt. Nên cách đơn giản nhất đó là sử dụng Expo.
  • Expo - Môi trường xây dựng ứng dụng React Native
Expo là một tools được xây dựng dựa trên React Native với rất nhiều tính năng nổi bật, cho phép xây dựng nhanh chóng chỉ trong vài phút. Khi sử dụng Expo thì chỉ cần cài phiên bản mới nhất của Node.js và một chiếc máy thật hoặc máy ảo. Sau đây là các bước thiết lập môi trường React Native với Expo.
Expo CLI là một công cụ để phát triển ứng dụng với Expo. Ngoài giao diện dòng lệnh (CLI), nó cũng có giao diện người dùng đồ họa dựa trên web (GUI) tự động bật lên trong trình duyệt web khi khởi chạy dự án. Để cài đặt Expo CLI chúng ta cần phải cài đặt 2 công cụ cần thiết đó là Node.js và Git. Sau đây là các bước cài đặt trên các nền tảng.

Cài đặt bằng câu lệnh: npm install -g expo-cli

Đợi quá trình cài đặt hoàn tất thì chúng ta có thể kiểm tra xem đã cài đặt thành công hay chưa bằng cách sử dụng câu lệnh expo whoami, khi thấy thông báo đăng nhập của Expo tức là chúng ta đã cài đặt thành công.
Khi cài đặt xong Expo, tiến hành ứng dụng. Nếu bạn đã tạo một tài khoản với expo-cli thì bạn có thể đăng nhập tại đây trên tab Profile. Điều này giúp lưu trữ các dự án mà bạn đã làm. Ứng dụng React Native khi được khởi chạy bằng Expo CLI thì nó sẽ trả về một mã QR, khi quét mã này trên điện thoại bằng Expo thì chúng ta có thể xem trước ứng dụng của mình trực tiếp trên điện thoại mà không cần dùng máy ảo.

Trong trường hợp muốn chạy ứng dụng trực tiếp trên máy tính thì chúng ta sẽ cần cài đặt máy ảo bằng cách dùng Android Studio(Android) và Xcode(IOS).

2.3. Sử dụng Visual Studio Code
  • Mở thư mục của ứng dụng trong Visual Studio Code
  • Sau khi tạo ứng dụng React Native, bạn có thể mở thư mục của ứng dụng đó trong Visual Studio Code bằng cách chọn "File" -> "Open Folder" và chọn thư mục của ứng dụng.
2.4. Khởi tạo ứng dụng đầu tiên
npx create-expo-app my-app
cd my-app
2.5. Chạy ứng dụng trên máy ảo Android hoặc iOS
Để chạy ứng dụng React Native trên máy ảo Android hoặc iOS, bạn cần khởi động máy ảo và sau đó chạy lệnh sau:
npx expo start
Nếu máy ảo của bạn đã được cài đặt và được khởi động, lệnh này sẽ biên dịch và chạy ứng dụng trên máy ảo đó.

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML