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.js Essentials 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.