Top Ad unit 728 × 90

Lập trình React Native: Hướng dẫn cài đặt React Native trên Windows

REACT NATIVE LÀ GÌ




React Native là framework xây dựng ứng dụng di đông native sử dụng Javascript do Facebook phát hành.
Sử dụng React Native để xây dựng ứng dụng iOS và Android chỉ cần một ngôn ngữ javascript duy nhất.

Và để giúp các bạn hiểu rõ về React Native là gì thì chúng ta cùng nhau đi tìm hiểu thế nào là Native và Hybrib

- Hybrib là chương trình phần mềm trên điện thoại di động được viết dựa trên nền tảng web, bản chất hoàn toàn là ứng dụng web nhưng có thêm được các chức năng thao tác phần hệ điều hành như tập tin, truy cập máy ảnh, GPS,...
- Native là ứng dụng được phát triển trực tiếp bằng ngôn ngữ của hệ điều hành đó cung cấp. Ví dụ iOS là swift và Objective, Android là Java và Kotlin. Các ứng dụng viết băng ngôn ngữ này được biên dịch ra ngôn ngữ máy trên điện thoại và có toàn bộ tính năng mà hệ điều hành đó cung cấp. Do là ngôn ngữ trực tiếp không phải qua ứng dụng nào nên tốc độ ứng dụng nhanh hơn.



Như ở trên mình đã nói rồi, mình sẽ nhắc lại!

React Native là một framwork giúp lập trình viên viết ứng dụng Native chỉ bằng Javascript, giúp cho lập trình viên web có thể viết ứng dụng native để khắc phục các điểm yếu của ứng dụng web và hybrib. Chỉ cần thành thạo Javascript, bạn có thể chiến đấu trên mọi mặt trận web, desktop, server và mobile. Điều này mở ra cơ hội cho lập trình viên phát triển sản phẩm của mình trên đa nền tảng, giúp các doanh nghiệp phát triển sản phẩm đầu cuối với ít nhân lực hơn.

Khi xây dựng ứng dụng bằng React Native, điều hay là đã được tích hợp tính năng Live Reload. Tính năng này khác với tính năng Reload trong khi Live Reload chỉ cần tải lại chức năng/ tập tin nào thay đổi thì reload sẽ tải lại toàn bộ mã nguồn. Ngoài ra, bạn dễ dàng debug trong trình duyệt và Xcode đối với iOS và Android Studio đối với Android.

CÀI ĐẶT REACT NATIVE


Trên mình cũng đã giới thiệu cho các bạn biết React Native là gì rồi. Vậy để làm được nó thì chúng ta cần phải làm gì? Như thế nào?
Để trả lời cho câu hỏi trên thì chúng ta chuyển sang phần cài đặt nhé! Phần này là được mình đọc và dịch từ trang chủ của React Native và mình hướng dẫn cài đặt trên Windows. Chúng ta bắt đầu nhé!




Bước 1: Cài đặt Nodejs

Các bạn truy cập vào trang chủ của Nodejs tải bản mới nhất.
React Native nodejs v9.0.0


- Version mới nhất hiện tại lúc mình viết bài này là v9.0.0
- Sau khi tải xong các bạn tiến hành cài đặt bình thường như các ứng dụng khác trên windows. Các bạn chỉ cần Next là xong.
- Khi cài đặt hoàn tất các bạn bấm Windows + R => cmd => gõ câu lệnh sau:
#node -v 
 rồi Enter. Nếu ra như vậy tức là bạn cài đặt nodejs thành công.
React Native nodejs v9.0.0

Sau khi cài đặt Nodejs hoàn tất. Chúng ta tiếp tục chuyển sang bước tiếp theo.



Bước 2 cài đặt JDK và Android Studio. 

Tuy nhiên cài đặt JDK và Android Studio mình đã có bài hướng dẫn cài đặt rồi các bạn xem lại tại đây.

Chúng ta tiếp tục sang bước tiếp theo.



Bước 3: Cài đặt máy ảo Genymotion.


Cài đặt Genymotion các bạn truy cập vào trang Tại đây để tải máy ảo.

Lưu ý: Tải genymotion về rồi gì chúng ta tiếp tục vào trang virtualbox để tải nó về nhé! Tuy khi cài đặt genymotion sẽ được cài đặt sẵn virtualbox đối với bản kèm virtual nhưng bị lỗi nên chúng ta cần tải virtualbox về và cài đặt mới có thể khởi chạy được máy ảo nhé!

Lỗi khi khởi động máy ảo của genymotion:
genymotion

Cuối cùng cũng đã đến bước cài đặt React Native


Bước 4: Cài đặt React Native


Các bạn bấm tổ hợp phím Windows + R để mở cmd lên và gõ câu lệnh cài đặt sau:

npm install -g react-native-cli
Enter và đợi cho quá trình cài đặt hoàn tất. Quá trình cài đặt mất khoảng 5 - 10 phút tùy vào chất lượng đường truyền mạng của bạn.


Bước 5: Khởi tạo dự án và chạy dự án.

Để khởi tạo dự án các bạn chọn nơi để chứa bộ code dự án của mình. Khi bạn đã chọn được rồi thì vào thư mục chứa của bạn rồi bấm phím Shift + chuột phải nó sẽ ra hình sau:
Sau khi ra như vậy các bạn bấm vào "OPEN POWERSHELL WINDOW HERE" nó sẽ ra như vậy

Tiếp đến các bạn gõ câu lệnh sau:

#react-native init <Tên Dự Án>
Enter và đợi chờ để máy tải và khởi tạo dự án cho bạn.

Sau khi khởi tạo dự án xong các bạn cd vào dự án của bạn, cd vào dự án của các bạn xong thì các bạn gõ dòng lênh sau:
#react-native run-android

Vậy là mình đã hướng dẫn xong cho các bạn các bước cài đặt React Native trên Windows trong bài tiếp theo mình sẽ hướng dẫn các bạn cài trên máy tính Mac. Các bạn cùng đón đọc nhé!

Chú ý:
- Khi cài đặt React Native chạy Android thì các bạn cần cấu hình thêm một chút trong Android Studio.
- Tạo biến môi trường ANDROID_HOME.

Chúc bạn thành công!
Lập trình React Native: Hướng dẫn cài đặt React Native trên Windows Reviewed by Thế Giới Tri Thức on tháng 11 05, 2017 Rating: 5

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

All Rights Reserved by THẾ GIỚI TRI THỨC © 2018
Thiết kế bởi: THẾ GIỚI TRI THỨC

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.