1.まず初めに
1-1.開発環境マシンスペックについて
本記事では下記のマシンをベースに必要なソフトウェアをインストールしています。
各自のインストールの際は各自の環境に合わせてインストールを行ってください。
OS : Windows10 Pro 64bit
2.開発環境構築手順
2-1.WebStormをインストールしよう
以下のURLへアクセスを行い、画面に表示されている「Download」ボタンを押下すると、WebStormのインストーラーがダウンロードされます。
ダウンロードされたら、クリックして起動を行い、画面に従ってインストールを完了させます。
※尚、今回使用するWebStormは無料版（30日間）を利用します。購入して利用するかどうかは各自の判断に任せます。
2-2.node.jsをインストールしよう
以下の画面にアクセスすると各OSのインストーラーなどが選択できますので、自身の環境に合わせてインストールしてください。
何もわからない人は素直に「○○○ Installer」のものをインストールしましょう。
インストール後、nodeコマンドが利用できることを確認しましょう。
$ node -v
2-3.create-react-appをインストールしよう
コマンドプロンプトを開いて下記のコマンドを実行します。
$ npm install -g create-react-app
2-4.Reactアプリのスケルトンを作成しよう
次に任意でフォルダを作成し、作成したフォルダ内に移動し下記のコマンドを実行します。
$ create-react-app sample-app
2-5.アプリを起動してみよう
作成されたスケルトンはアプリのひな型となっています。
では、作成したsample-appフォルダ内に移動して下記のコマンドを実行します。
$ npm start
これでnode.jsのサーバーが起動し完了すると勝手にブラウザが立ち上がりアプリの画面が表示されます。
以下の画面が表示されればOKです。
サーバーを停止したい場合はコマンドプロンプトへ戻り、
Ctrl + Cで停止するかどうかを聞かれるので「y」を入力します。
2-6.作成したsample-appをWebStormに取り込もう
まずはインストールしたWebStormを立ち上げます。
※初回起動時は無料版として利用するか、または有料版として購入するかを聞かれます。
そのあとは外観の設定とか決まれますがデフォルトですっ飛ばしてください。
そこまで完了すると以下の画面が表示されるかと思います。
画面に表示されている「Open」を押下します。
先ほど作成したsample-appを選択します。
これで取り込みは完了です。
そうするとエディタ画面が開きます。
3.最後に
ここまでの作業でReactを動かせる環境を構築することができました。
create-react-app素晴らしいですね。
facebookの公式ツールだそうです。
今後もここで作成したスケルトンをベースにReactを試して記事を書いていこうと思います。
以上
