初识react

React 是什么？

一个用于构建用户界面的 JavaScript 库 中文手册：react.docschina.org/

• 与vue不同，react是一个js库，用于构建UI页面
• 特点

  1. 声明式设计 −React采用声明范式，可以轻松描述应用。

  2. 组件化开发

  3. JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但是为了更加直观们建议使用JSX。

简单引用react

通过 script 引入

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>

• react.js - 核心代码

• react-dom.js - React 剥离出的涉及 DOM 操作的部分，它可以帮助我们把一个组件挂载到某一个dom节点上

• render
  render(Vnode,container[,callback])

1. Vnode:要渲染的内容，可以是数字字符串或者ReactNode
2. container:要挂在的内容（要将内容渲染到哪个元素中）
3. callback 渲染完时的回调

<div id="div"></div>

ReactDom.render(
    "Hello React",
    document.querySelector("#div)
)    

• ReactElement - 虚拟Dom(用一个对象描述一个真实的DOM) createElement(type,props,chldren)

let box = document.createElement("div")
console.dir(box)
第一种写法
let header = React.createElement("header",{
id:"header"
},"头部")

生成<header id="header">头部</header>     


第二种写法

let h1 = React.createElement("h1",null,"这是标题")
let p = React.createElement("p",null,"这是段落")
let header = React.createElement("header",{
id:"header"
},h1,p)

第三种写法 

let header = React.createElement("header",{
id:"header"
},[h1,p])

JSX

let header = <header>
    <h1>这是标题</h1>
    <p>这是副标题</p>
</header>