react.js


<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
//-------dome1
ReactDOM.render(
<h1>hellow,word1111!</h1>,
document.getElementById('test')
);
</script>
</body>
</html>

dome2

// ---------dome2
var names = ['xiaom','xiaohong','xiaohei1'];
ReactDOM.render(
<div>
  {
    names.map(function(name){
      return <div>hellow,{name}!</div>
    })
  }
</div>,
document.getElementById('test')
);

dome3

var names=[
   <h1>hellow:number 1</h1>,
   <h3>hellow:number 2</h3>  
];

ReactDOM.render(
   <div>{names}</div>,
   document.getElementById('test')  
);
**  注意 双标签必须合法 不然会报错   Uncaught SyntaxError: embedded: Unexpected token
结果：

dome4：

var HelloClass = React.createClass({
    render:function(){
        return <h1>hellow:{this.props.name}</h1>;   
    }
});
ReactDOM.render(
 <HelloClass name="liuhulan"/>,
document.getElementById('test')
);
//注意：组建的类的首字母必须大写 ！

dome5

var TestClass = React.createClass({
   render:function(){
      return(
        <ol>
          {
            React.Children.map(this.props.children,function(test){
              return <li>{test}</li>;
            })
          }
        </ol> 
    );
   }
});

ReactDOM.render(
  <TestClass>
  <span>9897878</span>
  <span>911111</span>
  </TestClass>,
  document.getElementById('test')
);

//  this.props.children    
// map  ：循环

dome6

//---------dome6
var TestProp = React.createClass({
//属性
propTypes:{
//要求TestProp组建有一个title 属性 这个属性必须是字符串 而且是必填
title:React.PropTypes.string.isRequired,
},
render:function(){
return <h1>{this.props.title}</h1>
}
});

var data="abc";
// var data=123;
ReactDOM.render(
<TestProp title={data}/>,
document.getElementById('test')
);
// 如果data=123 会报错 Warning: Failed propType: Invalid prop `title` of type `number` supplied to `TestProp`, expected `string`

-----------------------------------------------

var TestProp = React.createClass({
//getDefaultProps 默认组建属性的值
getDefaultProps:function(){
return {title:"hello,word",abc:'uuuuu'};
},
render:function(){
return <h1>{this.props.title}---{this.props.abc}</h1>
}
});

ReactDOM.render(
<TestProp/>,
document.getElementById('test')
);

dome7

var down = document.getElementById('test');
//---------------dome8 
var TestController = React.createClass({
//初始化一个标记
  getInitialState:function(){
    return {liked:true};
  },
//this.setState修改状态值
  clickFunction:function(event){
    this.setState({liked:!this.state.liked});
  },

  render:function(){
    var message=this.state.liked?'like':'not like';
    return(
        <p onClick={this.clickFunction}>00000:{message}</p>
    );
  }
});
ReactDOM.render(
<TestController/>,down
  );

dome8

//输入框的值改变p标签的值也改变
var down = document.getElementById('test');
var Input = React.createClass({
  //初始化tag的值
      getInitialState:function(){
        return {tag:'Hello1212'};   
      },
  //触发事件重新赋值
  inputChange:function(event){
    this.setState({tag:event.target.value});
  },
  render:function(){
    var message=this.state.tag;
    return(
      <div>
      <input type="text" value={message} onChange={this.inputChange}/>
      <p>{message}</p>
      </div>
    );
  }
});

ReactDOM.render(
  <Input/>,down
);
   ---