Returning JSX

reactex.js

//Normal Approach:

const NameComponent = React.createClass({
   propType: { name: React.propTypes.String },
   render: function(){
       return <h1> {{ this.props.name }} </h1>
   }
})

React.createClass({
   render: function(){
       return <div><NameComponent name="James" /></div>
   }
})

//But you can also do:

function displayName(name){
   return <h1> {{ name }} </h1>
}


React.createClass({
   render: function(){
       return <div>{{ displayName("James") }}</div>
   }
})

//With this second example we achieve a couple of things
//1. Do not run unnecessary react lifecycle events in the second example
//2. Communicate very clearly the intention of the component
//3. Prevent other developers from haphazardly making this component more complex than necessary
//4. Making this into a regular component isn't hard but it's enough extra work to make you pause and rethink your design.