Composite Components

In notebook:
FrontEndMasters React
Created at:
2016-06-13
Updated:
2016-06-21
Tags:
libraries React JavaScript
continues from before:
  //  **** app.js         ****
var React = require('react');

var { h1, div, li, ul } = React.DOM;
var h1 = React.DOM.h1;

// 2. ----- Delete below
// - var element2 = (
// -     <div>
// -         <h1>Hellow from JSX </h1>
// -         <ul>
// -             <li>Marc with K</li>
// -             <li>Mark with C</li>
// -         </ul>
// -     </div>
// -     )
    
// - var React.render(element, document.body);

// 1. ++++ 
var App = React.createClass({
    render() {
        return (    
        <div>
        <h1>Hello from Composite Component</h1>
        <ul>
            <li>Marc with K</li>
            <li>Mark with C</li>
        </ul>
    </div>

    );        
    }
})

React.render(<App/>, document.body);
If you were using functions instead of JSX, or an older version of React, you could also use ​App​ as a function: ​React.render(App(), document.body)​ 
Now, because how composite components work, you have to call as JSX or:
​React.render(React.createElement(App, {}), document.body);​

Instead, to make it friendlier, you could turn this into a factory:
​App = React.createFactory(App);​
and call ​App​ as a function [when using plain JS functions instead of JSX]
​React.render(App(), document.body);​

Most people (also designers on his team) prefer JSX.
- Is there any advantage of using the factory pattern? Like passing extra stuff in it?
- No. The factory turns composite components into function that you can call. Not much more.