React Native là gì? Hướng dẫn cài đặt và tự học lập trình React Native từ cơ bản đến nâng cao

Trong một vài năm trở lại đây, React Native đã trở thành một chủ đề “nóng” trong giới lập trình di động. Điều này cũng không có gì lạ, bởi nó nổi tiếng một cách nhanh chóng trong thế giới công nghệ bởi nó cung cấp giải pháp lập trình ứng dụng di động đồng thời cho cả iOS và Android.

React Native – Một framework đứng trên tất cả

React Native đã được áp dụng thành công bởi hàng nghìn doanh nghiệp trên khắp thế giới, bao gồm có Uber, Microsoft và Facebook, và được sử dụng rộng rãi trong rất nhiều ngành công nghiệp.

Tuy nhiên trước khi bạn quyết định “dấn bước” và React Native thì bạn cần phải hiểu được React Native là gì? Nó hoạt động như thế nào ? Làm sao để cài đặt React Native? Và phải học nó như thế nào? Đừng lo, bài viết này sẽ giải đáp tất cả các thắc mắc trên của bạn để biết rằng liệu bạn có phù hợp với framework này hay không.

1. React Native là gì ?

1.1. Khái niệm

React Native là một framework lập trình ứng dụng di động dựa trên JavaScript nổi tiếng cho phép bạn xây dựng các ứng dụng di động gốc cho iOS và Android. Framework cho phép bạn tạo ra một ứng dụng trên nhiều nền tảng sử dụng cùng một codebase.

React Native được ra mắt lần đầu bởi Facebook dưới dạng một dự án mã nguồn mở vào năm 2015. Chỉ trong một vài năm, nó trở thành giải pháp hàng đầu cho phát triển ứng dụng di động. React Native đã cung cấp hỗ trợ cho một trong những ứng dụng di dộng hàng đầu thế giới, bao gồm Instagram, Facebook, Skype,..v..v..

1.2. Tại sao React Native lại trở nên phổ biến?

Khi các nhà phát triển tạo ra một ứng dụng gốc, họ cần phải gấp đôi số tiền đầu tư dự tính để tạo ra ứng dụng cho các thiết bị trên cả Android lẫn iOS. Kết quả là chi phí sẽ tăng lên, và việc phảt triển ứng dụng sẽ trở nên phức tạp và tốn thời gian hơi. Trái lại, phát triển ứng dụng liên nền tảng giúp các lập trình viên chỉ cần sử dụng cùng một code base.

Một trong những framework liên nền tảng tổt nhất đó là React Native, là giải pháp phát triển trên nền tảng di động phổ biến nhất cho các startups và các nhà phát triển ứng dụng hiện nay.

1.3. React Native hoạt động như thế nào?

Có 2 luồng quan trọng chạy trong tất cả các ứng dụng React Native. Một trong số đó là luồng chính, cũng được chạy trong tất cả các ứng dụng gốc tiêu chuẩn. Nó quản lý về hiển thị các phần tử của giao diện và xử lý cử chỉ của người dùng. Luồng còn lại là của riêng React Native. Nhiệm vụ của nó là thực thi code JavaScript trong một JavaScript engine khác. JavaScript đảm nhiệm về logic nghiệp vụ của ứng dụng. Nó cũng định nghĩa cấu trúc và các chức năng của giao diện người dùng. Hai chuỗi này không bao giờ truyền thẳng và cũng không bao giờ chặn nhau.

Như đã đề cập đến ở phía trên, React Native được viết bằng sự kết hợp giữa JavaScript và JXL, một code đánh dấu đặc biệt giống như XML. Framework có thể giao tiếp với cả 2 miền: Các luồng của JavaScript và các luồng sẵn có của ứng dụng gốc. Giao tiếp này hoạt động như thế nào? React Native sử dụng một concept được gọi là cầu nối (bridge). Trong khi các luồng JavaScript và luồng gốc được viết bằng các ngôn ngữ hoàn toàn khác nhau, chức năng cầu nối sẽ giúp cho việc giao tiếp 2 chiều khả thi.

Sau đây là mô tả trực quan về concept cầu nối:

Điều này có nghĩa là nếu bạn đã có một ứng dụng iOS hay Android gốc, bạn vẫn có thể dùng các thành phần của nó hoặc chuyển sang lập trình bằng React Native.

1.4. Tại sao lại sử dụng React Native làm Framework phát triển ứng dụng?

Giao diện người dùng tương tác

Lý do chính cho thành công của công nghệ React Native đó là việc đơn giản hóa giao diện người dùng di động. Như đã nói đến ở trên, đây là một mạng lưới mã nguồn mở để các lâpj trình viên có thể sử dụng các dãy cụ thể để xây dựng ứng dụng. Hơn nữa, ứng dụng xây dựng bằng React Native phản hồi tốt hơn, tốn ít thời gian tải hơn và cung cấp một trải nghiệm người dùng liền mạch.

Framework phát triển ứng dụng hiệu quả về chi phí

Việc tái sử dụng code giúp giảm thiếu một cách đáng kể chi phí phát triển ứng dụng cho iOS và Android. Với framework này, các nhà phát triển không cần phải viết code cho cả 2 nền tảng và code cho ứng dụng ngôn ngữ sẵn có. Do vậy, bạn sẽ giảm thiểu số lượng các nhà phát triển gốc cần thiết và thời gian hoàn thành dự án.

Độ tin cậy cao

