React Native – Hướng dẫn chi tiết cài đặt môi trường

0
2045
Bài này thuộc phần 1 của 9 phần trong series React Native Training cho người mới

Trong những ngày hè oi bức thế này, mình thấy mọi người hay bàn tán nhiều về một xu hướng lập trình mới. Đó là lập trình cross-platform, nghĩa là chỉ cần code một lần là có thể có app cho Android và IOS. Sẽ không còn hai ông Android developer hay IOS developer nữa. Mà bây giờ chỉ có một, một ông Mobile Developer. Nghe có vẻ thú vị đúng không!?

Trong số nhiều lựa chọn sáng giá, mình có tìm hiểu qua tất cả thì React Native nổi lên như một siêu sao với nhiều tính năng ưu việt như tốc độ, dễ học, dễ maintaince…

Hôm nay, mình sẽ viết một series nhiều bài viết xoay quanh chủ đề React Native. Tất nhiên, chúng ta sẽ bắt đầu từ ứng dụng Hello World, sau đó đến các ứng dụng hoàn chỉnh .

Nhưng trước hết là chúng ta tìm hiểu qua xem React Native là gì? Tại sao nó lại mạnh mã vậy và cuối cùng là cài đặt môi trường để code.

Let’s go!

react native huong dan chi tiet cai dat moi truong

React Native là gì?

React Native cho phép bạn xây dựng ứng dụng dành cho thiết bị di động( cả Android và IOS) mà chỉ cần dùng JavaScript. Nó sử dụng cùng một thiết kế như React, bạn có thể tạo một giao diện người dùng (UI) phong phú từ các components được tối ưu cho thiết bị di động.

Như hình bên dưới là cấu trúc của React Native

react-native-huong-dan-chi-tiet-cai-dat-moi-truong-2

 

Tại sao lựa chọn React Native?

Điều gì làm cho React Native trở nên khác biệt với các framework khác cũng sử dụng JavaScript để tạo ứng dụng cross-platform, chẳng hạn như PhoneGap (Apache Cordova) hoặc Titanium Appcelerator?

Theo kinh nghiệm của mình thì có 3 lý do chính:

#1. React Native có Component

Component của React Native được kế thừa từ React, và nó đóng vai trò như hạt nhân thúc đẩy React và React Native phát triển, với khả năng tái sử dụng và quản lý giao diện, Component API được xem như là tương lai của thiết kế UI trên web và mobile.

#2. Thực sự native

Đa phần ứng dụng mobile viết bằng Javascript hiện nay sử dụng Cordova hoặc các framework xây dựng trên nền Cordova như Ionic, Sencha Touch,… Bạn có thể gọi các View giống hệt native ra tuy nhiên ứng dụng của bạn lại chỉ là một đống HTML/HTML5 và Js gói bên trong Webviews. Với React Native, nó cho phép bạn render các View của mình bằng chính true native API, bằng cách gọi chính sdk theo từng nền tảng để build ứng dụng.

#3. Dễ dàng kết hợp với native code (Java, Swift,..)

Trong một số tính năng đặc thù cần phải tương tác nhiều với phần cứng của thiết bị như: tính năng camera, tính năng Bluetooth… thì bạn cần phải sử dụng code native(Java hoặc Swift). React Native cho bạn code native ngay chính trong project và có thể tương tác với code Javascript bên ngoài. Quá tuyệt phải không!

Mình giới thiệu qua vậy thôi để bạn dễ hình dung điểm mạnh của React Native.

Không lan man nữa, chúng ta tiến hành cài đặt môi trường phát triển nào.

Cài đặt môi trường làm việc

Step 1. Node và Java Development Kit

React Native sử dụng Node.js, một JavaScript runtime, để xây dựng mã lệnh JavaScript của bạn. React Native cũng yêu cầu một phiên bản mới nhất của Java SE Development Kit (JDK) để chạy trên hệ điều hành Android. Hãy thực hiện theo hướng dẫn cho hệ thống của bạn để đảm bảo bạn cài đặt các phiên bản cần thiết.

Dành cho MacOS

Đầu tiên cần cài đặt Homebrew bằng cách sử dụng các hướng dẫn trên trang web Homebrew. Sau đó cài đặt Node.js bằng cách thực hiện các lệnh sau qua Terminal

brew install node

Tiếp theo, sử dụng homebrew để cài đặt watchman, một chương trình theo dõi tập tin từ Facebook:

brew install watchman

Chương trình theo dõi tập tin này được sử dụng bởi React Native để tìm ra khi nào mã lệnh của bạn thay đổi và rebuild cho phù hợp, giống như việc Android Studio thực hiện build mỗi khi bạn lưu tập tin của mình.

Cuối dùng, tải và cài đặt JDK8 hoặc phiên bản mới hơn nếu cần.

Dành cho HĐH Windows

Đầu tiên cần cài đặt Chocolatey bằng cách sử dụng các hướng dẫn trên trang web Chocolatey.

Cài đặt Node.js nếu bạn chưa có hoặc có phiên bản cũ hơn 4. Chạy lệnh sau với quyền Administrator (kích chuột phải vào Command Prompt và chọn “Run as Administrator”):

