一、概要

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

1.1、介绍

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

React学习笔记（一）—— React快速入门_JSX

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

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的代码。这就是声明式开发。

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

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

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 版本。

<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 版本可通过如下方式引用：

<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​​ 替换成所需加载的版本号。

<!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学习笔记（一）—— React快速入门_React_02

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

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语法
<!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>

运行结果：

React学习笔记（一）—— React快速入门_React_03

添加属性

<!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中的方法

<!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>

事件处理：

<!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>

结果：

React学习笔记（一）—— React快速入门_JSX_04

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 安装指南​​创建一个新的项目
npx create-react-app my-app
  1. 删除掉新项目中 ​​src/​​ 文件夹下的所有文件。

注意：

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

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​​ 文件的顶部：
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

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

2.项目结构

​​

React学习笔记（一）—— React快速入门_JSX_05

​​

3.启动项目

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

react17的ReactDOM.render()用法

import React from 'react'
import ReactDOM from 'react-dom'

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

react18的ReactDOM.createRoot的用法。

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

React学习笔记（一）—— React快速入门_结点_06

修改index.js文件

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

运行结果：

React学习笔记（一）—— React快速入门_JSX_07

2.4、使用Vite创建React项目

React学习笔记（一）—— React快速入门_结点_08

 

React学习笔记（一）—— React快速入门_JSX_09

三、开发工具与插件

3.1、安装React开发调试插件

不采用自动构建，直接为 crx 文件（直接拖入浏览器即可）。​​点击即可下载！​​【秘钥：dv6e】

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

图一：

React学习笔记（一）—— React快速入门_结点_10

React学习笔记（一）—— React快速入门_JSX_11

图二：

React学习笔记（一）—— React快速入门_React_12

 

React学习笔记（一）—— React快速入门_html_13

3.2、安装VSCode插件

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

React学习笔记（一）—— React快速入门_React_14

｛｝和（）中的每一个空格都意味着这将被推入下一行：）$表示制表符之后的每一步。

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 

import React, { Component } from 'react'

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

rce 

import React, { Component } from 'react'

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

export default $1

rcep 

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 

import React, { PureComponent } from 'react'

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

rpcp 

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

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

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

rpce 

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 

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 

import React from 'react'
import PropTypes from 'prop-types'

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

$1.propTypes = {}

export default $1

rfc 

import React from 'react'

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

rfce 

import React from 'react'

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

export default $1

rafcp 

import React from 'react'
import PropTypes from 'prop-types'

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

$1.propTypes = {}

export default $1

rafc 

import React from 'react'

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

rafce 

import React from 'react'

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

export default $1

rmc 

import React, { memo } from 'react'

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

rmcp 

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 

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 

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 

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 

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 

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

const mapDispatchToProps = {}
React Native Components

rnc 

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 

import React from 'react'
import { View, Text } from 'react-native'

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

rnfs 

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 

import React from 'react'
import { View, Text } from 'react-native'

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

export default $1

rnfes 

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 

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 

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 

/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/

desc 

describe('$1', () => {
  $2
})

test 

test('should $1', () => {
  $2
})

tit 

it('should $1', () => {
  $2
})

stest 

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 

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 

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 

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 

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 

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、完成一个购物车：

React学习笔记（一）—— React快速入门_结点_15

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