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

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

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

Electronアプリを作ろう

Electronでアプリを作りたいと思いました。ReactJSを使って。
Foundation for Appsを使いたかったんです。ReactJSを使って。

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 ./ すれば無事に

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

待ち受ける災難

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

npm-check-updates -u

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

「gulp compile……エラー！？」

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

いろいろあって最終的に

こうなりました

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
この点は Phonegap Cordovaで動かそうとしてる人のissueが参考になりました。https://github.com/reactjs/react-router/issues/2161

ちなみに

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

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 のチュートリアルもあるしやってみるか…