A mostly reasonable approach to React and JSX
- Only include one React component per file.
- Always use JSX syntax.
- Do not use
React.createElement
unless you're initializing the app from a file that does not transform JSX.
-
Extensions: Use
.js
extension for React components. -
Filename: Use PascalCase for filenames. E.g.,
ReservationCard.js
. -
Reference Naming: Use PascalCase for React components and camelCase for their instances:
// bad const reservationCard = require('./ReservationCard'); // good const ReservationCard = require('./ReservationCard'); // bad const ReservationCard = <ReservationCard />; // good const reservationCard = <ReservationCard />;
Component Naming: Use the filename as the component name. So
ReservationCard.js
should have a reference name of ReservationCard. However, for root components of a directory, use index.js as the filename and use the directory name as the component name:// bad const Footer = require('./Footer/Footer.js') // bad const Footer = require('./Footer/index.js') // good const Footer = require('./Footer')
-
Do not use displayName for naming components, instead name the component by reference.
// bad export default React.createClass({ displayName: 'ReservationCard', // stuff goes here }); // good const ReservationCard = React.createClass({ // stuff goes here }); export default ReservationCard;
-
Follow these alignment styles for js syntax
// bad <Foo superLongParam="bar" anotherSuperLongParam="baz" /> // good <Foo superLongParam="bar" anotherSuperLongParam="baz" /> // if props fit in one line then keep it on the same line <Foo bar="bar" /> // children get indented normally <Foo superLongParam="bar" anotherSuperLongParam="baz" > <Spazz /> </Foo>
- Always use double quotes (
"
) for JSX attributes, but single quotes for all other JavaScript.// bad <Foo bar='bar' /> // good <Foo bar="bar" /> // bad <Foo style={{ left: "20px" }} /> // good <Foo style={{ left: '20px' }} />
-
Always include a single space in your self-closing tag.
// bad <Foo/> // very bad <Foo /> // bad <Foo /> // good <Foo />
-
Do not pad curly braces in prop values.
// bad <Foo bar={ this.props.bar }/> // good <Foo bar={this.props.bar}/>
-
Always use camelCase for prop names.
// bad <Foo UserName="hello" phone_number={12345678} /> // good <Foo userName="hello" phoneNumber={12345678} />
-
Use
&&
syntax in curly braces instead of ternaries when there is no else condition.// bad var bar = this.props.bar ? 'baz' : null; <Foo bar={bar} /> // bad <Foo bar={this.props.bar ? 'baz' : null}/> // good <Foo bar={this.props.bar && 'baz'}/>
- Wrap JSX tags in parentheses when they span more than one line:
/// bad render() { return <MyComponent className="long body" foo="bar"> <MyChild /> </MyComponent>; } // good render() { return ( <MyComponent className="long body" foo="bar"> <MyChild /> </MyComponent> ); } // good, when single line render() { const body = <div>hello</div>; return <MyComponent>{body}</MyComponent>; }
-
Always self-close tags that have no children.
// bad <Foo className="stuff"></Foo> // good <Foo className="stuff" />
-
If your component has multi-line properties, close its tag on a new line.
// bad <Foo bar="bar" baz="baz" /> // good <Foo bar="bar" baz="baz" />
- Do not use underscore prefix for internal methods of a react component.
// bad React.createClass({ _onClickSubmit() { // do stuff } // other stuff }); // good React.createClass({ onClickSubmit() { // do stuff } // other stuff });
- Always follow the following order for methods in a react component:
- displayName
- mixins (as of React v0.13 mixins are deprecated)
- statics
- propTypes
- getDefaultProps
- getInitialState
- componentWillMount
- componentDidMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentWillUnmount
- clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
- getter methods for render like getSelectReason() or getFooterContent()
- Optional render methods like renderNavigation() or renderProfilePicture()
- render