■PC環境

>Windows 10

・node –version v16.14.0

・npm –version 8.3.1

※ReactをインストールしReactアプリを作成するために、Node.jsをインストールする必要があります。

■ディレクトリを作成する

Reactアプリを作成するために、まずはディレクトリを作成します。

今回は「C:\Users\user_（フォルダパス）」内に「react-app-test」という空のディレクトリを作成します。これが、Reactアプリを作成するためのプロジェクトディレクトリとなります。

■プロジェクトディレクトリに移動する

プロジェクトディレクトリを作成後、Windows10のコマンドプロンプトを起動します。

>cd react-app-test

起動後、上記のコマンドを入力し、Enterキーを押します。「cd」コマンドで「react-app-test」プロジェクトディレクトリに移動します。

■package.jsonファイルを作成する

移動後、プロジェクトで使用しているすべての種類の依存関係をJSON形式で記録するために、package.jsonファイルを作成します。

>npm init

作成のために、コマンドプロンプト上で上記のコマンドを入力し、Enterキーを押します。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (react-app-test)

Enterキーを押すと、上記のメッセージが出力されます。「package name: (react-app-test)」と表示された後にEnterキーを押します。

version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\user_\react-app-test\package.json:

{
  "name": "react-app-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

Enterキーを押すと、「description:」や「entry point: (index.js)」といった出力がされますが、Enterキーを押していきます。押していくと「Is this OK? (yes)」と出力されます。この出力でEnterキーを押します。押すと、package.jsonファイルが作成されます。

作成後、「react-app-test」ディレクトリ内を確認すると、package.jsonファイルが作成されていることが確認できました。

■Windows10にreactをインストールする

確認後、Windows10にreactをインストールします。

react-app-test > npm install --save react
react-app-test > npm install --save react-dom

インストールするために、コマンドプロンプト上で、上記のコマンドを入力し、Enterキーを押します。

added 3 packages, and audited 4 packages in 2s

found 0 vulnerabilities

added 2 packages, and audited 6 packages in 2s

found 0 vulnerabilities

「react」と「react-dom」をインストールすると、上記のように出力されます。これでインストールは完了となります。

■Create-React-App Toolのインストール

完了後、React.jsをインストールするために、Create-React-App Toolのインストールを行います。このツールを用いることで、簡単にReactアプリケーションを作成することができます。

react-app-test > npm install -g create-react-app

インストールするために、コマンドプロンプト上で、上記のコマンドを入力し、Enterキーを押します。

npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

added 67 packages, and audited 68 packages in 38s

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

2 high severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

Enterキーを押すと、インストールが開始され、上記のメッセージが出力されます。これでインストールは完了です。「WARN（警告）」が出力されていますが、エラーではないので、今回は一旦無視します。

■新しいReactプロジェクトを作成する

インストール完了後、Create-React-App Toolを使用しreactアプリケーションを作成できます。

react-app-test > create-react-app project-name

作成するために、コマンドプロンプト上で、上記のコマンドを入力し、Enterキーを押します。今回は「create-react-app」コマンドを用いて、「project-name」から名前を変更し、新しく作成するReactプロジェクトフォルダである「react-app-test」を指定します。

Success! Created react-app-test at C:\Users\user_\react-app-test\react-app-test
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-app-test
  npm start

Happy hacking!

Enterキーを押すと、上記のメッセージが出力されます。これでプロジェクトディレクトリ「react-app-test」内に「react-app-test」フォルダが作成されました。

■アプリケーションの実行をする

作成後、確認と検証のために、アプリケーションの実行を行います。

react-app-test > cd react-app-test

まず、コマンドプロンプト上で上記のコマンドを入力し、Enterキーを押します。cdコマンドでプロジェクトディレクトリ「react-app-test」内の「react-app-test」フォルダに移動します。

react-app-test\react-app-test> npm start

移動後、さらに上記のコマンドを入力し、Enterキーを押します。「npm start」コマンドでプロジェクトを開始します。

開始すると、Webブラウザが起動し、「http://localhost:3000/」にアクセスし、「React App」というタイトルのReactアプリケーションが実行されることを確認できました。

> react-app-test@0.1.0 start
> react-scripts start

(node:15724) [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:15724) [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-app-test in the browser.

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

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

webpack compiled successfully

なお、「Windows PowerShell」内には上記のようなメッセージが出力されることも確認できました。