windowsでReactの環境構築

概要

ささっとReactを触りたかった自分の作業履歴

Node.jsのインストール

公式からインストーラをダウンロードしてインストール

コマンドプロンプトで確認（この記事ではPowerShell）
例、以下のようにバージョン情報が出るか等で確認

> node -v
v10.15.0
> npm -v
6.4.1

create-react-appをインストール

npm install -g create-react-app

> npm install -g create-react-app
C:\Program Files\nodejs\create-react-app -> C:\Program Files\nodejs\node_modules\create-react-app\index.js
+ create-react-app@2.1.8
added 63 packages from 20 contributors in 10.087s

実行

任意のディレクトリを作成

そのディレクトリを指定してコマンド実行

create-react-app <ディレクトリ名>

※名前に大文字を含むのはNGの模様

Could not create a project called "HelloWorld" because of npm naming restrictions:
  *  name can no longer contain capital letters

> create-react-app helloworld

Creating a new React app in C:\helloworld.

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

+ react-dom@16.8.6
+ react@16.8.6
+ react-scripts@2.1.8
added 1851 packages from 718 contributors and audited 36248 packages in 153.576s
found 68 vulnerabilities (63 low, 5 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Success! Created helloworld at C:\helloworld
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 helloworld
  npm start

Happy hacking!

指定したディレクトリに移動

下記コマンドで起動

npm start

> npm start

> helloworld@0.1.0 start C:\helloworld
> react-scripts start
Starting the development server...

警告が出た、許可する

ブラウザが立ち上がって、以下のようなページが開く

コマンドプロンプトはこんな感じ

Compiled successfully!

You can now view helloworld in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://***.***.**.***:3000/

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

参考

Windows+VSCode上でReact開発環境を構築 - Qiita
https://qiita.com/willow-c/items/ad5c1a15d8b32d75d927