Flávio Atas Medeiros Sigmus

React now supports the use of ES6 classes as an alternative to React.createClass().

React's concept of Mixins, however, doesn't have a corollary when using ES6 classes. This left the community without an established pattern for code that both handles cross-cutting concerns and requires access to Component Life Cycle Methods.

In this gist, @sebmarkbage proposed an alternative pattern to React mixins: decorate components with a wrapping "higher order" component that handles whatever lifecycle methods it needs to and then invokes the wrapped component in its render() method, passing through props.

While a viable solution, this has a few drawbacks:

There's no way for the child component to override functionality defined on the higher order component.

React Component Lifecycle

getInitialState
getDefaultProps
componentWillMount
componentDidMount
shouldComponentUpdate (Update only)
componentWillUpdate (Update only)
componentWillReceiveProps (Update only)
render

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

Linking directory in ReactJS project

I found that users of Create-React-App script have issues with building few projects that are based on the same "core" library. Let's imagine that you have a ui directory where you keep all UI React components. And you have two projects - blog and shop.

Now you wish to use the shared UI components in both these projects. But if you will create a symlink to a "raw" source code (where you use ES2015) - you will see that your code can't be imported, because it expects that they should be already compiled.

	console.log('Loading function');

	var AWS = require('aws-sdk');
	AWS.config.region = 'us-west-2';

	exports.handler = function(event, context) {
	console.log("\n\nLoading handler\n\n");
	var sns = new AWS.SNS();

	sns.publish({

	function mapValues(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	result[key] = fn(obj[key], key);
	return result;
	}, {});
	}

	function pick(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	if (fn(obj[key])) {

	/**
	* Dispatcher
	* Author: Jan Cassio <[email protected]>
	*
	* A small event dispacher helper for general usage.
	*/
	var Dispatcher = {
	events: {},
	/**
	* Emit an event that can be handled by subscribed handlers.

	/*
	I just got a hacky, untested instance of pouchdb running on my
	react-native IOS simulator five minutes ago. To do so, I installed
	https://github.com/andpor/react-native-sqlite-storage and then pretended that it
	was actually https://github.com/litehelpers/Cordova-sqlite-storage. This is
	probably broken in some horribly subtle way, but the APIs I've manually tested
	seem to work. Use very much at your own risk, and let me know how it goes.
	I'm kind of shocked somebody hasn't come up with any other working solution, since
	pouchdb and react-native are a perfect fit and there seems to be tons of demand.
	*/

	## Global install of the app generator
	npm install -g create-react-app

	## Setup the app (first-time only)
	create-react-app my-app
	cd my-app
	git init

	# Create the Heroku app; requires free account at https://www.heroku.com/
	heroku create -b https://github.com/heroku/heroku-buildpack-static.git

	<!doctype html>
	<html lang="en">
	<body>
	<script>

	const sagaMiddleware = store => gen => {

	var resolve, reject
	var done = new Promise((res, rej) => {
	resolve = res