enclave - WebベースのReactアプリを開発するのに必要な仕組みを提供 // MOONGIFT Archived

ReactでWebアプリを作りたいと思ったとして、最初に問題になるのがデファクトと呼べるアーキテクチャが存在しないことかと思います。Node.js + Expressは良いとして、サーバサイドレンダリングで行う場合の構築法がこれ！というものがないのです。そこで紹介したいのがenclaveです。Reactに特化しつつ、そのベースとして使えるシステムです。

enclaveの使い方

enclaveの始め方は簡単です。npmでインストールします。

$ mkdir my-new-app
$ cd my-new-app
$ npm init
$ npm install enclave --save
$ npm install react react-dom --save

さらに例えばJavaScriptとHTMLファイルを作成します。

$ mkdir src && touch src/App.js src/index.html

内容は次の通りです。普通のReactでの記述です。

/* src/App.js */

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>
          Welcome to my app!
        </h1>
      </div>
    );
  }
}

render(<app />, document.getElementById('root'));

HTML側もシンプルです。

<!-- src/index.html -->
<html>
<head>
  <title>my app</title>
</head>
<body>
  <div id='root'></div>
</body>
</html>

後はenclaveをサーバとして実行するだけです。

$ npm run enclave-serve

これでサーバが立ち上がるのでアクセスするとHTMLが表示されます。

もちろんサーバサイドのレンダリングで行われています。

必要なファイルはenclaveがまとめてくれています。Reactに必要な仕組みをまるっと提供してくれるので、enclaveをベースにはじめると開発が素早くなりそうです。

enclaveはnode.js/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

eanplatter/enclave: A simpler way to compile React applications http://enclave.js.org