A React Native a React komponensmodelljét és a JSX-et használja — a felhasználói felületeket újrahasználható komponensekből építjük fel, amelyek JSX-et adnak vissza. Ha ismered a webes React-et, ez közvetlenül átkerül; a fő különbség a natív komponensek HTML-elemek helyett való használata.
() {
(
);
}
() {
(
);
}
A komponensek újrahasználható felhasználóifelület-elemek (JSX-et visszaadó függvények); prop-okat (bemeneteket) vesznek fel és fákba kompozícionálódnak — pontosan ugyanúgy, mint a webes React-ben, de natív komponenseket használva.
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>
);
}
A prop-ok adatokat adnak át a komponensekbe; az state (a useState segítségével) változó adatokat tárol, amelyek újrarendereléseket indítanak — ugyanaz a React-modell, mint a weben.
✓ 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.
Annak megértése, hogy az összetevők és a JSX hogyan működnek a React Native-ban, alapvető fontosságú, mivel a React Native a React komponensmodelljére épül, ezért annak elsajátítása elengedhetetlen, és nagy előny, hogy a React ismeretek közvetlenül átadódnak.
Az összetevők (újrahasználható felhasználóifelület-elemek, amelyek JSX-et adnak vissza, prop-okat vesznek bemenetként, és fákba komponálódnak) és a JSX (az UI-t leíró szintaxis beágyazott kifejezésekkel) a React Native fejlesztés alapja — ugyanaz, mint a webes React-ben.
Annak megértése, hogy prop-ok (adatok átadása a komponensekbe) és az state (a useState horog segítségével, amely változó adatokat tárol és újrarendereléseket indít) szükséges, mivel ezek a React-koncepciók határozzák meg, hogyan kapnak adatokat a React Native komponensek és hogyan kezelik a változásokat — azonos a webes React-tel.
A lényeg az, hogy a React ismeretek átadódnak: az összetevők, JSX, prop-ok, state, horogok (useState, useEffect stb.), kompozíció és kulcsok ugyanúgy működnek, mint a webes React-ben, a fő különbségek a natív komponensek (View, Text) HTML helyett való használata és az eltérő stílusvonatkozások.
Ez az átadhatóság nagyban közreműködik a React Native vonzó voltához — a nagy mennyiségű React/web fejlesztő közvetlenül alkalmazhatja meglévő tudását natív mobilalkalmazások fejlesztésére, viszonylag alacsony tanulási görbével, amely a natív komponensekre és a platformspecifikus jellemzőkre összpontosít.
Mivel a React Native alapvetően a React (komponensek, JSX, prop-ok, state, horogok) alkalmazása natív felhasználóifelület-elemekre, és ennek a modellnek a megértése elengedhetetlen a React Native alkalmazások fejlesztéséhez, miközben felismerjük, hogy a React ismeretek közvetlenül átadódnak (kulcs előny), a komponensek és a JSX megértése a React Native-ban elengedhetetlen, alapvető tudás — a React Native programozási modelljének magja, amely szükséges az alkalmazások fejlesztéséhez, és különösen értékes abban, hogy kiemeli, mennyire közvetlenül alkalmazhatók a React/web készségek a React Native mobilfejlesztéshez.