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 ...
Get React: Building Modern Web Applications now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.