React Best Practices - Building large react applications

announce
1

Here’s a great article I found about building out large scale React applications.

What do you guys think? Any tips you’d like to add when working with React in Meteor?

http://blog.siftscience.com/blog/2015/best-practices-for-building-large-react-applications

My favorite tip from this article is this one:

The final scaling tip that we want to share in this post is this: ensure that React components are your primary unit of reuse. Every one of our React components has an associated CSS file.

2 Likes
2

Great advice for building componentized Blaze applications, too.

2 Likes
3

Yeah, absolutely. @SkinnyGeek1010 also has a thread showing how to organize your folders and files. Combine these two resources and I think you have a pretty good setup for a bullet-proof application that is easy to navigate and scale out.

1 Like
4

I follow Airbnb’s style guide. Really useful.
Airbnb React/JSX Style Guide

1 Like
5

Great article! :thumbsup:

[from article] … Some of our components don’t even have any JS interactions or functionality. They’re just bundles of markup and styles.

I’ve found myself doing this a lot lately to make the verbose bootstrap classes readable. It ends up looking like this:

<Button size="small" text='Go' />

<Button isActive={true} text='Now' />

<Button size="small" color='green'>
  <Icon type='checkmark'/> Success!
</Button>

instead of:

<button type="button" class="btn btn-default btn-lg">
  Go
</button>
<button type="button" class="btn btn-default btn-sm active">
  Now
</button>
<button type="button" class="btn btn-default btn-sm active">
   <span class="glyphicon glyphicon-check" aria-hidden="true"></span>
   Success
</button>

and row/cols

<Row>
  <Column width='4'>
    Foo
  </Column>
</Row>
1 Like