vite-reactjs-environment-construction

React.jsで環境構築したいんだけど、どうすればいのかな？

今回は、Web アプリの画面を効率よく作るための JavaScript ライブラリ React.js の環境構築について紹介します。

React.jsとは
React.jsの環境構築
まとめ

React.jsとは

React.js とは、Meta社（旧 Facebook）が開発した、Web アプリケーションのユーザーインターフェース（UI）を効率的に構築するための JavaScript ライブラリ です。
コンポーネントベースの設計 により、再利用性と保守性の高いアプリケーションを開発できる 点が特徴で、高速な SPA（シングルページアプリケーション）開発 を中心に、世界中で広く利用されています。

React.jsの環境構築

React.js の環境構築には Node.js が必要になるので、事前にインストールしておきます。

Node.js・npmのインストール

Visual Studio Code（VS Code）のインストール ※任意

本記事では Visual Studio Code（VS Code）を使用しますが、他のテキストエディタを使っても問題ありません。

Viteを使用して、React.jsの環境構築・確認

ここから、Vite（ヴィート）というツールを使って、React.js の開発環境を構築します。

Vite とは？

Vite（ヴィート）は、Web アプリを簡単かつ高速に開発できる、モダンでフロントエンド開発向けの ビルドツール です。
変更した箇所だけを即時に反映できる ホットリロード機能 を備えており、React.js とも相性が良く、軽量で快適な開発環境を提供します。

コマンドライン を起動します
- Windows：コマンドプロンプト または PowerShell
- Mac：ターミナル
「npm create vite@latest」のコマンドを入力し、Enter キーを押す

下記の文言が表示されたら「y」(yes)を入力
下記の質問が表示されたら、次のように選択
①プロジェクト名の入力: study-react (※任意のプロジェクト名)

② フレームワークの選択: React

③プログラミング言語を選択: JavaScript ※TypeScript でも可。
※ SWC と React Compiler は新しいコンパイラーになりますが、今回は使用しない。

④Rolldownの使用有無: No ※開発中のバンドラーのため、今回は使用しない。

⑤依存関係のインストールと開発サーバーの起動: Yes
「Yes」を選択すると、必要なパッケージのインストールと開発サーバーの起動を自動で実行されます。
上記を完了後、下記の文言が表示される
記載URLの「http://localhost:5173」にアクセスし確認する
作成されたプロジェクト構成
node_modules/: インストールされたパッケージ
public/: 静的ファイル
src/: ソースコード
main.jsx: アプリケーションのエントリーポイント。Reactをマウントする起点
App.jsx: メインのReactコンポーネント。ここを編集してアプリを開発
index.html: HTMLテンプレート
package.json: プロジェクト設定
vite.config.js: Viteの設定ファイル。必要に応じてカスタマイズ可能
（※補足）ポート番号を指定して、アクセスしたい場合
①「pakage.json」ファイルの”scripts“の”dev“を”vite – – port 3000“に修正し、保存

②コマンドラインで「Ctrl + C」を押した後、「npm run dev」を入力し開発サーバーの再起動

③記載URLの「http://localhost:3000」にアクセスし確認する