Blog Công nghệ

React Native - Framework tuyệt vời cho ứng dụng di động?

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à AndroidAndroid chỉ cần 1 ngôn ngữ javascript duy nhất.
Để hiểu rõ về React Native là gì, chúng ta cần phân biệt sự khác nhau giữa ứng dụng Native và Hybrid.

• Khái niệm về 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 (html5, css3, javascript), bản chất hoàn toàn là ứng dụng web nhưng có thêm được các tính năng thao tác phần hệ điều hành như tập tin, truy cập máy ảnh, GPS hoặc các cảm biến như con quay hồi chuyển, gia tốc kế…Toàn bộ những thứ này đều được bao bọc bởi một lớp ứng dụng Native mà nổi bật là Phonegap/Cordova.

Phần web được xử lý hiển thị bởi webview, phần tính năng truy cập hệ thống được cung cấp bởi các hàm API. Ứng dụng gọi hàm bằng Javascript thông qua API thì chương trình Phonegap/Cordova bao bọc sẽ gọi trực tiếp Native xuống hệ điều hành. Bằng cách này, ứng dụng web có thêm những tính năng cao cấp của ứng dụng Native, và do được tính hợp mã nguồn sẵn nên tốc độ của ứng dụng hybrid nhanh hơn ứng dụng web.

• Khái niệm về 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ụ với iOS là Objective-C, Swift và Android là Java, Window phone là C++ hoặc C#. 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 cũng như không phải thông qua ứng dụng nào khác nên tốc độ là nhanh nhất.

Tốc độ ở đây bao gồm tốc độ hiển thị (độ mượt), và tốc độ xử lý. Nếu để ý kỹ bạn sẽ thấy các thao tác của ứng dụng native như chuyển trang, điều hướng, cuộn trang đều rất mượt.

REACT NATIVE

React Native là framework giúp lập trình viên viết ứng dụng Native chỉ bằng Javascript. Đúng vậy, chỉ đơn giản là Javascript, React Native phủ nhận định nghĩa về ứng dụng native ở đoạn trên.

React Native 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à hybrid. Chỉ với một lập trình viê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à bây giờ là mobile. Điều này không những có lợi cho lập trình viên web mà nó giúp cho 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 React Native, điều tuyệt vời là đã được tích hợp tính năng Live Reload – tương tự tính năng Hot Replacement Module trong Webpack. Tính năng Live Reload khác tính năng Reload, trong khi Live Reload chỉ 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 cũng dễ dàng debug javascript trong Chrome và Safari. Đối với những lỗi thuộc Native thì phải cần đến XCode cho iOS hoặc Android Studio cho Android.
 

CÀI ĐẶT ỨNG DỤNG

Bước 1 : Cài đặt Nodejs
Vào đường dẫn https://nodejs.org/en/  để download Nodejs

• Với V8.3.0 là bản mới nhất
• Sau khi download về tiến hành cài đặt
  
  
   
• Bấm next để cài đặt Nodejs
  
  
   
• Để kiểm tra cài đặt đã thành công hay chưa thì ta sử dụng cửa sổ cmd và gõ Node.Js
  
  
   
• Cửa sổ NodeJs
  
  
  
  Bước 2 : Cài đặt git
   
• Vào trang chủ của git https://git-scm.com/ để download git tiến hành cài đặt giống như NodeJs

• Sau khi cài đặt xong logout người dùng và đăng nhập lại để khởi động Git

  Sau khi cài thành công click chuột phải để kiểm tra
  
  
   

  Nếu có Git GUI Here và Git Bash Here thì cài đặt đã hoàn tất.

  Lưu ý :Sử dụng thêm 1 IDE để soạn thảo code
  
  Bước 3:Cài đặt android studio
  
  Cài đặt  vào trang https://developer.android.com/studio/index.html để download
  Sau khi download cần chỉnh lại đường dẫn Android_home
  
  Bước 4:Cài máy ảo genymotion
  Vào trang https://www.genymotion.com để download máy ảo.
  Lưu ý :Nhớ đăng ký tài khoản rồi mới download + tải thêm virtulbox
  
  Bước 5 : Cài đặt react-native
  
  npm install -g create-react-native-app
  create-react-native-app AwesomeProject
  
  VD:
  Tạo 1 thư mục tên React-native
  Từ thư mục React-native click chuột phải chọn open comand windown here và enter
  
  

• Gõ npm install -g create-react-native-app

  Và chờ,sau khi load xong thì tiếp tục gõ react-native init myproject

  Bước 6 : Khởi chạy

• Vào cd myproject.
• Sau khi tạo xong gõ react-native start để mở công kết nối
  
  
  
   

   

• Tiếp tục click chuột phải mở open command windown here gõ react-native run-android
  
  
• Trong lúc chờ mở máy ảo genymotion,sau khi chạy xong thì màn hình app react-native sẽ xuất hiện
  
   

  Demo 1 ứng dụng cơ bản

  Bước 1 : Kéo dự án myproject vào trong subline text 3 để hiện thị code
  
  
  Bước 2 :Tạo file indexall.js
  Note: Tạo file indexall.js để viết tất cả code trong đó và render 2 file index.android.js,index.ios.js.
  Việc làm này giúp ta khi thay đổi file indexall.js thì sẽ tự động thay đổi cả 2 file trên.
  Viết file index.android.js ,index.ios.js như sau :
  
  Viết file indexall.js

• 
  
  
  Hiện thị :