React入門｜何が作れるかとVite 1コマンドで動かす最初の一歩

Reactとは、Webとネイティブアプリの画面を組み立てるためのJavaScriptライブラリです。画面を「コンポーネント」という部品に分けて作り、状態が変わったところだけを自動で描き直します。公式は自らをライブラリと位置づけており、ルーティングやデータ取得の方法までは定めていません。

Reactの入門でつまずく原因は、文法よりも「何から始めればいいか分からない」ことにあります。検索して出てくる手順が古く、公式が非推奨にしたツールを勧めていたり、いまは存在しないコマンドが書かれていたりする。手を動かす前の段階で情報が食い違い、そこで止まってしまうパターンです。

この記事では、Reactで何が作れるのかを国内企業の実例とあわせて示したうえで、公式が現在どの始め方を勧めているかを一次情報で確認し、Viteでプロジェクトを立てて最初のコンポーネントを動かすところまでを扱います。書いたコードが正しく動いているかを自分で確認する手順まで含めているので、上から順に進めれば1つのループを完走できます。

Reactとは｜画面を部品に分けて組み立てるライブラリ

Reactの考え方は「画面を部品に分ける」の一点に集約されます。ボタン、入力欄、カード、一覧。それぞれを独立した部品として書き、組み合わせて画面を作ります。部品は自分の状態を持ち、その状態が変わると、その部品だけが描き直されます。

公式サイトはReactを「Webとネイティブのユーザーインターフェースのためのライブラリ」と説明しています。同時に「Reactはライブラリです。コンポーネントを組み合わせることはできますが、ルーティングやデータ取得のやり方までは規定しません」とも明記しています。この性格が、後述する始め方の話に直結します。

開発元について補足します。React公式ブログ（2026年2月24日）によると、ReactとReact Native、およびJSXなどの関連プロジェクトは、もはやMetaの所有ではなく、Linux Foundationがホストする独立組織「React Foundation」が所有する体制へ移行しました。「ReactはMetaが作っているもの」という説明は、現在は正確ではありません。

利用状況は調査によって数字が変わります。Stack Overflowの開発者調査2025（回答者49,079人・177カ国、当該設問の回答は23,678件）では、Reactを過去1年で本格的に使ったと答えた開発者は44.7%でした。JavaScript開発者に絞ったState of JS 2025（回答者13,002人）では、利用経験率85%、利用者の満足度72%と報告されています。

Reactで何が作れるか

Reactが得意なのは、状態が細かく変わり続ける画面です。入力・絞り込み・並び替え・保存が同じ画面で何度も起きるもの、つまり業務システムや管理画面が典型になります。国内企業が公開している実例を見ると、この傾向がはっきり出ています。

業務システムの中核画面｜サイボウズの例

サイボウズは、kintoneの中核である「アプリ機能」のレコード登録・編集・閲覧画面について、数年前からコードをReactとTypeScriptへ置き換えていることを公開しています（Cybozu Inside Out・2026年7月14日）。データを入力して保存する画面が延々と続くプロダクトで、Reactが選ばれている例です。

管理画面・ダッシュボード｜ZOZOの例

ZOZOは、マーケティングプラットフォームの管理画面「MPマネージャー」をReactとNext.jsで構築したと公開しています。選定理由として、ZOZOTOWNのWebホーム画面でも同じ構成を使っていることを挙げています（ZOZO TECH BLOG・2024年3月25日）。

管理画面は、フィルタ・ソート・ページネーション・一括操作が同居します。素のJavaScriptで書くと状態の管理が破綻しやすい領域で、Reactの部品分割が最も効く場所です。

データを見せるプロダクト｜カケハシの例

カケハシは、BIプロダクト「Musubi Insight」のフロントエンドを、AngularからReactとNext.jsへ全面的にリプレイスした経緯を公開しています（カケハシ プロダクト開発ブログ・2023年12月8日）。数値を集計してグラフで見せる種類のプロダクトです。

スマホアプリ｜ファインディの例

Reactで書いた画面は、ブラウザの外へも出せます。ファインディは、自社初のモバイルアプリ「Findy Events」をReact NativeとExpoで開発したと公開しています（Findy Tech Blog・2026年4月23日）。

公式は、React NativeとExpoについて「これはWebViewではない。Reactコンポーネントが、プラットフォーム本来のネイティブビューとして描画される」と説明しています。Webページをアプリの皮で包んだものではない、という意味です。

作れるものの整理

この記事では、いちばん左の「React単体＋Vite」から始めます。フレームワークは、作るものが決まってから選べば間に合います。

