React
一、什么是React
React是一个用于构建用户界面的JS库
从MVC角度来看，React仅仅只是视图层（V），只是负责视图的渲染，并非提供了完整的M和C功能
React特点
1.声明式
2.基于组件
3.学习一次，随处使用
1.声明式
你只需要描述UI（Html）看起来是什么样的，就跟写HTML一样
React负责渲染UI，并在数据变化时更新UI
const jsx=<divclassName="app"><h1>Hello React!动态变化数据：{count}</h1></div>
2.基于组件
组件是React最重要的内容
3.学习一次，随处使用
可以开发Web应用
可以开发移动端原生应用（react-native）
可以开发VR应用（react 360）
二、React的基本使用
React的安装
npm i react react-dom
react包是核心，提供创建元素、组件等功能
react-dom 包提供DOM相关功能等
react负责创建元素，react-dom负责将元素渲染到页面中
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01-react基本使用</title>
</head><body><!-- 1.引入react 和react-dom两个JS文件 --><script src="./node_modules/react/umd/react.development.js"></script><script src="./node_modules/react-dom/umd/react-dom.development.js"></script><div id="root"></div><script>// 2.创建react元素// 参数一：元素名称// 参数二：元素属性// 参数三及其以后的参数：元素的子节点const title = React.createElement('h1', null, 'Hello React')// 3.渲染react元素// 参数一：要渲染的react元素// 参数二：挂载点ReactDom.render(title, document.getElementById('root'))</script>
</body></html>
方法说明
React.createElement()（了解即可，创建复杂的应用不友好）
返回值：React元素
参数1：要创建的React元素名称
参数2：该React元素的属性
参数3及其以后的参数：该React元素的子节点
ReactDom.render()
参数一：要渲染的react元素
参数二：挂载点
ReactDom.render(title, document.getElementById('root'))
三、使用React脚手架
1.初始化项目
npx create-react-app my-app
2.启动项目
npm start
npx命令介绍
是npm v5.2.0 引入的一条命令
目的：提升包内提供的命令行工具的使用体验（不用npm i了）
原来：先安装npm 包，再使用npm命令
使用npx 无需安装npm包，就可以直接使用命令
yarn介绍
yarn是Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同
yarn 具有快速、可靠和安全的特点
初始化新项目：yarn init
安装包: yarn add 包名称
安装项目依赖项：yarn详情看yarn文档
在脚手架中使用React
1.导入react和react-dom两个包
importReactfrom'react'importReactDOMfrom'react-dom'2.同上，创建元素，挂载元素
四、JSX
本章的基本学习目标
1.能够知道什么是JSX
2.能够使用JSX创建React元素
3.能够在JSX中使用JS表达式
4.能够使用JSX的条件渲染和列表渲染
5.能够给JSX添加样式
createElement()的问题
编辑
JSX简介
JSX是JavaScript XML的简写，表示在JS代码中写XML格式的代码
优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率
JSX是React框架的核心
推荐使用JSX语法创建React元素
写JSX就跟写HTML一样，更加直观、友好
JSX语法更能体现React的声明式特点（描述UI长什么样子）
使用步骤
const title=<div>Hello JSX</div>reactDOM.render(title,document.getElementById('root'))
为什么脚手架中可以使用JSX语法？
1.JSX不是标准的ES语法，它是ES的语法扩展，所以是不能直接使用的
2.需要使用babel编译处理后，才能在浏览器环境中使用
3.create-react-app脚手架中已经默认有该配置，无需手动配置
4.编译JSX语法的包为 @babel/preset-react
JSX的基本使用
注意点：
1.React元素的属性名使用驼峰命名法
2.特殊属性名：class->className,for->htmlFor,tabindex->tabIndex
3.没有子节点的React元素可以使用/>结束
4.推荐：使用小括号包裹JSX，从而避免JS中自动插入分号陷阱
