前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >1.1、介绍

1.1、介绍

作者头像
张果
发布2023-03-01 15:20:19
3.4K0
发布2023-03-01 15:20:19
举报
文章被收录于专栏:软件开发

一、概要

 React是用于构建用户界面的MVVM框架。

1.1、介绍

React 是 Facebook 开发的一款 JavaScript 库,而 React 被建造是因为 Facebook 认为市场上所有的 JavaScript MVC 框架都不能满足他们的扩展需求, 由于他们非常巨大的代码库和庞大的组织,使得 MVC 很快变得非常复复杂,每当需要添加一项新的功能或特性时,系统的复杂度就成级数增长,致使代码变得脆弱和不可预测,结果导致他们的 MVC 正在土崩瓦解。2011 年 Facebook 软件工程师 Jordan Walke 创建了 React ,并且首次使用 Facebook 的 Newsfeed 功能。做出来以后,发现这套东西很好用,就在 2013 年 5 月开源了。

React起源于Facebook的内部项目,它是一个用于构建用户界面的javascript库,Facebook用它来架设公司的Instagram网站,并于2013年5月开源。

代码语言:javascript
复制
Instagram(照片墙,简称:ins或IG)是一款运行在移动端上的社交应用,以一种快速、美妙和有趣的方式将你随时抓拍下的图片彼此分享。

React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。认为它可能是将来Web开发的主流工具之一。

官网:https://zh-hans.reactjs.org/

