MVC模式:model数据 view视图 controller控制
结合Redux框架去使用:Redux（M C）+Router( C )=MVC

0.三大特点

声明式:HTML风格,所见即所得
组件化:可复用
一次学习，随处编写:React可以开发pc端应用、h5应用、桌面应用、React Native App易用、嵌入式应用、VR。

1.React脚手架项目

1.1创建项目

npx是node5.x版本以后支持的命令,可以不用全局安装

npx create-react-app 项目名

1.2启动项目

//进入项目文件夹
cd 项目名
//启动命令
yarn start

1.3项目目录

public:静态资源目录
:入口文件
src:源码目录
node_modules:第三方依赖包文件夹
package.json:npm配置文件
eslintcache:lint配置文件
gitignore:git忽略的文件或目录
README.md:说明文档

1.4改造目录

将src里面的文件全部删除,添加index.js,这个是整个项目js的入口文件.

在这里插入图片描述

1.5创建hello Word

//在src/index.js创建helloWord
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'


// 2.创建React元素
const el = <h3>helloWord</h3>

//3.将创建好的元素挂载到dom上
ReactDOM.render(el, document.getElementById('root'))

在这里插入图片描述

2.JSX语法

2.1JSX是什么

jsx = js + xml ( html 是 xml 的子集)= js + html
注意事项:

最外层需要根标签包裹
jsx最好用小括号包裹
其他要求跟HTML一样

const el = (
    <div>
        <h3>helloWord</h3>
        <h3>hello 山竹</h3>
    </div>)

2.2jsx表达式

注释要在{}里面写,单行注释需要换行

普通表达式

undefined、布尔值、null不显示

//在src/index.js创建helloWord
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'


// 2.创建React元素
const hello = (a, b) => a + b
let str = '我是变量'
const obj = {
    name: '我是对象'
}

const el = (
    <div>
        {/* 数字 */}
        {123}
        <br></br>
        {/* 字符串 */}
        {'字符串'}
        <br></br>
        {/* 函数 */}
        {hello(1, 2)}
        <br></br>
        {/* 变量 */}
        {str}
        <br></br>
        {/* 对象 */}
        {obj.name}
        {/* 布尔值 */}
        {true}
        {/* undefined */}
        {undefined}
        {/* null */}
        {null}
    </div>)

//3.将创建好的元素挂载到dom上
ReactDOM.render(el, document.getElementById('root'))

在这里插入图片描述

数组表达式

//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'


// 2.创建React元素
const hero = ['安琪拉', '黄忠', '山竹', '周瑜']

const el = (
    <div>
        {/* v:代表当前遍历的元素
            i:下标
            a:hero */}

        {/* 处理逻辑可以用下面这段 */}
        {/* {hero.map((v, i, a) => {
            console.log(v, i, a);
            return (<h3 key={i}>{v}</h3>)
        })} */}
        {/* 简写版 */}
        {hero.map((v, i, a) => <h3 key={i}>{v}</h3>)}
    </div>)

//3.将创建好的元素挂载到dom上
ReactDOM.render(el, document.getElementById('root'))

2.3条件渲染

//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'


// 2.创建React元素
let hero = '杀生丸'
// 函数式
const isHero = (hero) => {
    if (hero === '杀生丸') {
        return (<h3>男</h3>)
    }
    return (<h3>女</h3>)
}
const el = (
    <div>
        {/* 简写 */}
        {hero === '杀生丸' ? <h3>男</h3> : <h3>女</h3>}
        {/* 调用 */}
        {isHero(hero)}
    </div>)

//3.将创建好的元素挂载到dom上
ReactDOM.render(el, document.getElementById('root'))

在这里插入图片描述

2.4行内样式

//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'


// 2.创建React元素
const el = (
    <div>
        {/* 样式属性是小驼峰式写法 */}
        <h3 style={{ color: 'pink', textAlign: 'center' }}>我变成粉色了</h3>
    </div>)

//3.将创建好的元素挂载到dom上
ReactDOM.render(el, document.getElementById('root'))

在这里插入图片描述

2.5外联样式

className命名

//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'
// 引入外联样式
import './index.css'

// 2.创建React元素
const el = (
    <div>
        {/* className命名 */}
        <h3 className='redColor'>我变成红色了</h3>
    </div>)

//3.将创建好的元素挂载到dom上
ReactDOM.render(el, document.getElementById('root'))

/* index.css */
.redColor {
    color: red;
}

在这里插入图片描述

3.React组件创建

React有两种组件:函数式组件、类组件
两者的区别
1.创建方式

函数组件使用function创建
类组件使用class创建

2 .类组件有状态,函数组件没有状态
3. 类组件有声明周期,函数式组件没有

3.1函数式组件

//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'

// 2.创建函数组件

// 注意:要求大驼峰,需要return返回
function App() {
    return '我是函数组件'
}

