【りあくと】

React とは?

💡 UIを「部品(コンポーネント)」の組み合わせで作る
📌 このページのポイント
React — コンポーネントツリー <App /> <Header /> <Main /> <Logo /> <Nav /> <ArticleList /> <Sidebar /> <Article /> <Article /> UIを部品(コンポーネント)に分割し、ツリー状に組み合わせる
Reactのコンポーネントツリー構造
ひよこ ひよこ

Reactの何がすごいの?

ペンギン先生 ペンギン先生

UIを「コンポーネント」という再利用可能な部品に分割して開発できるのが最大の特徴だよ。ボタン、フォーム、カードなどの部品を作って組み合わせればページが完成する。状態(state)が変わると自動的にUIが更新されるから、DOM操作を手動で書く必要がないんだ

ひよこ ひよこ

Vue.jsやAngularとの違いは?

ペンギン先生 ペンギン先生

Reactは「ライブラリ」で最小限の機能を提供し、ルーティング状態管理は別ライブラリを選ぶ。Vue.jsは「プログレッシブフレームワーク」で初心者に優しい。Angularは「フルフレームワーク」で大企業向き。シェアはReactが圧倒的1位で、求人数も最多だよ

ひよこ ひよこ

Next.jsとの関係は?

ペンギン先生 ペンギン先生

Next.jsはReact上に構築されたフルスタックフレームワーク。サーバーサイドレンダリングSSR)、静的サイト生成SSG)、APIルート、ファイルベースルーティングなどReact単体にない機能を提供する。2024年以降、React公式もNext.jsフレームワークとして推奨しているよ

ひよこ ひよこ

React を始めるには?

ペンギン先生 ペンギン先生

「npx create-next-app@latest」でNext.js+React+TypeScriptのプロジェクトをすぐ作れるよ。まずはコンポーネント、props(親から子への値渡し)、useState(状態管理)、useEffect(副作用処理)の4つを理解すれば基本はOK。公式チュートリアル(react.dev)が非常によくできているからおすすめだよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「React」って出てきたら「コンポーネントベースのUI構築ライブラリ」と思えればだいたいOK!
📖 おまけ:英語の意味
「React」 = リアクト
💬 データの変化に「React(反応)」してUIを自動更新する、という意味だよ
← 用語集にもどる