joppot

コピペで絶対動く。説明を妥協しない

プログラミング

react0.14 + gulp + express + babelでReactのチュートリアル環境構築をする

投稿日:

Pocket

reacttopthumb

概要

みなさんこんにちはcandleです。今回は、react0.14のnodeの環境構築をします。
react0.14はまだまだ、開発段階にあり、しばしば仕様変更が行われています。
0.13の時では使用されていなかったことが盛り込まれたり、削除されたりしています。

react0.14はnodeを使わなくても必要なjsファイルを読み込むだけで動作するのですが、一応、nodeでの開発環境が整っていたの方が、それからの開発に便利です。

日本語に翻訳されたreactのチュートリアル
http://mae.chab.in/archives/2762

また、nodeでのreactの開発環境はこのサイトを参考にしています。
http://qiita.com/nownabe/items/2d8b92d95186c3941de0

前提

nodeがインストールされている

SPONSORED LINK


必要なパッケージをインストールする

まずは、reactが動くnodeのフォルダを作成します。

私はホームディレクトのjsフォルダに作成します。

cd js
mkdir react14-tutorial
cd react14-tutorial

mkdirreact14tutorial

次に、nodeのライブラリを管理するpackage.jsonを作成します。
npm initと打ち込んで、全てエンターを押し返答します。

npm init

npm_init_all_yes

package.jsonが作成されました。

必要なライブラリをインストールします。

以下のコマンドでライブラリをインストールします。

–save-devとすることによって、package.jsonにインストールしたライブラリの名前が保存されます。

npm install --save-dev babelify@6.4.0 
npm install --save-dev body-parser
npm install --save-dev browser-sync
npm install --save-dev browserify
npm install --save-dev express
npm install --save-dev gulp
npm install --save-dev node-dev@2.6.2
npm install --save-dev jquery
npm install --save-dev marked
npm install --save-dev react
npm install --save-dev react-dom
npm install --save-dev vinyl-buffer
npm install --save-dev vinyl-source-stream

結構長いです。
node_modulesというフォルダが作成されます。

ライブラリのインストールが終わりました。

jsのサーバーファイルを作成する

チュートリアルではサーバにjsonを投げて、データを保存します。
そのため、server.jsを作成して、nodeサーバを実装します。

githubのチュートリアル用のgithubレポジリーに必要なサーバファイルがありますが。

https://github.com/reactjs/react-tutorial/

このserver.jsはあまり、汎用的な書き方をしていないので、汎用性があるserver.jsを自作します。

汎用性のあるnodeサーバとはチュートリアルを終えた後に、自分でreactコーディングをする際に、便利なサーバのことです。

server.jsを作成します。

touch server.js

以下を記述します。

var fs = require('fs');
var path = require('path');
var express = require('express');
var bodyParser = require('body-parser');
var app = express();

app.set('port', (process.env.PORT || 3000));

app.use('/', express.static(__dirname));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

app.get('/api/comments', function(req, res) {
  fs.readFile('comments.json', function(err, data) {
    res.setHeader('Cache-Control', 'no-cache');
    res.json(JSON.parse(data));
  });
});

app.post('/api/comments', function(req, res) {
  fs.readFile('comments.json', function(err, data) {
    var comments = JSON.parse(data);
    comments.push(req.body);
    fs.writeFile('comments.json', JSON.stringify(comments, null, 4), function(err) {
      res.setHeader('Cache-Control', 'no-cache');
      res.json(comments);
    });
  });
});


app.listen(app.get('port'), function() {
  console.log('Server started: http://localhost:' + app.get('port') + '/');
});

といって、私はnode使ったことないので、上のexpressを使ったnodeサーバはほぼコピペです。

gulpファイルを作成する

gulpは用はレシピみたいなものです。gulp自体は色々な場面で使えるのですが、それはreactでも同じです。

reactを動かすために必要な手順をgulpにまとめます。

フィアルを作成します。

touch gulpfile.js
var babelify = require('babelify');
var browserify = require('browserify');
var browserSync = require('browser-sync');
var buffer = require('vinyl-buffer');
var gulp = require('gulp');
var node = require('node-dev');
var source = require('vinyl-source-stream');

function errorHandler(err) {
  console.log('Error: ' + err.message);
}

