React初识

React 一个用于构建用户界面的 JavaScript 库

命令式编程 和 声明式编程

• 告诉计算机怎么做（How） - 过程
• 告诉计算机我们要什么（What） - 结果

使用React-基于浏览器的模式

1) 引入React.js --> 提供 React.js 核心功能代码，如：虚拟 dom
   ` React.createElement(type,props,children);`
2) 引入ReactDOM --> 提供了与浏览器交互的 DOM 功能，如：dom 渲染 
   ```
     ReactDOM.render(Vnode, container[, callback])
      - Vnode：要渲染的内容
      - container：挂载点
      - callback：渲染后的回调函数 
  ```
- 虚拟Dom与真实Dom区别
    真实DOM消耗性能，虚拟DOM局部更新 优化性能

脚手架create-react-app

快速生成 React.js 项目，并内置了 Babel、Webpack 等工具、ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer更好的在本地预览应用。

npx create-react-app <项目名称> --typescript

• 项目目录结构说明

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/ 
    index.js  项目的入口文件

组件

对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用

类式组件

• 组件类必须继承 React.Component
• 组件类必须有 render 方法

函数式组件

• 函数的名称就是组件的名称
• 函数的return值就是组件要渲染的内容

JSX

JSX是基于 JavaScript + XML 的语法糖，需要引入Babel
- 它可以作为值使用
- 它并不是字符串，也不是HTML（- className， - style
- 有且只有一个顶层元素 - React.Fragment
- 列表渲染时，必须有 key 值
- 组件的首字母一定大写，标签一定要小写

babel

babel-standalone.js：在浏览器中处理 JSX
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js