React

インストール

NPMを使って React インストール

Reactをインストールするためには、「Node.js」と「npm」が必要です。
※Node.jsはJavaScriptの実行環境
※npmはNode.jsのパッケージマネージャー

「Node.js」と「npm」をインストールしたら、コマンドラインで以下のコマンドを実行してReactをインストールします。

作業フォルダー作成

NPMを使う場合、利用するフォルダーを指定する（例：デスクトップに「reactapp」フォルダ作成。C:\Users\user\Desktop\reactapp）

GUIは無いため、コマンドプロンプトやターミナルなどから利用する。

作業フォルダーに移動

コマンド プロント
                  
                    C:\Users\user>

「cd」と入力し半角スペースを空けて、作成した作業フォルダーをドラッグ＆ドロップする

「cd」とは。。現行ディレクトリーから別のディレクトリーへ移動するときに使う。チェンジディレクトリ。

⇓ ⇓ ⇓

コマンド プロント
                  
                    C:\Users\user>cd 【ファイルへのパスの貼り付け】

⇓ ⇓ ⇓

コマンド プロント
                  
                C:\Users\user>cd C:\Users\user\Desktop\reactapp
                C:\Users\user\Desktop\reactapp

フォルダーを移動したら

「npm create vite@latest app -- --template react」と入力

コマンド プロント
                  
                    npm create vite@latest app -- --template react
コマンド プロント
                  
                    C:¥Users¥user¥desktop>cd C:\Users\user\Desktop\reactapp
                    C:\Users\user\Desktop\reactapp

                    C:\Users\user\Desktop\reactapp>npm create vite@latest app -- --template react

「app」は任意のフォルダー名

ここに作業環境が作成される

環境構築まで結構時間が掛かる（インターネット回線速度に依存するが、2～3分程度）

この段階で、package.jsonがダウンロードされる（中にReactのバージョンが書かれているので確認しておく）

＜package.json＞
dependenciesにReactが書かれる
バージョンが19以上になっていることを確認する

package.json
                  
                "dependencies": {
                  "react": "^19.1.0",
                  "react-dom": "^19.1.0"
                }

「Done. Now run:」 が表示されれば初期インストールは完了

コマンド プロント
                  
                C:\Users\user>cd C:\Users\user\Desktop\reactapp

                C:\Users\user\Desktop\reactapp>npm create vite@latest app -- --template react

                > npx
                > create-vite app --template react

                |
                o  Scaffolding project in C:\Users\user\Desktop\reactapp\app...
                |
                —  Done. Now run:

                  cd app
                  npm install
                  npm run dev


                C:\Users\user\Desktop\reactapp>

開発時に下記に書かれているコマンドを実行することで、Reactの開発環境が立ち上がります。
cd app
npm install
npm run dev

開発環境が立ち上がり

表示順にコマンドを入力

                  
                    cd app
                  
                
                  
                    npm install
                  
                
                  
                    npm run dev

⇓ ⇓ ⇓

コマンド プロント
                  
                C:\Users\user\Desktop\reactapp>cd app

                C:\Users\user\Desktop\reactapp\app>npm install

                added 154 packages, and audited 155 packages in 12s

                33 packages are looking for funding
                  run `npm fund` for details

                found 0 vulnerabilities

                C:\Users\user\Desktop\reactapp\app>npm run dev

                > app@0.0.0 dev
                > vite


                  VITE v6.3.5  ready in 228 ms

                  ➜  Local:   http://localhost:5173/
                  ➜  Network: use --host to expose
                  ➜  press h + enter to show help

ローカルURLにアクセスする

表示されたローカルurlにアクセスする（Controlキー＋クリックで移動可能）

コマンド プロント
                  
                    ➜  Local:   http://localhost:5173/

下記のような画面が表示されれば、Reactの開発環境が立ち上がっています。

Reactの開発環境が立ち上がった画面

起動後

ViteでReactを起動させたら後は放置でOK（バックグランドで放置しておけばOK）

止めてしまうとブラウザーで表示されなくなる

jsxを記述

構築した段階でsrcフォルダーに最初の表示に利用しているファイル群が生成されているので削除する
main.jsxを読み込んで表示をしている

main.jsxに必要事項を記述すれば表示される
main.jsxを保存すれば自動的にブラウザーの表示は更新される

「App.jsx」を編集

終了

開発作業を止めるときはそのままターミナルを閉じてしまえばViteが止まるが、
「Ctrl + C」をクリックで「バッチ ジョブを終了しますか (Y/N)?」と表示されるので「Y」で終了

コマンド プロント
                  
                    バッチ ジョブを終了しますか (Y/N)?
                  
                
                  
                    バッチ ジョブを終了しますか (Y/N)? y
                  
                
                  
                    C:\Users\user\Desktop\reactapp\app

再起動

「npm run dev」で再起動できる

                  
                    npm run dev
コマンド プロント
                  
                    C:\Users\user\Desktop\reactapp\app>npm run dev