【React】プロジェクトを作成してみよう

JavaScriptのライブラリの中でも人気のReact

筆者をはじめ勉強してみたい人が多いのではないでしょうか？

そこで今回は、Reactのプロジェクトを作成して、ブラウザからアクセスしてみます。

プロジェクトを作成する
Reactを立ち上げてみよう

プロジェクトを作成する

PowerShellもしくはターミナルを開いて、npmコマンドでプロジェクトを作成します

Nodejsをインストールする必要がありますので、以下を参考にインストールしてみてください
※Windows向け

【Windows】Nodejsをインストールしよう

Reactを始めるためにNodejsをインストールして、 npmコマンドを使えるようにしなければなりません。なので、WindowsにNodejsをインストールしてみます公式HPからインストーラーをダウンロードす...

（インストール手順）※PowerShellで実行しています

// cdコマンドでプロジェクトを作成したいディレクトリに移動します
PS C:\Users\*****> cd 「移動先のディレクトリ」

// npx create-react-app 「プロジェクト名」
// でプロジェクトを作成します
// 今回は my-app という名前にします
PS C:\Users\*****> npx create-react-app my-app
Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in C:\Users\*****\my-app.

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


added 1395 packages in 1m

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

Initialized a git repository.

Installing template dependencies using npm...

added 71 packages in 11s

226 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1466 packages in 2s

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

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created my-app at C:\Users\*****\my-app
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 my-app
  npm start

Happy hacking!
npm notice
npm notice New major version of npm available! 8.19.2 -> 9.2.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.2.0
npm notice Run npm install -g npm@9.2.0 to update!
npm notice
PS C:\Users\*****>

// cdコマンドでプロジェクトを作成したいディレクトリに移動します

PS C:\Users\*****> cd 「移動先のディレクトリ」

// npx create-react-app 「プロジェクト名」

// でプロジェクトを作成します

// 今回は my-app という名前にします

PS C:\Users\*****> npx create-react-app my-app

Need to install the following packages:

create-react-app@5.0.1

Ok to proceed? (y) y

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

Creating a new React app in C:\Users\*****\my-app.

Installing packages. This might take a couple of minutes.

Installing react, react-dom, and react-scripts with cra-template...

added 1395 packages in 1m

214 packages are looking for funding

run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 71 packages in 11s

226 packages are looking for funding

run `npm fund` for details

Removing template package using npm...

removed 1 package, and audited 1466 packages in 2s

226 packages are looking for funding

run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:

npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created my-app at C:\Users\*****\my-app

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 my-app

npm start

Happy hacking!

npm notice

npm notice New major version of npm available! 8.19.2 -> 9.2.0

npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.2.0

npm notice Run npm install -g npm@9.2.0 to update!

npm notice

PS C:\Users\*****>

Reactを立ち上げてみよう

// プロジェクトのフォルダ内に移動します
PS C:\Users\*****> cd my-app

// Reactを立ち上げます
PS C:\Users\*****\my-app> npm start

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

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

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

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

webpack compiled successfully

// プロジェクトのフォルダ内に移動します

PS C:\Users\*****> cd my-app

// Reactを立ち上げます

PS C:\Users\*****\my-app> npm start

> my-app@0.1.0 start

> react-scripts start

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

Local: http://localhost:3000

On Your Network: http://192.168.11.14:3000

Note that the development build is not optimized.

To create a production build, use npm run build.

webpack compiled successfully

http://localhost:3000

にアクセスしてみます

↓が表示されればOKです！