簡単な手順ですぐにReactを使った開発ができる環境を作ってみた

Web業界では結構主流になりつつあるJavaScriptフレームワークのReact。今から始めたいと思っている人も多いと思います。

始めるにあたって、Facebookが公開しているReactチュートリアルを行うとReactに関する理解は深まります。ただ・・いざ開発するとなると、導入障壁の大きさに気づき、気持ちが萎えます。

早く開発を始めたい！という方々のために、「これ入れればすぐに開発ができるよ、しかも便利」という環境を作ってみました。（ただしNode.jsは事前に入れる必要がある）

開発環境の特徴

この開発環境の特徴として、以下の点があります。

ReactのファイルをJSにコンパイルしてくれる
ファイルの差分をコンパイル
コマンド１つでローカルサーバー起動
ファイル変更があると自動的にブラウザが更新される

環境構築

1. Node.jsのインストール

React環境を入れる前にNode.jsをインストールしてください。ここではHomebrewを使用してインストールします。

$ brew install node

2. ソースコードの取得

GitHubにあるリポジトリをcloneします。以下、リポジトリのURLです。

react-starter
https://github.com/kaicho223/react-starter

$ git clone https://github.com/kaicho223/react-starter

ソースコード取得後、必要なモジュールをインストールします。

$ nam install

これで準備が整いました。

3. 起動

起動はコマンド１つ打てばOKです。

gulp

ブラウザ画面にHello world!と表示されれば完了です。

ソースコードを触ってみよう！

無事起動したということで、次はソースコードを触って自動コンパイルとブラウザの自動更新を確かめてみましょう。

修正するファイルはsrc/contents.jsxです。
こちらを以下のように修正します。

import React, { Component } from 'react';

export default class Contents extends Component {
           constructor(props) {
               super(props);
           }

           render() {
               return (
                    Hello React!!
               );
           }
}

ブラウザ画面がHello React!!と変更されました！

jsxファイル以外にもhtmlやcssファイルを修正してもブラウザの自動更新はされます。是非自身で修正して試してください。

インストールされたパッケージ

react-starterには開発をする上で必要最低限のnpmパッケージがインストールされています。ここでは種類ごとに説明していきます。

React

react, react-dom: Reactで開発する際に必ず必要となるパッケージ

Browserify

browserify: Node.jsのコアモジュールやnpmのモジュールをブラウザでも利用できるようにするツール
watchify: Browserify をファイル監視つきで実行するためのモジュール

Babel（ECMAScriptコンパイラ）

babelify, babel-register: BabelとBrowserifyを合わせるためのモジュール BabelのBrowserify transform版
babel-preset-es2015: ES2015 preset用
babel-preset-react: React preset用

Gulp（タスクランナー）

gulp: Webサイト制作における処理を自動化

Browsersync

browser-sync: ファイル変更を監視し、自動でブラウザリロードを行う

その他

vinyl-source-stream: bundle の返したファイルストリームを vinyl に変換してくれるツール
これによってbrowserify を gulp に通すことが可能

React開発を始めてみましょう！

実際に触ってみた方、いかがでしょうか？

react-starterがReact開発のとっかかりになり、Reactユーザーが増えれば嬉しい限りです。

Fact of Life

音楽と食とビールが好きなWebエンジニアのブログ