The idea of defining our UI’s using declarative components has taken off recently with the emergence of React as a UI Library for not only JavaScript applications on the Web, but on Native Platforms as well.

As developers build increasingly complex and overall richer applications, the types of the components that they create have started to diverge into a number of categories. For example, the recently released Relay library makes use of a specific type of component called a Higher Order Component to define how React components tie into the system.

However, a majority of our application code will be written such that the markup returned from a component will be the same given the same exact properties. How do we classify these types of components?

History

When React was first introduced, we were able to create components with the following syntax:

var Text = React.createClass({

render: function () {

return <p>{this.props.children}</p>;

}

}); React.render(<Text>Hello World</Text>, document.body);

As React 0.13 rolled out, we became able to define components just by using ES2015 classes. For example:

class Text extends React.Component {

render() {

return <p>{this.props.children}</p>;

}

} React.render(<Text>Hello World</Text>, document.body);

However, if the components that we defined didn’t have any internal state, then we could just skip extending the base Component class (this is changed in 0.14). Instead, we were able to represent our components as plain classes.