The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

What's new and different in React v0.12.0

What's new and different in React v0.12.0

3:42
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!
Watch this lesson now
Avatar
egghead.io

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!

Avatar
Alan

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

Avatar
Joseph

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"

In reply to Alan
Avatar
Alan

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).

In reply to Joseph
Avatar
SalesMaster

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?

Avatar
Alan

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).

In reply to SalesMaster
Avatar
Joel

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?