React Native cơ bản

1. Giới thiệu React Native
   1. Hybrid và Native App
      Hybrid App
      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, gọi hàm bằng Javascript thông qua API thì chương trình 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.
      Native App
      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ị, 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. Với việc hơn hẳn về tốc độ xử lý, nên ứng dụng hybrid khó có thể làm được ứng dụng nặng đồ hoạ như game, mặc dù vẫn có thể làm được nhưng không mượt mà nên hầu như hiếm ai dùng hybrid cho lập trình game cho điện thoại di động (ngoại trừ một số game đơn giản như xếp hình, giải câu đố, 2048…)
   2. 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. Để hiểu rõ về React Native là gì, trước tiên chúng ta cần phân biệt sự khác nhau giữa ứng dụng Native và Hybrid.
      Trang chủ của React Native: https://facebook.github.io/react-native/
   3. Tại sao là React Native!
      Sự ra đời của 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. Và nhờ đó, chỉ với một kỹ sư 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.
2. Cài đặt môi trường
   Tùy theo nhu cầu mà các bạn có thể phải cài đặt khác nhau, ở đây mình muốn viết App Android và dùng OS là windown 10. (các môi trường khác vui lòng tham khảo tại đây)
   1. Bước 1: Cài đặt Nodejs và Python
      • Khuyến khích sử dụng Chocolatey để cài đặt Nodejs và Python. Cài đặt chi tiết các bạn có thể tham khảo tại đây
      • Sử dụng Command Prompt chạy 2 đoạn script sau:

        @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

        choco install nodejs.install
        choco install python2

        Vì mình muốn xây dựng Android App nên các bạn phải cài Android Studio
   2. Bước 2: Cài đặt React Native Sau khi hoàn thành bước trên, mở 1 Command Prompt mới, chạy đoạn script sau:
      

      npm install -g react-native-cli

3. Ứng dụng đầu tiên Khởi tạo một project mới với tên "AwesomeProject", sau đó chạy ứng dụng đó chạy thử trên Android emulator.
   

   react-native init AwesomeProject
   cd AwesomeProject
   react-native run-android

   Nếu mọi thứ đúng thì chúng ta sẽ thấy app "AwesomeProject" chạy trên emulator.
   
Lỗi Thường gặp:
1. Could not resolve all dependencies for configuration
   Thì các bạn phải mở Android SDK và cài thêm "Android Support Repository" trong phần Extras:
   
2. Could not download file
Cách xử lý là down file đó và copy vào thư mục của nó là được.
4. Nguồn hỗ trợ

https://facebook.github.io/react-native/docs/getting-started.html
https://react.parts/native
http://www.reactnative.com/
http://www.appcoda.com/react-native-introduction/
http://moduscreate.com/react-native-has-landed/
http://herman.asia/building-a-flashcard-app-with-react-native
http://blog.scottlogic.com/2015/03/26/react-native-retrospective.html
http://red-badger.com/blog/2015/03/04/react-native-the-killer-feature-that-nobody-talks-about/