一、 react 介绍
vue angular react 前端三大框架 俗称var
react是facebook开发的一个开源的javas库
react语法是典型的jsx（JavaScript xml）语法
在react里边万物都可以是组件
二、react的特点
1、声明式设计：react 采用声明式，可以轻松的描写应用。
2、高效：react通过对DOM的模拟，最大限度的减少与DOM的交互。
3、灵活：react可以与已知的库或者框架很好的配合。
三、react编写有两种形式
1、使用class类。
2、使用function函数的形式。
注意：两种形式都需要掌握，以function函数形式掌握。因为现在大多数公司都在使用function函数的形式来编写react还有一部分公司或者一些老的项目还在使用class类的形式在进行编写维护。
四、如何使用react
1、使用react脚手架（create-react-app）来自动构建react项目。
2、使用外部引入的形式来进行编写
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>首先学习class类，后边在详细展开function函数的编写。
如果使用外部引入形式编写 那么需要在script标签上边写 type="text/babel"
将当前的es6代码babel解析为浏览器能够读懂的es5代码
如果使用class类来编写react时候 class类名首字母大写
格式：
<div id="自定义id名"></div>
class 组件名 extends React.Component {
render() {
return (
<div>html内容结构</div>
)
}
}
需要使用 ReactDOM.render() 来将组件渲染到对应的html节点里边
ReactDOM.render(
<组件名></组件名>,
document.getElementById('要挂载的自定义id名')
)
组件名首字母大写 不能使用中文 名字命名要有意义 使用英文
注意： 在编写组件的时候 一个组件只能拥有一个根元素 如果有多个则报错
在进行class类名定义的时候 尽量不去使用跟html已有的标签名一致的名字
在react中如果想要给dom元素添加类名 需要写className 而不能直接写class
例如：
<div className="demo"></div>
列如：
<div id="app">
</div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component{
render(){
return(
<div className="box">这是一头猪
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
)
</script>效果如下：
我们就可以使用class类的形式加外部引入的形式把内容渲染到我们的页面中。
3、react的插值
react的插值
vue里边插值使用双花括号 {{data数据}}
react里边要进行插值使用单花括号 {state中数据} 花括号里边是一个javascript运算环境
列如：
class App extends React.Component{
render(){
return(
<div style={{color:"red",width:"200px",height:"200px",border:"1px solid blue",marginTop:"100px",textAlign:"center"}}>hello world</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
)注意：写行内样式时style= {{ }}里边以键值对的形式。
