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.