React with Meteor

This article was originally published on February 4, 2016 on The Capsule Cat Blog. For archive purposes, we moved it here!


React is a framework developed by Facebook that allows you to break up your view/presentation layer into components. These components are self-contained, self-handling, and deterministic, which allows for easy testing and less mental load on the developers working on them.

React acts as the view/presentation layer of your application. A simple React component will look something like this:

import React from 'react';
export default React.createClass({
render() {
return (
<p>I'm just some text</p>
);
}
});

React Best Practices

There are some best practices when dealing with react. You should separate your Smart components from your Dumb components.

A Dumb Component is simply a component that renders HTML and CSS, handles some user events, and uses props passed down to it to render. Dumb components do not have any state, and therefore do not directly listen to any data stores.

A Smart Component will maintain state, and will usually listen to a data store as well. If your component listens to a data store, then it is usually called a container.


Thanks for reading! If you liked this article, feel free to follow us on Twitter.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.