[Reactのチュートリアル](https://facebook.github.io/react/docs/tutorial.html)を触ったのですが、バックエンドがないとPOSTできないのでつまらない。ExpressとMongoDBを追加して動くようにしてみました。

タスクランナーは普段はGruntなのですがGulpを使ってみました。
Livereloadの代わりにBrowserSyncを導入してみました。

[https://github.com/110chang/react-express-mongodb](https://github.com/110chang/react-express-mongodb)

<div class="content-holder">
  <figure>
    <a data-flickr-embed="true"  href="https://www.flickr.com/photos/20720251@N04/23489376709/in/dateposted-public/" title="fig-react-express-mongodb"><img src="https://farm1.staticflickr.com/638/23489376709_6c64d3d934_z.jpg" width="640" height="300" alt="fig-react-express-mongodb"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
  </figure>
</div>



```bash
$ node -v # v0.12.0
```

# Reactのチュートリアルに必要なパッケージ

- react
- rect-dom
- jQuery（ajax用）

```js
// main.js
var React = require('react');
var ReactDOM = require('react-dom');
var $ = require('jquery');

//...以降、チュートリアルのコード
```

チュートリアルではajaxのためにjQueryを使っていますが、superagentでもいいとおもいます。

# JSXをGulpでコンパイルするのに必要なパッケージ

- gulp
- browserify
- baberify
- babel-preset-react
- vinyl-source-stream

```js
// gulpfile.js
var gulp = require("gulp");
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var babelify = require('babelify');

//...

gulp.task('concat', function() {
  browserify({
    entries: ['path/to/main.js'],
    debug : !gulp.env.production
  }).transform(babelify, { presets: ["react"] })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest("./public"));
});

//...

```

babel-preset-reactは`require`しませんがコンパイルの時に必要です。

vinyl-source-streamは、NodeのStreamをGulpで扱えるStreamに変換してくれるものらしい。Streamはデータをpipeでつないで処理できるようにするインターフェースということのようです。

Lintは、[SublimeLinter-eslint](https://github.com/roadhump/SublimeLinter-eslint)を入れました。

# バックエンドに必要なパッケージ

- mongo
- express
- body-parser（POSTを受け取る際に必要）

bodyParserはdeprecatedうんぬんの情報が錯綜していて苦労した。
今のところ以下のように使う模様。(2015/12/20現在)

```js
// app.js
var express = require('express');
var parser = require('body-parser');

var app = express();
var server = http.createServer(app);

//×app.use(parser());
app.use(parser.urlencoded({extended: true}));
app.use(parser.json());

//...
```

via [ExpressでPOSTを処理するメモ](http://qiita.com/K_ichi/items/c70bf4b08467717460d5)

CRUDは「[Node.js+Express+MongoDBでWeb APIをつくる](http://qiita.com/itagakishintaro/items/a1519998a91061cbfb1e)」に掲載されているものを使わせていただきました。

# その他のタスク用

- gulp-live-server（expressを起動するため）
- gulp-sass
- browser-sync（ブラウザ確認用）

BrowserSyncをプロキシで使いました。`proxy`と`files`と`port`を指定する。

```js
// gulpfile.js
var browsersync = require('browser-sync');

//...

browsersync.init({
  proxy: 'http://localhost:XXXX/',//expressのローカルアドレス
  files: ['./public/**/*.*'],//watch対象
  port: 3333,//出力先
  open: false,//鬱陶しいのでブラウザを開くのを止める
});

//...
```

BrowserSyncはローカルネットで表示されているページを全て同期できるのですごく便利そう。[GhostLabが要らない子に…](http://110chang.com/diary/diy-device-lab/)

via [gulp + node + express で BrowserSync 使おう。](http://mid0111.hatenablog.com/entry/2015/08/19/200657)

Articles tagged 'React'

Reactのチュートリアル+Express+MongoDB