Confirmed users
508
edits
DevTools/CodingStandards: Difference between revisions
→React & Redux
m (→React & Redux) |
|||
| Line 154: | Line 154: | ||
=== Components === | === Components === | ||
* Default to creating components as [https://facebook.github.io/react/docs/reusable-components.html#stateless-functions stateless function components]. | * Default to creating components as [https://facebook.github.io/react/docs/reusable-components.html#stateless-functions stateless function components]. | ||
* If you need local state or lifecycle methods, use | * If you need local state or lifecycle methods, use <code>React.createClass</code> instead of functions. | ||
* Use React.DOM to create native elements. Assign it to a variable named | * Use React.DOM to create native elements. Assign it to a variable named <code>dom</code>, and use it like <code>dom.div({}, dom.span({}))</code>. You may also destructure specific elements directly: <code>const { div, ul } = React.DOM</code>. | ||
=== PropTypes === | === PropTypes === | ||
* Use [https://facebook.github.io/react/docs/reusable-components.html#prop-validation PropTypes] to define the expected properties of your component. Each directly accessed property (or child of a property) should have a corresponding PropType. | * Use [https://facebook.github.io/react/docs/reusable-components.html#prop-validation PropTypes] to define the expected properties of your component. Each directly accessed property (or child of a property) should have a corresponding PropType. | ||
* Use isRequired for any required properties. | * Use <code>isRequired</code> for any required properties. | ||
* Place the propTypes definition at the top of the component. If using a stateless function component, place it above the declaration of the function. | * Place the propTypes definition at the top of the component. If using a stateless function component, place it above the declaration of the function. | ||
* Where the children property is used, consider [http://www.mattzabriskie.com/blog/react-validating-children validating the children]. | * Where the children property is used, consider [http://www.mattzabriskie.com/blog/react-validating-children validating the children]. | ||