Use React on main page

This commit is contained in:
Yuya Ochiai 2015-12-22 21:11:49 +09:00
parent 8c24475c68
commit e7d48d6d0d
2 changed files with 32 additions and 16 deletions

View file

@ -3,25 +3,16 @@
<head>
<meta charset="UTF-8">
<title>Mattermost</title>
<title>electron-mattermost</title>
<script src="node_modules/react/dist/react.min.js"></script>
<script src="node_modules/react-dom/dist/react-dom.min.js"></script>
<script src="node_modules/react-bootstrap/dist/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<!--
'disablewebsecurity' is necessary to display external images.
However, it allows also CSS/JavaScript.
So webview should use 'allowDisplayingInsecureContent' as same as BrowserWindow.
-->
<webview id="mainWebview" autosize="on" preload="webview/mattermost.js"></webview>
<style>
webview {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<div id="content"></div>
<script src="build/index.js"></script>
<script src="./index.js"></script>
</body>

25
src/index.jsx Normal file
View file

@ -0,0 +1,25 @@
'use strict';
var MainPage = React.createClass({
render: function() {
var style = {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0
};
// 'disablewebsecurity' is necessary to display external images.
// However, it allows also CSS/JavaScript.
// So webview should use 'allowDisplayingInsecureContent' as same as BrowserWindow.
return (
<webview style={ style } id="mainWebview" autosize="on" preload="webview/mattermost.js"></webview>
);
}
});
ReactDOM.render(
<MainPage />,
document.getElementById('content')
);