はじめに
React公式チュートリアルをやってみたところ
ローカル開発環境構築中にnode最新化、npx実行で突っかかったので、備忘録。
実施したチュートリアル
Reactチュートリアル(日本語)
なお、自分はReactは触ったことが無い。
環境
- windows10 64bit
- node 6.9.4 -> 13.11.0
- npm 6.13.7
ローカル開発環境の構築
チュートリアルを進める方法には、2つのオプションがある。
オプション 1: ブラウザでコードを書く
始めるのに一番手っ取り早い方法です！
...
オプション 2: ローカル開発環境
これは完全にオプションであり、このチュートリアルを進めるのに必須ではありません！
今回はオプション2を実施した。
node最新化
既存nodeバージョン確認
- 最新の Node.js がインストールされていることを確かめる。
とあるので、nodeを最新化する。
現行入っているバージョンを確認。
$ node -v
v6.9.4
nodistでnodeインストール
入れ替え方法は下記を参考にした。
windowsでNode.jsをバージョン管理する
$ nodist dist
...
13.9.0
13.10.0
13.10.1
13.11.0
$ nodist 13.11.0
13.11.0
Installing 13.11.0
13.11.0 [===============] 53396/53396 KiB 100% 0.0s
Installation successful.
$ nodist + 13.11.0
13.11.0
$ node -v
v6.9.4
何故かnodeのバージョンが変わっていない。
既存nodeアンインストール
うーん。わからないので、「プログラムと機能」から「Node.js」をアンインストール。
再度nodeバージョン確認
その後、nodeのバージョンを確認。
$ node -v
v13.11.0
npm最新化
nodeが最新化された。npmも最新化しておく。
$ nodist npm match
npm matc
$npm -v
6.13.7
新しいプロジェクト作成
npxでcreate-react-app実行
- Create React App のインストールガイドに従って新しいプロジェクトを作成する
チュートリアルに従いnpxを実行する。
$ npx create-react-app my-app
'npx' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
npxが認識されなかった。
nodistでnodeインストール時にnpxもインストールされるはずだが……。
npxを手動インストール
https://paradox-tm.hateblo.jp/entry/2018/04/25/115243
上記記事で同様の現象が出ていたので、記事を参考に強制的にnpxをインストール。
$ npm install -g npx
...
added 493 packages from 654 contributors in XX.XXXs
$ npx create-react-app my-app
...
Happy hacking!
プロジェクトの動作確認
以降、チュートリアルに従いソースファイル作成し、最後にnpm startでサーバ起動。
http://localhost:3000 を開くと、空の三目並べの盤面が表示されることを確認できた。
以上です。