React Native používá React's komponentový model a JSX — UI se budují z opakovaně použitelných komponent, které vracejí JSX. Pokud znáte React pro web, přenáší se to přímo; hlavní rozdíl je používání nativních komponent místo HTML prvků.
() {
(
);
}
() {
(
);
}
Komponenty jsou opakovaně použitelné UI prvky (funkce vracející JSX); berou props (vstupy) a skládají se do stromů — přesně jako React pro web, ale s nativními komponentami.
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 předávají data do komponent; state (přes useState) obsahuje měnící se data, která spouští překreslení — stejný React model jako na webu.
✓ 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.
Rozmění si, jak fungují komponenty a JSX v React Native, je zásadní, protože React Native je postaven na React's komponentovém modelu, takže jeho pochopení je nezbytné, a hlavní výhoda je, že React znalosti se přenášejí přímo.
Komponenty (opakovaně použitelné UI prvky, které vracejí JSX, berou props jako vstupy a skládají se do stromů) a JSX (syntaxe popisující UI s vloženými výrazy) jsou základem vývoje v React Native — stejně jako v React pro web.
Rozmění si props (předávání dat do komponent) a state (přes hook useState, který obsahuje měnící se data spouštějící překreslení) je nezbytné, protože tyto React koncepty jsou způsobem, jak React Native komponenty přijímají data a spravují změny — identické s web React.
Klíčová myšlenka je, že React znalosti se přenášejí: komponenty, JSX, props, state, hooks (useState, useEffect atd.), skládání a keys fungují stejně jako v React pro web, s hlavními rozdíly v používání nativních komponent (View, Text) místo HTML a jiných stylů.
Tato převoditelnost je hlavním důvodem, proč je React Native atraktivní — velký počet React/web vývojářů může aplikovat většinu svých stávajících znalostí přímo na vytváření nativních mobilních aplikací, s relativně malou křivkou učení zaměřenou na nativní komponenty a specifika platformy.
Pože React Native je fundamentálně React (komponenty, JSX, props, state, hooks) aplikovaný na nativní UI, a pochopení tohoto modelu je nezbytné pro budování React Native aplikací, přičemž je nutné si uvědomit, že React znalosti se přenášejí přímo (klíčová výhoda), je pochopení komponent a JSX v React Native nezbytné, základní znalosti — základní programovací model React Native, nezbytný pro budování aplikací, a obzvláště cenný v zdůraznění, jak přímo se React/web dovednosti aplikují na vývoj mobilních aplikací v React Native.