认识React

React：构建用户界面的JavaScript库，主要用于构建UI界面。

React特点（六个）

1、声明式的设计。
2、高效。采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。
3、灵活。可与其他库灵活搭配使用。
4、JSX。也就是能在JS里面写HTML，JavaScript语法的扩展。
5、组件化、模块化开发，代码复用性高。
6、单向数据流。没有实现数据的双向绑定。数据=>视图=>事件=>数据。

创建项目

1、通过script引入使用，仅用于学习调试使用。
2、通过react脚手架，创建项目进行开发、部署：
从零开始创建react项目(npm方式)

React元素渲染（JSX）

let h1= <h1>hellworld</h1>：这是一个元素
使用JSX的写法，可以创建JS元素对象
注意：使用JSX的语法，只能有一个根元素。
函数式组件

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
setInterval(tick, 1000);

React JSX

优点:
1、jsx执行更快，编译为JavaScript代码时进行优化。
2、类型更安全，编译过程如果出错就不能编译，及时发现错误。
3、JSX编写模板更简单快捷。
注意：在HTML页面写jsx语法时type属性一定要是“text/babel” <script type="text/babel"></script>

JSX表达式{{}}

1、由HTML元素构成
2、中间如果需要插入变量使用{}
3、{}中间可以使用表达式
4、{}中间表达式可以使用JSX对象
5、属性和html内容一样都是使用{}来插入内容

<div>
  <h1>JSX运算符+</h1>
  <h2>{1+1}</h2>
  <h2>{str+time}</h2>
  <h2>三目运算:{istrue===1?<button>隔离</button>:<button>不隔离</button>}</h2>
</div>

React样式和注释

注释需要写在花括号中：

    <div>
    <h1>菜鸟教程</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('example')
);

将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 [ReactDOM.render()]：
ReactDOM.render(React 元素,要插入的元素)
...