Carlos Cuatin carloscuatin

`async/await` with ES6 Generators & Promises

This vanilla ES6 function async allows code to yield (i.e. await) the asynchronous result of any Promise within. The usage is almost identical to ES7's async/await keywords.

async/await control flow is promising because it allows the programmer to reason linearly about complex asynchronous code. It also has the benefit of unifying traditionally disparate synchronous and asynchronous error handling code into one try/catch block.

This is expository code for the purpose of learning ES6. It is not 100% robust. If you want to use this style of code in the real world you might want to explore a well-tested library like co, task.js or use async/await with Babel. Also take a look at the official async/await draft section on desugaring.

Compatibility

node.js - 4.3.2+ (maybe earlier with

A top-level App component returns <Button /> from its render() method.

What is the relationship between <Button /> and this in that Button’s render()?
Does rendering <Button><Icon /></Button> guarantee that an Icon mounts?
Can the App change anything in the Button output? What and how?

First couple things I thought about when migrating after reading the docs

So migrating my existing app wasn't as troublesome as I originally thought. First thing I did was take a look at my router and routes and figure try to make a mental model of all the files where I had nested routes in the existing app because those components/containers will contain {this.props.children}. So I need to replace those with the nested <Match /> components.

So just to give an example:

In v2:

<Router history={history}>
  <Route path="/" component={App}>

Can't share the complete code because the app's closed source and still in stealth mode, but here's how I'm using React Router and Redux in a large app with server rendering and code splitting on routes.

Server

Wildcard Express route configures a Redux store for each request and makes an addReducers() callback available to the getComponents() method of each React Router route. Each route is responsible for adding any Redux reducers it needs when it's loaded. (This isn't really necessary on the

	// In v2/3 you did this:
	import ReactDOM from 'react-dom'
	import { Router, browserHistory, Route } from 'react-router'

	ReactDOM.render(
	<Router>
	<Route path="/about" component={About}/>
	<Route path="/:username" component={User}/>
	</Router>
	)

	const stuff = [
	{ path: '/one', label: 'One' },
	{ path: '/two', label: 'Two' },
	{ path: '/three', label: 'Three' },
	{ path: '/four', label: 'Four' }
	]

	class Item extends Component {
	render() {
	const { pathname='', isRoot, parentLocation } = this.props

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (


	class MyWrapper {
	return React.Children.only(this.props.children);
	}


	class MyLibraryComponent {
	render() {
	return <div><span><whatever><MyWrapper ref=...>{this.props.statelessComponentThatIWantToReference}</MyWrapper></whatever></span></div>;
	}

	if (typeof Promise === 'undefined') {
	require.ensure([], (require) => {
	require('imports?this=>window!es6-promise')
	})
	}

	if (typeof fetch === 'undefined') {
	require.ensure([], (require) => {
	require('imports?self=>window!whatwg-fetch')
	})