1.Node.jsのインストール
下記をインストール
https://nodejs.org/ja/
確認として、CMDでnode -vをたたく。
C:\Users\kokor\OneDrive\work\test_react>node -v
v22.14.0
2.npmのインストール
npmとはNode Package Managerの略。
npmのインストール
sudo npm install -g npm
今回はグローバルにインストールをする。
npmもnpm -vでインストールができているか確認できる。
C:\Users\kokor\OneDrive\work\test_react>npm -v
11.2.0
3.PJの作成
create-react-app PJ名
今回はtest_reactなので
create-react-app test_react
C:\Users\kokor\OneDrive\work>create-react-app test_react
Creating a new React app in C:\Users\kokor\OneDrive\work\test_react.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1324 packages in 31s
268 packages are looking for funding
run `npm fund` for details
Git repo not initialized Error: Command failed: git --version
at genericNodeError (node:internal/errors:983:15)
at wrappedFn (node:internal/errors:537:14)
at checkExecSyncError (node:child_process:882:11)
at execSync (node:child_process:954:15)
at tryGitInit (C:\Users\kokor\OneDrive\work\test_react\node_modules\react-scripts\scripts\init.js:46:5)
at module.exports (C:\Users\kokor\OneDrive\work\test_react\node_modules\react-scripts\scripts\init.js:276:7)
at [eval]:3:14
at runScriptInThisContext (node:internal/vm:209:10)
at node:internal/process/execution:449:12
at [eval]-wrapper:6:24 {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 19884,
stdout: null,
stderr: null
}
Installing template dependencies using npm...
added 18 packages, and changed 1 package in 4s
268 packages are looking for funding
run `npm fund` for details
Removing template package using npm...
removed 1 package, and audited 1342 packages in 3s
268 packages are looking for funding
run `npm fund` for details
8 vulnerabilities (2 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Success! Created test_react at C:\Users\kokor\OneDrive\work\test_react
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd test_react
npm start
Happy hacking!
4.プロジェクトを実行
作成されたプロジェクトを実際に動かしてみます。
コマンドまたはターミナルから、「cd test_react」を実行してtest_reactフォルダの中に移動します。
そして、以下コマンドを実行します。
npm start
npm startは、開発用のWEBサーバープログラムを起動し、そこでアプリケーションを公開し、アクセスできる状態にします。
「http://localhost:3000/」
に自動でアクセスされます。これがアプリケーションのアドレスになります。
Reactのロゴがゆっくりと回転する画面が表示されていたら成功です。
これで、プロジェクトを実行してWEBブラウザでアプリの画面を表示する操作ができました。
動作を確認できたら、コマンドまたはターミナルに戻り、Ctrlキーを押したまま「C」キーを押してスクリプトの実行を中断しましょう。