jvans1 · November 30, 2016 17:23 · Nov 30, 2016
diff --git a/reactex.js b/reactex.js
@@ -0,0 +1,33 @@
+//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.