Created
November 30, 2016 17:23
-
-
Save jvans1/4fabfe8d254d7cc9944d79175cc8404a to your computer and use it in GitHub Desktop.
Returning JSX
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment