React Native używa modelu komponentów React i JSX — budowania interfejsów użytkownika z wielokrotnie używalnych komponentów, które zwracają JSX. Jeśli znasz React na web, umiejętności te przenoszą się bezpośrednio; główną różnicą jest używanie natywnych komponentów zamiast elementów HTML.
() {
(
);
}
() {
(
);
}
Komponenty to wielokrotnie używalne elementy UI (funkcje zwracające JSX); przyjmują props (wejścia) i komponują się w drzewa — dokładnie jak React na web, ale z natywnymikomponentami.
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 przekazują dane do komponentów; state (poprzez useState) przechowuje zmieniające się dane, które wyzwalają re-rendery — ten sam model React, co na 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.
Zrozumienie, jak działają komponenty i JSX w React Native, jest fundamentalne, ponieważ React Native jest zbudowany na modelu komponentów React, więc opanowanie go jest niezbędne, a główną zaletą jest to, że wiedza React przenosi się bezpośrednio.
Komponenty (wielokrotnie używalne elementy UI, które zwracają JSX, przyjmują props jako wejścia i komponują się w drzewa) i JSX (składnia opisująca UI ze wbudowanymi wyrażeniami) są fundamentem tworzenia aplikacji w React Native — tak samo jak React na web.
Zrozumienie props (przekazywanie danych do komponentów) i state (poprzez hook useState, przechowywanie zmieniających się danych, które wyzwalają re-rendery) jest niezbędne, ponieważ te koncepcje React to sposób, w jaki komponenty React Native otrzymują dane i zarządzają zmianami — identycznie jak web React.
Kluczową intuicją jest to, że wiedza React przenosi się: komponenty, JSX, props, state, hooks (useState, useEffect, itp.), composability i keys działają w taki sam sposób jak w React na web, z głównymi różnicami będącymi użyciem natywnych komponentów (View, Text) zamiast HTML i innym stylowaniem.
Ta przenośność jest głównym powodem, dla którego React Native jest atrakcyjny — duża pula programistów React/web może bezpośrednio zastosować większość swojej istniejącej wiedzy do budowania natywnych aplikacji mobilnych, z relatywnie małą krzywą uczenia się skoncentrowaną na natywnych komponentach i specyfice platformy.
Ponieważ React Native jest zasadniczo React (komponenty, JSX, props, state, hooks) zastosowany do natywnego UI, a zrozumienie tego modelu jest niezbędne do tworzenia aplikacji React Native, biorąc pod uwagę, że wiedza React przenosi się bezpośrednio (kluczowa zaletę), zrozumienie komponentów i JSX w React Native to niezbędna, fundamentalna wiedza — podstawowy model programowania React Native, konieczny do budowania aplikacji, i szczególnie cenny w pokazywaniu, jak bezpośrednio umiejętności React/web mają zastosowanie do tworzenia aplikacji mobilnych w React Native.