What's new and different in React v0.12.0

InstructorJoe Maddalone

Share this video with your friends

Send Tweet

React has changed a bit in version 0.12.0. Let's take a look at what is different. You may need to update some code!

Alan Plum
~ 10 years ago

Any particular reason to use React.createFactory over React.createElement?

Joe Maddaloneinstructor
~ 10 years ago

Great question!

createFactory is really just a shortcut to createElement. In this simple example they are pretty interchangeable.

React.render( React.createFactory( APP )( { prop: 'red' } ), document.body );
React.render( React.createElement( APP, { prop: 'red' } ), document.body );

There seems to be a lot of discussion regarding these two and how they might be further prescribed in v0.13 so for this lesson I chose to go with the method recommended by the library itself:

"... is calling a React component directly. Use a factory or JSX instead"

Alan Plum
~ 10 years ago

Interesting. Currently JSX uses React.createElement, so that's what I've been using when writing plain JS. I'm not sure what benefit React.createFactory is supposed to provide over using React.createElement directly (assuming one is already using a partial application / currying library for situations where one wouldn't want to pass the raw component around directly).

I guess it's at least partially for creating an easier upgrade path for legacy code (so you only have to modify the import, not every single use).

SalesMaster
~ 10 years ago

If the element on which you use jsx spread attributes {...this.props} (instead of the old TransferPropsTo method) has other properties, they override those in this.props. Is there an easy way to make it merge properties together as the old method did?

Alan Plum
~ 10 years ago

SalesMaster, I'm assuming you want to supply fallbacks instead of overrides? In that case, you can just use the spread syntax to extract the properties you want to provide defaults for like this:

var {arg1, arg2, ...props} = this.props;

return <div {...props} prop1={arg1 || 'default1'} prop2={arg2 || 'default2'}/>

Alternatively, you could just use getDefaultProps to define the default values of those properties.

EDIT: Sorry about the formatting. The Markdown parser is a bit retarded and doesn't handle code formatting well (neither github-style fencing nor indenting worked, so I had to use inline backticks).

Joel
~ 10 years ago

Also note--if it hasn't been mentioned elsewhere--you must use capitalized var names when creating classes or you'll get a "erroneousLine..." error. At least this was the case when I attempted to use the mixins video code with the latest version of react/JSXTransformer.