{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2014/10/14/introducing-react-elements.html","result":{"data":{"markdownRemark":{"html":"

The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the ReactElement type really FAST, jest unit testing easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!

\n

If you currently use JSX everywhere, you don’t really have to do anything to get these benefits! The updated transformer will do it for you.

\n

If you can’t or don’t want to use JSX, then please insert some hints for us. Add a React.createFactory call around your imported class when you require it:

\n
var MyComponent = React.createFactory(require('MyComponent'));
\n

Everything is backwards compatible for now, and as always React will provide you with descriptive console messaging to help you upgrade.

\n

ReactElement is the primary API of React. Making it faster has shown to give us several times faster renders on common benchmarks. The API tweaks in this release helps us get there.

\n

Continue reading if you want all the nitty gritty details…

\n

New Terminology

\n

We wanted to make it easier for new users to see the parallel with the DOM (and why React is different). To align our terminology we now use the term ReactElement instead of descriptor. Likewise, we use the term ReactNode instead of renderable.

\n

See the full React terminology guide.

\n

Creating a ReactElement

\n

We now expose an external API for programmatically creating a ReactElement object.

\n
var reactElement = React.createElement(type, props, children);
\n

The type argument is either a string (HTML tag) or a class. It’s a description of what tag/class is going to be rendered and what props it will contain. You can also create factory functions for specific types. This basically just provides the type argument for you:

\n
var div = React.createFactory('div');\nvar reactDivElement = div(props, children);
\n

Deprecated: Auto-generated Factories

\n

Imagine if React.createClass was just a plain JavaScript class. If you call a class as a plain function you would call the component’s constructor to create a Component instance, not a ReactElement:

\n
new MyComponent(); // Component, not ReactElement
\n

React 0.11 gave you a factory function for free when you called React.createClass. This wrapped your internal class and then returned a ReactElement factory function for you.

\n
var MyComponent = React.createFactory(\n  class {\n    render() {\n      ...\n    }\n  }\n);
\n

In future versions of React, we want to be able to support pure classes without any special React dependencies. To prepare for that we’re deprecating the auto-generated factory.

\n

This is the biggest change to 0.12. Don’t worry though. This functionality continues to work the same for this release, it just warns you if you’re using a deprecated API. That way you can upgrade piece-by-piece instead of everything at once.

\n

Upgrading to 0.12

\n

React With JSX

\n

If you use the React specific JSX transform, the upgrade path is simple. Just make sure you have React in scope.

\n
// If you use node/browserify modules make sure\n// that you require React into scope.\nvar React = require('react');
\n

React’s JSX will create the ReactElement for you. You can continue to use JSX with regular classes:

\n
var MyComponent = React.createClass(...);\n\nvar MyOtherComponent = React.createClass({\n  render: function() {\n    return <MyComponent prop=\"value\" />;\n  }\n});
\n

NOTE: React’s JSX will not call arbitrary functions in future releases. This restriction is introduced so that it’s easier to reason about the output of JSX by both the reader of your code and optimizing compilers. The JSX syntax is not tied to React. Just the transpiler. You can still use the JSX spec with a different transpiler for custom purposes.

\n

React Without JSX

\n

If you don’t use JSX and just call components as functions, you will need to explicitly create a factory before calling it:

\n
var MyComponentClass = React.createClass(...);\n\nvar MyComponent = React.createFactory(MyComponentClass); // New step\n\nvar MyOtherComponent = React.createClass({\n  render: function() {\n    return MyComponent({ prop: 'value' });\n  }\n});
\n

If you’re using a module system, the recommended solution is to export the class and create the factory on the requiring side.

\n

Your class creation is done just like before:

\n
// MyComponent.js\nvar React = require('react');\nvar MyComponent = React.createClass(...);\nmodule.exports = MyComponent;
\n

The other side uses React.createFactory after requireing the component class:

\n
// MyOtherComponent.js\nvar React = require('react');\n// All you have to do to upgrade is wrap your requires like this:\nvar MyComponent = React.createFactory(require('MyComponent'));\n\nvar MyOtherComponent = React.createClass({\n  render: function() {\n    return MyComponent({ prop: 'value' });\n  }\n});\n\nmodule.exports = MyOtherComponent;
\n

You ONLY have to do this for custom classes. React still has built-in factories for common HTML elements.

\n
var MyDOMComponent = React.createClass({\n  render: function() {\n    return React.DOM.div({ className: 'foo' }); // still ok\n  }\n});
\n

We realize that this is noisy. At least it’s on the top of the file (out of sight, out of mind). This a tradeoff we had to make to get the other benefits that this model unlocks.

\n

Anti-Pattern: Exporting Factories

\n

If you have an isolated project that only you use, then you could create a helper that creates both the class and the factory at once:

\n
// Anti-pattern - Please, don't use\nfunction createClass(spec) {\n  return React.createFactory(React.createClass(spec));\n}
\n

This makes your components incompatible with jest testing, consumers using JSX, third-party languages that implement their own optimized ReactElement creation, etc.

\n

It also encourages you to put more logic into these helper functions. Something that another language, a compiler or a reader of your code couldn’t reason about.

\n

To fit into the React ecosystem we recommend that you always export pure classes from your shared modules and let the consumer decide the best strategy for generating ReactElements.

\n

Third-party Languages

\n

The signature of a ReactElement is something like this:

\n
{\n  type : string | class,\n  props : { children, className, etc. },\n  key : string | boolean | number | null,\n  ref : string | null\n}
\n

Languages with static typing that don’t need validation (e.g. Om in ClojureScript), and production level compilers will be able to generate these objects inline instead of going through the validation step. This optimization will allow significant performance improvements in React.

\n

Your Thoughts and Ideas

\n

We’d love to hear your feedback on this API and your preferred style. A plausible alternative could be to directly inline objects instead of creating factory functions:

\n
// MyOtherComponent.js\nvar React = require('react');\nvar MyComponent = require('MyComponent');\n\nvar MyOtherComponent = React.createClass({\n  render: function() {\n    return { type: MyComponent, props: { prop: 'value' } };\n  }\n});\n\nmodule.exports = MyOtherComponent;
\n

This moves the noise down into the render method though. It also doesn’t provide a hook for dynamic validation/type checking so you’ll need some other way to verify that it’s safe.

\n

NOTE: This won’t work in this version of React because it’s conflicting with other legacy APIs that we’re deprecating. (We temporarily add a element._isReactElement = true marker on the object.)

\n

The Next Step: ES6 Classes

\n

After 0.12 we’ll begin work on moving to ES6 classes. We will still support React.createClass as a backwards compatible API. If you use an ES6 transpiler you will be able to declare your components like this:

\n
export class MyComponent {\n  render() {\n    ...\n  }\n};
\n

This upcoming release is a stepping stone to make it as easy as this. Thanks for your support.

","excerpt":"The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the type really FAST, jest unit testing easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages! If you currently use JSX everywhere, you don’t really have to do anything to get these benefits! The updated transformer will do it for you. If you can’t or don’t want to use JSX, then please insert some hints for…","frontmatter":{"title":"Introducing React Elements","next":null,"prev":null,"author":[{"frontmatter":{"name":"Sebastian Markbåge","url":"https://twitter.com/sebmarkbage"}}]},"fields":{"date":"October 14, 2014","path":"content/blog/2014-10-14-introducing-react-elements.md","slug":"/blog/2014/10/14/introducing-react-elements.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2014/10/14/introducing-react-elements.html"}},"staticQueryHashes":[]}