Chris Pearce chrisui

When a beginner asks you "when do I use semi-colons?" would you rather say this?

// what people who say "use semicolons!!" say
class Foo {
  prop = {
  }; // yes

For OSX, open Terminal and run:

$ open -a Google\ Chrome --args --disable-web-security For Linux run:

$ google-chrome --disable-web-security

Also if you're trying to access local files for dev purposes like AJAX or JSON, you can use this flag too.

-–allow-file-access-from-files

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

ReactElement / ReactElement Factory
ReactNode
ReactComponent / ReactComponent Class

React Elements

New React Element Factories and JSX

In React 0.12, we're making a core change to how React.createClass(...) and JSX works.

If you're using JSX in the typical way for all (and only) React components, then this transition will be seamless. Otherwise there are some minor breaking changes described below.

The Problem

Deprecating `transferPropsTo`

It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details.

We used to have a helper function called transferPropsTo. We no longer support this method. Instead you're expected to use a generic object helper to merge props.

render() {
 return Component(Object.assign({}, this.props, { more: 'values' }));

JSX Spread Attributes

If you know all the properties that you want to place on a component a head of time, it is easy to use JSX:

  var component = <Component foo={x} bar={y} />;

Mutating Props is Bad, mkay

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {

	var copyProperties = require('react/lib/copyProperties'),
	Dispatcher = require('flux').Dispatcher,
	util = require('util');

	function AppDispatcher() {
	Dispatcher.call(this);
	this._queue = [];
	}

	util.inherits(AppDispatcher, Dispatcher);