// 自動ブラウザリロード
gulp.task('browser-sync', function() {
  browserSync({
    proxy: {
      target: 'http://localhost:3000'   
    },
    port: 8080
  });
});

// Javascriptへのビルド
// ES6かつJSXなファイル群をbuild/bundle.jsへ変換する
gulp.task('build', function() {
  browserify({entries: ['./index.js']})
    .transform(babelify)
    .bundle()
    .on('error', errorHandler)
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./build'))
    .pipe(browserSync.reload({stream: true}));
});

// ローカルサーバーの起動
gulp.task('server', function() {
  node(['./server.js']);
});

// ファイル監視
// ファイルに更新があったらビルドしてブラウザをリロードする
gulp.task('watch', function() {
  gulp.watch('./index.js', ['build']);
  gulp.watch('./index.html', ['build']);
  gulp.watch('./components/*.js', ['build']);
});

// gulpコマンドで起動したときのデフォルトタスク
gulp.task('default', ['server', 'build', 'watch', 'browser-sync']);


index.htmlを作成する

index.htmlを作成します。

touch index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="build/bundle.js"></script>
  </body>
</html>


index.jsを作成する

メインの処理が記述されているindex.jsを作成します。

touch index.js
import React from 'react';
import ReactDOM from 'react-dom';

var CommentBox = React.createClass({
  render: function() {
    return (
        <div className="commentBox">
        Hello, world! I am a CommentBox.
        </div>
    );
  }
});
ReactDOM.render(
    <CommentBox />,
  document.getElementById('content')
);

ここまでで、hello worldが表示されるところまで持ってこれました。

サーバの起動

gulpコマンドでサーバを起動します。

gulp

Menubar

ブラウザでこんな感じで表示されれば成功

Hello_React

ファイルを分割する

今は、index.jsにスクリプトが書かれていますが、大規模に向けてファイルを分割します。

gulpfile.jsを見ればわかりますが、componentsフォルダを作成して、そこにjsファイルを設置し、index.jsでrequireするようにします。

mkdir components
touch components/CommentBox.js

makecomponents
そしたら、index.jsを以下の様にして、

import React from 'react';
import ReactDOM from 'react-dom';

import CommentBox from './components/CommentBox';

ReactDOM.render(
    <CommentBox />,
  document.getElementById('content')
);

components/CommentBox.jsに以下を記述します。

import React from 'react';

export default class CommentBox extends React.Component{
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <div className="commentBox">
        Hello, world! I am a CommentBox.
        </div>
    );
  }
};

これで、ファイルの分割ができました。

まとめ

Reactからnodeに入る人は最初の環境構築で結構苦労すると思います。
この環境構築をうまく改変していくことで、チュートリアル以外でも、reactの開発がおこなれる様になります。ぜひ頑張ってください。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ruby on railsのckeditorの画像のアップロード先をcarrierwaveとfogを使ってS3にする

概要 railsのckeditorはデフォルトでrailsのuploadsフォルダにアップロードしますが、 それだとサーバの容量を取ってしまうので、画像のアップロード先をS3に上げてみたいと思います。 …

Stinger3のURLまたはタブの横にあるロゴを変更する

概要 みなさんこんにちはcnadleです。Stinger3のカスタマイズをしましょう。どんなwebサイトでもURLの周辺にロゴがありますよね。今回はそれを変更します。 条件 WordPressを利用し …

MAMPのPHPからSQLite3データベースにアクセスして値を取得する

概要 みなさんこんにちはcandleです。MAMPのSQLiteデータベースとテーブルを作成して、レコードも挿入した事なので、値を取得してみましょう。

railsのfluent-loggerとdevise gemを使ってユーザーの行動をfluentdサーバに収集する

概要 fluentdと言えば、ビックデータで扱うようなデータを集め出力するサーバですが、これとrailsのfluent-logger gemとdevise gemを組み合わせてユーザーの行動ログをとっ …

fabricのsshのネットワーク設定でパスワードか公開鍵を使って認証する

概要 皆さん今日はcandleです。今回はsshを使ったfabricの設定をしましょう。 一般にsshにはパスワード認証と公開鍵認証があるので、そのどちらも試してみましょう。 もちろんセキュリティ面で …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