I only recently published an article about taking first steps with React. Funny enough, React v0.12 was released soon after and with it, some major API changes/deprecations.

Changes have been made to React Core, JSX and React with Addons. You can check out the changelog here.

The changes you’re likely to be most concerned with will be to React Core, in particular the deprecations and function name changes.

React.renderComponent → React.render

React.renderComponentToString → React.renderToString

React.renderComponentToStaticMarkup → React.renderToStaticMarkup

React.isValidComponent → React.isValidElement

React.PropTypes.component → React.PropTypes.element

React.PropTypes.renderable → React.PropTypes.node

DEPRECATED React.isValidClass

DEPRECATED instance.transferPropsTo

DEPRECATED Returning false from event handlers to preventDefault

DEPRECATED Convenience Constructor usage as function, instead wrap withReact.createFactory

DEPRECATED use of key={null} to assign implicit keys

In addition, there have been some bug fixes and also some new features added in such as some extra HTML attributes being formally added for element generation.

Yeah, I can read the changelog, but what does this mean for my code?

You’ll be glad to know that you can safely update to v0.12 without breaking anything. However, you will get deprecation warnings in the console.

To get rid of those pesky deprecation warnings, you’ll just need to update your code to adhere with the changes.

For example;

render: function() {
  return React.DOM.div({
    className: ‘shelf’,
    ‘data-shelf’: true
  }, ShelfContents({
    githubUsername: this.props.githubUsername,
    data: this.state.contentData,
    changeInterval: this.props.changeInterval
  }));
}

Should be changed to;

render: function() {
  return React.createElement('div', {
    className: ‘shelf’,
    ‘data-shelf’: true
  }, React.createElement(ShelfContents,{
    githubUsername: this.props.githubUsername,
    data: this.state.contentData,
    changeInterval: this.props.changeInterval
  }));
}

One thing that isn’t mentioned above which is really important, especially if you’re not using JSX, is that React.DOM.<elementTag> is now replaced. We instead use React.createElement. This allows the passing in of a string for the element tag and another for the attributes of the element. For example creating a DIV with a className of ‘container’.

React.createElement('div', {className: 'container'});

You’ll also notice that you need to render React components in the same way (including child components). ShelfContents is a React component. Previously, we could just call our React component as a function. But with v0.12 we need to now wrap this with React.createElement. This will apply wherever you wish to make use of components. Rendering our component will be the same.

myComponent = React.createElement(Component, {someAttr: someVal});
mountNode = document.getElementById('container');
React.render(myComponent, mountNode);

You may ask why this change is necessary. In fact, you might find yourself writing more code because of it (not that much). But, you can read the reasoning behind the changes here. I actually quite like the use of createElement. It allows us to create elements with custom tags defined by whichever string we pass in.