1、React 是什么 ？

  • 用于构建用户界面的JavaScript库（A Javascript3 library for building user interfaces）

    1-1、直接使用原生构建页面带来的问题？

  • 操作DOM兼容性问题，兼容性代码冗余

  • 代码组织规范等问题

2、React的特点

2-1 声明式编程

  • 声明式编程式目前整个大前端开发的模式，Vue、React、Flutter、SwiftUi
  • 他允许我们只需要维护自己的状态，当状态改变，React可以根据最新状态去渲染UI界面

UI= f( state )

2-2 组件化开发

  • 复杂页面拆分成一个个小的组件

2-3 多平台适配

  • 2013 年， React发布之初为了Web页面
  • 2015年，Facebook推出了ReactNative，用于跨平台
  • 2017年，Facebook推出了ReactVR，用于开发虚拟现实Web应用

2-4 先进的思想和技术

3、 快速开始

3-1 开发工具 VSCode

插件推荐 Bracket Pair Colorizer 、 ES7 React/Redux/GraphQL/React-Native-snippets、open in browser、Path Inerllisense 、vscode-icons、 Bookmarks

3-2 开发依赖

  • 开发依赖必须为三个库

    1、 react： 包含react必须的核心代码
    2、react-dom：react渲染在不同平台所需要的核心代码
    3、babel： 将jsx转换成react的工具， 把jsx语法帮我们转化成React.createElement， 我们只需要编写jsx

3-3 引入依赖

  • 直接CDN引入

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>Document</title>
    7. </head>
    8. <body>
    9.   <div id="app"></div>
    10. </body>
    11. <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    12. <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    13. <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    14. <script type="text/babel">
    15.   ReactDOM.render(<div>hello world</div>, document.getElementById('app'));
    16. </script>
    17. </html>

  • 下载后，添加本地依赖

    1. 可以通过上面的CDN访问浏览器获取压缩后的js代码，然后本地新建文件粘贴即可

  • 通过npm管理

    3-4 创建代码片段

    Code/preferences/User Snippets
    生成代码片段网站： https://snippet-generator.app/

**