NTM Solutions

Thứ Hai, 16 tháng 1, 2023

Giới thiệu và cài đặt React Native 2021

 #reactnative

React Native là gì?

React Native là 01 framework do Facebook phát triển nhằm mục đích viết 01 lần có thể chạy được trên nhiều nền tảng: web, android và ios.

Ứng dụng viết bằng ReactNative được gọi là Hybrid App (ứng dụng lai chạy trên nền web lẫn di động)

Trang web chính thức của React Native: https://reactnative.dev

P/s: khi lập trình bất kỳ ngôn ngữ nào, nên đăng nhập vào máy tính bằng tài khoản có quyền quản trị (administrator) để tránh những sự cố về quyền cài đặt. Thêm 01 điều nữa là máy tính phải có internet khi thực thi các lệnh cài đặt này.

Cách cài đặt React Native

Bước 01: Cài NodeJS

·         Vào trang: https://nodejs.org/en

·         Chọn phiên bản có chữ Recommended… và cài đặt.

·         Khi cài xong, ta có thể kiểm tra phiên bản NodeJS và NPM bằng lệnh CMD: node –v và npm -v


Bước 02: chạy lệnh npm để cài React Native

Mở CMD và chạy lệnh sau:

npm install –g create-react-native-app

 

Bước 03: tạo project ReactNative mới bằng lệnh

·         Chạy lệnh CMD sau: create-react-native-app ChutchutProJect

·         Nó hỏi gì cứ ENTER

·         Lúc này, chương trình đã tự động tạo 01 thư mục ChutchutProject trong thư mục user của bạn (mở cửa sổ lệnh run của windows gõ %PATH% để vào thư mục user của bạn)

·         Dùng lệnh cd để vào thư mục ChutchutProject và chạy lệnh npm run web

·         Nếu chương trình mở trình duyệt lên (xuất hiện 02 tab) sau 01 khoảng thời gian và hiện nội dung tiếng Anh: Open up App.js to start working on your app! là OK.

·         Ta sẽ sửa lại dòng hiển thị này bằng cách dùng Notepad (hay trình soạn thảo dòng lệnh nào mà bạn thích) mở tập tin App.js trong thư mục %PATH%/ChutchutProject

·         Sửa dòng chữ trong cặp thẻ thành: <Text>I love you chụt chụt!</Text>

·         Bấm nút SAVE -> quay lại màn hình duyệt web, bạn sẽ thấy sự thay đổi.

 

Bước 04: bật chế độ USB Debug trên điện thoại Android

Để chạy được chương trình ChutchutProject ngay trên điện thoại của bạn, ta phải bật chế độ USB debug ( enable USB debug mode) trong điện thoại Android.

Vào mục Settings – Cài đặt (vuốt cạnh trên màn hình - nút có hình bánh răng)

Mục Thông tin thiết bị (About Phone) -> Thông tin phần mềm (Software Information) -> bấm liên tiếp 07 lần Số hiệu bản tạo (Built Number) -> đến khi máy báo: bạn đã bật chế độ nhà phát triển…

Lúc này ngay bên trên mục Thông tin thiết bị (About phone/About device) sẽ có thêm mục: Cài đặt cho người phát triển (Developer options) -> bật Chế độ USB debug


Cắm điện thoại Android của bạn vào máy tính qua cổng USB.

Bước 05: cài Expo Go trên điện thoại Android để chạy thử Project

·         Mở wifi trên điện thoại -> chạy Expo Go trên điện thoại

·         Mở cmd -> vào thư mục chứa ChutchutProject->chạy lệnh npm run web

·         Click vào nút trên trình duyệt: Run on Android device/emulator

Sửa nội dung file App.js bạn sẽ thấy cập nhật ngay trên điện thoại trong vài giây.


P/S: ở đây, mình dùng NOTEPAD để lập trình cho dễ demo, trong thực tế các bạn nên dùng 01 chương trình chuyên nghiệp hơn như Microsoft Visual Studio Code hoặc Android Studio

Nếu bạn ngại cài đặt rườm rà khi viết mã bằng React Native => Mình xin giới thiệu 01 trang web cho phép test mã React Native trên cả 03 nền tảng: web + android + ios  mà không cần cài đặt gì trong video clip sau:


Cái này gọi là Snack Player.

P/S: các bạn hãy lưu tấm hình QR code này vào trong máy để khi cần học lấy ra cho tiện.

Tác giả: #drM
hotline:02862645022-0888712838

HEAD Honda Bình Minh 2 Thủ Đức
234 Đ. Võ Văn Ngân, Bình Thọ, Thủ Đức, Thành phố Hồ Chí Minh

BUS STATION COFFEE
281 Đ. Võ Văn Ngân, Linh Chiểu, Thủ Đức, Thành phố Hồ Chí Minh

vào lúc
Từ điển
Nhãn:

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)
Facebook Youtube RSS