React Native menggunakan model komponen React dan JSX — membina UI daripada komponen boleh guna semula yang mengembalikan JSX. Jika anda tahu React untuk web, ini dipindahkan terus; perbezaan utama ialah menggunakan komponen natif dan bukannya elemen HTML.
() {
(
);
}
() {
(
);
}
Komponen ialah kepingan UI boleh guna semula (fungsi yang mengembalikan JSX); ia menerima props (input) dan disusun menjadi pokok — sama persis seperti React untuk web, tetapi dengan komponen natif.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // STATE (useState hook)
return (
<TouchableOpacity onPress={() => setCount(count + 1)}>
<Text>Count: {count}</Text> {/* re-renders when state changes */}
</TouchableOpacity>
);
}
Props menghantar data ke dalam komponen; state (melalui useState) menyimpan data yang berubah yang mencetuskan render semula — model React yang sama seperti di web.
✓ Components, JSX, props, state, HOOKS (useState, useEffect, etc.), composition, keys —
all the same as React for web
✓ The main difference: native components (View/Text) instead of HTML; styling differs
→ React developers can apply most of their knowledge directly to React Native.
Memahami bagaimana komponen dan JSX berfungsi dalam React Native adalah asas kerana React Native dibina di atas model komponen React, jadi menguasainya adalah penting, dan satu kelebihan utama ialah pengetahuan React dipindahkan terus.
Komponen (kepingan UI boleh guna semula yang mengembalikan JSX, menerima props sebagai input, dan disusun menjadi pokok) dan JSX (sintaks yang menggambarkan UI dengan ungkapan terbenam) ialah asas pembangunan React Native — sama seperti React untuk web.
Memahami props (menghantar data ke dalam komponen) dan state (melalui hook useState, menyimpan data berubah yang mencetuskan render semula) adalah penting kerana konsep React ini ialah cara komponen React Native menerima data dan menguruskan perubahan — sama dengan React web.
Wawasan utama ialah bahawa pengetahuan React dipindahkan: komponen, JSX, props, state, hooks (useState, useEffect, dll.), komposisi, dan keys semuanya berfungsi dengan cara yang sama seperti dalam React untuk web, dengan perbezaan utama ialah penggunaan komponen natif (View, Text) dan bukannya HTML serta penggayaan yang berbeza.
Kebolehpindahan ini ialah sebab utama React Native menarik — kumpulan besar pembangun React/web boleh menggunakan kebanyakan pengetahuan sedia ada mereka secara terus untuk membina aplikasi mudah alih natif, dengan keluk pembelajaran yang agak kecil tertumpu pada komponen natif dan perincian platform.
Memandangkan React Native pada asasnya ialah React (komponen, JSX, props, state, hooks) yang digunakan pada UI natif, dan memahami model ini adalah penting untuk membina aplikasi React Native sambil mengiktiraf bahawa pengetahuan React dipindahkan terus (satu kelebihan utama), memahami komponen dan JSX dalam React Native adalah pengetahuan asas yang penting — model pengaturcaraan teras React Native, perlu untuk membina aplikasi, dan terutamanya berharga dalam menonjolkan betapa langsungnya kemahiran React/web digunakan pada pembangunan mudah alih React Native.