源码:https://github.com/facebook/react

 React新文档 :(https://beta.reactjs.org/)(开发中....)

1.2、React的特点

a、声明式设计 react是面向数据编程,不需要直接去控制dom,你只要把数据操作好,react自己会去帮你操作dom,可以节省很多操作dom的代码。这就是声明式开发。

代码语言:javascript
复制
命令式编程描述代码如何工作,告诉计算机一步步地执行、先做什么后做什么,在执行完之前,计算机并不知道我要做什么,为什么这么做.它只是一步一步地执行了。

声明式编程表明想要实现什么目的,应该做什么,但是不指定具体怎么做。

b、使用JSX语法

JSX (JavaScript XML) 是 JavaScript 语法的扩展。React 开发大部分使用 JSX 语法(在JSX中可以将HTML于JS混写)。

c、灵活

react所控制的dom就是id为root的dom,页面上的其他dom元素你页可以使用jq等其他框架 。可以和其他库并存。

d、使用虚拟DOM、高效

虚拟DOM其实质是一个JavaScript对象,当数据和状态发生了变化,都会被自动高效的同步到虚拟DOM中,最后再将仅变化的部分同步到DOM中(不需要整个DOM树重新渲染)。

e、组件化开发

通过 React 构建组件,使得代码更加容易得到复用和维护,能够很好的应用在大项目的开发中。

f、单向数据流

react是单向数据流,父组件传递给子组件的数据,子组件能够使用,但是不能直接通过this.props修改。 这样让数据清晰代码容易维护。

1.原生JS操作DOM繁琐,效率低

2.使用JS直接操作DOM,浏览器会进行大量的重绘重排

3.原生JS没有组件化编码方案,代码复用低

1.3、React相关技术

  • React可以开发Web应用—ReactJs
  • React可以开发移动端—React-native
    • React Native 是一个使用JavaScript 和 React 来编写跨终端移动应用(Android 或 IOS)的一种解决方案
  • React可以开发VR应用—React 360
    • React 360是一个创建3D和VR用户交互的框架.构建在React的基础之上,React是一个简化复杂UI创建的库,React 360可以让你用相似的工具和概念在网页上创建沉浸式的360度的内容。其特点:
      • React 360 是一个用于构建VR全景360体验的网页应用框架,基于React
      • React 360 提供了一些控件,用于快速创建360度沉浸式的内容
      • 跨平台,支持电脑、移动设备、VR设备
      • 支持多种格式的全景视频

二、第一个React程序

 2.1、Web端

实例中我们引入了三个库: react.development.min.js 、react-dom.development.min.js 和 babel.min.js:

  • react.min.js - React 的核心库
  • react-dom.min.js - 提供与 DOM 相关的功能
  • babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。

CDN引入:https://unpkg.com/ https://www.staticfile.org/

可以通过 CDN 获得 React 和 ReactDOM 的 UMD 版本。

代码语言:javascript
复制
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

上述版本仅用于开发环境,不适合用于生产环境。压缩优化后可用于生产的 React 版本可通过如下方式引用:

代码语言:javascript
复制
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

如果需要加载指定版本的 react 和 react-dom,可以把 18 替换成所需加载的版本号。

代码语言:javascript
复制
<!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>Hello React!</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/7.20.6/babel.min.js"></script>
    <script>
      // 1、创建虚拟dom
      // React.createElement(标签名称,对象形式的DOM属性信息,DOM中的内容/子DOM)
      // React.createElement(标签名称,对象形式的DOM属性信息,DOM中的内容/子DOM,DOM中的内容/子DOM,...)
      // React.createElement(标签名称,对象形式的DOM属性信息,[DOM中的内容/子DOM,DOM中的内容/子DOM,...])
      let vNode = React.createElement("h2", {}, "Hello React!");
      //2、获取app根元素
      let app = document.querySelector("#app");
      //3、创建根元素
      let root = ReactDOM.createRoot(app);
      //4、将虚拟节点渲染到根结点上
      root.render(vNode);
    </script>
  </body>
</html>

效果:

注意:在react中,JavaScript代码部分里面如果涉及到DOM的class属性操作,不要直接使用class,因为class是es6里面的关键词,react里面需要使用className进行替换

代码语言:javascript
复制
1 const vNode = React.createElement("div", {id: "hi",className: "cls"}, "hello world");

2.2、JSX

由于通过React.createElement()方法创建的React元素代码比较繁琐,结构不直观,无法一眼看出描述的结构,不优雅,开发时写代码很不友好。

JSX 是 JavaScript XML 的简写,表示在 JavaScript 代码中写XML(HTML)格式的代码。 优势:声明式语法更加直观,与HTML结构相同,降低了学习成本、提升开发效率。 JSX 是 React 的核心内容。

  React使用JSX来替代常规的JavaScript,JSX可以理解为的JavaScript语法扩展,它里面的标签申明要符合XML规范要求。

  • React不一定非要使用JSX,但它有以下优点:
    • JSX执行更快,因为它在编译为JavaScript代码后进行了优化
    • 它是类型安全的,在编译过程中就能发现错误
    • 声明式语法更加直观,与HTML结构相同,降低了学习成本,提升开发效率速度
  • JSX语法:
    • 定义虚拟DOM时,不要用引号
    • 标签中混入js表达式时要用{}
    • 样式的类名指定不要用class,要用className
    • 内联样式,要用style={{key: value}}的形式去写
    • 只有一个根标签
    • 标签必须闭合
    • 标签首字母:
      • 小写字母开头,则会将标签转为html中同名标签,若html标签中无对应的同名元素,编译会报错
      • 大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错

  • 在项目中尝试JSX最快的方法是在页面中添加这个 <script> 标签,引入解析jsx语法的babel类库
  • <script>标签块中使用了JSX语法,则一定要申明类型type="text/babel",否则babel将不进行解析jsx语法
代码语言:javascript
复制
<!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>Hello React JSX!</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/7.20.6/babel.min.js"></script>
    <!-- script标签上一定要写上 type="text/babel" -->
    <script type="text/babel">
      // 1、创建虚拟dom
      let vNode = <h2>Hello React JSX!</h2>;
      //2、获取app根元素
      let app = document.querySelector("#app");
      //3、创建根元素
      let root = ReactDOM.createRoot(app);
      //4、将虚拟节点渲染到根结点上
      root.render(vNode);
    </script>
  </body>
</html>

运行结果:

添加属性

代码语言:javascript
复制
<!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>Hello React JSX!</title>
    <style>
      .cls1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/7.20.6/babel.min.js"></script>
    <!-- script标签上一定要写上 type="text/babel" -->
    <script type="text/babel">
      // 1、创建虚拟dom
      let vNode = <h2 className="cls1">Hello React JSX!</h2>;
      //2、获取app根元素
      let app = document.querySelector("#app");
      //3、创建根元素
      let root = ReactDOM.createRoot(app);
      //4、将虚拟节点渲染到根结点上
      root.render(vNode);
    </script>
  </body>
</html>

调用javascript中的方法

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sss{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test">
        
    </div>
</body>
<!-- 引入依赖 ,引入的时候,必须就按照这个步骤-->
<script src="../js/react.development.js" type="text/javascript"></script>
<script src="../js/react-dom.development.js" type="text/javascript"></script>

<script src="../js/babel.min.js"></script>
<!--这里使用了js来创建虚拟DOM-->
<script type="text/babel">
        const MyId = "title";
        const MyData = "Cyk";
        // 1.创建虚拟DOM
        const VDOM = (
            <h1 id = {MyId.toLocaleUpperCase()}>
                <span className = "sss" style = {{fontSize:'50px'}}>sss</span>
            </h1>
        )
        // 2.渲染,如果有多个渲染同一个容器,后面的会将前面的覆盖掉
        ReactDOM.render(VDOM,document.getElementById("test"));
</script>

</html>

事件处理:

代码语言:javascript
复制
<!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>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/7.20.6/babel.min.js"></script>
    <script type="text/babel">
      let clickHandler = (e) => {
        alert(e.target.innerHTML);
      };
      let title = "message";
      //创建虚拟DOM结点
      let vnode = (
        <div title={title.toUpperCase()} onClick={clickHandler}>
          <h2 style={{ color: "blue" }}>Hello React!</h2>
        </div>
      );
      let root = ReactDOM.createRoot(document.querySelector("#app"));
      root.render(vnode);
    </script>
  </body>
</html>

结果:

2.3、脚手架

1.使用 create-react-app 脚手架创建项目

npx create-react-app 项目名 或者 yarn create react-app 项目名(npx 是一个临时使用第三方模块的命令,会临时下载这个包,使用完毕就删除了)

npm和npx的区别

区别1.一个永久存在(npm),一个临时安装(npx),用完后删除

区别2.npx 会帮你执行依赖包里的二进制文件。也就是说 npx 会自动查找当前依赖包中的可执行文件,如果找不到,就会去环境变量里面的 PATH 里找。如果依然找不到,就会帮你安装!

区别3.npx可以执行文件,但是npm不可以

虽然在本地搭建环境要费一些时间,但是你可以选择自己喜欢的编辑器来完成开发。以下是具体步骤:

  1. 确保你安装了较新版本的 Node.js
  2. 按照 Create React App 安装指南创建一个新的项目
代码语言:javascript
复制
npx create-react-app my-app
  1. 删除掉新项目中 src/ 文件夹下的所有文件。

注意: 不要删除整个 src 文件夹,删除里面的源文件。我们会在接下来的步骤中使用示例代码替换默认源文件。

代码语言:javascript
复制
cd my-app
cd src

# 如果你使用 Mac 或 Linux:
rm -f *

# 如果你使用 Windows:
del *

# 然后回到项目文件夹
cd ..
  1. 在 src/ 文件夹中创建一个名为 index.css 的文件,并拷贝这些 CSS 代码
  2. 在 src/ 文件夹下创建一个名为 index.js 的文件,并拷贝这些 JS 代码
  3. 拷贝以下三行代码到 src/ 文件夹下的 index.js 文件的顶部:
代码语言:javascript
复制
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

现在,在项目文件夹下执行 npm start 命令,然后在浏览器访问 http://localhost:3000。这样你就可以在浏览器中看见一个空的井字棋的棋盘了。

2.项目结构

3.启动项目

我们只需要在项目根目录下使用 npm start 或者 yarn start 就可以启动项目。

react17的ReactDOM.render()用法

代码语言:javascript
复制
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render((
  <h1>Hello World</h1>
),
  document.getElementById('root')
)

react18的ReactDOM.createRoot的用法。

代码语言:javascript
复制
import React from 'react';
import ReactDOM from 'react-dom/client';
const rootEl = document.getElementById('root')
const root = ReactDOM.createRoot(rootEl)
root.render(<h1>Hello World</h1>)

修改index.js文件

代码语言:javascript
复制
import ReactDOM from "react-dom/client";

//1、创建根结点
const root = ReactDOM.createRoot(document.getElementById("root"));
//2、创建虚拟DOM
const vNode = (
  <div>
    <h2>Hello React!</h2>
  </div>
);
//3、将虚拟DOM渲染到根结点上
root.render(vNode);

运行结果:

2.4、使用Vite创建React项目

三、开发工具与插件

3.1、安装React开发调试插件

不采用自动构建,直接为 crx 文件(直接拖入浏览器即可)。点击即可下载!【秘钥:dv6e】

  1. 进入到【谷歌扩展程序】界面。在谷歌浏览器直接输入: chrome://extensions/   即可进去扩展程序界面。
  2. 把 .crx 结尾的文件拖入浏览器即可。(如下图1)
  3. 运行 react 项目,打开控制台,就可以看到了。(如下图2)

图一:

图二:

3.2、安装VSCode插件

3.2.1、React/Redux/React-Native snippets 代码模板/代码片段

{}和()中的每一个空格都意味着这将被推入下一行:)$表示制表符之后的每一步。

TypeScript有自己的组件和代码段。在每个组件代码段之前使用搜索或键入ts。

Basic Methods

Prefix

Method

imp→

import moduleName from 'module'

imn→

import 'module'

imd→

import { destructuredModule } from 'module'

ime→

import * as alias from 'module'

ima→

import { originalName as aliasName} from 'module'

exp→

export default moduleName

exd→

export { destructuredModule } from 'module'

exa→

export { originalName as aliasName} from 'module'

enf→

export const functionName = (params) => { }

edf→

export default (params) => { }

ednf→

export default function functionName(params) { }

met→

methodName = (params) => { }

fre→

arrayName.forEach(element => { }

fof→

for(let itemName of objectName { }

fin→

for(let itemName in objectName { }

anfn→

(params) => { }

nfn→

const functionName = (params) => { }

dob→

const {propName} = objectToDescruct

dar→

const [propName] = arrayToDescruct

sti→

setInterval(() => { }, intervalTime

sto→

setTimeout(() => { }, delayTime

prom→

return new Promise((resolve, reject) => { }

cmmb→

comment block

cp→

const { } = this.props

cs→

const { } = this.state

React

Prefix

Method

imr→

import React from 'react'

imrd→

import ReactDOM from 'react-dom'

imrc→

import React, { Component } from 'react'

imrpc→

import React, { PureComponent } from 'react'

imrm→

import React, { memo } from 'react'

imrr→

import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'

imbr→

import { BrowserRouter as Router} from 'react-router-dom'

imbrc→

import { Route, Switch, NavLink, Link } from react-router-dom'

imbrr→

import { Route } from 'react-router-dom'

imbrs→

import { Switch } from 'react-router-dom'

imbrl→

import { Link } from 'react-router-dom'

imbrnl→

import { NavLink } from 'react-router-dom'

imrs→

import React, { useState } from 'react'

imrse→

import React, { useState, useEffect } from 'react'

redux→

import { connect } from 'react-redux'

est→

this.state = { }

cdm→

componentDidMount = () => { }

scu→

shouldComponentUpdate = (nextProps, nextState) => { }

cdup→

componentDidUpdate = (prevProps, prevState) => { }

cwun→

componentWillUnmount = () => { }

gdsfp→

static getDerivedStateFromProps(nextProps, prevState) { }

gsbu→

getSnapshotBeforeUpdate = (prevProps, prevState) => { }

sst→

this.setState({ })

ssf→

this.setState((state, props) => return { })

props→

this.props.propName

state→

this.state.stateName

rcontext→

const $1 = React.createContext()

cref→

this.$1Ref = React.createRef()

fref→

const ref = React.createRef()

bnd→

this.methodName = this.methodName.bind(this)

React Native

Prefix

Method

imrn→

import { $1 } from 'react-native'

rnstyle→

const styles = StyleSheet.create({})

Redux

Prefix

Method

rxaction→

redux action template

rxconst→

export const $1 = '$1'

rxreducer→

redux reducer template

rxselect→

redux selector template

rxslice→

redux slice template

PropTypes

Prefix

Method

pta→

PropTypes.array

ptar→

PropTypes.array.isRequired

ptb→

PropTypes.bool

ptbr→

PropTypes.bool.isRequired

ptf→

PropTypes.func

ptfr→

PropTypes.func.isRequired

ptn→

PropTypes.number

ptnr→

PropTypes.number.isRequired

pto→

PropTypes.object

ptor→

PropTypes.object.isRequired

pts→

PropTypes.string

ptsr→

PropTypes.string.isRequired

ptnd→

PropTypes.node

ptndr→

PropTypes.node.isRequired

ptel→

PropTypes.element

ptelr→

PropTypes.element.isRequired

pti→

PropTypes.instanceOf(name)

ptir→

PropTypes.instanceOf(name).isRequired

pte→

PropTypes.oneOf([name])

pter→

PropTypes.oneOf([name]).isRequired

ptet→

PropTypes.oneOfType([name])

ptetr→

PropTypes.oneOfType([name]).isRequired

ptao→

PropTypes.arrayOf(name)

ptaor→

PropTypes.arrayOf(name).isRequired

ptoo→

PropTypes.objectOf(name)

ptoor→

PropTypes.objectOf(name).isRequired

ptsh→

PropTypes.shape({ })

ptshr→

PropTypes.shape({ }).isRequired

ptany→

PropTypes.any

ptypes→

static propTypes = {}

Console

Prefix

Method

clg→

console.log(object)

clo→

console.log(`object`, object)

clj→

console.log(`object`, JSON.stringify(object, null, 2))

ctm→

console.time(`timeId`)

cte→

console.timeEnd(`timeId`)

cas→

console.assert(expression,object)

ccl→

console.clear()

cco→

console.count(label)

cdi→

console.dir

cer→

console.error(object)

cgr→

console.group(label)

cge→

console.groupEnd()

ctr→

console.trace(object)

cwa→

console.warn

cin→

console.info

React Components

rcc

代码语言:javascript
复制
import React, { Component } from 'react'

export default class FileName extends Component {
  render() {
    return <div>$2</div>
  }
}

rce

代码语言:javascript
复制
import React, { Component } from 'react'

export class FileName extends Component {
  render() {
    return <div>$2</div>
  }
}

export default $1

rcep

代码语言:javascript
复制
import React, { Component } from 'react'
import PropTypes from 'prop-types'

export class FileName extends Component {
  static propTypes = {}

  render() {
    return <div>$2</div>
  }
}

export default $1

rpc

代码语言:javascript
复制
import React, { PureComponent } from 'react'

export default class FileName extends PureComponent {
  render() {
    return <div>$2</div>
  }
}

rpcp

代码语言:javascript
复制
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

export default class FileName extends PureComponent {
  static propTypes = {}

  render() {
    return <div>$2</div>
  }
}

rpce

代码语言:javascript
复制
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

export class FileName extends PureComponent {
  static propTypes = {}

  render() {
    return <div>$2</div>
  }
}

export default FileName

rccp

代码语言:javascript
复制
import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class FileName extends Component {
  static propTypes = {
    $2: $3,
  }

  render() {
    return <div>$4</div>
  }
}

rfcp

代码语言:javascript
复制
import React from 'react'
import PropTypes from 'prop-types'

function $1(props) {
  return <div>$0</div>
}

$1.propTypes = {}

export default $1

rfc

代码语言:javascript
复制
import React from 'react'

export default function $1() {
  return <div>$0</div>
}

rfce

代码语言:javascript
复制
import React from 'react'

function $1() {
  return <div>$0</div>
}

export default $1

rafcp

代码语言:javascript
复制
import React from 'react'
import PropTypes from 'prop-types'

const $1 = (props) => {
  return <div>$0</div>
}

$1.propTypes = {}

export default $1

rafc

代码语言:javascript
复制
import React from 'react'

export const $1 = () => {
  return <div>$0</div>
}

rafce

代码语言:javascript
复制
import React from 'react'

const $1 = () => {
  return <div>$0</div>
}

export default $1

rmc

代码语言:javascript
复制
import React, { memo } from 'react'

export default memo(function $1() {
  return <div>$0</div>
})

rmcp

代码语言:javascript
复制
import React, { memo } from 'react'
import PropTypes from 'prop-types'

const $1 = memo(function $1(props) {
  return <div>$0</div>
})

$1.propTypes = {}

export default $1

rcredux

代码语言:javascript
复制
import React, { Component } from 'react'
import { connect } from 'react-redux'

export class FileName extends Component {
  render() {
    return <div>$4</div>
  }
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

rcreduxp

代码语言:javascript
复制
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export class FileName extends Component {
  static propTypes = {
    $2: $3,
  }

  render() {
    return <div>$4</div>
  }
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

rfcredux

代码语言:javascript
复制
import React, { Component } from 'react'
import { connect } from 'react-redux'

export const FileName = () => {
  return <div>$4</div>
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

rfreduxp

代码语言:javascript
复制
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export const FileName = () => {
  return <div>$4</div>
}

FileName.propTypes = {
  $2: $3,
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

reduxmap

代码语言:javascript
复制
const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}
React Native Components

rnc

代码语言:javascript
复制
import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    )
  }
}

rnf

代码语言:javascript
复制
import React from 'react'
import { View, Text } from 'react-native'

export default function $1() {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

rnfs

代码语言:javascript
复制
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'

export default function $1() {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

const styles = StyleSheet.create({})

rnfe

代码语言:javascript
复制
import React from 'react'
import { View, Text } from 'react-native'

const $1 = () => {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

export default $1

rnfes

代码语言:javascript
复制
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'

const $1 = () => {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

export default $1

const styles = StyleSheet.create({})

rncs

代码语言:javascript
复制
import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'

export default class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({})

rnce

代码语言:javascript
复制
import React, { Component } from 'react'
import { Text, View } from 'react-native'

export class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    )
  }
}

export default $1
Others

cmmb

代码语言:javascript
复制
/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/

desc

代码语言:javascript
复制
describe('$1', () => {
  $2
})

test

代码语言:javascript
复制
test('should $1', () => {
  $2
})

tit

代码语言:javascript
复制
it('should $1', () => {
  $2
})

stest

代码语言:javascript
复制
import React from 'react'
import renderer from 'react-test-renderer'

import { $1 } from '../$1'

describe('<$1 />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(<$1 {...defaultProps} />)

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

srtest

代码语言:javascript
复制
import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'

import store from 'src/store'
import { $1 } from '../$1'

describe('<$1 />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(
    <Provider store={store}>
      <$1 {...defaultProps} />)
    </Provider>,
  )

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

sntest

代码语言:javascript
复制
import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'

import $1 from '../$1'

describe('<$1 />', () => {
  const defaultProps = {}

  const wrapper = renderer.create(<$1 {...defaultProps} />)

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

snrtest

代码语言:javascript
复制
import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'

import store from 'src/store/configureStore'
import $1 from '../$1'

describe('<$1 />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(
    <Provider store={store}>
      <$1 {...defaultProps} />
    </Provider>,
  )

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

hocredux

代码语言:javascript
复制
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export const mapStateToProps = (state) => ({})

export const mapDispatchToProps = {}

export const $1 = (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

  hocComponent.propTypes = {}

  return hocComponent
}

export default (WrapperComponent) =>
  connect(mapStateToProps, mapDispatchToProps)($1(WrapperComponent))

hoc

代码语言:javascript
复制
import React from 'react'
import PropTypes from 'prop-types'

export default (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

  hocComponent.propTypes = {}

  return hocComponent
}

3.2.2、Simple React Snippets 更加简洁的代码片段

Snippets

Snippet

Renders

imr

Import React

imrc

Import React / Component

imrd

Import ReactDOM

imrs

Import React / useState

imrse

Import React / useState useEffect

impt

Import PropTypes

impc

Import React / PureComponent

cc

Class Component

ccc

Class Component With Constructor

cpc

Class Pure Component

ffc

Function Component

sfc

Stateless Function Component (Arrow function)

cdm

componentDidMount

uef

useEffect Hook

cwm

componentWillMount

cwrp

componentWillReceiveProps

gds

getDerivedStateFromProps

scu

shouldComponentUpdate

cwu

componentWillUpdate

cdu

componentDidUpdate

cwun

componentWillUnmount

cdc

componentDidCatch

gsbu

getSnapshotBeforeUpdate

ss

setState

ssf

Functional setState

usf

Declare a new state variable using State Hook

ren

render

rprop

Render Prop

hoc

Higher Order Component

cp

Context Provider

cpf

Class Property Function

四、作业

4.1、在Web端完成一个输出Hello World信息到网页的程序,非JSX。

4.2、在Web端完成一个输出Hello World信息到网页的程序,使用JSX。

4.3、使用脚手架创建一个React项目,使用VSCode打开,动态显示当前日期时间,每秒显示一次,安装好开发者工具(React Developer Tools),安装好代码提示片段插件。

4.4、完成一个购物车:

4.5、将官网首页的demo复现。https://zh-hans.reactjs.org/

五、视频

 https://www.bilibili.com/video/BV1Vb411D7qa/?share_source=copy_web&vd_source=475a31f3c5d6353a782007cd4c638a8a

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-02-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、概要
    • 1.1、介绍
      • 1.2、React的特点
        • 1.3、React相关技术
        • 二、第一个React程序
          •  2.1、Web端
            • 2.2、JSX
              • 2.3、脚手架
                • 2.4、使用Vite创建React项目
                • 三、开发工具与插件
                  • 3.1、安装React开发调试插件
                    • 3.2、安装VSCode插件
                      • 3.2.1、React/Redux/React-Native snippets 代码模板/代码片段
                      • rcc
                      • rce
                      • rcep
                      • rpc
                      • rpcp
                      • rpce
                      • rccp
                      • rfcp
                      • rfc
                      • rfce
                      • rafcp
                      • rafc
                      • rafce
                      • rmc
                      • rmcp
                      • rcredux
                      • rcreduxp
                      • rfcredux
                      • rfreduxp
                      • reduxmap
                      • rnc
                      • rnf
                      • rnfs
                      • rnfe
                      • rnfes
                      • rncs
                      • rnce
                      • cmmb
                      • desc
                      • test
                      • tit
                      • stest
                      • srtest
                      • sntest
                      • snrtest
                      • hocredux
                      • hoc
                      • 3.2.2、Simple React Snippets 更加简洁的代码片段
                  • 四、作业
                  • 五、视频
                  相关产品与服务
                  内容分发网络 CDN
                  内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档