Electron入門その2 React導入 #React

今回は、Reactの導入をしてみます。
一旦、Reduxは使わない。

ディレクトリ構成

electron-quick-start
├── .babelrc
├── components
│   └── Top
│       └── top.jsx
├── index.html
├── index.jsx
├── main.js
├── node_modules
└── package.json

モジュールのインストール

Reactで記述するために、下記をインストールします。

npm i -S babel-core
npm i -S babel-preset-es2015
npm i -S babel-preset-react
npm i -S react
npm i -S react-dom
npm i -S react-router

.babelrcの準備

Babelの設定ファイルです。

{
  "presets": [
    "es2015",
    "react"
  ]
}

index.html

前回作成した、index.htmlを編集します。
事前にトランスパイルした方がいい気もしますが、とりあえず実行時にバベります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <div id="root"></div>
  </body>

  <script>
    require('babel-core/register')()
    require("./index.jsx")
  </script>
</html>

index.js

react-routerを使ってルーティングするようにします。

/* global document */

import React, { Component } from 'react';
import { render } from 'react-dom';
import { hashHistory, Router, Route, IndexRoute } from 'react-router';
import Top from './components/Top/top.jsx';

class App extends Component {
  render() {
    return <div>{ this.props.children }</div>;
  }
}

const router = (
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Top} />
      <Route path="/top" component={Top} />
    </Route>
  </Router>
);

render(
  router, 
  document.getElementById('root')
);

top.jsx

Topって表示するだけのコンポーネントです。

import React from 'react';

export default class Top extends React.Component {
  render() {
    return (
      <div>Top</div>
    );
  }
}

実行する

npm start

Topって表示された。

Electron入門 その2 React導入