Làm app di động đơn giản với React Native – hướng dẫn từ A–Z

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, TouchableOpacity } from 'react-native';

export default function App() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const addTask = () => {
    if (task.trim()) {
      setTasks([...tasks, { id: Date.now().toString(), name: task, done: false }]);
      setTask('');
    }
  };

  const toggleTask = (id) => {
    setTasks(tasks.map(t => t.id === id ? { ...t, done: !t.done } : t));
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(t => t.id !== id));
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput value={task} onChangeText={setTask} placeholder="Nhập việc cần làm" />
      <Button title="Thêm" onPress={addTask} />
      <FlatList
        data={tasks}
        renderItem={({ item }) => (
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <TouchableOpacity onPress={() => toggleTask(item.id)}>
              <Text style={{ textDecorationLine: item.done ? 'line-through' : 'none' }}>
                {item.name}
              </Text>
            </TouchableOpacity>
            <Button title="Xóa" onPress={() => deleteTask(item.id)} />
          </View>
        )}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

App này chỉ dùng React Native thuần, không cần thêm thư viện ngoài. Bạn có thể nâng cấp nó bằng cách lưu dữ liệu vào AsyncStorage, tích hợp với Firebase, hoặc thêm chức năng đăng nhập.

2. Triển khai app cho người khác dùng

Sau khi làm xong app, bạn có thể chia sẻ bằng các cách sau:

• Expo: Dùng lệnh expo publish để chia sẻ link trực tuyến.

• Build APK: Dùng eas build -p android để tạo file APK.

• Chia sẻ mã nguồn: Up lên GitHub hoặc drive để giáo viên tải và test.

Ngoài ra, nếu bạn học thêm phần Push Notification, Firebase Auth, hoặc API thì có thể làm đồ án app chuyên nghiệp hơn như:

• App ghi chú cá nhân

• App quản lý tài chính

• App học từ vựng

• App đặt lịch học/làm việc

Một số lưu ý khi làm đồ án app với React Native

Làm app mobile dù đơn giản nhưng nếu là đồ án thì bạn vẫn cần đảm bảo các yêu cầu cơ bản:

• Có bố cục rõ ràng: Giao diện chia thành từng phần, dễ dùng.

• Code sạch, có comment: Để giáo viên hiểu logic.

• Tối ưu cho cả màn hình lớn nhỏ: Dùng Dimensions, Flexbox để giao diện responsive.

• Dễ cài đặt chạy thử: Ghi rõ hướng dẫn chạy app, có thể quay video demo.

• Đặt tên biến, hàm rõ ràng: Dễ hiểu, không viết tắt quá mức.

• Chia component nếu phức tạp: Dùng folder components nếu app có nhiều phần.

• Không copy 100% từ mạng: Hãy học rồi chỉnh sửa theo ý mình, tạo dấu ấn riêng.

Kết luận

React Native là công cụ tuyệt vời giúp bạn xây dựng ứng dụng di động một cách nhanh chóng và dễ dàng, đặc biệt phù hợp với sinh viên đang làm đồ án. Với sự hỗ trợ mạnh mẽ từ cộng đồng, thư viện phong phú, và khả năng chạy đa nền tảng, bạn chỉ cần một chút JavaScript và sự kiên nhẫn để hoàn thiện app chất lượng. Bắt đầu từ một app đơn giản như Todo, bạn hoàn toàn có thể mở rộng lên các dự án phức tạp hơn.

Đây chính là con đường ngắn nhất giúp bạn đưa sản phẩm của mình đến tay người dùng thực tế – một trải nghiệm quý giá mà không phải đồ án nào cũng có được. Hãy bắt đầu hôm nay!