React.js 開発準備

React.jsの開発準備まで

環境
MacOS Mojave 10.14.5

React.js導入方法

1. CDN利用
2. npm install
3. create-react-app

create-react-appはライブラリ、ビルドツール(webpack/Babel)、開発サーバまで用意されている。今回は3を使用する。

Node.jsインストール

Macでのインストール方法は下記参照
Homebrew + nodebrewでNode.jsをインストール

yarnインストール

npmでも良いが、yarnを入れておく(via homebrew)

$ brew install yarn

create-react-appインストール

$ yarn add create-react-app

アプリ作成

1. プロジェクト用ディレクトリを作成
2. 作成したディレクトリへ移動
3. コマンド実行

$ mkdir {project_dir}
$ cd {project_dir}
$ npx create-react-app {your_app_name}

開発サーバー起動

1. 作成したアプリディレクトリへ移動
2. yarn start実行

$ cd {your_app_name}
$ yarn start

localhost:3000へアクセス

下記のような画面が表示される。

補足

開発サーバーの停止はCtrl + C