React Native Component là gì? Cách nghĩ đúng cho người mới

Nếu mới học React Native, khái niệm đầu tiên bạn nên nắm thật chắc là component. Component là cách React Native chia một màn hình lớn thành nhiều phần nhỏ hơn. Mỗi phần nhỏ có nhiệm vụ riêng, có thể đọc độc lập, sửa độc lập và tái sử dụng ở nhiều nơi.

Hãy tưởng tượng một màn hình ứng dụng đọc blog. Trên màn hình đó có header, ô tìm kiếm, danh sách bài viết, từng card bài viết, avatar tác giả và nút lưu bài. Nếu viết tất cả trong một file duy nhất, code sẽ nhanh chóng dài và rối. Component giúp bạn đặt tên cho từng mảnh giao diện đó.

Component là gì?

Trong React Native, component thường là một hàm JavaScript/TypeScript trả về UI. UI đó được viết bằng JSX, nhìn giống HTML nhưng thực chất là cú pháp để mô tả giao diện bằng JavaScript.

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

function WelcomeMessage() {
  return (
    <View>
      <Text>Chào mừng bạn đến với AE Dev</Text>
    </View>
  );
}

Ở ví dụ trên, WelcomeMessage là một component. Khi cần hiển thị lời chào, bạn chỉ cần dùng <WelcomeMessage /> thay vì viết lại toàn bộ UI.

Core component và custom component

React Native có sẵn một số core component như View, Text, Image, ScrollView, TextInput. Đây là các viên gạch cơ bản để dựng giao diện mobile.

Khi bạn kết hợp nhiều core component lại và đặt tên cho chúng, bạn tạo ra custom component. Ví dụ ArticleCard có thể gồm ảnh, tiêu đề, mô tả ngắn và tên category.

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

function ArticleCard() {
  return (
    <View style={styles.card}>
      <Image
        source={{ uri: 'https://example.com/cover.png' }}
        style={styles.image}
      />
      <Text style={styles.title}>Làm quen với React Native</Text>
      <Text style={styles.description}>
        Bắt đầu từ component, props và state.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, borderRadius: 12, backgroundColor: '#fff' },
  image: { height: 160, borderRadius: 12, marginBottom: 12 },
  title: { fontSize: 18, fontWeight: '700' },
  description: { marginTop: 6, color: '#6b7280' },
});

Khi nào nên tách component?

Người mới thường hỏi: “Bao giờ thì nên tách component?”. Một quy tắc dễ dùng là: khi một phần UI có tên gọi rõ ràng, xuất hiện nhiều lần, hoặc làm file hiện tại quá dài, bạn nên tách nó ra.

Ví dụ ArticleCard, PrimaryButton, EmptyState, LoadingView đều là những component tốt vì tên của chúng nói rõ mục đích. Ngược lại, đừng tách quá sớm thành những component quá nhỏ nhưng không có ý nghĩa riêng, vì code sẽ bị phân mảnh và khó lần theo.

Component nên làm một việc rõ ràng

Một component tốt không cần quá thông minh. Nó nên nhận dữ liệu, hiển thị giao diện, và xử lý tương tác gần với phần giao diện đó. Nếu component vừa gọi API, vừa xử lý format dữ liệu, vừa render nhiều layout khác nhau, bạn sẽ khó sửa khi app lớn lên.

Với người mới, hãy bắt đầu bằng component thuần giao diện trước. Sau đó mới học cách truyền dữ liệu bằng props và quản lý thay đổi bằng state.

Lỗi thường gặp

Lỗi đầu tiên là viết cả màn hình trong một component rất dài. Lỗi thứ hai là đặt tên component chung chung như Box, Item, ViewData, khiến sau này không hiểu nó dùng để làm gì. Lỗi thứ ba là copy UI giống nhau ở nhiều nơi thay vì tách thành component tái sử dụng.

Kết luận

Component là nền móng của React Native. Khi biết chia màn hình thành các component nhỏ, bạn sẽ đọc code dễ hơn, sửa ít rủi ro hơn và tái sử dụng giao diện tốt hơn. Hãy tập nhìn mọi màn hình mobile như một tập hợp các khối UI có tên rõ ràng.

Nguồn tham khảo: React: Your First Component, React Native Core Components.