一、React基本使用
1.安装
npm i react react-dom
react 包是核心，提供创建元素，组件等功能；react-dom 包提供DOM相关功能。
2. 在页面中引用（了解）
（1）引入react和react-dom的两个js文件
<!-- 1.引入react依赖 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
（2）创建React元素，并挂载到页面（和虚拟DOM对象是一个东西）
<script>
// 2.创建DOM元素
// 参数一：元素名称
// 参数二：元素的属性配置对象(可以为null)
// 参数三以及之后的参数：元素子节点
const title = React.createElement(
'h1',
{ id: 'box', title: 'h1标签的属性' },
'Hello react!',
React.createElement('span', null, '我是span节点')
);
// 3.挂载DOM元素
// 参数一：要挂在的react元素
// 参数二：挂载到哪个DOM里面
ReactDOM.render(title, document.getElementById('root'));
</script>
注意：如果在HTML页面中下载react包，首先初始化package.json。npm init -y
二、使用React脚手架初始化项目
1.无需安装脚手架包，就可以直接使用npx包提供的初始化命令：
npx create-react-app my-react
2.启动项目，在项目根目录执行命令：
npm start
3.脚手架中使用React
使用import关键字导入react、react-dom包后，即可使用
import React from 'react'
import ReactDOM from 'react-dom'
yarn命令简介
- 初始化新项目：yarn init
- 安装包： yarn add 包名称
- 安装项目依赖： yarn
三、JSX的简单使用
1.创建JSX
// 使用 小括号包裹JSX，从而避免JS中自动插入分号报错
const name = (
<div>我是一个JSX</div>
)
ReactDOM.render(name, document.getElementById('root'))
2.嵌入JS表达式
语法：{ JavaScritp表达式 }
// 在JSX中使用js表达式
const age = 22 //初始化变量
const sayHi = () => 'Hello react!' //定义函数
const jsBox = (
// 一个JSX要用一个根节点元素包裹
<div>
{/* 使用单花括号包裹js表达式 */}
<div>{age}</div>
{/* js中的数据也是表达式 */}
<div>{1}</div>
<div>{'a'}</div>
<div>{1 + 1}</div>
<div>{3 > 5 ? '大于' : '小于或等于'}</div>
{/* 函数调用也可以 */}
<div>{sayHi()}</div>
{/* 错误示例 */}
{/* 单花括号内不能放js对象，一般只用于style样式中;也不能是if语句、for循环语句 */}
{/* <div>{{ a: '我是a' }}</div>
<div>{if(true){}}</div>
<div>{ for(let i = 0;i<10;i++){}}</div> */}
</div>
)
ReactDOM.render(jsBox, document.getElementById('root'))
注意：
（1）一个JSX要用 一个根节点 元素包裹
（2）只要是合法的 js表达式 都可以进行嵌入
（3）JSX自身也是js表达式
（4）js中的对象是一个例外，一般只会出现在style属性中
（5）在{}中不能出现 语句
说明：表达式 和 语句
（1）表达式会产生一个值，可以在左侧用const a = 接收。
- a
- a+1
- fn()
- arr.map()
- function(){}
3.条件渲染
条件渲染：if语句、三元表达式、逻辑与运符
const isShow = true
// if语句
// const ifShow = () => {
// if (isShow) {
// return (
// <div>渲染成功</div>
// )
// }
// return (<div>此处隐藏</div>)
// }
// 三元表达式
// const ifShow = () => isShow ? (<div>渲染成功</div>) : (<div>此处隐藏</div>)
// 逻辑与运算符：当isShow为真时才渲染后面的JSX
const ifShow = () => isShow && (<div>渲染成功</div>)
const ifBox = (
<div>{ifShow()}</div>
)
ReactDOM.render(ifBox, document.getElementById('root'))
4.列表渲染
// 循环渲染：map()函数，遍历旧数组，返回一个新数组，新数组的元素都是由旧数组元素一一映射而来。
// 必须有key值，且key值要唯一。避免使用索引值
const arr = [
{ id: 1, name: '马冬梅' },
{ id: 2, name: '王祖贤' },
{ id: 3, name: '吴彦祖' }
]
const forBox = (
<ul>
{arr.map(item =>
(<li key={item.id}>{item.name}</li>)
)}
</ul>
)
ReactDOM.render(forBox, document.getElementById('root'))
- 如果需要渲染一组数据，我们应该使用数组的 map () 方法
- 渲染列表的时候需要添加 key属性，key属性的值要保证唯一
- 原则：map()遍历谁，就给谁添加key属性
- 尽量避免使用索引号作为key
5.样式处理
// 样式处理
const styleBox = (
<div className="styleBox">
<div style={{ color: 'red' }}>我是一个JSX</div>
</div>
)
ReactDOM.render(styleBox, document.getElementById('root'))
- 用 className 代替 class
- style 的单括号内可以放js对象
6.图片引入
必须把图片 先引入到页面，将引入的图片放到img标签的 src属性 位置。
import Icon from '@/assets/img/icon.png';
<img src={Icon} alt="" style="width:14px; height:16px; margin-left:5px; vertical-align:-2px" />
7. 插槽使用
四、React组件
1.函数组件
（1）函数名首字母大写，React据此来区分 组件 和普 通react元素
（2）必须有返回值,返回的内容表示该组件的结构。可以返回null
// function Hello () {
// return (
// <div>Hello React!</div>
// )
// }
const Hello = () => <div>Hello React!!!</div>
ReactDOM.render(<Hello />, document.getElementById('root'))
2.类组件
（1）类名称必须要大写字母开头
（2）类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性
（3）类组件必须提供 render 方法
（4）render方法中必须要有return返回值
// 类组件
// 组件名首字母大写;必须继承自React.Component父类;内部必须有render()函数;render()函数必须有返回值
class Hi extends React.Component {
render () {
return (
<div>Hi React!</div>
)
}
}
ReactDOM.render(<Hi />, document.getElementById('root'))
3.将组件抽离成单独的.js文件
// 导入react
import React from 'react'
// 创建组件
class Hello extends React.Component {
render () {
return (
<div>Hello React!我是单独抽离的组件</div>
)
}
}
// 导出组件
export default Hello
4.组件的事件绑定
类组件中有this，函数组件中没有this
（1）类组件事件绑定： 详情见第二天组件状态state。
（2）函数组件事件绑定
// 函数组件绑定事件
// 函数组件内部没有this
function Appp () {
function handleClick () {
console.log('事件绑定函数触发了！');
}
return (
<button onClick={handleClick}>点我</button>
)
}
ReactDOM.render(<Appp />, document.getElementById('root'))
5.React事件绑定说明
（1）通过 onClick 形式为组件绑定事件。（注意大小写）
（2）React用的是自己封装的事件，而不是原生的DOM事件。（为了更好的兼容性）
（3）React中的事件时通过 事件委托 来处理的，委托给 组件最外层元素。（为了更高效）
（4）通过 event.target 获取到实际触发事件的DOM元素。
（5）onClick={this.handleClick} 是将 handleClick 函数本身 作为点击事件的处理函数。
（6）onClick={this.handleClick()} 是将handleClick函数的 返回值 作为点击事件的处理函数。
