【2026年版】Reactの始め方 — 環境構築から最初のコンポーネントまで完全ガイド

HTMLとJavaScriptだけでも作れるけど、ページの内容が動的に変わるアプリを作ると、どこで何を変更するか自分で追い続けなきゃいけなくて、すぐ複雑になるんだ。Reactは「画面の状態が変わったら自動的に表示を更新する」という仕組みを持っていて、ボタンを押したら数字が増えるとか、一覧を切り替えるとか、そういう動きが圧倒的に楽に作れるんだよ。求人市場でも圧倒的に需要が高いから、フロントエンド開発を学ぶ上での最初の関門だね。

まずNode.jsをインストールして、ターミナルからViteというビルドツールでプロジェクトを作成するのがおすすめだよ。以前はCreate React App（CRA）が定番だったけど、2026年現在はViteのほうが高速で主流になっているんだ。コマンド一発でテンプレートが生成されて、すぐに開発を始められる。このページでは「環境構築→コンポーネントの作り方→データの扱い方」まで順番に説明するから、初めてでも迷わず進めるよ。

ここで実際に「npm create vite@latest my-app -- --template react-ts」を実行してみてね。「cd my-app」→「npm install」→「npm run dev」まで打つと、ブラウザでReactのサンプルページが表示されるはずだよ。「localhost:5173」が開けば成功！

最初に覚えるのはJSXだね。JSXはJavaScriptの中にHTMLのようなタグを書ける記法で、Reactの基本中の基本なんだ。たとえば「見出しタグの中に変数の値を表示する」みたいなことが直感的に書けるよ。見た目はHTMLそっくりだから、HTMLを知っていればすぐ馴染めるはずだよ。

今のReactでは「関数コンポーネント」が標準だよ。JavaScriptの関数を定義して、その中でJSXを返すだけでコンポーネントになるんだ。たとえばHeaderコンポーネント、Cardコンポーネントみたいに役割ごとに分けて作って、Appという親コンポーネントから呼び出して組み合わせるイメージだね。

「props（プロップス）」という仕組みを使うよ。親コンポーネントから子コンポーネントにデータを属性のように渡せるんだ。たとえばCardコンポーネントにタイトルや説明文をpropsとして渡せば、同じCardでも表示内容を変えられる。テンプレートに差し込むデータを外から指定する感じだね。

それにはuseStateフックを使うよ。useStateはコンポーネントの中で「状態」を管理するための仕組みで、値とその値を更新する関数がセットで手に入るんだ。ボタンをクリックしたら更新関数を呼ぶだけで、Reactが自動的に画面を再描画してくれる。これがReactの強みである「宣言的UI」の考え方だよ。

useEffectは「副作用」を扱うためのフックだよ。コンポーネントが画面に表示されたタイミングでAPIからデータを取得したり、タイマーをセットしたりするときに使うんだ。「画面の描画とは直接関係ないけど、裏で実行したい処理」をuseEffectに書くと覚えておけばいいよ。

Viteで作ったReactプロジェクトだと、srcフォルダの中にコンポーネントを置くのが基本だよ。よくあるパターンはsrcの下にcomponentsフォルダを作ってコンポーネントを入れ、pagesフォルダでページ単位のコンポーネントを管理する形だね。小さいうちはシンプルに、大きくなったら機能ごとにフォルダを分ける方針で大丈夫だよ。

実際のアプリ開発に進むならNext.jsがおすすめだよ。Next.jsはReactをベースにしたフレームワークで、ルーティングやサーバーサイドレンダリングが最初から組み込まれているんだ。React公式ドキュメントでも本格的なアプリにはフレームワークの利用を推奨しているよ。

React Server Components（RSC）は、コンポーネントをサーバー側で実行してHTMLとして送る仕組みだよ。従来はすべてブラウザ側で動かしていたけど、RSCを使うとデータ取得をサーバーで完結させられるから、ブラウザに送るJavaScriptの量が減ってページが速くなるんだ。Next.jsのApp Routerではデフォルトで採用されていて、2026年現在のReact開発では知っておくべき概念だね。

エコシステムが広いのはReactの特徴でもあるね。状態管理はまずuseStateとuseContextで始めて、規模が大きくなったらZustandやJotaiを検討するといいよ。ルーティングは単体ならReact Router、フレームワークならNext.jsに内蔵のものを使う。最初から全部覚えようとせず、必要になったタイミングで導入するのがコツだよ。

定番はTodoアプリだけど、ポートフォリオサイトを作るのもおすすめだよ。自己紹介、スキル一覧、作品ギャラリーをそれぞれコンポーネントで作れば、props・useState・useEffectを一通り実践できる。完成したらそのまま就職活動や案件獲得にも使えるから一石二鳥だね。