神戸学院大学 経営学部 林坂ゼミ

React 入門トップページ

« 戻る 次へ »

React 入門

Node.js のインストール

React サンプルアプリケーションの作成

Node.js がインストールできたら React のサンプルアプリケーションを作成します．

アプリケーションを作成する場所について，Documents フォルダに react フォルダを作成し，その中にアプリケーションを作成することにします． 

C:\Users\student>cd Documents ⏎

C:\Users\student\Documents>mkdir react ⏎

C:\Users\student\Documents>cd react ⏎

C:\Users\student\Documents\react>

プロジェクトの作成は npx create-react-app プロジェクト名 というコマンドを使います．プロジェクト名は react-sampel-app として次のコマンドで作成します． 

C:\Users\student\Documents\react>npx create-react-app react-sample-app ⏎
npm notice
npm notice New minor version of npm available! 10.2.4 -> 10.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
npm notice Run npm install -g npm@10.4.0 to update!
npm notice
npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\student\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\student\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: C:\Users\student\AppData\Local\npm-cache\_logs\2024-02-26T09_14_45_327Z-debug-0.log

C:\Users\student\Documents\react>

Node.js をインストールと同時にインストールされる npm (node package manager) のバージョンが古い場合には上のようなエラーが表示されることがあります．あるいは，初めて上のコマンドを実行したときにも上の7行目以降のnpm ERR! が表示されることがあります．バージョンに関するエラーが表示された場合にはそのメッセージに従ってアップデートを実行してください．（前のページ で確認した npm のバージョンは 10.2.4 でした．これを 10.4.0 にアップデートします．） 

C:\Users\student\Documents\react>npm install -g npm@10.4.0 ⏎

added 1 package in 11s

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

C:\Users\student\Documents\react>

一方で，Windows 環境で npm ERR! だけが表示された場合は，App\Roaming フォルダに npm フォルダが存在しないというエラーなので，App\Roaming フォルダ内に新たに npm フォルダを作成してください．なお，エクスプローラからフォルダを作成する場合，AppData フォルダは隠しフォルダであるので，一時的にフォルダオプションから隠しフォルダを表示する設定に変更する必要があります．

node-2024-16

もう一度プロジェクトの作成コマンドを実行します．4万個を超えるファイルがダウンロードされるので作成には数分の時間がかかるかもしれません．作成が完了すれば最後に「Happy hacking!」と表示されます．またその直前に主要なコマンドと次に入力すべきコマンドも表示されていることに注意してください． 

C:\Users\student\Documents\react>npx create-react-app react-sample-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\student\Documents\react\react-sample-app.

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


added 1488 packages in 4m

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

Initialized a git repository.

Installing template dependencies using npm...

added 69 packages, and changed 1 package in 45s

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


removed 1 package, and audited 1557 packages in 14s

257 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.
Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
    at checkExecSyncError (node:child_process:890:11)
    at execSync (node:child_process:962:15)
    at tryGitCommit (C:\Users\student\Documents\react\react-sample-app\node_modules\react-scripts\scripts\init.js:62:5)
    at module.exports (C:\Users\student\Documents\react\react-sample-app\node_modules\react-scripts\scripts\init.js:350:25)
    at [eval]:3:14
    at runScriptInThisContext (node:internal/vm:144:10)
    at node:internal/process/execution:109:14
    at [eval]-wrapper:6:24
    at runScript (node:internal/process/execution:92:62) {
  status: 128,
  signal: null,
  output: [ null, null, null ],
  pid: 1620,
  stdout: null,
  stderr: null
}
Removing .git directory...

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

Happy hacking!

C:\Users\student\Documents\react>

プロジェクトの作成後はフォルダを移動し，開発サーバを起動します． 

C:\Users\student\Documents\react>cd react-sample-app ⏎

C:\Users\student\Documents\react\react-sample-app>npm start ⏎

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

(node:13596) [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:13596) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
Compiled successfully!

You can now view react-sample-app in the browser.

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

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

webpack compiled successfully

Windows で初めて開発サーバを起動する際には次のような画面が表示されるかもしれません．通常は「プライベートネットワーク」にだけチェックを入れて「許可」すると良いでしょう．

node-2024-14

開発サーバを起動するとデフォルトのブラウザが起動して，次のような画面が表示されるはずです．この画面が表示されたらOKです．もしもブラウザが起動しなかった場合や，異なるブラウザで確認したい場合は，ブラウザのアドレスバーに「http://localhost:3000」と入力するとよいでしょう．このアドレスは npm start というコマンドを入力したときに画面に出力されているはずです．

node-2024-15

なお，開発サーバを停止するには Ctrl + C を押してください．

目次に戻る