ここでは、React.jsの開発環境をサクッと構築することができる「create-react-app」をインストールする手順、そしてローカルサーバーの立ち上げまでの流れを紹介する。
コンテンツ
Node.jsのインストール
Reactを使って開発を進めるにあたり、何はともあれNode.jsがなければ始まらない。
公式サイトからインストーラーを入手、Node.jsのインストールを行おう。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/c9b7fd6ea04aede93d8be1682ec31208.jpg?resize=1024%2C743&ssl=1)
https://nodejs.org/ja/download/
Node.jsをインストールしたら、ターミナルで「node」と「npm」コマンドが使えるようになる。
create-react-appのインストール
以下のコマンドを実行してcreate-react-appをインストールする。
npm i -g create-react-app
-gオプションを付けてグローバルにインストールすることで、create-react-appコマンドをどのディレクトリからも実行できるようになる。
Reactプロジェクトの作成
以下のコマンド一行でReactプロジェクトを構築することができる。
※myappの部分は任意のプロジェクト名に置き換えてくれ。
create-react-app myapp
自動的に用意されたファイル群がこちら。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/94297d930c3877cc2d5d272a4a9792ea.jpg?resize=1024%2C258&ssl=1)
ローカルサーバーの立ち上げ
プロジェクトを作成したら、プロジェクトルートディレクトリへ移動し、以下のコマンドを実行する。
# cdコマンドでルートへ移動
cd myapp
# サーバー起動
npm start
サーバーを起動すると自動でブラウザが立ち上がり、以下のデモページが表示される。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/e19cd5f2f95d392443fc0ee27973c7dc.jpg?resize=1024%2C547&ssl=1)
後は、用意されたファイルをベースに開発を進めていけば良い。
なお、この手順で起動したサーバーはファイル保存時に自動リロードしてくれる。