Reactの公式ドキュメントの全体像
はれて、Webエンジニアになれました！
実務に入る前に、Reactの勉強をさせていただけるということで
Reactの公式ドキュメントを読みました！
期日は、1日という設定だったので要点をしぼって
ざっくりReactについて説明していこうと思います✨
Reactの掴むべきポイント
1日でできることはたかが知れていると思ったので
要点を絞りました。
以下の4点について絞って解説していきます。
- 「コンポーネント」
- 「JSX」
- 「Props」
- 「State & Hooks」
それでは、解説していきます
「コンポーネント」
コンポーネントはUIを構成する部品のことを指します。
レゴブロックを用いてわかりやすく説明します✨
レゴって
「タイヤ」「ドア」「ガラス」などの小さい部品を用いて
最終的に車を作りますよね？
Reactも同じで、
- ボタン
- ヘッダー
- カード
- フォーム
こういう画面の部品1つ1つがコンポーネントです
「JSX」
JSXとはJSの中にhtmlみたいに画面の形を書ける記法の事を指します。
日本語と英語で説明します✨
普段、英語を喋る人がたまに日本語を喋りますよね？
そんなこともないかw 僕らのオフィスにはいます
基本は英語（＝HTML）だけど、
必要なところだけ日本語（＝JavaScript）を差し込めるみたいな感じです！
「Props」
そもそもPropsとは何でしょう？
Propsとはコンポーネント間のデータの受け渡しに使用します。
これだとわかりづらいのですね💦
一言で表すと
props = 部品に渡す「材料」や「指示書」のことを指します。
弁当箱とおかずを用いて説明します
弁当箱 → コンポーネント おかず → props
同じ弁当箱でも、唐揚げ弁当、焼き魚弁当、のり弁色々種類がありますよね〜
僕は唐揚げ弁当が好きですw
👉 箱は同じで、入れる中身だけ変える
propsは「何を入れるか」が大事になってきます！
「State & Hooks」
まずStateとHooksのざっくりとした概要の説明をします
- State:コンポーネントが持つ「変化するデータ」
- Hooks:Reactの機能を関数コンポーネントに追加する仕組み
初心者にわかりやすく具体例を用いて説明します。
-
Stateとはお家の中の牛乳の残量を表します！🥛
自分が管理していて変わる情報ですね（この場合コンポーネントは家になります） -
Hooksとはスマホにアプリを入れることですね
元の機能に新しい能力を追加するみたいなイメージですね✨
まとめ：今日1日で掴んだReactの全体像
今回1日でReact公式ドキュメントを読んで意識したのは、全体像をざっくり把握することでした。
Reactを理解するための核心はこの4つに集約できます。
1. コンポーネント：画面の部品を分けて管理する単位
2. JSX：JavaScriptの中でHTMLのようにUIを書く記法
3. Props：親から子に渡すデータ（材料や指示書のイメージ）
4. State / Hooks：コンポーネント自身が持つ変化する値と、それを使えるようにする仕組み
この4つを押さえるだけで、細かい挙動を追わなくてもReactの基本構造とデータの流れが理解できる状態を作れます。