//3.将创建好的函数组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))

在这里插入图片描述

3.2类组件

//src/index.js
// 1.引入模块
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

// 2.创建类组件
// 注意:要求大驼峰,需要return返回
// 继承React.component父类
class App extends Component {
    //实现render方法
    render() {
        //render方法中需要return语句
        return <h3>我是类组件</h3>
    }
}
//3.将创建好的类组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))

在这里插入图片描述

3.3抽离组件代码到独立的js文件

//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'

//引入类组件
import App from './App.js'

//3.将创建好的类组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))

// src/App.js
import React, { Component } from 'react'

class App extends Component {
    render() {
        return <h3>我是独立类组件</h3>
    }
}

// 暴露
export default App

在这里插入图片描述

4.事件绑定

可以通过事件处理函数的参数获得事件对象
React中的事件对象叫做:合成事件
合成事件:兼容所有浏览器,无需担心跨浏览器兼容问题
除兼容所有浏览器外,它还拥有和浏览器原生事件相同的接口,包括stopPropagation()和preventDefault()
如果你想获取原生事件对象,可以通过nativeEvent属性来进行获取

//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'

//引入类组件
import App from './App.js'

//3.将创建好的类组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))

// src/App.js
import React, { Component } from 'react'

class App extends Component {
    render() {
        return (<div>
            {/* 点击触发事件 */}
            <button onClick={() => {
                console.log('点我拉')
            }}>按钮</button>
            {/* 禁止跳转 */}
            <a href='https://blog.csdn.net/weixin_47886687' onClick={(e) => {
                e.preventDefault()
            }}>禁止跳转</a>
        </div>)
    }
}

// 暴露
export default App

在这里插入图片描述

4.1支持的事件

Clipboard Events 剪切板事件
- 事件名：onCopy onCut onPaste
- 属性：DOMDataTransfer clipboardData
compositionEvent 复合事件
- 事件名： onCompositionEnd onCompositionStart onCompositionUpdate
- 属性： string data
Keyboard Events 键盘事件
- 事件名：onKeyDown onKeyPress onKeyUp
- 属性：例如 number keyCode 太多就不一一列举
Focus Events 焦点事件（这些焦点事件在 React DOM 上的所有元素都有效，不只是表单元素）
- 事件名： onFocus onBlur
- 属性： DOMEventTarget relatedTarget
Form Events 表单事件
- 事件名： onChange onInput onInvalid onSubmit
Mouse Events 鼠标事件
- 事件名：

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

Pointer Events 指针事件
- 事件名：

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

Selection Events 选择事件
- 事件名：onSelect
Touch Events 触摸事件
- 事件名：onTouchCancel onTouchEnd onTouchMove onTouchStart
UI Events UI 事件
- 事件名： onScroll
Wheel Events 滚轮事件
- 事件名：onWheel
- 属性：

number deltaMode
number deltaX
number deltaY
number deltaZ

Media Events 媒体事件
- 事件名：
  
  onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
  onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
  onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
  onTimeUpdate onVolumeChange onWaiting
Image Events 图像事件
- 事件名：onLoad onError
Animation Events 动画事件
- 事件名：onAnimationStart onAnimationEnd onAnimationIteration
Transition Events 过渡事件
- 事件名：onTransitionEnd
Other Events 其他事件
- 事件名： onToggle

5.有状态组件和无状态组件

函数组件叫无状态组件,类组件又叫有状态组件
状态(state)即数据
函数组件没有自己的状态,只负责数据展示
类组件有自己的状态,负责更新UI,让页面动起来

5,1state和setstate

state基本使用

state是组件内部的私有数据,只能在组件内部使用
state的值时对象,表示一个组件中可以有多个数据
通过this.state来获取状态

//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'

//引入类组件
import App from './App.js'

//3.将创建好的类组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))

// src/App.js
import React, { Component } from 'react'

class App extends Component {
    // 声明state
    state = {
        num: 0
    }
    render() {

        return (<div>
            {/* 获取状态 */}
            <h3>{this.state.num}</h3>
            {/* 点击触发事件 */}
            <button onClick={() => {
                console.log('点我拉');
            }}>按钮</button>
        </div>)
    }
}

// 暴露
export default App

在这里插入图片描述

5.2setstate改变state状态

语法:this.setState({要改的数据})
setState()作用:1.修改state2.更新UI
思想:数据驱动视图

// src/App.js
import React, { Component } from 'react'

class App extends Component {
    // 声明state
    state = {
        num: 0
    }
    render() {

        return (<div>
            {/* 获取状态 */}
            <h3>{this.state.num}</h3>
            {/* 点击触发事件 */}
            <button onClick={() => {
                // 通过setState修改num
                this.setState({
                    num: this.state.num + 1
                })
            }}>按钮</button>
        </div>)
    }
}

// 暴露
export default App