フロントエンドフレームワークの一長一短で「素のライブラリ」に分類したReactの中身を見ていきます。
ライブラリであって、フレームワークではない
Reactは、Meta（旧Facebook）が開発し、2013年に公開したオープンソースのソフトウェアです。画面を「コンポーネント」という部品の組み合わせで作る、という考え方が中心にあります。
「フレームワーク」と呼ばれることも多いのですが、React自身は画面のUI部分を組み立てる仕事だけを引き受ける「ライブラリ」です。ルーティング（URLごとに何を表示するか）やサーバーとのデータのやり取りといった、アプリの周辺部分は含まれていません。この「引き受ける範囲の狭さ」が、あとで触れる長所と課題の両方の元になっています。
JSXという書き方
Reactのコードは、JavaScriptの中にHTMLのような見た目のコードを混ぜて書く、JSXという記法で書かれることがほとんどです。
function Greeting() {
return <p>こんにちは</p>;
}ブラウザがこのまま読めるわけではなく、あらかじめ変換（ビルド）してから配ります。見た目はHTMLに近くても、実体はJavaScriptの一部という点がポイントです。
コンポーネントと状態
画面をこのコンポーネント単位で細かく分け、それぞれが自分の状態（state、ボタンの押下回数や入力中の文字列など）を持てるようにする。状態が変わると、その部品だけが再描画されます。
2019年公開のReact 16.8で導入されたHooks（useState・useEffectなど）によって、関数として書いたコンポーネントの中でも状態や副作用（データ取得のような、画面の外とやり取りする処理）を扱えるようになりました。現在のReactのコードは、ほぼこのHooksを使った書き方が標準になっています。
「決められていない」ことの良さ
ルーティング、状態管理、ビルドツールをすべて自分で選べます。React単体でアプリを組み立てるときは、React Router（ルーティング）やZustand（状態管理——ログイン状態やカートの中身のように、複数の画面部品にまたがって共有する情報をまとめて管理する仕組み）のような周辺ライブラリを、必要に応じて選んで組み合わせます。必要なものだけ足せる自由度の高さが、素のReactを選ぶ理由になります。
現在もっとも広く使われているUIライブラリの一つでもあり、情報量や採用実績の厚さも強みです。
「決められていない」ことの課題
裏を返すと、素のReactだけでは「何と組み合わせるか」を自分で決めないといけません。 ルーティングは何を使うか、状態管理はどうするか、サーバーとのデータのやり取りはどう書くか——選択肢が多いぶん、決めることも多くなります。
この「決めることの多さ」を解消するために生まれたのが、Next.jsのようなメタフレームワークです。ルーティングやデータ取得の方法をあらかじめセットで用意し、迷う場面を減らしてくれます。
まとめ
- Reactは画面のUIを組み立てるライブラリであって、フレームワークではない
- 基本の骨格はJSX・コンポーネント・状態管理の3つ
- 自由度の高さは長所である一方、「何を組み合わせるか」を自分で決める必要があるという課題でもある
どちらの側面を重く見るかは、作るものの性質次第です。全体の見取り図はフロントエンドフレームワークの一長一短に戻って確認できます。