Setting default React component properties

As you know from the previous chapter, our StreamTweet component renders two child components: Header and Tweet.

Let's create these components. Navigate to ~/snapterest/source/components/ and create the Header.react.js file:

var React = require('react');

var headerStyle = {
  fontSize: '16px',
  fontWeight: '300',
  display: 'inline-block',
  margin: '20px 10px'
};

var Header = React.createClass({

  getDefaultProps: function () {
    return {
      text: 'Default header'
    };
  },

  render: function () {
    return (
      <h2 style={headerStyle}>{this.props.text}</h2>
    );
  }
});

module.exports = Header;

As you can see, our Header component is a stateless component that renders the h2 element. The header text is passed from a parent component as a this.props.text property, which makes this component flexible, that allows us to reuse it anywhere where we need a header. We'll reuse this component again later in this book.

Notice...