React Native hutumia React's component model na JSX — ikijenga UIs kutoka kwa components zinazoweza kutumiwa tena ambazo hurejesha JSX. Iwapo unajua React kwa web, hii inahamishika moja kwa moja; tofauti kuu ni kutumia native components badala ya HTML elements.
() {
(
);
}
() {
(
);
}
Components ni vipande vya UI vinavyoweza kutumiwa tena (functions zinazorejesha JSX); huchukua props (inputs) na kuunganishwa katika trees — sawa kabisa na React kwa web, lakini kwa 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 hupitisha data ndani ya components; state (kupitia useState) hushikilia data inayobadilika ambayo huchochea re-renders — model ile ile ya React kama ilivyo kwenye 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.
Kuelewa jinsi components na JSX zinavyofanya kazi katika React Native ni msingi kwa sababu React Native imejengwa juu ya React's component model, kwa hivyo kuielewa ni muhimu, na faida kuu ni kwamba maarifa ya React yanahamishika moja kwa moja.
Components (vipande vya UI vinavyoweza kutumiwa tena ambavyo hurejesha JSX, huchukua props kama inputs, na kuunganishwa katika trees) na JSX (syntax inayoeleza UI kwa embedded expressions) ni msingi wa maendeleo ya React Native — sawa na React kwa web.
Kuelewa props (kupitisha data ndani ya components) na state (kupitia useState hook, ikishikilia data inayobadilika inayochochea re-renders) ni muhimu kwa sababu dhana hizi za React ndizo jinsi React Native components hupokea data na kusimamia mabadiliko — sawa kabisa na web React.
Utambuzi muhimu ni kwamba maarifa ya React yanahamishika: components, JSX, props, state, hooks (useState, useEffect, n.k.), composition, na keys zote hufanya kazi kwa njia ile ile kama katika React kwa web, na tofauti kuu zikiwa matumizi ya native components (View, Text) badala ya HTML na styling tofauti.
Uhamishikaji huu ni sababu kuu inayofanya React Native kuwa ya kuvutia — kundi kubwa la React/web developers wanaweza kutumia maarifa yao mengi yaliyopo moja kwa moja kujenga native mobile apps, na curve ndogo ya kujifunza inayolenga native components na vipengele maalum vya platform.
Kwa kuwa React Native kimsingi ni React (components, JSX, props, state, hooks) iliyotumiwa kwa native UI, na kuelewa model hii ni muhimu kujenga React Native apps huku ukitambua kwamba maarifa ya React yanahamishika moja kwa moja (faida muhimu), kuelewa components na JSX katika React Native ni maarifa muhimu ya msingi — model ya msingi ya programu ya React Native, ni lazima kujenga apps, na yenye thamani hasa katika kuonyesha jinsi ujuzi wa React/web unavyotumika moja kwa moja kwa maendeleo ya React Native mobile.