sebmarkbage

/** @jsx React.DOM */

var Graphic = React.createClass({ 

  componentDidMount: function() {
    var context = this.getDOMNode().getContext('2d');
    this.paint(context);
  },

  componentDidUpdate: function() {

sebmarkbage

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

sebmarkbage

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' }));

sebmarkbage

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

sebmarkbage

// Mutative

company.users.push({ name: 'New User' });
return company;

// Immutable

return { ...company, users: [ ...company.users, { name: 'New User' } ] };

// Implicit identifier

sebmarkbage

This proposal has moved to https://github.com/sebmarkbage/ecmascript-rest-spread

sebmarkbage

You're probably getting this warning because you're accessing methods on a component before it gets mounted. This will be soon be an unsupported use case.

The component that gets created by invoking the convenience constructor MyComponent(props, children) or using the JSX syntax <MyComponent /> is not guaranteed to be the instance that actually gets mounted. It's a description of what the actual mounted instance should look like.

Anti-pattern:

The component also doesn't have access to state or other important information such as the final props. As a consequence you shouldn't be calling custom methods on this object.

var MyComponent = React.createClass({

sebmarkbage

// EXAMPLE: a compound iterator with sequencing

// Python style
function cat() {
    let is = arguments;
    return {
        next: {
            let length;
            while ((length = is.length) > 0) {
                try {

sebmarkbage

var originalFunction = obj.myMethod;
obj.myMethod = function(){
  // Before
  console.log('before myMethod on ', this);
  var result = originalFunction.apply(this, arguments);
  // After
  console.log('after myMethod on ', this);
  return result;
};

sebmarkbage