一、概要

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月開源。

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中，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>

運行結果：

添加屬性

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

結果：

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不可以

雖然在本地搭建環境要費一些時間，但是你可以選擇自己喜歡的編輯器來完成開發。以下是具體步驟：

確保你安裝了較新版本的 Node.js。
按照 Create React App 安裝指南創建一個新的項目

npx create-react-app my-app

刪除掉新項目中 src/ 文件夾下的所有文件。

注意：

不要刪除整個 src 文件夾，刪除裏面的源文件。我們會在接下來的步驟中使用示例代碼替換默認源文件。

cd my-app
cd src

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

# 如果你使用 Windows:
del *

# 然後回到項目文件夾
cd ..

在 src/ 文件夾中創建一個名爲 index.css 的文件，並拷貝這些 CSS 代碼。
在 src/ 文件夾下創建一個名爲 index.js 的文件，並拷貝這些 JS 代碼。
拷貝以下三行代碼到 src/ 文件夾下的 index.js 文件的頂部：

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()用法

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

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

運行結果：

2.4、使用Vite創建React項目

三、開發工具與插件

3.1、安裝React開發調試插件

不採用自動構建，直接爲 crx 文件（直接拖入瀏覽器即可）。點擊即可下載！【祕鑰：dv6e】

進入到【谷歌擴展程序】界面。在谷歌瀏覽器直接輸入： chrome://extensions/ 即可進去擴展程序界面。
把 .crx 結尾的文件拖入瀏覽器即可。（如下圖1）
運行 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`

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、完成一個購物車：

4.5、將官網首頁的demo復現。https://zh-hans.reactjs.org/

React學習筆記（一）—— React快速入門

一、概要

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 代碼模板/代碼片段

Basic Methods

React

React Native

Redux

PropTypes

Console

React Components

rcc

rce

rcep

rpc

rpcp

rpce

rccp

rfcp

rfc

rfce

rafcp

rafc

rafce

rmc

rmcp

rcredux

rcreduxp

rfcredux

rfreduxp

reduxmap