by Facebook
import React, { Component } from 'react';
// Functional or stateless component
const SomeText = props => {
const { isOn } = props;
return (
<div id="microphone" onClick={this.onClick}>
<h1>{`Is this thing ${isOn}`}</h1>
</div>
);
};
// Stateful component
class MyComponent extends Component {
constructor(props) {
super(props);
this.onClick = this.handleClick.bind(this);
this.state = { on: false };
}
handleClick(e) {
e.preventDefault();
this.setState({ on: true });
}
render() {
const isOn = this.state.on ? 'on?' : '...tap, tap...tap!';
return (
<div id="microphone" onClick={this.onClick}>
<SomeComponentOne {...this.props} />
{/* A bunch of other components */}
<SomeText {...this.state} />
</div>
);
}
}
export default MyComponent;
Composeable
Stateful and Functional
Create markup and apply logic