React Native menggunakan React's component model dan JSX — membangun UI dari components yang dapat digunakan kembali dan mengembalikan JSX. Jika Anda sudah mengenal React untuk web, ini dapat diterapkan secara langsung; perbedaan utamanya adalah menggunakan native components alih-alih elemen HTML.
() {
(
);
}
() {
(
);
}
Components adalah UI pieces yang dapat digunakan kembali (functions yang mengembalikan JSX); mereka menerima props (inputs) dan compose menjadi trees — persis seperti React untuk web, tetapi dengan native components.
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 mengirimkan data ke dalam components; state (via useState) menyimpan data yang berubah yang memicu re-renders — 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 cara kerja components dan JSX di React Native adalah fundamental karena React Native dibangun di atas React's component model, jadi menguasainya sangat penting, dan keuntungan utamanya adalah pengetahuan React dapat ditransfer secara langsung.
Components (UI pieces yang dapat digunakan kembali yang mengembalikan JSX, menerima props sebagai inputs, dan compose menjadi trees) dan JSX (syntax yang menjelaskan UI dengan embedded expressions) adalah fondasi dari pengembangan React Native — sama seperti React untuk web.
Memahami props (mengirimkan data ke dalam components) dan state (via useState hook, menyimpan data yang berubah yang memicu re-renders) sangat penting karena konsep React ini adalah cara React Native components menerima data dan mengelola perubahan — identik dengan web React.
Insight utamanya adalah bahwa pengetahuan React dapat ditransfer: components, JSX, props, state, hooks (useState, useEffect, dll), composition, dan keys semuanya bekerja dengan cara yang sama seperti di React untuk web, dengan perbedaan utama adalah penggunaan native components (View, Text) alih-alih HTML dan styling yang berbeda.
Transferabilitas ini adalah alasan utama React Native menarik — pool besar React/web developers dapat menerapkan sebagian besar pengetahuan mereka yang ada secara langsung ke dalam membangun aplikasi mobile native, dengan kurva pembelajaran yang relatif kecil yang berfokus pada native components dan spesifik platform.
Karena React Native pada dasarnya adalah React (components, JSX, props, state, hooks) yang diterapkan ke native UI, dan memahami model ini adalah penting untuk membangun aplikasi React Native sambil menyadari bahwa pengetahuan React dapat ditransfer secara langsung (keuntungan kunci), memahami components dan JSX di React Native adalah pengetahuan yang penting dan foundational — core programming model dari React Native, diperlukan untuk membangun aplikasi, dan sangat berharga dalam menunjukkan bagaimana secara langsung skills React/web berlaku ke pengembangan React Native mobile.