Skip to content

Instantly share code, notes, and snippets.

Created July 27, 2017 00:03
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
import PropTypes from 'prop-types';
* This is an example presentational component. Check out this article for details on why we use
* presentational components:
* The names of presentational components should be suffixed with '-Template'. This is done so that
* our React naming conventions align with our Backbone naming conventions.
* If you can define a presentational component as a functional component, do it! It's simpler :).
function FooTemplate(props) {
return (
<button onClick={() => this.props.buttonClicked(}>Click me</button>
{props.clickedAt &&
<span>Clicked at {props.clickedAt}</span>
<div className='text-grey'>{this.children}</div>
// You should define propTypes on functional components as well.
FooTemplate.propTypes = {
* You should document passed functions JSDoc-style.
* Handlers defined and used within a class that take `event`s as arguments, should be named
* `onBlahBlahBlah`. Functions called in response to event that don't take `event`s as arguments
* and instead perform an action should be named based on their action, eg `updateName`.
* @param {Number} time - Time (in ms) at which the button was clicked.
buttonClicked: PropTypes.func.isRequired,
name: PropTypes.string.isRequired
export default FooTemplate;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment