快速上手React 基础入门总结

程序员文章站 2022-03-12 22:01:12

MVC模式:model数据 view视图 controller控制结合Redux框架去使用:Redux（M C）+Router( C )=MVC0.三大特点声明式:HTML风格,所见即所得组件化:可复用一次学习，随处编写:React可以开发pc端应用、h5应用、桌面应用、React Native App易用、嵌入式应用、VR。1.React脚手架项目1.1创建项目npx是node5.x版本以后支持的命令,可以不用全局安装npx create-react-app 项目名1....

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:静态资源目录
index.html:入口文件
src:源码目录
node_modules:第三方依赖包文件夹
package.json:npm配置文件
eslintcache:lint配置文件
gitignore:git忽略的文件或目录
README.md:说明文档

1.4改造目录

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

快速上手React 基础入门总结

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'))

快速上手React 基础入门总结

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'))

快速上手React 基础入门总结

数组表达式

//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'))

快速上手React 基础入门总结

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'))

快速上手React 基础入门总结

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;
}

快速上手React 基础入门总结

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'))

快速上手React 基础入门总结

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'))

快速上手React 基础入门总结

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

快速上手React 基础入门总结

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

快速上手React 基础入门总结

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

快速上手React 基础入门总结

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

点击可以变更
快速上手React 基础入门总结

本文地址：https://blog.csdn.net/weixin_47886687/article/details/111057148

快速上手React 基础入门总结

0.三大特点

1.React脚手架项目

1.1创建项目

1.2启动项目

1.3项目目录

1.4改造目录

1.5创建hello Word

2.JSX语法

2.1JSX是什么

2.2jsx表达式

2.3条件渲染

2.4行内样式

2.5外联样式

3.React组件创建

3.1函数式组件

3.2类组件

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

4.事件绑定

4.1支持的事件

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

5,1state和setstate

5.2setstate改变state状态

经验分享：零基础如何快速入门Python？(菜鸟必看篇)

新手零基础快速建站入门，只要做好五步就能搭建属于自己的网站

Docker 入门快速上手指南

React BootStrap用户体验框架快速上手

React+Webpack快速上手指南(小结)

smarty半小时快速上手入门教程

Go语言入门教程之基础语法快速入门

荐 NumPy 快速入门：数组对象，数组属性，花式索引等基础介绍

Scala快速入门 - 基础语法篇

React Native基础入门之初步使用Flexbox布局