16
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

Reactのチュートリアルを触ったのですが、バックエンドがないとPOSTできないのでつまらない。ExpressとMongoDBを追加して動くようにしてみました。

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

https://github.com/110chang/react-express-mongodb

fig-react-express-mongodb.png

$ node -v # v0.12.0

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

  • react
  • rect-dom
  • jQuery(ajax用)
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
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はデータをpipeでつないで処理できるようにするインターフェースということのようです。

Lintは、SublimeLinter-eslintを入れました。

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

  • mongo
  • express
  • body-parser(POSTを受け取る際に必要)

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

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を処理するメモ

CRUDは「Node.js+Express+MongoDBでWeb APIをつくる」に掲載されているものを使わせていただきました。

その他のタスク用

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

BrowserSyncをプロキシで使いました。proxyfilesportを指定する。

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

//...

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

//...

BrowserSyncはローカルネットで表示されているページを全て同期できるのですごく便利そう。GhostLabが要らない子に…

via gulp + node + express で BrowserSync 使おう。

この記事はブログにも掲載しています

16
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?