React開発環境構築

経歴的にReactスキルが必要そうになってきたので学習開始。

相変わらず備忘録的に残していこうと思います。

各種インストール

Node.jsのインストール

以下のサイトから、LTSをダウンロード/インストール。

Node.js — どこでもJavaScriptを使おう

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

https://nodejs.org/ja

インストールの確認

$ node --version
v22.14.0

nodist/npmのインストール

以下のサイトから実行ファイルをダウンロードし、インストール。

Releases · nodists/nodist

Natural node.js and npm version manager for windows. – nodists/nodist

https://github.com/nodists/nodist/releases

インストール先はデフォルトの「C:\Program Files (x86)」から「C:\work\React」に変更。

パスにスペースが入っていると、後述するyarnコマンドが使えなくなる様です。

インストールの確認

$ npm --version
10.9.2

$ nodist --version
0.10.3

yarnのインストール

先ほどインストールしたnpmをさっそく使います。

$ npm install -g yarn

インストールの確認

$ yarn --version
1.22.22

パッケージインストール

さきほど（以下略

$ yarn global add create-react-app

インストールの確認

$ yarn global list
yarn global v1.22.22
info "create-react-app@5.1.0" has binaries:
   - create-react-app
Done in 0.07s.

Reactアプリケーション

アプリケーション作成

任意のフォルダで以下のコマンドを実行します。

$ yarn create react-app test --template typescript

アプリケーションの実行

以下のコマンドを実行します。

$ yarn start

ビルドに成功すると以下のようなブラウザ表示。

お疲れさまでした。