今回は、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って表示された。