Skip to content

Instantly share code, notes, and snippets.

@cfenzo

cfenzo/esnextbin.md

Created September 19, 2016 21:47
Show Gist options
  • Save cfenzo/9f7c07e3610a30ce5cd8cd5cdd885bba to your computer and use it in GitHub Desktop.
Save cfenzo/9f7c07e3610a30ce5cd8cd5cdd885bba to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
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="root"></div>
</body>
</html>
Raw
index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import React from 'react'
import { render } from 'react-dom'
// 1. import a few components
import { MemoryRouter, Match, Miss, Link } from 'react-router'
const App = () => (
// 2. render a `Router`, it will listen to the url changes
// and make the location available to other components
// automatically
<MemoryRouter>
<div>
<ul>
{/* 3. Link to some paths with `Link` */}
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
{/* 4. Render some `<Match/>` components.
When the current location matches the `pattern`
then the `component` will render.
*/}
<Match exactly pattern="/" component={Home} />
<Match pattern="/about" component={About} />
<Match pattern="/topics" component={Topics} />
{/* If none of those match, then a sibling `Miss` will render. */}
<Miss component={NoMatch}/>
</div>
</MemoryRouter>
)
const Home = () => (
<div>
<h2>Home</h2>
</div>
)
const About = () => (
<div>
<h2>About</h2>
</div>
)
const NoMatch = ({ location }) => (
<div>
<h2>Whoops</h2>
<p>Sorry but {location.pathname} didn’t match any pages</p>
</div>
)
const Topics = ({ pathname, pattern }) => (
// 5. Components rendered by a `Match` get some routing-specific
// props, like the portion of the parent `pattern` that was
// matched against the current `location.pathname`, in this case
// `/topics`
<div>
<h2>Topics</h2>
<ul>
{/* 6. Use the parent's matched pathname to link relatively */}
<li><Link to={`${pathname}/rendering`}>Rendering with React</Link></li>
<li><Link to={`${pathname}/components`}>Components</Link></li>
<li><Link to={`${pathname}/props-v-state`}>Props v. State</Link></li>
</ul>
{/* 7. Render more `Match` components to get nesting naturally
within the render lifecycle. Use the parent's matched
pathname to nest the url.
*/}
<Match pattern={`${pathname}/:topicId`} component={Topic}/>
{/* 8. use the `render` prop for convenient inline rendering */}
<Match pattern={pathname} exactly render={() => (
<h3>Please select a topic</h3>
)}/>
</div>
)
const Topic = ({ params }) => (
// 9. the dynamic segments of a `pattern` (in this case `:topicId`)
// are parsed and sent to the component from `Match`.
<div>
<h3>{params.topicId}</h3>
</div>
)
render(<App/>, document.querySelector('#root'))
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "15.3.1",
"react-dom": "15.3.1",
"react-router": "4.0.0-alpha.3"
}
}
Raw
transpiled.js
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactRouter = require('react-router');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var App = function App() {
return _react2.default.createElement(
_reactRouter.MemoryRouter,
null,
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'ul',
null,
_react2.default.createElement(
'li',
null,
_react2.default.createElement(
_reactRouter.Link,
{ to: '/' },
'Home'
)
),
_react2.default.createElement(
'li',
null,
_react2.default.createElement(
_reactRouter.Link,
{ to: '/about' },
'About'
)
),
_react2.default.createElement(
'li',
null,
_react2.default.createElement(
_reactRouter.Link,
{ to: '/topics' },
'Topics'
)
)
),
_react2.default.createElement('hr', null),
_react2.default.createElement(_reactRouter.Match, { exactly: true, pattern: '/', component: Home }),
_react2.default.createElement(_reactRouter.Match, { pattern: '/about', component: About }),
_react2.default.createElement(_reactRouter.Match, { pattern: '/topics', component: Topics }),
_react2.default.createElement(_reactRouter.Miss, { component: NoMatch })
)
);
};
// 1. import a few components
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
var Home = function Home() {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h2',
null,
'Home'
)
);
};
var About = function About() {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h2',
null,
'About'
)
);
};
var NoMatch = function NoMatch(_ref) {
var location = _ref.location;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h2',
null,
'Whoops'
),
_react2.default.createElement(
'p',
null,
'Sorry but ',
location.pathname,
' didn’t match any pages'
)
);
};
var Topics = function Topics(_ref2) {
var pathname = _ref2.pathname;
var pattern = _ref2.pattern;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h2',
null,
'Topics'
),
_react2.default.createElement(
'ul',
null,
_react2.default.createElement(
'li',
null,
_react2.default.createElement(
_reactRouter.Link,
{ to: pathname + '/rendering' },
'Rendering with React'
)
),
_react2.default.createElement(
'li',
null,
_react2.default.createElement(
_reactRouter.Link,
{ to: pathname + '/components' },
'Components'
)
),
_react2.default.createElement(
'li',
null,
_react2.default.createElement(
_reactRouter.Link,
{ to: pathname + '/props-v-state' },
'Props v. State'
)
)
),
_react2.default.createElement(_reactRouter.Match, { pattern: pathname + '/:topicId', component: Topic }),
_react2.default.createElement(_reactRouter.Match, { pattern: pathname, exactly: true, render: function render() {
return _react2.default.createElement(
'h3',
null,
'Please select a topic'
);
} })
);
};
var Topic = function Topic(_ref3) {
var params = _ref3.params;
return(
// 9. the dynamic segments of a `pattern` (in this case `:topicId`)
// are parsed and sent to the component from `Match`.
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h3',
null,
params.topicId
)
)
);
};
(0, _reactDom.render)(_react2.default.createElement(App, null), document.querySelector('#root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment