このチュートリアルで使うコマンドやおすすめするエディタなどを紹介する。
URIを記載しているだけのものはブラウザでURIを開いたらダウンロードとインストールの方法が書いているはず。 コマンドを記載しているものはそのコマンドを実行するとインストールされる。
Reactからcreate-react-appというコマンドが提供されており、これを使うと簡単にReactアプリケーションの雛形を準備できる。
create-react-appはnpmのパッケージとして提供されているのでnpmをインストールする。
"LTS推奨版"の"Windows Installer"を選んでダウンロードしてインストールする。
インストーラのファイル名がnpmじゃなくてnodeとなっているけれど大丈夫、npmはNode.jsに付属している。
npmのインストール
また、create-react-appで作られたプロジェクトはyarnを使うのでyarnもインストールする。
インストーラをダウンロードしてインストールする。
yarnのインストール
あっ、npmは企業ネットワークなどプロキシがある環境だとプロキシを越える設定をしなくてはならない。
proxy環境下でのnpm config設定を参考にして設定するとよい。
もしくは環境変数http_proxyとhttps_proxyにプロキシのURIを設定してもよい（私はそうしている）。
そもそも「npmとかyarnってなんなんだ」という話だけど、npmはNode.jsに付属しているパッケージマネージャ、つまりライブラリの依存関係を解決してくれるもので、Javaに例えるとMavenのようなもの。 それからyarnはnpmレジストリを使用するnpmとは別のパッケージマネージャで、yarnとnpmの関係はJavaに例えるとMavenとGradleの関係に近い。
さて、最後はcreate-react-appだけど、これは明示的にはインストールしない。
npm 5.2.0から追加されたnpxというコマンドを介してcreate-react-appを実行するので明示的なインストールは不要になった。
このチュートリアルではChromeで画面を確認しながら開発することを想定している。
もしChromeがインストールされていなければインストールしておこう。
Chromeのインストール
Reactアプリケーション開発のサポートをしてくれるChrome拡張があるのでインストールしておこう。
React Developer Toolsのインストール
このチュートリアルでは特定のエディタに限定することはないけれど、Visual Studio Codeをおすすめ。
コード補完や定義へのジャンプ、シンボルの検索など便利な機能が使える。
Visual Studio Codeのインストール