Fakultas Ilmu Komputer UI

Commit 9249d504 authored by Zamil Majdy's avatar Zamil Majdy
Browse files

Initialize react-router

parent 8b8870c5
import React from 'react';
import {Menu, Segment, Image} from 'semantic-ui-react';
import {Link} from 'react-router'
export class TopMenu extends React.Component {
state = { activeItem: 'home' };
handleItemClick = (e, { name }) => this.setState({ activeItem: name });
render() {
const { activeItem } = this.state;
......@@ -13,9 +12,9 @@ export class TopMenu extends React.Component {
<Menu pointing secondary>
<Image as='a' size='small' src='/static/img/logo.png' href='/'/>
<Menu.Menu position='right'>
<Menu.Item name='home' active={activeItem === 'home'} onClick={this.handleItemClick} />
<Menu.Item name='profil' active={activeItem === 'profil'} onClick={this.handleItemClick} />
<Menu.Item name='logout' active={activeItem === 'logout'} onClick={this.handleItemClick} />
<Menu.Item as={Link} to="/" name='home' />
<Menu.Item as={Link} to="/profile" name='profil' />
<Menu.Item as={Link} to="/logout" name='logout' />
</Menu.Menu>
</Menu>
)
......@@ -24,14 +23,12 @@ export class TopMenu extends React.Component {
export default class Home extends React.Component {
export default class Dashboard extends React.Component {
render = () => {
return (
<div>
<TopMenu/>
<Segment>
<img src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
</Segment>
{this.props.children}
</div>
)
}
......
import React from 'react';
import Dashboard from './dashboard';
import ReactDOM from 'react-dom';
import {Router, Route, browserHistory} from 'react-router';
const App = () => (
<Dashboard />
import {Segment} from 'semantic-ui-react';
export const Profile = () => (
<Segment>
<img src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
</Segment>
);
export const App = () => (
<Router history={browserHistory}>
<Route path="/" component={Dashboard}>
<Route path="profile" component={Profile} />
<Route path="users" component={Profile} />
</Route>
</Router>
);
ReactDOM.render( <App />, document.getElementById('react-app'))
......@@ -5,8 +5,9 @@
<head>
<meta charset="UTF-8">
<title>Yuk Cari Tempat Kape :)</title>
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<link rel="stylesheet" href="{% static 'css/semantic-ui/semantic.min.css' %}">
<link rel="icon" type="image/png" href="{% static 'img/logo-sm.png'%}" sizes="32x32" />
</head>
<body>
......
......@@ -13,6 +13,7 @@ module.exports = {
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new BundleTracker({filename: './webpack-stats.json'}),
],
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment