はじめに
社内の勉強会などでReactを手軽に試せる環境がほしいという声が上がったので、ReactやReduxを試すことのできる環境を構築する方法をまとめました。
手軽に試すという意味ではjsfiddleでも良いかなと思いましたが、ファイルを分割して（実際のプロジェクトと同じ構成で）動作を試したり、なるべく本番と近いビルド構成で試したかったりと、手軽とは言え求める最低水準があることにも気づきました。
ここでは、有名な https://github.com/kriasoft/react-starter-kit を利用して、ローカルマシーンでReactやReduxを試すことのできる環境を構築する方法を紹介します。
スターターキット
スターが15700以上ついているスターターキットです。
Reactはもちろん、Reduxやその他フレームワーク、ライブラリを試すことができるブランチも用意されています。
環境構築
Macを利用している想定で環境を構築をしていきます。
必要なライブラリを入れましょう
homebrew のインストール
homebrewはMacのパッケージマネージャーです。
wgetやgitいったコマンドはもちろん、Chrome、iTermやAtomといったアプリケーションもbrewコマンドでインストール出来てしまいます。
次のURLからインストールしてください。
https://brew.sh/index_ja.html
yarn のインストール
yarnはnpmと似たパッケージマネージャーですが、インストールするパッケージをキャッシュすることにより、npmよりも高速に動作します。
先程入れたbrewを利用してインストールするのが簡単です。
$ brew install yarn
詳しくは次のURLを御覧ください。
https://yarnpkg.com/en/docs/install
ソースコードの入手
以上ですべて環境構築に必要な手順が全て完了しました。
最後にリポジトリをcloneしてソースコードを入手しましょう。
$ git clone [email protected]:kriasoft/react-starter-kit.git
$ cd react-starter-kit
実行
次のコマンドで、サーバーが立ち上がります。
$ yarn install
$ yarn start
サーバーが立ち上がったら、 http://localhost:3000/ にアクセスしてください。
こんな画面が立ち上がると思います。
一番初めに立ち上がる画面のコードは、 src/routes/home/Home.js にあります。
今回はサンドボックス用途で利用するので、既存のコードは気にせずに、思いっきり内容を書き換えてしまいましょう。
import React, { Component } from 'react'
class Hello extends Component {
render() {
return (
<div>Hello React</div>
)
}
}
export default Hello
ファイル内容を上記コードに置き換えると、コンテンツの内容が Hello React に置き換わりました。
上下の意匠がじゃまなので、これも消してしまいましょう。
src/routes/home/index.js（Home.js と同じディレクトリにあります）を少し変更します。
return {
chunks: ['home'],
title: 'React Starter Kit',
component: (
- <Layout>
- <Home news={data.news} />
+ <Home/>
- </Layout>
),
};
とてもスッキリしましたね。
おわりに
Reactを試す環境が簡単に導入できました。
利用したスターターキットはソースコードを変更したらブラウザの内容が自動的に切り替わったり（Hot Module Replacement）、コンポーネントのDOM要素に付与するクラス名をCSSファイルで定義できたり（CSS Modules）、最新のECMAScript構文を利用できたりと、新しくこういうことをしたいと思ったらすぐに試せる環境だと思います。
今回書き換えなかった Home.js 以外のコードを眺めるだけでも勉強になると思うので、Home.js で遊び飽きたら別のファイルを眺めに行くと良いと思います。