Egor Smirnov egor-smirnov

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

	jest.mock('moment', () => {
	const moment = require.requireActual('moment');
	return moment.utc;
	});

	var _ = require("lodash");
	var R = require("ramda");

	var companies = [
	{ name: "tw", since: 1993 },
	{ name: "pucrs", since: 1930 },
	{ name: "tw br", since: 2009 }
	];

	var r1 = _(companies).chain()

	/* @flow */

	import React from 'react'
	import ReactDOM from 'react-dom'

	type FunctionComponent<A> = (props: A) => ?React$Element<any>;

	type ClassComponent<D, A, S> = Class<React$Component<D, A, S>>;

	type Component<A> = FunctionComponent<A> \| ClassComponent<any, A, any>;

	// [B](f: (A) ⇒ [B]): [B] ; Although the types in the arrays aren't strict (:
	Array.prototype.flatMap = function(lambda) {
	return Array.prototype.concat.apply([], this.map(lambda));
	};

	// setup.js
	import hook from 'css-modules-require-hook'
	import sass from 'node-sass'

	hook({
	extensions: [ '.scss' ],
	preprocessCss: data => sass.renderSync({ data }).css
	})

	/*
	* The reason for this is just a thought exercise
	* often people(myself super included) are so confused
	* when trying something new, but breaking it down
	* to it's simplest existence can be the best way to understand
	*/
	function createStore(reducer, initState) {
	let state = initState;
	let subscribers = [];

	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])) {

	import React, { Component } from 'react';
	import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux';
	import { provide, connect } from 'react-redux';
	import thunk from 'redux-thunk';

	const AVAILABLE_SUBREDDITS = ['apple', 'pics'];

	// ------------
	// reducers
	// ------------

	gulp.task('build-prod', function () {
	return browserify({entries: './app.jsx', extensions: ['.jsx'], debug: false})
	.transform(babelify)
	.bundle()
	.pipe(source('bundle.js'))
	.pipe(gulp.dest('dist'));
	});