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數(shù)據(jù)可以像下面這樣使用:
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')
);