React:是Facebook内部的一个JavaScript类库,专注于提供清晰、简介的视图层解决方案
特点:
1. 高效:虚拟DOM,通过对dom的模拟,最大限度减少对dom的交互
2. 灵活:可以与已有的框架或库很好的配合
3. jsx : 直观定义用户界面,react的核心组成部
4. 组件:构建组件,是代码更容易得到复用
5. 单项响应数据流 : 变化可预计、可控制
安装(在安装之前要确认你的机器上安装了node.js环境包括npm):
npm insatll -g create-react-app
create-react-app hello-react //构建一个叫hello-react的工程
下载完成后就可以启动工程,进入工程目录通过npm启动工程
cd hello-react //进入指定文件
npm start
启动成功之后就会自动打开浏览器,可以看到React的工程顺利运行效果
下面通过一个简单的例子讲解React.js描述UI的方式,把src/index.js中的代码改成:
import React.{Component} from 'react' //依赖组件Component
import ReactDOM from 'react-dom'
import './index.css'
class Header extends Component{
render(){
return( //render里面为JSX语法 JSX其实就是JavaScript对象
<div>
<h1>React 小书</h1>
</div>
)
}
}
ReactDOM.render( //只有渲染作用
<Header />, //渲染组件
document.getElementById('root') //构造dom树
)
在文件头部从react包中引入了react和react.js的组件父类Component,记住,只要写React.js组件,那么就必须引入这两个东西。
ReactDOM作用为把React组件渲染到页面上去,并没有其他作用