1. React 介绍

React 是一个用于构建用户界面的 JavaScript 库。可以理解它只负责 MVC 中的视图层渲染，不直接提供数据模型和控制器功能。react-router 实现路由，redux 实现状态管理，可以使用它们来构建一个完整应用。

2. React 特点

（1）声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。 以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

（2）组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。 组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

3. React 脚手架

创建项目方式： 全局安装脚手架再使用命令创建项目； 使用 npx 远程调用脚手架创建项目

4. React 基本使用

使用步骤：

导入 react react-dom 两个包， 使用 react 创建 react 元素（虚拟 DOM）， 使用 react-dom 渲染 react 元素， 落地代码：src 内文件删除，创建src/index.js。

导包 // 负责创建react元素 import React from 'react'; // 负责把react元素渲染到页面 import ReactDom from 'react-dom'; 创建 react 元素 // 参数1：标签名称 // 参数2：属性集合 特殊 class==>className for==>htmlFor // 参数3：标签内容 const element = React.createElement('h1', { id: 'el' }, 'Hello React'); 渲染 react 元素 // #root在public/index.html上 ReactDom.render(element, document.getElementById('root'));

 5. React 创建元素练习

练习题目：

使用 react 创建如下元素

落地代码：

import React from 'react'; import ReactDOM from 'react-dom';

const element = React.createElement('div', { className: 'list' }, [ React.createElement('h1', null, '水果'), React.createElement('ul', null, [ React.createElement('li', null, '苹果'), React.createElement('li', null, '橘子'), ]), ]);

ReactDOM.render(element, document.getElementById('root'));