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. To do this, navigate to ~/snapterest/source/components/ and create the Header.js file:

import React from 'react';

export const DEFAULT_HEADER_TEXT = 'Default header';

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

class Header extends React.Component {

  render() {
    const { text } = this.props;

    return (
      <h2 style={headerStyle}>{text}</h2>
    );
  }
}

Header.defaultProps = {
  text: DEFAULT_HEADER_TEXT
};

export default 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...