Permalink
Browse files

Step 3: Creating routes and building the layout

  • Loading branch information...
hiquest committed Sep 20, 2017
1 parent 115465e commit 29bed05aab5506529888cb8984ebed48da5c3ef4
Showing with 113 additions and 5 deletions.
  1. +4 −1 package.json
  2. +1 −0 src/index.html
  3. +33 −1 src/js/components/app.jsx
  4. +6 −0 src/js/components/home.jsx
  5. +5 −0 src/js/components/search.jsx
  6. +64 −3 yarn.lock
@@ -11,7 +11,10 @@
"start": "electron index.js"
},
"dependencies": {
"moment": "^2.18.1",
"react": "^15.6.1",
"react-dom": "^15.6.1"
"react-dom": "^15.6.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2"
}
}
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>ElectroTV</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photon/0.1.2-alpha/css/photon.min.css" />
</head>
<body>
<div id='root'></div>
@@ -1,5 +1,37 @@
import React from 'react';
import { Router, Route } from 'react-router';
import { createHashHistory } from 'history';
import { NavLink } from 'react-router-dom';
import Home from './home';
import Search from './search';
const history = createHashHistory();
export default () => (
<div>Hello, React!</div>
<Router history={history}>
<div className="window">
<div className="window-content">
<div className="pane-group">
<div className="pane-sm sidebar">
<nav className="nav-group">
<h5 className="nav-group-title">Menu</h5>
<NavLink to='/' className='nav-group-item' exact>
<span className="icon icon-home"></span>
Home
</NavLink>
<NavLink to='/search' className='nav-group-item' exact>
<span className="icon icon-search"></span>
Search
</NavLink>
</nav>
</div>
<div className="pane padded-more">
<Route path="/" component={Home} exact />
<Route path="/search" component={Search} exact />
</div>
</div>
</div>
</div>
</Router>
);
@@ -0,0 +1,6 @@
import React from 'react';
import moment from 'moment';
export default () => (
<h1>Today is <span className="firm">{ moment().format("DD of MMMM") }</span>, { moment().format("dddd") }</h1>
);
@@ -0,0 +1,5 @@
import React from 'react';
export default () => (
<div>Searh form is going to be here</div>
);

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 29bed05

Please sign in to comment.