版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_31214097/article/details/56891153
今天学了前端比较热的框架react 总结如下
<!DOCTYPE html>
<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="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
引入
最后一个script标签type属性为text/babel 这是因为react的jsx语法 跟 js语法不兼容 browser.js作用是将jsx语法转化为js的语法 应放在服务器
最简单的 reactDOM,render 用于将模板转化为html语言 并植入指定的html元素
ReactDOM.render(
<h1>hello,world</h1>,
document.getElementById("example1")
)
jsx的语法 碰到代码变{ 碰到html标签变<div>
var names = ["Alice","Emily","Kate"];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello,{name}</div>
})
}
</div>,
document.getElementById("example2")
)
var arr = [
<h1>Hello World!</h1>,
<h2>React is awesome</h2>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById("example3")
);
4组件 把代码封装成组件 随后插入到html中 要记住组件类的第一个字母必须大写 每一个组件有render 用于输出
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.className}</h1>;
}
});
ReactDOM.render(
<HelloMessage className="John2" />,
document.getElementById('example4')
);
5 this.props.children 用于表示组件所有的子节点
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);