react安装
[react学习官网](https://doc.react-china.org/)
react安装方式不止一种,此处我采用的是基础的引入script标签的方式,更简单易懂。
以下是我的demo:在html文件中引入以下三个文件
<script src="dist/react.js"></script>
<script src="dist/react-dom.js"></script>
<script src="dist/browser.min.js"></script>
在html部分定义一个id为root的标签,并在script标签中定义属性 type=”text/babel”
<div id="root"></div>
<script type="text/babel">
// 通过react所创建的内容全部放到root中进行显示
// render渲染视图的函数
// 参数1:要是显示的组件 参数2:添加到那个视图中
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById("root")
);
</script>
这就完成了一个最基础的react视图
在react中渲染视图的实现都在ReactDom.render中实现,渲染的视图在特别复杂时 可以利用{}来实现
在react中推崇使用jsx
在jsx中:
1.遇到{},按照js语法解析
2.遇到<>,按照xml语法解析(xml看成html)
<script type="text/babel">
var names=["crystal","linda","iwen"];
ReactDOM.render(
<ul>
{
names.map(function(name,index){
return<li key={index}>{name}</li>
})
}
</ul>,
document.getElementById("root")
)
</script>