console
class Logo extends React.Component {
render(){
return <img className="center" {...this.props} />;
}
}
class Label extends React.Component {
render() {
return (
<p className="default-label" {...this.props}>
Hello World
<span className="name">{this.props.name} </span>
</p>
)
}
}
class Input extends React.Component {
render() {
return (
<input
className="default-input"
placeholder="Enter your name"
{...this.props}
type="text"
/>
)
}
}
class HelloWidget extends React.Component{
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this)
this.state = {
name: ''
};
}
handleChange(e) {
this.setState({
name: e.target.value
});
}
render() {
return (
<div className="widget">
<Logo className="center" src="https://jr.le.com/mleplatform/images/logo-icon-7a50831f76.png"/>
<Label className="default-label" name={this.state.name} />
<Input className="default-input" onChange={this.handleChange} />
</div>
)
}
}
React.render(<HelloWidget />, document.getElementById('container'));
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
</div>
.widget {
width: 202px;
margin:100px auto;
padding:20px;
}
.name {
color: red;
}
.default-label {
border: 1px solid black;
padding: 10px;
margin-bottom: 10px;
width:180px;
}
.green-label {
border: 1px solid green;
padding: 10px;
margin-bottom: 10px;
width: 180px;
}
.default-input {
border: 1px solid #eaeaea;
padding: 10px;
width:180px;
}
.important-input {
border: 2px solid red;
width:180px;
}
img.center {
width: 100px;
height: 100px;
display: block;
margin: 15px auto;
}