ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Reactを触りはじめて思うのが、フレームワークのスタンダードが確立されていないということです。React自体はViewなので、それ以外の部分やアプリケーションサーバをどうすべきかといった部分が抜け落ちています。

そうした点で迷っている方はReact Serverを使ってみてはいかがでしょう。React Serverを使えばReactを使った開発環境周りの整備が一気に進むでしょう。

React Serverの使い方

React Serverをインストールした後はyeomenのコマンドで起動します。

yo react-server

後は

npm run start
でサーバが立ち上がります。

ボタンをクリックすると「!」が増えます。

ファイル構成は次のようになっています。

ベースになるtest.jsの内容は次の通りです。ES6で書かれています。

import cp from 'child_process';
import http from 'http';
import test from 'ava';

let rs;

test.before('start the server', async () => {
    rs = cp.spawn('npm', ['start']);
    rs.stderr.on('data', data => console.error(`ERR: ${data}`));
    await sleep(10000);
});

test('server is running', async t => {
    t.is(200, await getResponseCode('/'));
});

test.after.always('shut down the server', async () => {
    rs.kill('SIGHUP');
});

// gets the response code for an http request
function getResponseCode(url) {
    return new Promise((resolve, reject) => {
        const req = http.get({
            hostname: 'localhost',
            port: 3000,
            path: url,
        }, res => {
            resolve(res.statusCode);
        });
        req.on('error', e => reject(e));
    });
}

function sleep(time) {
    return new Promise(resolve => {
        setTimeout(resolve, time);
    });
}

React Serverを使って最初の基礎を作ってしまえば、後はそれに合わせて開発していけば良いでしょう。ES6の文法で書けるので分かりやすいのではないでしょうか(awaitもあります)。

React Serverはnode.js/JavaScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。

React Server

redfin/react-server: Blazing fast page load and seamless navigation.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2