Use a factory or JSX

react_legacyfactory.md

React Element Factories and JSX

You probably came here because your code is calling your component as a plain function call. This is now deprecated:

var MyComponent = require('MyComponent');

function render() {
  return MyComponent({ foo: 'bar' });  // WARNING
}

JSX

React components can no longer be called directly like this. Instead you can use JSX.

var React = require('react');
var MyComponent = require('MyComponent');

function render() {
  return <MyComponent foo="bar" />;
}

Without JSX

If you don't want to, or can't use JSX, then you'll need to wrap your component in a factory before calling it:

var React = require('react');
var MyComponent = React.createFactory(require('MyComponent'));

function render() {
  return MyComponent({ foo: 'bar' });
}

This is an easy upgrade path if you have a lot of existing function calls.

Dynamic components without JSX

If you get a component class from a dynamic source, then it might be unnecessary to create a factory that you immediately invoke. Instead you can just create your element inline:

var React = require('react');

function render(MyComponent) {
  return React.createElement(MyComponent, { foo: 'bar' });
}

In Depth

Read more about WHY we're making this change.

I'm getting this warning from the very most basic tutorial code. What is supposed to be different?

/**
 * @jsx React.DOM
 */

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

@BoldBigflank, do you still get the warning if you go with es6?

class Hello extends React.Component {
    render() {
        return <div>Hello {this.props.name}</div>;
    }
}

React.render(<Hello name="World" />, document.getElementById('container'));

The return sometimes needs to be wrapped in braces