Jonny Buchanan insin

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

Different ways to create React components, served up with react-heatpack.

git clone https://gist.github.com/insin/02103c862ed3622f8b8b react-component-styles
cd react-component-styles
npm install
npm start

Then point your browser at http://localhost:3000

A Babel 6 transform which finds mandatory() calls which are the default expression for named function parameters and inserts parameter index and name information.

Based on this discussion on Twitter

Try it out in AST Explorer by selecting Transform → babelv6 from the top menu.

Sample code:

function mandatory(argPosition, name) {

Messing about with a different way to implement the validation in this component and things got out of hand because forms.

git clone https://gist.github.com/insin/49040037bbb6cd99faf7 react-form-play
cd react-form-play
npm install
npm start

Then point your browser at http://localhost:3000

	import React from 'react'
	import {render} from 'react-dom'

	import 'react-router'

	let App = React.createClass({
	render() {
	return <div>
	<h1>Hello world!</h1>
	</div>

	code[class*="language-"],
	pre[class*="language-"] {
	color: #F8F8F2;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;

	Copyright (c) 2016, Jonny Buchanan

	Permission is hereby granted, free of charge, to any person obtaining a copy of
	this software and associated documentation files (the "Software"), to deal in
	the Software without restriction, including without limitation the rights to
	use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
	the Software, and to permit persons to whom the Software is furnished to do so,
	subject to the following conditions:

	The above copyright notice and this permission notice shall be included in all

	var path = require('path')

	var isDev = process.env.NODE_ENV === 'development'
	var isTest = process.env.NODE_ENV === 'test'

	var config = {
	type: 'react-app',
	babel: {
	stage: 0,
	loose: 'all'

	import { FluidRatio } from './FluidRatio';

	<FluidRatio>
	{(width, height) => (
	<div style={{ width, height }}>This will be a ratio of 3/4 with a width of whatever container it is rendered into.</div>
	)}
	</FluidRatio>

	<mameconfig version="10">
	<system name="default">
	<!--
	Wii Classic Controller/Classic Controller Pro with Mayflash USB adapter

	BUTTON1: X
	BUTTON2: A
	BUTTON3: B
	BUTTON4: Y
	BUTTON5: ZL