Hướng dẫn chạy ứng dụng react-native

React Native là một thư viện mã nguồn mở cho phép bạn xây dựng ứng dụng di động bằng JavaScript và sử dụng các thành phần giao diện người dùng (UI) bản địa. Để hiểu cấu trúc cơ bản của một ứng dụng React Native, bạn cần hiểu một số khái niệm cơ bản của React, như JSX, components, state và props. Nếu bạn đã biết React, bạn vẫn cần học thêm một số điều cụ thể của React Native, như các thành phần bản địa. Bài viết này sẽ hướng dẫn bạn các bước để tạo và chạy một ứng dụng React Native đơn giản.

Cài đặt môi trường phát triển

Để phát triển ứng dụng React Native, bạn cần cài đặt một số công cụ và phần mềm trên máy tính của bạn, bao gồm:

• Node.js: là một môi trường chạy JavaScript bên ngoài trình duyệt. Bạn có thể tải Node.js từ đây.
• npm hoặc yarn: là các công cụ quản lý gói cho JavaScript. Bạn có thể sử dụng npm (được cài đặt cùng với Node.js) hoặc yarn (có thể tải từ đây).
• Expo CLI hoặc React Native CLI: là các công cụ dòng lệnh cho phép bạn khởi tạo, phát triển và xây dựng ứng dụng React Native. Bạn có thể chọn Expo CLI (dễ sử dụng hơn, nhưng có ít tính năng hơn) hoặc React Native CLI (có nhiều tính năng hơn, nhưng khó sử dụng hơn). Bạn có thể cài đặt Expo CLI bằng lệnh npm install -g expo-cli hoặc yarn global add expo-cli. Bạn có thể cài đặt React Native CLI bằng lệnh npm install -g react-native-cli hoặc yarn global add react-native-cli.
• Máy ảo Android hoặc iOS: là các phần mềm giả lập thiết bị di động trên máy tính của bạn. Bạn có thể sử dụng máy ảo Android từ Android Studio hoặc máy ảo iOS từ Xcode. Bạn cũng có thể sử dụng thiết bị di động thật của bạn để chạy ứng dụng React Native, nhưng bạn cần cài đặt Expo Go app (nếu sử dụng Expo CLI) hoặc React Native app (nếu sử dụng React Native CLI) từ cửa hàng ứng dụng.

Tạo một ứng dụng React Native

Sau khi đã cài đặt xong môi trường phát triển, bạn có thể tạo một ứng dụng React Native mới bằng lệnh sau:

• Nếu sử dụng Expo CLI: expo init <tên ứng dụng>
• Nếu sử dụng React Native CLI: react-native init <tên ứng dụng>

Lệnh này sẽ tạo ra một thư mục mới với tên ứng dụng của bạn và các tệp tin cần thiết cho ứng dụng. Bạn có thể vào thư mục này bằng lệnh cd <tên ứng dụng>.

Chạy ứng dụng React Native

Để chạy ứng dụng React Native, bạn cần mở máy ảo Android hoặc iOS trên máy tính của bạn hoặc kết nối thiết bị di động của bạn với máy tính qua cáp USB. Sau đó, bạn có thể chạy lệnh sau trong thư mục ứng dụng:

• Nếu sử dụng Expo CLI: expo start
• Nếu sử dụng React Native CLI: react-native run-android hoặc react-native run-ios

Lệnh này sẽ khởi động một máy chủ phát triển và mở một trình duyệt web với giao diện Expo Dev Tools (nếu sử dụng Expo CLI) hoặc Metro Bundler (nếu sử dụng React Native CLI). Bạn có thể sử dụng các công cụ này để quản lý việc chạy ứng dụng trên các thiết bị khác nhau.

Nếu bạn sử dụng Expo CLI, bạn có thể quét mã QR trên trình duyệt web bằng Expo Go app trên thiết bị di động của bạn để mở ứng dụng. Bạn cũng có thể nhấn phím a để mở ứng dụng trên máy ảo Android hoặc phím i để mở ứng dụng trên máy ảo iOS.

Nếu bạn sử dụng React Native CLI, bạn có thể nhìn thấy ứng dụng đã được cài đặt và chạy trên máy ảo hoặc thiết bị di động của bạn.

Hiểu cơ bản về React Native

Ứng dụng React Native mới của bạn sẽ hiển thị một chữ \”Hello, world!\” trên màn hình. Đây là mã nguồn của ứng dụng:

import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello, world!</Text>
    </View>
  );
}

export default HelloWorldApp;

Hãy phân tích mã nguồn này theo từng phần:

• Dòng đầu tiên import React from 'react'; là để nhập thư viện React vào ứng dụng. React là nền tảng cho React Native, cho phép bạn sử dụng JSX, một cú pháp giống HTML để viết giao diện người dùng bằng JavaScript.
• Dòng thứ hai import { Text, View } from 'react-native'; là để nhập hai thành phần bản địa từ react-native. Text là một thành phần cho phép hiển thị một đoạn văn bản, còn View là một thành phần cho phép hiển thị một khối chứa các thành phần khác.
• Dòng thứ ba const HelloWorldApp = () => { là để định nghĩa một hàm tên là HelloWorldApp. Hàm này là một functional component, một khái niệm quan trọng trong React. Một component là một đơn vị giao diện người dùng có thể tái sử dụng và kết hợp với nhau. Một functional component là một component được viết dưới dạng một hàm JavaScript, nhận vào một đối số là props và trả về JSX.
• Dòng thứ tư đến thứ bảy là nội dung của hàm HelloWorldApp.

(1) Learn the Basics · React Native. https://reactnative.dev/docs/tutorial.
(2) Introduction · React Native. https://reactnative.dev/docs/getting-started.
(3) React Fundamentals · React Native. https://reactnative.dev/docs/intro-react.

Đây là phần tiếp theo của bản nháp blog hướng dẫn chạy ứng dụng react-native của tôi.

Sử dụng các thành phần React Native

React Native cung cấp cho bạn một số thành phần bản địa sẵn sàng để bạn sử dụng trong ứng dụng của mình. Các thành phần này được ánh xạ trực tiếp đến các thành phần UI bản địa trên cả hai nền tảng Android và iOS. Các thành phần này được tối ưu hóa về hiệu năng và mang lại trải nghiệm người dùng nhất quán trên các nền tảng khác nhau. React Native cũng cho phép bạn tạo các thành phần tùy chỉnh theo nhu cầu của ứng dụng. Bạn có thể tìm thấy tất cả các thành phần bản địa của React Native trong tài liệu.

Các thành phần bản địa của React Native được định nghĩa dưới dạng các hàm hoặc các lớp JavaScript. Khi chạy, React Native sẽ tạo ra các view Android và iOS tương ứng cho các thành phần đó, khiến cho ứng dụng React Native trông, cảm nhận và hoạt động như bất kỳ ứng dụng nào khác. Chúng ta gọi những thành phần này là Native Components.

React Native có nhiều Native Components cho mọi mục đích, từ các điều khiển đến các chỉ báo hoạt động. Bạn có thể tìm thấy chúng được liệt kê trong phần Core Components and APIs. Bạn sẽ làm việc chủ yếu với những Native Components sau:

• View: là thành phần cơ bản nhất để xây dựng giao diện người dùng. View là một khối chứa có thể hỗ trợ bố cục với flexbox, kiểu, một số xử lý chạm và các điều khiển trợ năng.
• Text: là một thành phần để hiển thị văn bản. Bạn có thể định dạng, lồng ghép và xử lý sự kiện chạm cho văn bản.
• Image: là một thành phần để hiển thị các loại hình ảnh khác nhau, từ địa chỉ URL, tệp tin cục bộ hoặc biểu tượng vector.
• TextInput: là một thành phần để nhập văn bản vào ứng dụng qua bàn phím. Bạn có thể kiểm soát giá trị, kiểu và sự kiện của TextInput.
• ScrollView: là một khối chứa có thể cuộn được và có thể chứa nhiều thành phần và view khác nhau. Bạn có thể kiểm soát hướng cuộn, hiệu ứng kéo để làm mới và hiệu suất của ScrollView.
• StyleSheet: là một lớp trừu tượng giống như CSS stylesheets, cho phép bạn định nghĩa kiểu cho các thành phần React Native.

Trong ví dụ sau, chúng ta sẽ sử dụng một số Native Components để tạo ra một giao diện người dùng đơn giản:

import React from 'react';
import { View, Text, Image, TextInput, ScrollView, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React Native!</Text>
      <Image style={styles.logo} source={require('./logo.png')} />
      <TextInput style={styles.input} placeholder="Enter your name" />
      <ScrollView style={styles.scroll}>
        <Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis eros vitae leo tincidunt lacinia. Fusce quis lacus ut nisi tincidunt sagittis. Morbi vitae nisl id leo ullamcorper blandit. Donec id lacus in lorem luctus tincidunt. Sed quis augue at lorem malesuada aliquet. Cras quis semper justo, sed aliquam sapien. Ut sit amet massa auctor, mattis leo sed, ultrices nisl. Curabitur euismod, augue vitae ultrices consequat, nisi massa ullamcorper nunc, sit amet consequat leo quam a tellus.</Text>
        <Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis eros vitae leo tincidunt lacinia. Fusce quis lacus ut nisi tincidunt sagittis. Morbi vitae nisl id leo ullamcorper blandit. Donec id lacus in lorem luctus tincidunt. Sed quis augue at lorem malesuada aliquet. Cras quis semper justo, sed aliquam sapien. Ut sit amet massa auctor, mattis leo sed, ultrices nisl. Curabitur euismod, augue vitae ultrices consequat, nisi massa ullamcorper nunc, sit amet consequat leo quam a tellus.</Text>
        <Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis eros vitae leo tincidunt lacinia. Fusce quis lacus ut nisi tincidunt sagittis. Morbi vitae nisl id leo ullamcorper blandit. Donec id lacus in lorem luctus tincidunt. Sed quis augue at lorem malesuada aliquet. Cras quis semper justo, sed aliquam sapien. Ut sit amet massa auctor, mattis leo sed, ultrices nisl. Curabitur euismod, augue vitae ultrices consequat, nisi massa ullamcorper nunc, sit amet consequat leo quam a tellus.</Text>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000',
    margin: 10,
  },
  logo: {
    width: 100,
    height: 100,
    resizeMode: 'contain',
  },
  input: {
    width: '80%',
    height: 40,
    borderColor: '#000',
    borderWidth: 1,
    borderRadius: 5,
    margin: 10,
    padding: 10,
  },
  scroll: {
    width: '80%',
    height: '50%',
  },
  text: {
    fontSize: 16,
    color: '#000',
    textAlign: 'justify',
    margin: 10,
  },
});

export default App;

Bạn có thể thấy rằng các thành phần React Native được sử dụng để tạo ra các phần tử giao diện người dùng như văn bản, hình ảnh, khung nhập liệu và khối cuộn.

Trong phần tiếp theo, chúng ta sẽ học về cách sử dụng state và props để quản lý dữ liệu và hành vi của các thành phần React Native.

Source:
(1) All about React Native – How does it work and when to use it. https://clouddevs.com/react/native/.
(2) Core Components and APIs · React Native. https://reactnative.dev/docs/components-and-apis.
(3) Core Components and Native Components · React Native. https://reactnative.dev/docs/intro-react-native-components.
(4) 15+ React Native Component Libraries You Should Know in 2023 – CodeinWP. https://www.codeinwp.com/blog/react-native-component-libraries/.
(5) How to import components in React Native – GeeksforGeeks. https://www.geeksforgeeks.org/how-to-import-components-in-react-native/.