Electron + ReactJS コンパイルエラー対策メモ

[[注意]] メモです。ReactJSもElectronも初心者です。

[[2016-07-19]] 超絶追記。


## Electronアプリを作ろう
[Electron](http://electron.atom.io/)でアプリを作りたいと思いました。ReactJSを使って。
[Foundation for Apps](http://foundation.zurb.com/apps.html)を使いたかったんです。ReactJSを使って。

[react-foundation-apps](https://github.com/akiran/react-foundation-apps)なるものがありました。

## うごかすのだー
`mkdir && cd` して ~~https://github.com/akiran/react-foundation-apps#installation にあるとおり `(sudo) npm install react-foundation-apps` します。~~ http://foundation.webrafter.com/blog/2015/1/5/getting-started-with-react-foundation-apps にあるとおり

```
$ npm install -g generator-react-foundation-apps
$ yo react-foundation-apps
```

します。

その後 `gulp compile`(自分で定義する)、 `electron ./` すれば無事に

<img width="70%" alt="ReactFoundationApps_Shutter_20160719_0002.png" src="https://qiita-image-store.s3.amazonaws.com/0/58443/8b71313e-0f04-4edf-612e-fb8530090c55.png">

こんな感じの画面が。やったね。

## 待ち受ける災難

それからこんなコマンドを打ってしまう

`npm-check-updates -u`

そして `react` が更新される。
どうやら 0.12.2 みたいな古いものが入っていた模様。あと `react-routes` も更新された

「`gulp compile`……エラー！？」

ということでそうですね。構文が変わってました。

## いろいろあって最終的に

こうなりました

```js:app.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var {Router, Route, DefaultRoute, RouteHandler, Link, hashHistory} = require('react-router');
var Home = require('./home');
var About = require('./about');


var App = React.createClass({
  render() {
    return (
      <div className="grid-frame vertical">
        <div className="grid-content shrink" style={{padding: 0}}>
          <ul className="primary condense menu-bar">
            <li><a><strong>React Foundation Apps</strong></a></li>
            <li><Link to="home">Home</Link></li>
            <li><Link to="about">About</Link></li>
          </ul>
        </div>
        <div className="grid-content">
          <div className="grid-container">
            {this.props.children}
          </div>
        </div>
      </div>
    );
  }
});

var routes = (
  <Route name='app' path='/' component={App}>
    <Route name='home' path="home" component={Home}/>
    <Route name='about' path="about" component={About}/>
    //<Route path="/" component={Home}/>
  </Route>
);

ReactDOM.render(<Router history={hashHistory}>{routes}</Router>, document.body);  // browserHistory だと Serverがないときだめっぽい

```

途中経過いろいろありすぎて書けないので最終的なものでメモとしますね

３行目で `bowserHistory` ではなく `hashHistory` を呼んでいるのは、この場合のElectronでは事前コンパイルして、サーバーを動かさないので、 `localhost:8000/#/home` とかじゃないとダメだからなんですね。[History | react-routes](https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md)
この点は Phonegap Cordovaで動かそうとしてる人のissueが参考になりました。https://github.com/reactjs/react-router/issues/2161

### ちなみに

初期版の `app.jsx` はこんな感じ

```js:app.jsx
var React = require('react');
var Router = require('react-router');
var {Route, DefaultRoute, RouteHandler, Link} = require('react-router');
var Home = require('./home');
var About = require('./about');

var App = React.createClass({
  render: function () {
    return (
      <div className="grid-frame vertical">
        <div className="grid-content shrink" style={{padding: 0}}>
          <ul className="primary condense menu-bar">
            <li><a><strong>React Foundation Apps</strong></a></li>
            <li><Link to="home">Home</Link></li>
            <li><Link to="about">About</Link></li>
          </ul>
        </div>
        <div className="grid-content">
          <div className="grid-container">
            <RouteHandler />
          </div>
        </div>
      </div>
    );
  }
});

var routes = (
  <Route name='app' path='/' handler={App}>
    <Route name='home' handler={Home}/>
    <Route name='about' handler={About}/>
    <DefaultRoute handler={Home}/>
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler />, document.body);
});

```


## 追記

*react-foundation-apps* の開発、ほぼ止まってる感じでした……うそやん……なんで見落としてたん…
ということでAngular版(本家)をReactで叩く方向で行くべきなのか…？でもデスクトップアプリだしReactだけでなんとかしたいよう
な…
https://scotch.io/tutorials/creating-desktop-applications-with-angularjs-and-github-electron
Angular + Electron のチュートリアルもあるしやってみるか…