React.js in patterns

Long time I was searching for a good front-end framework. Framework that will help me write scalable and easy to maintain UI. Even though React is just a library for rendering it comes with so many benefits that I can easily say “I found it”. And like every thing that I use a lot I started seeing some patterns. Techniques that are applied over and over again and I see in the code of other developers. It’s time that I start documenting, discussing and sharing these patterns.

All the techniques described here are available in github.com/krasimir/react-in-patterns repository. I’ll probably not update this blog post but will continue publishing stuff in GitHub. I’ll also encourage you to comment below, file an issue or directly make a pull request with patterns that you recognize.

Communication

Building with React for a couple of months and you’ll realize that every React component is like a small system that operates on its own. It has its own state, input and output.

Input

The input for a React component is its props. That’s how we pass data to it:

// Title.jsx
class Title extends React.Component {
  render() {
    return <h1>{ this.props.text }</h1>;
  }
};
Title.propTypes = {
  text: React.PropTypes.string
};
Title.defaultProps = {
  text: 'Hello world'
};

// App.jsx
class App extends React.Component {
  render() {
    return <Title text='Hello React' />;
  }
};

The Title component has only one input - text. The parent component (App) should provide it as an attribute while using the