登録日： 2025-04-22 最終更新日： 2025-04-22

React プロジェクトの作成

React の新規プロジェクトを作成するには以下の手順でプロジェクトを作成します。

前提条件

Node.js のインストールが完了していること。
npm コマンドが実行できること。
npx コマンドが実行できること。

npx コマンドのインストール

Node.js をインストールするだけでは、基本的に node コマンドと npm コマンドがインストールされるのみで、npx コマンドを利用することができません。
その為、npm コマンドを利用して、npx コマンドをインストールする必要があります。


npm install -g npx

React プロジェクトの作成

npx コマンドが利用できるようになったら、React のプロジェクトを作成します。
React のプロジェクトを作成するには以下のコマンドを実行します。


npx create-react-app react_sample

上記のコマンドを実装すると以下のような感じでプロジェクトの作成が実行されます。
PC環境によっては、多少時間がかかるので完了するまでしばらく待ちましょう。

npx create-react-app react_sample

Creating a new React app in C:\xampp82\htdocs\react_sample.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1324 packages in 50s

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

Initialized a git repository.

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.

Created git commit.

Success! Created react_sample at C:\xampp82\htdocs\react_sample
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 react_sample
  npm start

Happy hacking

React 環境の起動

作成したプロジェクトに移動します。


cd react_sample

続いて、npm start と入力し仮想サーバを移動します。


npm start

上記のコマンドを実装すると以下のような感じで仮想サーバが起動します。

> react_sample@0.1.0 start
> react-scripts start

(node:30320) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:30320) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!

You can now view react_sample in the browser.

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

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

webpack compiled successfully