https://reacttraining.com/react-router/web/example/sidebar
react-router
https://scotch.io/tutorials/routing-react-apps-the-complete-guide#toc-setting-up-react-for-routing
https://facebook.github.io/react/docs/components-and-props.html
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import Item1 from './components/Item1.js';
import Item2 from './components/Item2.js';
import Item3 from './components/Item3.js';
const routes = [
{
path: '/',
exact: true,
sidebar: () => <div>item1</div>,
main: () => <div><Item1 /></div>
},
{
path: '/item2',
sidebar: () => <div>item2</div>,
main: () => <div><Item2 /></div>
},
{
path: '/item3',
sidebar: () => <div>item3</div>,
main: () => <div><Item3 /></div>
}
]
class ContentBox extends Component {
render() {
return (
<Router>
<div style={{ display: 'flex' }}>
<div style={{
padding: '10px',
width: '40%',
background: '#f0f0f0'
}}>
<ul style={{ listStyleType: 'none', padding: 0 }}>
<li><Link to="/">item1</Link></li>
<li><Link to="/item2">item2</Link></li>
<li><Link to="/item3">item3</Link></li>
</ul>
{/*{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.sidebar}
/>
))}*/}
</div>
<div style={{ flex: 1, padding: '10px' }}>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</div>
</div>
</Router>
);
}
};
export default ContentBox;
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
const routes = [
{
path: '/',
exact: true,
sidebar: () => <div>home!</div>,
main: () => <h2>Home</h2>
},
{
path: '/bubblegum',
sidebar: () => <div>bubblegum!</div>,
main: () => <h2>Bubblegum</h2>
},
{
path: '/shoelaces',
sidebar: () => <div>shoelaces!</div>,
main: () => <h2>Shoelaces</h2>
}
]
const SidebarExample = () => (
<Router>
<div style={{ display: 'flex' }}>
<div style={{
padding: '10px',
width: '40%',
background: '#f0f0f0'
}}>
<ul style={{ listStyleType: 'none', padding: 0 }}>
<li><Link to="/">Home</Link></li>
<li><Link to="/bubblegum">Bubblegum</Link></li>
<li><Link to="/shoelaces">Shoelaces</Link></li>
</ul>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.sidebar}
/>
))}
</div>
<div style={{ flex: 1, padding: '10px' }}>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</div>
</div>
</Router>
);
export default SidebarExample;
react component
{...props}
es6 destructuring assignmenthttps://amido.com/blog/using-es6-destructuring-in-your-react-components/
https://www.saltycrane.com/blog/2016/03/es6-features-used-react-development/
https://codepen.io/anon/pen/xrLRZp?editors=0010
https://zhenyong.github.io/react/docs/transferring-props.html
https://stackoverflow.com/questions/28534344/javascript-var-left-props-this-props
https://gist.github.com/sebmarkbage/a6e220b7097eb3c79ab7
https://babeljs.io/blog/2015/06/07/react-on-es6-plus
https://medium.com/@goncalvesjoao/react-es7-decorators-how-to-inject-props-to-your-render-method-27a0a7973106
flow / typescript
https://flow.org/en/docs/frameworks/react/