Reactには「1行貼るだけ」の入口がない

始め方の話に入る前に、先に伝えておくべきことがあります。ReactはHTMLにscriptタグを1行足すだけでは始められません。これは環境の問題ではなく、Reactの配布方法が変わったためです。

React 19アップグレードガイド（2024年4月25日）には、「React 19以降、ReactはUMDビルドを生成しなくなる」と明言されています。UMDビルドとは、scriptタグで直接読み込める形式のことです。実際、現行のReact 19にはこの形式のファイルが配布されていません。

ここで注意が必要です。「ReactはCDNで試せない」と断定するのも不正確です。公式は代わりにESM形式のCDNを案内しており、import React from "https://esm.sh/react@19" のような読み込みは今も可能です。ただしこれはモジュールの知識が前提になるため、入門の最初の一歩には向きません。

もう1つ、検索で出てくる情報の落とし穴があります。React公式サイトには今も「HTMLファイル1枚をダウンロードして試す」という案内がありますが、そのファイルの中身はReact 18のUMDです。これをそのまま入門の手順として使うと、現行バージョンではない書き方を覚えることになります。

したがって、この記事ではビルドツールを最初から入れます。遠回りに見えますが、これが現行のReactでは最短です。

ちなみに、環境構築なしで始められるフレームワークを先に触ってみたい場合は、Vue.js入門を先に読むという選択肢もあります。そちらはCDNから1行で始められます。

公式はフレームワークから始めることを勧めている

React公式ドキュメント「Creating a React App」は、「Reactで新しいアプリやWebサイトを作るなら、フレームワークから始めることを推奨する」としています。挙げられているのは次の3つです（2026年8月20日閲覧）。

• Next.js（App Router） — Webアプリ全般。サーバー側の処理まで含めて扱える。
• React Router — ページの切り替えを中心に据えた構成。
• Expo — スマホアプリを作る場合。

「フルスタックフレームワーク」という言葉からサーバーが必要だと思われがちですが、公式は「フルスタックフレームワークはサーバーを必要としない。本ページのフレームワークはすべて、クライアントサイドレンダリング、シングルページアプリ、静的サイト生成に対応している」と補足しています。

ではなぜこの記事がViteを使うのか。フレームワークは、Reactに加えてルーティング・データ取得・ビルド設定の作法を同時に覚えることになるからです。入門段階でそれをやると、どこまでがReactの話でどこからがフレームワークの話なのかが分からなくなります。

Viteは、React公式ドキュメントで「モダンなWebプロジェクトに、より高速で無駄のない開発体験を提供することを目指すビルドツール」と位置づけられています。同ページには「Viteは、推奨フレームワークの1つであるReact Routerでも実際にビルドツールとして使われている」とも書かれています。公式の推奨から外れた道具ではありません。

create-react-appは使わない

Reactの入門記事でいまも見かける npx create-react-app は、使わないでください。公式が非推奨にしています。

React公式ブログ「Sunsetting Create React App」（2025年2月14日）で、Reactチームは新規アプリ向けにCreate React Appを非推奨とし、フレームワークまたはVite・Parcel・Rsbuildといったビルドツールへの移行を推奨すると表明しました。現行のドキュメントにも「Create React Appを使うべきですか？ いいえ。Create React Appは非推奨になりました」と明記されています。

ただし、言い過ぎにも注意が必要です。公式は「既存のCreate React Appアプリはメンテナンスモードで動き続ける」とも書いています。「使えなくなった」のではなく「新規では選ばない」が正確な理解です。既存の案件で使われていても、それ自体が問題というわけではありません。

Viteで最初のプロジェクトを立てる

実際に動かします。先にNode.jsのバージョンを確認してください。Vite公式ガイドによると、Viteは20.19以上、または22.12以上を要求しています（2026年8月20日閲覧）。

node -v   # v22.12.0 以上、または v20.19.0 以上であればOK

確認できたら、次の1コマンドでプロジェクトが作られます。

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

表示されたローカルアドレスをブラウザで開けば、Reactの初期画面が出ます。ここまでが最初の一歩です。

テンプレート名について1つ注意があります。Reactのテンプレートは react と react-ts の2つです。解説記事によっては別の名前が書かれていることがありますが、執筆時点の create-vite のテンプレート一覧には含まれておらず、打つとエラーになります。TypeScriptを使わない場合は --template react にしてください。

Vite自体が何をしている道具なのかは、Viteの基礎知識で扱っています。設定や導入手順を細かく見たい場合はViteの特徴・導入・使い方ガイドへ進んでください。ここではReact側の話に絞ります。

最初に覚えるのは3つだけ｜JSX・useState・props

Reactの機能は多いですが、最初の1つを作り切るのに必要なのは3つです。生成されたプロジェクトの src/App.tsx を書き換えながら進めてください。

JSX｜JavaScriptの中にHTMLを書く

Reactでは、関数がHTMLのような見た目のものを返します。これがコンポーネントです。波かっこで囲むとJavaScriptの値を埋め込めます。

function Greeting() {
  const userName = 'Imai'
  return <p>{userName} さん、こんにちは</p>
}

HTMLとの違いが2つあります。class ではなく className と書くこと、そして returnで返せる要素は1つだけであることです。複数並べたいときは、全体を <> と </> で囲みます。

useState｜変化する値を持つ

変化する値は useState で持ちます。値と、その値を更新する関数がセットで返ってきます。

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <>
      <p>押した回数: {count}</p>
      <button onClick={() => setCount(count + 1)}>押す</button>
    </>
  )
}

重要なのは、count を直接書き換えないことです。必ず setCount を通します。直接書き換えても画面は更新されません。Reactは「更新関数が呼ばれた」ことを合図に描き直すからです。

props｜部品に値を渡す

部品を使い回すために、外から値を渡します。これがpropsです。一覧表示は、配列に対して map を使い、同じ部品を要素数だけ並べます。

type ItemProps = { name: string }

function Item({ name }: ItemProps) {
  return <li>{name}</li>
}

function ItemList() {
  const items = [
    { id: 1, name: '牛乳' },
    { id: 2, name: 'パン' },
  ]

  return (
    <ul>
      {items.map((item) => (
        <Item key={item.id} name={item.name} />
      ))}
    </ul>
  )
}

key は繰り返した要素を見分けるための目印です。付け忘れても動いてしまいますが、並び替えや削除で表示がずれる原因になるので、最初から付ける習慣にしてください。map の使い方に不安があれば、JavaScript配列メソッドの練習問題で先に固めておくと進みが速くなります。

React 19で入門者に関係する変更

古い解説記事を参照したときに混乱しないよう、現行バージョンで変わった点を押さえておきます。React公式ブログ「React v19」（2024年12月5日）で発表された内容のうち、入門段階で影響するものです。

いま入門する人にとって実害があるのは2行目です。ReactDOM.render を使っている解説はReact 17以前のもので、そのまま写しても動きません。参考にする記事を開いたら、まずここを確認してください。

もう1つ、2025年に登場したReact Compilerにも触れておきます。公式ブログ（2025年10月7日）は、これを「自動メモ化によってReactアプリを最適化するビルド時ツール」と説明し、「新規アプリはReact Compilerを使うべき」としています。ただし useMemo や useCallback が不要になったわけではなく、公式は引き続き「escape hatch」として使えると明記しています。入門段階では、そういうものがあると知っておけば十分です。

書いたReactが正しく動いているかを確認する

Reactは、間違っていても画面が真っ白になるだけで理由を教えてくれないことがあります。次の順で確認してください。

1. ターミナルを見る。npm run dev を実行している画面にエラーが出ていないか確認します。文法ミスはブラウザではなくここに出ます。
2. ブラウザの開発者ツールでコンソールを開く。赤いエラーと黄色い警告の両方を見ます。key の付け忘れは警告として出ます。
3. 値を変えて、画面が追随するか試す。ボタンを押す、入力するなど状態が変わる操作をして、表示が変わるかを見ます。ここまで通れば正しく動いています。

合否ラインは3番目です。画面が表示されているだけでは足りません。状態を変えたときに表示が追随してはじめて、Reactを使えていることになります。表示は出るのに操作しても変わらない場合、useState の更新関数を通さず値を直接書き換えている可能性が高いです。

3番目まで通ったら、ブラウザ拡張のReact Developer Toolsを入れてください。どの部品がどんな状態を持っているかを画面上で直接確認でき、原因の切り分けが一段速くなります。

詰まりやすい3箇所と対処

前の見出しの確認で引っかかったときは、まずこの3つを疑ってください。入門段階のつまずきはほぼここに集中します。

2番目は、素のJavaScriptに慣れているほど踏みやすい箇所です。JavaScriptでは変数を直接書き換えるのが普通ですが、Reactでは更新関数の呼び出しが画面を描き直す合図になっています。値を書き換えただけでは合図が出ないため、何も起きません。

