Skip to content

Instantly share code, notes, and snippets.

Embed
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:
* https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0.
*
* 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 (
<div>
<button onClick={() => this.props.buttonClicked(Date.now())}>Click me</button>
{props.clickedAt &&
<span>Clicked at {props.clickedAt}</span>
}
<div className='text-grey'>{this.children}</div>
</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
You can’t perform that action at this time.