create-react-appをインストールしてReact.jsの開発環境を構築する | プログラマーになった「中卒」男のブログ

ここでは、React.jsの開発環境をサクッと構築することができる「create-react-app」をインストールする手順、そしてローカルサーバーの立ち上げまでの流れを紹介する。

コンテンツ

Node.jsのインストール

Reactを使って開発を進めるにあたり、何はともあれNode.jsがなければ始まらない。

公式サイトからインストーラーを入手、Node.jsのインストールを行おう。

Node.jsをインストールしたら、ターミナルで「node」と「npm」コマンドが使えるようになる。

以下のコマンドを実行してcreate-react-appをインストールする。

npm i -g create-react-app

-gオプションを付けてグローバルにインストールすることで、create-react-appコマンドをどのディレクトリからも実行できるようになる。

以下のコマンド一行でReactプロジェクトを構築することができる。

※myappの部分は任意のプロジェクト名に置き換えてくれ。

create-react-app myapp

自動的に用意されたファイル群がこちら。

プロジェクトを作成したら、プロジェクトルートディレクトリへ移動し、以下のコマンドを実行する。

# cdコマンドでルートへ移動
cd myapp

# サーバー起動
npm start

サーバーを起動すると自動でブラウザが立ち上がり、以下のデモページが表示される。

後は、用意されたファイルをベースに開発を進めていけば良い。

なお、この手順で起動したサーバーはファイル保存時に自動リロードしてくれる。