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!
Any particular reason to use React.createFactory over React.createElement?
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"
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).
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?
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).
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.