vitalyrotari/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="app"></div>
</body>
</html>

## index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, hashHistory } from 'react-router'

const App = ({ nav, content }) => (
  <div className="container">
    {nav}
    {content}
  </div>
);

const Nav = () => (
  <nav>
    <Link to="/">Home</Link>
    <Link to="/products">Products</Link>
    <Link to="/orders">Orders</Link>
  </nav>
);

const Home = () => (
  <h1>Home</h1>
);

const Products = () => (
  <h1>Products</h1>
);

const Orders = () => (
  <h1>Orders</h1>
);

const NotFound = () => (
  <h1>Not Found</h1>
);

const Routes = (
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute components={{ nav: Nav, content: Home }} />
      <Route path="products" components={{ nav: Nav, content: Products }} />
      <Route path="orders" components={{ nav: Nav, content: Orders }} />
      <Route path="*" components={{ nav: Nav, content: NotFound }} />
    </Route>
  </Router>
)

ReactDOM.render(
  Routes,
  document.getElementById('app'),
);

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "15.3.1-rc.1",
    "react-dom": "15.3.1-rc.1",
    "react-router": "2.6.1"
  }
}

## transpiled.js
'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactRouter = require('react-router');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var App = function App(_ref) {
  var nav = _ref.nav;
  var content = _ref.content;
  return _react2.default.createElement(
    'div',
    { className: 'container' },
    nav,
    content
  );
};

var Nav = function Nav() {
  return _react2.default.createElement(
    'nav',
    null,
    _react2.default.createElement(
      _reactRouter.Link,
      { to: '/' },
      'Home'
    ),
    _react2.default.createElement(
      _reactRouter.Link,
      { to: '/products' },
      'Products'
    ),
    _react2.default.createElement(
      _reactRouter.Link,
      { to: '/orders' },
      'Orders'
    )
  );
};

var Home = function Home() {
  return _react2.default.createElement(
    'h1',
    null,
    'Home'
  );
};

var Products = function Products() {
  return _react2.default.createElement(
    'h1',
    null,
    'Products'
  );
};

var Orders = function Orders() {
  return _react2.default.createElement(
    'h1',
    null,
    'Orders'
  );
};

var NotFound = function NotFound() {
  return _react2.default.createElement(
    'h1',
    null,
    'Not Found'
  );
};

var Routes = _react2.default.createElement(
  _reactRouter.Router,
  { history: _reactRouter.hashHistory },
  _react2.default.createElement(
    _reactRouter.Route,
    { path: '/', component: App },
    _react2.default.createElement(_reactRouter.IndexRoute, { components: { nav: Nav, content: Home } }),
    _react2.default.createElement(_reactRouter.Route, { path: 'products', components: { nav: Nav, content: Products } }),
    _react2.default.createElement(_reactRouter.Route, { path: 'orders', components: { nav: Nav, content: Orders } }),
    _react2.default.createElement(_reactRouter.Route, { path: '*', components: { nav: Nav, content: NotFound } })
  )
);

_reactDom2.default.render(Routes, document.getElementById('app'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div id="app"></div>
	</body>
	</html>
	import React, { Component } from 'react';
	import ReactDOM from 'react-dom';
	import { Router, Route, Link, IndexRoute, hashHistory } from 'react-router'

	const App = ({ nav, content }) => (
	<div className="container">
	{nav}
	{content}
	</div>
	);

	const Nav = () => (
	<nav>
	<Link to="/">Home</Link>
	<Link to="/products">Products</Link>
	<Link to="/orders">Orders</Link>
	</nav>
	);

	const Home = () => (
	<h1>Home</h1>
	);

	const Products = () => (
	<h1>Products</h1>
	);

	const Orders = () => (
	<h1>Orders</h1>
	);

	const NotFound = () => (
	<h1>Not Found</h1>
	);

	const Routes = (
	<Router history={hashHistory}>
	<Route path="/" component={App}>
	<IndexRoute components={{ nav: Nav, content: Home }} />
	<Route path="products" components={{ nav: Nav, content: Products }} />
	<Route path="orders" components={{ nav: Nav, content: Orders }} />
	<Route path="*" components={{ nav: Nav, content: NotFound }} />
	</Route>
	</Router>
	)

	ReactDOM.render(
	Routes,
	document.getElementById('app'),
	);
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "15.3.1-rc.1",
	"react-dom": "15.3.1-rc.1",
	"react-router": "2.6.1"
	}
	}
	'use strict';

	var _react = require('react');

	var _react2 = _interopRequireDefault(_react);

	var _reactDom = require('react-dom');

	var _reactDom2 = _interopRequireDefault(_reactDom);

	var _reactRouter = require('react-router');

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var App = function App(_ref) {
	var nav = _ref.nav;
	var content = _ref.content;
	return _react2.default.createElement(
	'div',
	{ className: 'container' },
	nav,
	content
	);
	};

	var Nav = function Nav() {
	return _react2.default.createElement(
	'nav',
	null,
	_react2.default.createElement(
	_reactRouter.Link,
	{ to: '/' },
	'Home'
	),
	_react2.default.createElement(
	_reactRouter.Link,
	{ to: '/products' },
	'Products'
	),
	_react2.default.createElement(
	_reactRouter.Link,
	{ to: '/orders' },
	'Orders'
	)
	);
	};

	var Home = function Home() {
	return _react2.default.createElement(
	'h1',
	null,
	'Home'
	);
	};

	var Products = function Products() {
	return _react2.default.createElement(
	'h1',
	null,
	'Products'
	);
	};

	var Orders = function Orders() {
	return _react2.default.createElement(
	'h1',
	null,
	'Orders'
	);
	};

	var NotFound = function NotFound() {
	return _react2.default.createElement(
	'h1',
	null,
	'Not Found'
	);
	};

	var Routes = _react2.default.createElement(
	_reactRouter.Router,
	{ history: _reactRouter.hashHistory },
	_react2.default.createElement(
	_reactRouter.Route,
	{ path: '/', component: App },
	_react2.default.createElement(_reactRouter.IndexRoute, { components: { nav: Nav, content: Home } }),
	_react2.default.createElement(_reactRouter.Route, { path: 'products', components: { nav: Nav, content: Products } }),
	_react2.default.createElement(_reactRouter.Route, { path: 'orders', components: { nav: Nav, content: Orders } }),
	_react2.default.createElement(_reactRouter.Route, { path: '*', components: { nav: Nav, content: NotFound } })
	)
	);

	_reactDom2.default.render(Routes, document.getElementById('app'));