ReactJs学习
先上代码：HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
</head>
<body>
<div id="abc"></div>
<script src="../build/entry.js" charset="utf-8"></script>
</body>
</html>
确保你安装了babel,在CMD中输入：
babel --presets react demo01 --watch --out-dir build
entry.js代码
var HelloWorld = React.createClass({
render:function(){
return (
<h1>{this.props.message}</h1>
);
}
});
ReactDOM.render(
<HelloWorld message="Hello world 2"></HelloWorld>,
document.getElementById("abc")
)
上面第一个必须要用React类，下面一个要用ReactDOM，因为上面那个是渲染的虚拟DOM，后面一个才是真正render到了HTML里面了。
如果是要传一个json数据可以像下面这样使用：
var UserInfo = React.createClass({
render:function(){
var title = this.props.name.firstName +" "+this.props.name.lastName;
return (
<div>
{title}
</div>
);
}
});
ReactDOM.render(
<div>
<UserInfo name={{firstName:"moyu",lastName:"school"}}><br/></UserInfo>
</div>,
document.getElementById('abc')
);
网友评论