A best practices style guide for managing sane react components.
-
###Organization
//<PeopleList> --> <Person> var Person = React.createClass({ propTypes: {}, mixins: [], getInitialState: function() {}, getDefaultProps: function() {}, componentWillMount: function() {}, componentWillReceiveProps: function() {}, componentWillUnmount: function() {}, someMethod: function() {}, someOtherInstanceMethod: function() {}, dynamicCss: function() {}, render : function() {} })
-
###Comments
- Write a comment at the top of the component class if the component belongs to a parent component, especially if the parent component is passing in
props
.
- Write a comment at the top of the component class if the component belongs to a parent component, especially if the parent component is passing in
-
###Methods
-
Class instance methods should do one thing. (Single Responsibility Principle)
-
Don't change state in a child component without letting the parent component know. Deeply nested components are really hard and can be confusing at times if you use too much state and instead of using props data.
-
Use less state and more
this.props
in your render method. -
Learn about
.bind();
because you're most likely going to be using a scopedthis
in a function inside of a function.render: function(){ var editPositionState = function () { // this.props is undefined return this.props.stage.position === this.state.editPosition; }; var editPositionState = function () { // this.props works! return this.props.stage.position === this.state.editPosition; }.bind(this); // or you can do it the lame way and grab this.props // before a function and assign it to a variable. }
- or if your using a ES6 transpiler like Babeljs use arrow functions to keep the correct context.
render: function(){ var editPositionState = () => { // this.props works! return this.props.stage.position === this.state.editPosition; } }
-
Use multi-line jsx if a component has more than two properties.
<Component propertyOne={...} propertyTwo={...} propertyThree={...} … />
-
Don't get fancy with manipulating child DOM elements. Map over them and create child components instead.
-
Good
render: function() { var people = this.props.people.map(function (person) { if (person){ return ( <Person person = {person} handleUpdate = {this.handleUpdate} key = {person.id}/> ); } }, this); return ( <ul> {people} </ul> ) }
-
Better
render: function() { return ( <ul> { this.props.people.map(function (person) { if (person){ return ( <Person person = {person} handleUpdate = {this.handleUpdate} key = {person.id}/> ); } }, this); } </ul> ) }
- If it's a simple iteration over an array, render out each of the elements in an array inside jsx.
-
- Once you see duplicated functionality in your components, use a Mixin. DRY.
- I like to prefix mixin methods with
_mxn_
, so in my components I writethis._mxn_functionName
and I know it's from a mixin.
- Useful when you're creating dynamic css styles for your components and it can be fun!
- CSS should be unique for a component.
- Abstract your css into a class method if it's dynamic CSS.
- Throw in that class method of all your inline styles defined into
style={...}
cssStyles: function(){...}, render: function(){ return ( <div style={this.cssStyles()} css styles created in JS! </div> ) }
- Jest best practices...
- React dev console chrome extension
- react-rails gem (if you're using rails)
- an editor that supports vertical split screens for managing hiearchy and thinking about one-way data flow.
- TBA