<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 );---
