Component và JSX hoạt động như thế nào trong React Native?

Question

Accepted Answer

React Native dùng **mô hình component và JSX của React** — xây dựng UI từ các **component** tái sử dụng được trả về JSX. Nếu bạn biết React cho web, kiến thức này chuyển giao trực tiếp; khác biệt chính là dùng component native thay vì phần tử HTML. ## Component và JSX ```jsx // một functional component trả về JSX mô tả UI (dùng core component RN) function Greeting({ name }) { // nhận props return ( Hello, {name}! {/* JSX với một biểu thức nhúng */} ); } // kết hợp các component (như React cho web) function App() { return ( {/* tái sử dụng component */} ); } ``` Component là các mảnh UI tái sử dụng được (hàm trả về JSX); chúng nhận **props** (đầu vào) và kết hợp thành cây — giống hệt React cho web, nhưng với component native. ## Props và state (khái niệm React) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // STATE (hook useState) return ( setCount(count + 1)}> Count: {count} {/* re-render khi state thay đổi */} ); } ``` **Props** truyền dữ liệu vào component; **state** (qua `useState`) giữ dữ liệu thay đổi gây ra re-render — cùng mô hình React như trên web. ## Kiến thức React chuyển giao được ```text ✓ Component, JSX, props, state, HOOK (useState, useEffect, v.v.), composition, key — tất cả giống như React cho web ✓ Khác biệt chính: component native (View/Text) thay vì HTML; styling khác → Lập trình viên React có thể áp dụng phần lớn kiến thức trực tiếp vào React Native. ``` ## Tại sao điều này quan trọng Hiểu component và JSX hoạt động như thế nào trong React Native là nền tảng vì **React Native được xây dựng trên mô hình component của React**, nên nắm vững nó là thiết yếu, và một lợi thế lớn là **kiến thức React chuyển giao trực tiếp**. Component (các mảnh UI tái sử dụng được trả về JSX, nhận props làm đầu vào, và kết hợp thành cây) và JSX (cú pháp mô tả UI với biểu thức nhúng) là nền tảng của việc phát triển React Native — giống như React cho web. Hiểu **props** (truyền dữ liệu vào component) và **state** (qua hook `useState`, giữ dữ liệu thay đổi gây ra re-render) là thiết yếu vì các khái niệm React này là cách component React Native nhận dữ liệu và quản lý thay đổi — giống hệt web React. Điểm mấu chốt là **kiến thức React chuyển giao được**: component, JSX, props, state, hook (useState, useEffect, v.v.), composition, và key đều hoạt động giống như trong React cho web, với khác biệt chính là dùng component native (View, Text) thay vì HTML và styling khác. Khả năng chuyển giao này là lý do lớn khiến React Native hấp dẫn — lượng lớn lập trình viên React/web có thể áp dụng phần lớn kiến thức sẵn có trực tiếp vào việc xây dựng ứng dụng mobile native, với đường cong học tập tương đối nhỏ tập trung vào component native và đặc thù nền tảng. Vì React Native về cơ bản là React (component, JSX, props, state, hook) áp dụng cho UI native, và hiểu mô hình này là thiết yếu để xây dựng ứng dụng React Native đồng thời nhận ra kiến thức React chuyển giao trực tiếp (một lợi thế quan trọng), hiểu component và JSX trong React Native là kiến thức thiết yếu, nền tảng — mô hình lập trình cốt lõi của React Native, cần thiết để xây dựng ứng dụng, và đặc biệt có giá trị trong việc làm nổi bật mức độ kỹ năng React/web áp dụng trực tiếp ra sao vào phát triển mobile React Native.