1. 前言

从15年开始慢慢转前端, 这么多年过去了,感觉react的资料还是不多

梳理下自己的体系

2. react基本概念

1.React 是一个用于构建用户界面的JAVASCRIPT 库。

2.React主要用于构建UI，很多人认为React是 MVC 中的V（视图）。

3.React起源于Facebook的内部项目，用来架设Instagram 的网站，并于 2013 年 5 月开源。

4.React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它

3.React 特点

3.1 声明式设计

React采用声明范式，可以轻松描述应用。

3.2高效

React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.3 灵活

React可以与已知的库或框架很好地配合。

3.4JSX

JSX 是 JavaScript语法的扩展。React 开发不一定使用JSX ，但我们建议使用它。

3.5组件

通过 React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

3.6单向响应的数据流

React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

4.准备工作

<!--  React 的核心库 -->
    <script src="../js/react.js"></script>
    <!--  提供与 DOM 相关的功能 -->
    <script src="../js/react-dom.js"></script>
    <!-- 可以将 ES6 代码转为 ES5 代码对JSX的语法支持  -->
    <script src="../js/babel.min.js"></script>

5.html

<!-- 布局 -->
    <div id="app">
    </div>

6.JSX

<!-- 默认  text/javascript  这是js环境 不允许写html标签
              text/babel  支持写html标签
        -->
    <script type="text/babel">
        //    注意 大小写 !!!!  打印出有 render
        console.log(ReactDOM);
        // render 绘制布局 把标签绘制到指定的地方
        ReactDOM.render(<h1>hello React</h1>, app);
    </script>

JSX:

在js中写html的语法

遇到<>以html形式进行解析,

遇到{}以js形式进行解析