thecneu

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

	# -- coding: utf-8 --

	#------------------------------------------------------------------------------
	#
	# Automated IMDB Top 250 Plex collection script by /u/SwiftPanda16
	#
	# * Use at your own risk! *
	# * I am not responsible for damages to your Plex server or libraries. *
	#
	#------------------------------------------------------------------------------

	import React from 'react'
	import ReactDOM from 'react-dom'
	import App from './App'
	import './index.css'

	const rootEl = document.getElementById('root')

	ReactDOM.render(
	<App />,
	rootEl

	/**
	* Created by Dmytro on 3/27/2016.
	*/
	var browserify = require('browserify'),
	gulp = require('gulp'),
	sourcemaps = require('gulp-sourcemaps'),
	sass = require('gulp-sass'),
	autoprefixer = require('gulp-autoprefixer'),
	source = require('vinyl-source-stream'),
	buffer = require('vinyl-buffer'),

	// Update: Hey Folks - I've got a full Gulpfile with everything else over at https://github.com/wesbos/React-For-Beginners-Starter-Files

	var source = require('vinyl-source-stream');
	var gulp = require('gulp');
	var gutil = require('gulp-util');
	var browserify = require('browserify');
	var reactify = require('reactify');
	var babelify = require('babelify');
	var watchify = require('watchify');
	var notify = require('gulp-notify');

	/**
	* This gulpfile will copy static libraries and a index.html file as well as
	* merge, babelify and uglify the rest of the javascript project.
	*
	* TODO:
	* - Separate media, libs and src with different watchers.
	* - Media and libs should only be copied to dist if they are different sizes.
	*
	* The expected project is to be laid out as such:
	*

	var gulp = require('gulp')

	var browserify = require('browserify')
	var watchify = require('watchify')
	var babelify = require('babelify')

	var source = require('vinyl-source-stream')
	var buffer = require('vinyl-buffer')
	var merge = require('utils-merge')

	// === Arrays

	var [a, b] = [1, 2];
	console.log(a, b);
	//=> 1 2


	// Use from functions, only select from pattern
	var foo = () => [1, 2, 3];

	'use strict';
	var gulp = require('gulp');
	var gutil = require('gulp-util');
	var del = require('del');
	var uglify = require('gulp-uglify');
	var gulpif = require('gulp-if');
	var exec = require('child_process').exec;


	var notify = require('gulp-notify');

	<!DOCTYPE html>
	<!-- #include "inc_header.html" title="Example" header="Sample Title" -->
	<html>
	<head>
	<meta charset="utf-8">
	<title>Example</title>
	<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
	<h1>Sample Title</h1>