Reactの開発環境を構築する

Node.jsのインストール

下記のURLからNode.jsをPCにインストールします。

インストール後、ターミナルで下記のコマンドを実行してNode.jsのバージョンが表示されればインストール成功です。

$ node -v

ターミナルで下記のコマンドを実行してNode.jsのパッケージマネージャーyarnをインストールします。

npm install --global yarn

インストール後、ターミナルで下記のコマンドを実行して、yarnのバージョンが表示されればインストール成功です。

$ yarn --version

パッケージマネージャーとはReactやbabel、TypeScript等の開発に必要なパッケージを管理するツールです。パッケージマネージャーが行う管理には、パッケージのインストール、アンインストール、バージョンの表示等があります。

Node.js上のパッケージを管理するものとして最も有名なのがnpmです。

npmは、Node.jsをインストールすると一緒にインストールされるため、すぐに利用できますが、yarnはより高速でパッケージをインストールできるそうです。

yarnのインストール後は下記のコマンドでパッケージをインストールすることになります。

yarn add 'package name'

先ほどインストールしたyarnを利用してcreate-react-appをインストールします。

$ yarn global add create-react-app

create-react-appはReactの開発を行うためのビルド環境です。

create-react-appでプロジェクトを作成してみます。ターミナルで下記のコマンドを実行します。「my-app」の部分は任意のプロジェクト名です。テトリスであれば「tetris」、ブロック崩しであれば「breakout」。

$ npx create-react-app my-app

プロジェクトの作成が完了するとターミナルに下記のようなメッセージが表示されます。

success Uninstalled packages.

(省略)

Happy hacking!

ターミナルで下記のコマンドを実行するとブラウザが起動し、アプリが表示されます。

$ cd my-app
$ yarn start

これでReactの開発環境が構築されました。ここから先は、my-app/src配下にあるApp.jsを編集したり、新たにコンポーネントを作成する等をしてアプリを作っていきます。