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

ReactはMeta（旧Facebook）が開発したUIライブラリだよ。画面に表示される部品（ボタンやフォームなど）を「コンポーネント」という単位で作って、それを組み合わせてWebアプリを構築する仕組みなんだ。レゴブロックを組み立てるイメージに近いね。

まずNode.jsをインストールして、ターミナルからViteというビルドツールを使ってプロジェクトを作成するのがおすすめだよ。以前はCreate React App（CRA）が定番だったけど、2026年現在はViteのほうが高速で主流になっているんだ。コマンド一発でテンプレートが生成されるから、すぐに開発を始められるよ。

最初に覚えるのは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を一通り実践できる。完成したらそのまま就職活動や案件獲得にも使えるから一石二鳥だね。