React Style Guide / Patterns

Showcase
1

As a Meteor dev I found this really helpful to get up to speed on the conventional way to style your React code. I think some of these even make sense for Blaze templates!

Snippets from repo:

// bad
<Person firstName="Michael" lastName="Chan" occupation="Designer" favoriteFood="Drunken Noodles" />

// good
<Person
 firstName="Michael"
 lastName="Chan"
 occupation="Designer"
 favoriteFood="Drunken Noodles" />

and

// bad
render() {
  var name = 'Mrs. ' + this.props.name;
  return <div>{name}</div>;
}


// good
render() {
  return <div>{'Mrs. ' + this.props.name}</div>;
}


// best
getFancyName() {
  return `Mrs. ${this.props.name}`;
},

render() {
  return <div>{this.getFancyName()}</div>;
}
3 Likes
2

Awesome! I would appreciate some PRs improving the React-Todos example here: https://github.com/meteor/react-packages/tree/master/examples/react-todos

I’m also going to be working on an official React tutorial (like the Blaze and Angular ones we have on meteor.com) so this will be a great reference!

1 Like
3

Cool, I think i’ll have some time to submit some tonight!