ReactをインストールしReactアプリを作成してみます（Windows10）
■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」内には上記のようなメッセージが出力されることも確認できました。
コメント