Hello World React

第一次学习React 笔记：

 

基础jsx和style，components lifecycle

 

 

var Hello = React.createClass({
 
  getInitialState:function(){
    alert('init');
   
    return {
      opacity : 1.0,
      fontSize : '22px'
    };
   
  },
 
  render:function(){
   return <div style={{opacity : this.state.opacity,
                             fontSize:this.state.fontSize}}>Hello       {this.props.name} {this.props.title} </div>;
  },
  componentWillMount: function(){
        alert('will1'); 
  },
 
  componentDidMount:function(){
        alert('did');
   
   
    var _self = this;
    window.setTimeout(function(){
      _self.setState({
        opacity:0.5,
        fontSize:'22px'
      });
        alert('did2');
    },1000);
  }
 
 
}
 
)

ReactDOM.render(
  <Hello name = "World" title = "Dzt" ></Hello>,
  document.getElementById('root')
);

document.getElementById('root').style.paddingLeft = '104px'