More than 5 years have passed since last update.

公式サイトの方法でReactを導入する(webpack+babel)

Last updated at 2016-12-12Posted at 2016-12-12

reactに関する記事はたくさんありますが、
webpackやbabelの設定等を手動で行う必要があり
敷居が高いものとなっています。

そこで今回は現時点で公式サイトに記載されている方法に則って
簡単に導入する方法を記載します。

事前にnpmのインストールを行います。

centos7の場合

sudo yum install -y epel-release
sudo yum install -y nodejs npm

epel-releaseはnpmをインストール際に必要となります。

###グローバルにcreate-react-appをインストールします。

npm install -g create-react-app

###hello-worldという名前でプロジェクトの作成をします。

create-react-app hello-world

※hello-worldは任意の名前をつけることが可能です。

テンプレートとしてプロジェクトが作成がされるので
こちらを編集しながらreactを覚えて行くと良いと思います。

###サーバーを起動させます。

cd hello-world
npm start

Compiled successfully!

と表示されるので

ブラウザで
http://localhost:3000/
にアクセスをします。

「To get started, edit src/App.js and save to reload.」
とページに表示されたら成功です。

こちらは必須ではありませんが
設定ファイルをローカルに出力して
編集できるような状態にするには

npm run eject

を使います。

Are you sure you want to eject? This action is permanent. [y/N]

と訊かれるのでyを押してEnterを押します。
webpack, babel, eslint等が含まれていることがわかります。
package.jsonの中身にもこちらが記載されています。

###コマンド一覧
ちなみにpackage.jsonのscriptsがコマンドとなっています。