React Native は React のコンポーネントモデルと JSX を使用します。つまり、JSX を返す再利用可能なコンポーネントから UI を構築します。Web 向けの React を知っていれば、その知識はそのまま活かせます。主な違いは、HTML 要素の代わりにネイティブコンポーネントを使う点です。
コンポーネントと JSX
jsx
() {
(
);
}
() {
(
);
}
React Native は React のコンポーネントモデルと JSX を使用します。つまり、JSX を返す再利用可能なコンポーネントから UI を構築します。Web 向けの React を知っていれば、その知識はそのまま活かせます。主な違いは、HTML 要素の代わりにネイティブコンポーネントを使う点です。
() {
(
);
}
() {
(
);
}
コンポーネントは再利用可能な UI の部品（JSX を返す関数）であり、props（入力）を受け取ってツリーへと組み合わされます。これは Web 向けの React とまったく同じで、違いはネイティブコンポーネントを使う点だけです。
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 はコンポーネントにデータを渡し、state（useState 経由）は再レンダリングを引き起こす変化するデータを保持します。これは Web と同じ React のモデルです。
✓ 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.
React Native でコンポーネントと JSX がどのように動作するかを理解することは基礎的に重要です。なぜなら React Native は React のコンポーネントモデルの上に構築されているため、それを把握することが不可欠であり、大きな利点として React の知識がそのまま活かせるからです。
コンポーネント（JSX を返し、props を入力として受け取り、ツリーへと組み合わされる再利用可能な UI の部品）と JSX（埋め込み式を伴って UI を記述する構文）は、React Native 開発の基盤であり、Web 向けの React と同じです。
props（コンポーネントへのデータの受け渡し）と state（useState フック経由で、再レンダリングを引き起こす変化するデータを保持する）を理解することは不可欠です。これらの React の概念こそが、React Native コンポーネントがデータを受け取り変化を管理する仕組みであり、Web の React とまったく同じだからです。
重要な洞察は React の知識が活かせるという点です。コンポーネント、JSX、props、state、フック（useState、useEffect など）、合成、key はすべて Web 向けの React と同じように動作し、主な違いは HTML の代わりにネイティブコンポーネント（View、Text）を使う点とスタイリングが異なる点だけです。
この転用可能性こそが React Native が魅力的である大きな理由です。豊富に存在する React/Web 開発者は、既存の知識のほとんどをそのままネイティブモバイルアプリの構築に活かすことができ、学習コストはネイティブコンポーネントとプラットフォーム固有の事項に絞られた比較的小さなものになります。
React Native は本質的に React（コンポーネント、JSX、props、state、フック）をネイティブ UI に適用したものであり、このモデルを理解することが React Native アプリの構築に不可欠である一方で、React の知識がそのまま活かせる（重要な利点）ことを認識すべきであるため、React Native におけるコンポーネントと JSX の理解は不可欠で基礎的な知識です。これは React Native の中核となるプログラミングモデルであり、アプリ構築に必要であると同時に、React/Web のスキルが React Native のモバイル開発にいかに直接的に活かせるかを示す点で特に価値があります。