SOURCE

console 命令行工具 X clear

                    
>
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">
    <!-- This element's contents will be replaced with your component. -->
</div>
.widget {
    width: 202px;
    margin:100px auto;
//    border:1px solid black;
    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;    
}