【React.js】環境開発について

Question

現在React.jsを新たに始めてみようと思い
環境開発中なのですが、create-react-appのインストールまではうまくいったかと思うのですが、アプリケーションの作成のところで
「create-react-app my-app」（my-appのところは任意のアプリケーション名）とターミナルに打つと書いてあるのですが、
何回やっても「-bash: create-react-app: command not found」と出て
一向に次に進めません。

何かコマンドが間違っているのでしょうか？
お詳しい方ご教授お願い致します。

Answer 1

npm install -gのようにグローバルインストールしない限り、パッケージのパスが通りません。
とはいえグローバルインストールは環境の汚染リスクが高まるので、node_modulesディレクトリの中に行って直接パスを指定してコマンドを叩くか、package.jsonのscriptsにタスクを書くなどの方法があります。
このページが詳しいです。
https://qiita.com/Jxck_/items/8f5d1b70b7b5aa6053ee

Answer 2

npm install -g create-react-appでグローバルインストールはしましたか？

または、

node -vでバージョンが5.2以降であると確認できる場合は、npxが使えるはずなので、npx create-react-app my-appもためしてみてください。

npm自体のバージョンが古い場合はnpm update -g npmでnpm自体をアップデートで。

参考

• npx
• npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう
• create-react-app

Comments

[DaisukeMori]

はい、そのコマンドを打ったら「/Users/Recipe03/.npm-global/bin/create-react-app -> /Users/Recipe03/.npm-global/lib/node_modules/create-react-app/index.js
+ create-react-app@1.5.2
updated 1 package in 5.09s」と出ました。

その後、「create-react-app my-app」（$は打ってません）を打っても次に進めない状況です。

[HayatoKamono]

`npx create-react-app`打ったらどうですか？`npx`の方です。

[HayatoKamono]

`npm -v`でバージョンが5.2以降であれば、npxも使えるのですが。こっちもためしてみてください。

[DaisukeMori]

npx: 67個のパッケージを4.817秒でインストールしました。
Please specify the project directory:
create-react-app <project-directory>

For example:
create-react-app my-react-app

Run create-react-app --help to see all options.

こういうものが出ました。

[HayatoKamono]

OKです。では、任意のディレクトリに移動して、`npx create-react-app my-app`でいけませんか？

[DaisukeMori]

Creating a new React app in /Users/Recipe03/my-app.

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

> fsevents@1.1.3 install /Users/Recipe03/my-app/node_modules/fsevents
> node install

[fsevents] Success: "/Users/Recipe03/my-app/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/Recipe03/my-app/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

+ react-dom@16.3.2
+ react@16.3.2
+ react-scripts@1.1.4
added 1432 packages in 96.911s

Success! Created my-app at /Users/Recipe03/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!

先ほどとは違う物が出ました。
本では自動的にhttp://localhost:3000/が開かれると書いてますが
他に何か必要なのでしょうか？

[HayatoKamono]

```
cd my-app
npm start
```
ってやれば、サーバーが立ち上がります。

[DaisukeMori]

できました！！！
ご丁寧にありがとうございます。

[HayatoKamono]

おー、良かったです！