React Native là một trong những lựa chọn phổ biến khi muốn xây dựng ứng dụng mobile bằng JavaScript/TypeScript. Nếu bạn đã từng viết React cho web, React Native sẽ cho cảm giác quen thuộc ở cách chia UI thành component, truyền props, quản lý state và xử lý tương tác. Điểm khác biệt quan trọng là UI cuối cùng không chạy như một trang web trong trình duyệt, mà được ánh xạ sang các thành phần native của Android và iOS.
Bài này là phần làm quen nhẹ nhàng: hiểu React Native dùng để làm gì, nên học theo thứ tự nào, và cần nắm những khái niệm nào trước khi đi sâu vào navigation, API, animation hay build app thật.
React Native là gì?
React Native là framework mã nguồn mở giúp xây dựng ứng dụng Android và iOS bằng React. Bạn mô tả giao diện bằng component, viết logic bằng JavaScript/TypeScript, còn React Native chịu trách nhiệm kết nối phần đó với khả năng native của từng nền tảng.
Nói ngắn gọn: thay vì viết hai codebase riêng bằng Kotlin/Java cho Android và Swift/Objective-C cho iOS, team có thể dùng một phần lớn code chung cho cả hai nền tảng. Điều này rất hợp với sản phẩm cần ra mắt nhanh, team nhỏ, hoặc app có nhiều màn hình nghiệp vụ giống nhau giữa Android và iOS.
Khác gì so với React web?
Nếu React web dùng các thẻ như div, p, img, thì React Native dùng các core component như View, Text, Image, ScrollView, TextInput. Những component này sẽ được ánh xạ sang view native tương ứng trên Android và iOS.
Vì vậy, người mới không nên bê nguyên tư duy CSS/web sang mobile. Bạn vẫn dùng component và state giống React, nhưng cần học thêm cách layout bằng Flexbox trong React Native, cách xử lý safe area, keyboard, gesture, permission, trạng thái mạng và vòng đời ứng dụng mobile.
Nên bắt đầu từ đâu?
Với người mới, cách dễ nhất là bắt đầu bằng Expo. Tài liệu React Native hiện cũng khuyến nghị dùng một React Native Framework cho app mới vì framework đã chuẩn bị sẵn nhiều phần thường gặp như tooling, thư viện native phổ biến, cấu trúc dự án và quy trình phát triển.
npx create-expo-app@latestSau khi tạo project, hãy chạy app trên simulator/emulator hoặc trên điện thoại thật. Đừng vội cài quá nhiều thư viện. Mục tiêu đầu tiên chỉ nên là sửa một màn hình, thêm vài component, hiểu dữ liệu đi từ state xuống UI như thế nào.
Các khái niệm cần nắm trước
Component: mỗi phần giao diện nên được tách thành một component nhỏ, ví dụ ArticleCard, PrimaryButton, UserAvatar. Component tốt giúp code dễ đọc và dễ tái sử dụng.
Props: dữ liệu truyền từ component cha xuống component con. Ví dụ card bài viết nhận title, description, thumbnail để render nội dung.
State: dữ liệu thay đổi trong quá trình người dùng tương tác, như text đang nhập, trạng thái loading, danh sách item sau khi gọi API.
Style: React Native không dùng CSS file như web truyền thống. Style thường được khai báo bằng object JavaScript thông qua StyleSheet.create. Phần lớn layout dựa trên Flexbox, nhưng một số thuộc tính sẽ khác web.
Platform: Android và iOS có nhiều hành vi giống nhau, nhưng không hoàn toàn như nhau. Khi làm app thật, bạn cần test trên cả hai nền tảng, nhất là những phần liên quan đến bàn phím, permission, push notification, deep link và build release.
Ví dụ màn hình đầu tiên
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.title}>Xin chào React Native</Text>
<Text style={styles.description}>
Bắt đầu bằng một màn hình nhỏ, sau đó tách dần thành component.
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 24,
backgroundColor: '#ffffff',
},
title: {
fontSize: 28,
fontWeight: '700',
marginBottom: 12,
},
description: {
fontSize: 16,
lineHeight: 24,
color: '#4b5563',
},
});Đoạn code trên đủ để thấy ba mảnh quan trọng: component render UI, style điều khiển giao diện, và layout dùng Flexbox. Khi đã quen, bạn có thể thêm button, input, danh sách, gọi API và navigation.
Lộ trình học gọn cho người mới
Giai đoạn đầu, hãy học JavaScript/TypeScript căn bản, React component, props, state và hook. Tiếp theo học core component của React Native, layout, image, list, form và cách debug. Khi đã tự build được vài màn hình, hãy học navigation, gọi API, lưu dữ liệu local, quản lý state và xử lý loading/error.
Sau đó mới nên đi sâu vào phần native hơn: permission, camera, notification, deep link, build Android/iOS, ký app, CI/CD và tối ưu performance. React Native không khó để bắt đầu, nhưng để làm sản phẩm mượt và ổn định thì cần học theo lớp, không nhảy thẳng vào phần phức tạp.
Khi nào nên chọn React Native?
React Native phù hợp khi team đã có nền tảng JavaScript/React, cần phát triển Android và iOS song song, sản phẩm có nhiều UI nghiệp vụ, và muốn chia sẻ logic giữa hai nền tảng. Đây cũng là lựa chọn tốt cho MVP hoặc sản phẩm cần iterate nhanh.
Ngược lại, nếu app phụ thuộc rất nặng vào xử lý đồ hoạ native, game engine, tác vụ realtime đặc thù hoặc cần tận dụng tối đa API riêng của từng nền tảng, bạn nên cân nhắc kỹ giữa React Native, Flutter và native app riêng.
Lỗi tư duy thường gặp
Lỗi đầu tiên là xem React Native như “React web chạy trên mobile”. Cách nghĩ này dễ dẫn đến layout khó kiểm soát và trải nghiệm không giống app mobile thật. Lỗi thứ hai là cài thư viện quá sớm trước khi hiểu core component. Lỗi thứ ba là chỉ test trên một nền tảng rồi đến cuối dự án mới phát hiện Android và iOS lệch hành vi.
Một cách học tốt hơn là bắt đầu nhỏ: một màn hình profile, một màn hình danh sách bài viết, một form đăng nhập, một flow gọi API. Mỗi màn hình nên làm đến nơi đến chốn: loading, empty state, error state, keyboard, responsive và test trên thiết bị thật nếu có thể.
Kết luận
React Native đáng học vì nó giúp lập trình viên React bước vào thế giới mobile nhanh hơn, nhưng vẫn tạo ra app có trải nghiệm native. Để đi đường dài, hãy nắm chắc component, state, layout và workflow trước. Khi nền móng ổn, navigation, native module hay build release sẽ dễ tiếp cận hơn rất nhiều.
Nguồn tham khảo: React Native Introduction, Core Components and Native Components, Get Started with React Native.