次の一手

カウンターと一覧が動いたら、次に進む先は3つに分かれます。どこで止まったかによって選んでください。

手を動かすものが欲しい場合

文法を追うより、1つ作り切るほうが定着します。ReactでTODOアプリを作る手順では、ドラッグ&ドロップと自動保存まで含めたカンバン型のアプリを作ります。この記事で覚えた3つがそのまま使えます。

JavaScriptの基礎に不安が残った場合

map や分割代入で手が止まったなら、Reactより先に土台を固めたほうが速く進みます。JavaScript学習ガイドから、いまのレベルに合うものを選んでください。

実務に近いものを作りたい場合

帳票や請求書のように、画面をそのままPDFにする要件は実務で頻繁に出ます。Next.jsで日本語PDFを生成する方法では、日本語フォントの扱いまで含めて扱っています。フレームワークに進む足がかりにもなります。

まとめ

Reactは、始め方の情報が古くなりやすいライブラリです。手を動かす前に、いま公式が何を勧めているかを確認しておくと、無駄な回り道をせずに済みます。

• Reactは画面を部品に分けて組み立てるライブラリ。ルーティングやデータ取得は範囲外と公式が明言している。
• 得意なのは状態が細かく変わる画面。国内の実例も業務システムと管理画面に集中している。
• React 19はscriptタグ用のビルドを配布していないため、1行貼るだけの入口はない。ビルドツールを最初から入れるのが最短。
• create-react-app は使わない。公式が2025年2月に非推奨を宣言している。
• 最初に覚えるのはJSX・useState・propsの3つで足りる。
• 動作確認の合否ラインは「状態を変えたときに表示が追随するか」。表示されるだけでは足りない。

読み終えたら、まず npm create vite@latest でプロジェクトを1つ立ててください。そのうえで、覚えた3つを使って作り切る題材に進むのが最短です。

よくある質問

Q. Reactとは何ですか？

Webとネイティブアプリの画面を組み立てるためのJavaScriptライブラリです。画面をコンポーネントという部品に分けて作り、状態が変わった部分だけを自動で描き直します。公式は自らをライブラリと位置づけており、ルーティングやデータ取得の方法までは規定していません。

Q. Reactを学ぶ前に何が必要ですか？

HTMLとCSSに加えて、JavaScriptの基礎が必要です。特に配列の map と分割代入は最初から出てくるので、先に慣れておくと進みが速くなります。またReactはビルドツールを使う前提になるため、Node.jsのインストールとターミナルの基本操作も必要です。

Q. Reactでは何が作れますか？

業務システムや管理画面のように状態が細かく変わるWebアプリが中心です。国内でも、業務システムの中核画面や、マーケティングプラットフォームの管理画面、BIプロダクトなどの採用例が公開されています。React NativeとExpoを使えばスマホアプリも作れ、Next.jsを使えば静的サイトの生成もできます。

Q. create-react-appは使ってよいですか？

新規のアプリでは使いません。React公式ブログは2025年2月14日に非推奨を宣言しており、現行のドキュメントにも「Create React Appを使うべきですか？ いいえ」と明記されています。ただし公式は既存アプリがメンテナンスモードで動き続けるとも書いているので、すでに動いているものを直ちに捨てる必要はありません。

Q. ReactはCDNから読み込んで試せますか？

scriptタグを1行貼るだけの方法は使えません。React 19からscriptタグ向けのUMDビルドが配布されなくなったためです。ESM形式のCDNから読み込む方法は公式に案内されていますが、モジュールの知識が前提になるため入門の最初の一歩には向きません。ビルドツールを入れるほうが結果的に速く進めます。

Q. 書いたコードが動かないときは何を見ればいいですか？

まず npm run dev を実行しているターミナルを見てください。文法ミスはブラウザではなくここに出ます。次にブラウザの開発者ツールでコンソールを開き、エラーと警告の両方を確認します。表示は出るのに操作しても変わらない場合は、更新関数を通さず値を直接書き換えているケースがほとんどです。

関連記事

• Vue.js入門｜何が作れるかとCDN 1行で動かす最初の一歩
• React.js・Vue.js・Node.jsの違いとは？特徴・用途・選び方を徹底比較
• ReactでTODOアプリを作る｜ドラッグ&ドロップと自動保存
• Next.jsと@react-pdf/rendererで日本語PDFを生成する
• JavaScript学習ガイド【練習問題・実践アプリ・フレームワーク入門まとめ】
• Viteの基礎知識