⚙️

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

2025/01/10に公開

JavaScript のライブラリの中でも人気のReact
筆者をはじめ勉強してみたい人が多いのではないでしょうか？
そこで今回は、React のプロジェクトを作成して、ブラウザからアクセスしてみます。

 プロジェクトを作成するPowerShell もしくはターミナルを開いて、npm コマンドでプロジェクトを作成します
Nodejs をインストールする必要がありますので、以下を参考にインストールしてみてください ※Windows 向け
https://zenn.dev/kuuki/articles/windows-nodejs-install/
（インストール手順）※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\*****>

 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
http://localhost:3000
にアクセスしてみます
↓ が表示されれば OK です！
停止させるときはPowerShell で Ctrl + C を押します
その後、 バッチ ジョブを終了しますか (Y/N)?と表示されるので、「y」を入力し Enterを押します
再度、 http://localhost:3000 にアクセスすると
↓ が表示されます

プロジェクトを作成する

React を立ち上げてみよう

Discussion