React Native đảm bảo an toàn cho việc liên kết dữ liệu và ngăn dữ liệu cha không bị ảnh hưởng bởi các thành phần con. Vì vậy, ứng dụng sẽ trở nên đáng tin cậy và mạnh mẽ hơn. Nếu nhà phát triển muốn đưa ra các thay đổi thì họ sẽ phải thay đổi trạng thái trước tiên. Điều này cho phép các nhà phát triển chỉ cập nhật các thành phần được cho phép.

Cải thiện hiệu năng

Các module và điều khiển gốc cải thiện hiệu năng của nền tảng. React Native tương tác với các thành phần phát triển ứng dụng của Android và iOS và tạo code cho các API gốc. Và hơn nữa, các dòng code này là tự động và không bị bất kỳ cản trở nào. Ví dụ, khi sử dụng một luồng khác, nó sẽ tự động cải thiện hiệu năng. Cũng có các lựa chọn khác như WebView, nhưng chúng sẽ gây ảnh hưởng đến hiệu năng ứng dụng của bạn.

2. Hướng dẫn cài đặt và thiết lập môi trường làm việc của React Native trên Windows

Đầu tiên chúng ta sẽ cùng cài đặt React Native trên Windows 10 sử dụng React Native CLI

2.1. Cài đặt Chocolatey

Chocolatey là một trình quản lý package phổ biến trên Windows. Đầu tiên, chúng ta cần cài đặt nó vào hệ thống.

Để cài đặt Chocolatey. Mở bảng lệnh Command Prompt với quyền quản trị viên và chạy các dòng lệnh sau.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString(‘https://community.chocolatey.org/install.ps1’))

Tham khảo tại: https://chocolatey.org/install

2.2. Cài đặt Node.js, Python2 và JDK8

Giờ chúng ta cần cài đặt Node.js, Python2 và JDK bằng Chocolatey. Chúng ta sẽ thực hiện bằng lệnh dưới đây

choco install -y nodejs.install python2 jdk8

2.3. Cài đặt Android Studio

Android Studio cần phải được cài đặt để có thể làm việc với React Native. Chúng ta có thể dễ dàng download với link sau: https://developer.android.com/studio

2.4. Thiết lập Android SDK

Android Studio sẽ mặc định cài đặt phiên bản Android SDK mới nhẩt. Tuy nhiên, lập trình một ứng dụng React Native với code gốc sẽ đòi hỏi cụ thể phải có Android 11.0 (R) SDK. Các Android SDK khác có thể được cài đặt thông qua SDK Manager trong Android Studio.

SDK Manager có thể được truy cập từ màn hình Welcome to Android Studio.

Click vào Configure, sau đó chọn SDK Manager.

SDK manager -> SDK platforms

Sau đó tick vào ô bên cạnh “Show Package Details” ở góc dưới bên phải. Tìm và mở rộng mục Android 11.0 (R) , hãy đảm bảo là tất cả mục sau đều được tick:

• Android SDK Platform 26
• Google APIs Intel x86 Atom_64 System Image

Các công cụ React Native cần các biến môi trường cho việc thiết lập để có thể xây dựng ứng dụng bằng code gốc.

Mở phần System bên dưới System and Security trong Windows Control Panel, sau đó click vào Change settings. Mở tab Advanced và click vào Environment Variables. Click New để tạo một biến người dùng mới là ANDROID_HOME trỏ về đường dẫn đến Android SDK của bạn:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

2.5. Cài đặt React Native CLI

Chúng ta có thể dễ dàng cài đặt React Native CLI sử dụng NPM. Bạn có thể thực hiện bằng lệnh dưới đây trong Command Prompt/ Powershell trên hệ thống của bạn.

npm install -g react-native-cli

2.6. Tạo một ứng dụng mới

Với React Native CLI, chúng ta có thể tạo một dự án React Native mới.

react-native init NewProject

Ở đây mình sẽ đặt tên dự án là NewProject.

2.7. Chạy ứng dụng

Giờ chúng ta có thể chạy ứng dụng vừa tạo trên điện thoại Android. Tuy nhiên trước hết, chúng ta cần phải thiết lập thiết bị di động.

Bạn cũng có thể chạy ứng dụng trên Android Virtual Device(AVD) được tạo ra từ Android Studio.

2.7.1. Thiết lập thiết bị Android

Chúng ta cần phải bật USB debugging trong thiết bị Android để chạy ứng dụng React Native mà chúng ta vừa tạo.

• Trên thiết bị Android của bạn, đi tới phần Settings->About;
• Chúng ta có thể thấy menu Build Versio;
• Tiếp tục click vào lựa chọn Build Version cho đến khi nó cho phép tùy chọn Developer options;
• Trở về Settings và click vào menu Developer options;
• Bật tùy chọn USB debugging trong Developer options.

Kết nối thiết bị di động của bạn với hệ thống Windows bằng cáp USB. Nhập dòng lệnh dưới đây để xác định xem thiết bị của chúng ta đã được kết nối hay chưa.

adb devices

Bây giờ, chạy lệnh dưới đây đề chạy ứng dụng React Native trên thiết bị di động của bạn.

react-native run-android

Mình khuyến khích các bạn nên sử dụng Visual Studio Code làm trình biên tập mã nguồn để làm việc với các dự án React Native.

Trên đây chúng ta đã học về các bước để cài đặt React Native on our Windows 10 sử dụng React Native CLI. Ngoài ra bạn còn có thể sử dụng Expo CLI nếu muốn cài đặt và thiết lập React Native dễ dàng hơn.

– Sưu tầm –