「Windows10」create-react-appでプロジェクトを作成、実行する方法

2022年9月6日

環境

Windows 10 Home 64bit
node v17.1.0
npm 8.19.1

操作方法
1.プロジェクトを作成します
「reactsample」というプロジェクト名を作成します。

C:\study\skill\react>npx create-react-app reactsample
略
Success! Created reactsample at C:\study\skill\react\reactsample
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 reactsample
  npm start

Happy hacking!

npmコマンドについて説明
npm start
開発用のサーバープログラムを利用してプログラムを実行します。

npm run build
プロジェクトをビルドします。

npm test
テストプログラムを実行します。

npm run eject
プロジェクトの依存関係をプロジェクト内に移動します。

ファイルについて説明
package.json
アプリケーションが依存する npm モジュールを記載します

package-lock.json
アプリケーションが依存する npm モジュールのバージョンを記載します

node_modules フォルダ
npm で管理されるモジュール

2.プロジェクトを起動します

C:\study\skill\react>cd reactsample
C:\study\skill\react>reactsample>npm start
略
You can now view reactsample in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.23.240.1:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

3.http://localhost:3000/にアクセスします

「Edit src/App.js and save to reload.」が表示されます。