choco install -y nodejs.install

Cần có Python để chạy các kịch bản xây dựng React Native. Chạy lệnh sau với quyền Administrator nếu bạn chưa Python 2:

choco install -y python2

Chạy lệnh sau với quyền Administrator nếu bạn chưa có JDK hoặc có phiên bản cũ hơn 8:

choco install -y jdk8

 

Dành cho Linux

Cài đặt Node.js bằng cách làm theo các hướng dẫn cài đặt cho bản phân phối Linux của bạn. Bạn sẽ muốn cài đặt Node.js phiên bản 6 hoặc mới hơn.

Cuối cùng, tải xuống và cài đặt JDK 8 hoặc mới hơn nếu cần.

Step 2. React Native CLI

Sử dụng Node Package Manager (hay viết tắt là npm) để cài đặt công cụ React Native Command Line Interface (CLI). Tại thiết bị đầu cuối (Terminal hoặc Command Prompt hoặc shell), bạn gõ lệnh:

npm install -g react-native-cli

npm tìm nạp công cụ CLI và cài đặt nó. npm có chức năng tương tự như JCenter và được đóng gói với Node.js.

Sau đó, cài đặt Yarn bằng cách sử dụng các hướng dẫn trên trang web của Yarn. Yarn là một client npm tốc độ cao.

Step 3. Môi trường phát triển cho Android

Ở bước này, bạn cần đảo bảo đã thiết lập môi trường phát triển Android. Nghĩa là bạn có thể chạy thành công ứng dụng Android trên một trình giả lập.

React Native yêu cầu Android 6.0 (Marshmallow). Trong Android Studio, chọn  Tools\Android\SDK Manager. Chọn SDK Platforms và kiểm tra Show Package Details. Đảm bảo rằng các mục sau được chọn:

  • Google APIs, Android 23
  • Android SDK Platform 23
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

 

react-native-huong-dan-chi-tiet-cai-dat-moi-truong-1

Sau đó, chọn SDK Tools và kiểm tra Show Package Details. Mở rộng Android SDK Build-Tools và chắc chắn rằng 23.0.1 được chọn.

Cuối cùng, chọn Apply để cài đặt các lựa chọn của bạn.

Khi các component của Android được cài đặt xong, hãy tạo một trình mô phỏng mới chạy SDK Platform 23.

Tạo ứng dụng đầu tiên

Điều hướng đến thư mục mà bạn muốn phát triển ứng dụng và chạy lệnh sau trên thiết bị đầu cuối:

react-native init PropertyFinder

Nó sử dụng công cụ CLI khởi tạo một project có chứa các thứ cần thiết để build và run một ứng dụng React Native.

Trên thiết bị đầu cuối, chạy lệnh:

cd PropertyFinder

Trong các thư mục và tập tin đã tạo, bạn sẽ tìm thấy một vài mục lưu ý:

  • node_modules là một thư mục chứa React Native framework
  • index.js là entry point được tạo bởi công cụ CLI
  • App.js là skeletal  app được tạo bởi công cụ CLI
  • android  là thư mục chứa code native dành riêng cho ứng dụng Android
  • ios là tương tự thư mục android thì thư mục này chứa code cho ứng dụng chạy trên iOS.

Bạn thử chạy Android emulator xem có được không? nếu không được thì thử lệnh sau trên terminal:

react-native run-android

Ok, Android emulator sẽ hiện ra:

react-native-huong-dan-chi-tiet-cai-dat-moi-truong-3

Nếu bạn gặp lỗi “SDK location not found” thì thực hiện các bước sau:

  • Đến android/directory của react-native project
  • Tạo một tập tin local.properties với lệnh sau:
sdk.dir = {PATH TO ANDROID SDK}

Trên macOS, đường dẫn SDK trông giống như dưới đây:

/Users/USERNAME/Library/Android/sdk.

Có thể bạn sẽ thấy một popup như bên dưới. Đừng hoảng, cứ keep nó lại nhé!

react-native-huong-dan-chi-tiet-cai-dat-moi-truong-4

Đây là Metro Bundler, trình hỗ trợ JavaScript React Native chạy dưới Node.js.

Nếu lỡ tay đóng nó rồi thì bạn cần chạy lệnh sau trong terminal

react-native start

Do mình chủ yếu viết mã lệnh JavaScript cho React Native, do đó không cần sử dụng Android Studio IDE làm editor. Mình sử dụng Visual Code, một editor nhẹ và linh hoạt. Ngoài ra cũng có một số lựa chọn khác như Atom, Brackets hoặc bất kỳ editor gọn nhẹ nào khác để thực hiện công việc này.

Như vậy, chúng ta đã hoàn thành việc cài đặt môi trường để có thể chinh chiến React Native rổi đấy. Bài viết sau, mình sẽ hướng dẫn cách để có thể debug được React Native trên Visual Code. Các bạn đón đọc nhé.

Xem tiếp các bài trong Series
Phần kế tiếp: React Native – Cách Debug chương trình trong Visual Code

Bình luận. Đặt câu hỏi cũng là một cách học

avatar
  Theo dõi bình luận  
Thông báo