React Style Guide

react-style-guide.md

React Style Guide

Component Method Order

• Order based on component's life cycle
• propType and render at the beginning of the component helps to quickly scan the usage of the component
• use 3 newlines to space method/field types. no need for the newlines if the component has few methods/fields.

var React = require('react');

var Component = React.createClass({

	propTypes: {
		hotdog: React.PropTypes.string
	},

	render: function() {
		return (
			<div />
		);
	},



	mixins: [],

	getDefaultProps: function() {
		return {
			hotdog: 'chicago'
		};
	},

	getInitialState: function() {
		return {
			howManyDogs: 0
		};
	},



	componentWillMount: function() {},

	componentDidMount: function() {},

	componentWillReceiveProps: function(nextProps) {},

	shouldComponentUpdate: function(nextProps, nextState) {},

	componentWillUpdate: function(nextProps, nextState) {},

	componentDidUpdate: function(prevProps, prevState) {},

	componentWillUnmount: function() {},



	staticMethods: function(),
	
	

	_privateMethods: function()

});

module.exports = Component;

propType

• always declare propType for every component
• put required props at the top
• put function props at the bottom

propTypes: {
  facet: React.PropTypes.object.isRequired,

  pin: React.PropTypes.object,
  sequence: React.PropTypes.array,
  showCreator: React.PropTypes.bool,
  showPlace: React.PropTypes.bool,
  isHighlighted: React.PropTypes.bool,
  placeOverride: React.PropTypes.object,
  playOverride: React.PropTypes.func,
  addOverride: React.PropTypes.func,
  onTouchTap: React.PropTypes.func
},

mixins

• try to use purerendermixin in every component

render

return single line component element

return <span>woop</span>;

wrap component with () in multiline return

// noooope
return <div>
	woop
</div>;

// yuuup
return (
	<div>
	  woop
	</div>
);

---

Keep all HTML elements in the render return. It makes elements much easier to read cohesively, rather than having to refer different elements in variables/methods outside the render return.

// noooope
render: function() {
	var header;

	if (this.props.isFood) {
		header = <h1>Hotdog</h1>;
	} else {
		header = <h1>Fake Hotdog</h1>
	}

	return (
		<div>
			{header}
		</div>
	);
}

// yuuup
render: function() {
	return (
		<div>
			{this.props.isFood?
				<h1>Hotdog</h1>
			:
				<h1>Fake Hotdog</h1>
			}
		</div>
	);
}

This also applies to element builders. Create a new components instead.

// noooope
buildHero: function() {
	return (
		<div>
			// a hero element with a bunch children and deep elements
		</div>
	)
},

render: function() {
	var hero = this.buildHero();

	return (
		<div>
			{hero}
			// the rest of the component
		</div>
	);
}

// yuuup
var Hero = require('./Hero');
var component = React.createClass({

	render: function() {
		return (
			<div>
				<Hero/>
				// the rest of the component
			</div>
		);
	}

});

---

Use conditional (ternary) operator (expr ? true : false) for conditionals instead of && short circuiting

// noooope
{this.props.isHotdog && 
	<h1>It's a Hotdog!</h1>
}

// yuuup
{this.props.isHotdog?
	<h1>It's a Hotdog!</h1>
:null}

element

Put bracket ending on a new line only for single tag elements/components

// noooope
<div
	class="cool-component"
	user={this.props.user}
	>
</div>

// noooope
<div
	className="cool-component"
	user={this.props.user}/>


// yuuup
<div
	className="cool-component"
	user={this.props.user}>
</div>

// yuuup
<div
	className="cool-component"
	user={this.props.user}
/>

Put attributes on new lines after having more than two or three attributes on the component/element

// noooope
<div className="user-avatar" image={this.props.image} ref="userAvatar" isOwner={true}>
	<img src="" alt=""/>
</div>

// noooope
<div 
	className="user-avatar" 
/>


// yuuup
<div 
	className="user-avatar" 
	image={this.props.image} 
	ref="userAvatar" 
	isOwner={true}>
		<img src="" alt=""/>
</div>

// yuuup
<div className="user-avatar" />

component declaration

Component prop order should match the component's propType order

// User propType
propTypes: {
	user: React.PropTypes.object.isRequired,

	isOwner: React.PropTypes.bool,
	avatar: React.PropTypes.string,
	onClick: React.PropTypes.func
},


<User 
	user={user} 			// required props at the top
	isOwner={true} 			// value props
	avatar={avatarImage} 
	onClick={this.goToUser}	// function props
/>

jQuery

I can't even. ugh. no.