React的历史

历史上，React源于facebook,他对于超大型的项目的编写上，适应非常好。而且具有着非常非常强大的生态环境。React的设计思路就是响应式编程。

这样有以下几个优势。

状态更新，UI会自动更新
代码组件化，可复用性更强，可以封装，更方便。
状态之间的依赖关系，只需要声明即可。

开始

初始化

我们先初始化一个React应用程序。

我们先使用npm进行一个尝试。

npm install -g create-react-app // 安装 create-react-app 脚手架
create-react-app my-first-app // 创建项目 
cd my-first-app/ 
npm start // 启动

React采用JSX的方式进行编程。JSX 是 Javascript 的语法扩展，JSX = Javascript + XML，就是在 Javascript 里面写 XML，因为 JSX 的这个特性，所以它既具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。不同于VUe,JSX是React的唯一语法糖。

响应式编程

function Component(props) {
    const { url } = props;
    this.text = "点击我";
    // 返回一个UI
    return (<div>
                <SubComponent props={{ color: 'red' }}></SubComponent>
                <img src={ url }></img>
                <button>text</button>
            </div>)
}

<div class='box' id='content'>
  <div class='title'>Hello</div>
  <button>Click</button>
</div>

上面的 DOM 结构等同于下面的结构

{
  tag: 'div',
  attrs: { className: 'box', id: 'content'},
  children: [
    {
      tag: 'div',
      arrts: { className: 'title' },
      children: ['Hello']
    },
    {
      tag: 'button',
      attrs: null,
      children: ['Click']
    }
  ]
}

组件 & props

React 中编写组件有 2 种方式：函数和 class（类组件）。组件首字母必须大写。

函数组件：

function MyComp(props) {
  return <h1>hello {props.name}</h1>;
}

Virtual DOM

React还有一个Virtual DOM的东西

Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系

React的初尝试

React的历史

开始

初始化

响应式编程

组件 & props

Virtual DOM