はじめに

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 を開くと、空の三目並べの盤面が表示されることを確認できた。

以上です。