一、概要

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

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

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

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

React新文档 ：（https://beta.reactjs.org/）（开发中....）

二、React特点

2.1、声明式设计

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

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。（注：命令式需要你一步一步的写需要干什么的步骤，而声明式只需要告诉目的，应该做什么，但是不用指定怎么做）

2.2、组件化开发

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

2.3、使用JSX语法

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

2.4、灵活

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

2.5、使用虚拟DOM、高效

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

2.6、单向数据流

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

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

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

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

三、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设备

      • 支持多种格式的全景视频

四、创建第一个程序

4.1、Web端

1、准备一个空文件夹，打开终端输入命令 npm init -y   下载 package.json文件。

在目录下创建一个index.html文件

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

方法有两种，一种本地下载，在终端输入指令npm i react react-dom。第二种是直接搜索网上

3、编写代码

写一个<div id="app"></div>

 <script>

        // 参数一，h2表示标签的名称

        // 参数二，{}表示节点中的属性如，{title:"Hello"}

        // 参数三，表示子节点，可以是文本节点

        // 1、创建虚拟DOM节点

        let vNode = React.createElement("h2", { title: "Hello" }, "Hello React Web!");

        //   2、找到根节点

        let app = document.querySelector("#app");

        // 3、创建根节点

        let root = ReactDOM.createRoot(app);

        // 4、将虚拟DOM挂载到根节点上

        root.render(vNode);

    </script>　　

运行结果

4.2、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>React案例2</title>

    <style>

        .purple {

            color: blueviolet;

        }

    </style>

</head>

<body>

    <div id="app"></div>

    <!-- 三个库，react核心库，提供与dom相关的功能，bable可以将es6代码转换es5代码 -->

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

    <!-- 需要bable解析 -->

    <script type="text/babel">

        // 1、创建虚拟DOM节点 vnode, 对比：React.createElement("h2", { title: "Hello" }, "Hello React Web!");

        let vNode = (

            <div class="purple">

                <h2 title="Hello" >Hello React JSX!</h2>

            </div>

        )

        // 2、创建根节点

        let root = ReactDOM.createRoot(document.getElementById("app"));

        // 3、将虚拟DOM挂载到根节点上

        root.render(vNode);

    </script>

</body>

</html>

4.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

　　3.删除掉新项目中 src/ 文件夹下的所有文件。

4.4、vite+react项目

使用vite创建项目比较快，文件少，根据提示第一个输入项目名称，第二个选择是React，第三个选择TypeScript。

4.5、官网四个demo案例

这四个案例使用组件完成。

main.tsx文件

import React from 'react'

import ReactDOM from 'react-dom/client'

import HelloMessage from './HelloMessage'

import MarkdownEditor from './MarkdownEditor'

import Timer from './Timer'

import TodoApp from './TodoApp'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

  <React.StrictMode>

      <HelloMessage name="Taylor" />

      <Timer/>

      <TodoApp></TodoApp>

      <MarkdownEditor></MarkdownEditor>

  </React.StrictMode>

)　

组件HelloMessage.tsx文件

import React from 'react'

export default class HelloMessage extends React.Component<any> {

    render() {

      return <div>Hello {this.props.name}</div>;

    }

  }

组件 Timer.tsx

import React from 'react'

export default class Timer extends React.Component<any,any> {

    interval: number | undefined;

    constructor(props: any) {

      super(props);

      this.state = { seconds: 0 };

    }

    tick() {

      this.setState((state: { seconds: number; }) => ({

        seconds: state.seconds + 1

      }));

    }

    componentDidMount() {

      this.interval = setInterval(() => this.tick(), 1000);

    }

    componentWillUnmount() {

      clearInterval(this.interval);

    }

    render() {

      return (

        <div>

          Seconds: {this.state.seconds}

        </div>

      );

    }

  }

 组件TodoApp.tsx文件

import React from 'react'

export default class TodoApp extends React.Component<any,any> {

    constructor(props: any) {

      super(props);

      this.state = { items: [], text: '' };

      this.handleChange = this.handleChange.bind(this);

      this.handleSubmit = this.handleSubmit.bind(this);

    }

    render() {

      return (

        <div>

          <h3>TODO</h3>

          <TodoList items={this.state.items} />

          <form onSubmit={this.handleSubmit}>

            <label htmlFor="new-todo">

              What needs to be done?

            </label>

            <input

              id="new-todo"

              onChange={this.handleChange}

              value={this.state.text}

            />

            <button>

              Add #{this.state.items.length + 1}

            </button>

          </form>

        </div>

      );

    }

    handleChange(e: { target: { value: any; }; }) {

      this.setState({ text: e.target.value });

    }

    handleSubmit(e: { preventDefault: () => void; }) {

      e.preventDefault();

      if (this.state.text.length === 0) {

        return;

      }

      const newItem = {

        text: this.state.text,

        id: Date.now()

      };

      this.setState((state: { items: any[]; }) => ({

        items: state.items.concat(newItem),

        text: ''

      }));

    }

  }

  class TodoList extends React.Component {

    render() {

      return (

        <ul>

          {this.props.items.map((item: { id: React.Key | null | undefined; text: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined; }) => (

            <li key={item.id}>{item.text}</li>

          ))}

        </ul>

      );

    }

  }

组件MarkdownEditor.tsx文件 

import React from 'react'

import { Remarkable } from 'remarkable';

 export default class MarkdownEditor extends React.Component<any,any> {

    md: any;

    constructor(props: any) {

      super(props);

      this.md = new Remarkable();

      this.handleChange = this.handleChange.bind(this);

      this.state = { value: 'Hello, **world**!' };

    }

    handleChange(e: { target: { value: any; }; }) {

      this.setState({ value: e.target.value });

    }

    getRawMarkup() {

      return { __html: this.md.render(this.state.value) };

    }

    render() {

      return (

        <div className="MarkdownEditor">

          <h3>Input</h3>

          <label htmlFor="markdown-content">

            Enter some markdown

          </label>

          <textarea

            id="markdown-content"

            onChange={this.handleChange}

            defaultValue={this.state.value}

          />

          <h3>Output</h3>

          <div

            className="content"

            dangerouslySetInnerHTML={this.getRawMarkup()}

          />

        </div>

      );

    }

  }

需要用到插件，添加依赖：npm install remarkable --save

五、安装插件

为以后的react项目做准备

5.1、安装React开发调试插件

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

5.2、安装VSCode插件

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

每个插件都会在页面显示怎么使用，这个也不例外

点击查看细节用法

例子

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

}

5.3、Simple React 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
 

好了，第一节结束！

React课堂笔记1的更多相关文章

  1. 九章算法系列（#3 Binary Tree & Divide Conquer）-课堂笔记

    前言 第一天的算法都还没有缓过来,直接就进入了第二天的算法学习.前一天一直在整理Binary Search的笔记,也没有提前预习一下,好在Binary Tree算是自己最熟的地方了吧(LeetCode ...

  2. 九章算法系列（#5 Linked List）-课堂笔记

    前言 又是很长时间才回来发一篇博客,前一个月确实因为杂七杂八的事情影响了很多,现在还是到了大火燃眉毛的时候了,也应该开始继续整理一下算法的思路了.Linked List大家应该是特别熟悉不过的了,因为 ...

  3. 九章算法系列（#4 Dynamic Programming）-课堂笔记

    前言 时隔这么久才发了这篇早在三周前就应该发出来的课堂笔记,由于懒癌犯了,加上各种原因,实在是应该反思.好多课堂上老师说的重要的东西可能细节上有一些急记不住了,但是幸好做了一些笔记,还能够让自己回想起 ...

  4. 九章算法系列（#2 Binary Search）-课堂笔记

    前言 先说一些题外的东西吧.受到春跃大神的影响和启发,推荐了这个算法公开课给我,晚上睡觉前点开一看发现课还有两天要开始,本着要好好系统地学习一下算法,于是就爬起来拉上两个小伙伴组团报名了.今天听了第一 ...

  5. React使用笔记1-React的JSX和Style

    React使用笔记1-React的JSX和Style Date: 2015-11-27 20:56 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1 ...

  6. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  7. ocp11g培训内部教材_052课堂笔记(042)_体系架构

    OCP 052 课堂笔记 目录 第一部分: Oracle体系架构... 4 第一章:实例与数据库... 4 1.Oracle 网络架构及应用环境... 4 2.Oracle 体系结构... 4 3. ...

  8. ocp11g培训内部教材_051课堂笔记(047)_SQL

    OCP 051课堂笔记 目录 OCP 051课堂笔记... 1 第一章.Oracle命令类别:... 4 第二章.SQL的基本函数... 4 2.1 单行函数与多行函数... 4 2.2 单行函数的几 ...

  9. 线程（java课堂笔记）

    1.两种方式的差异 2.线程的生命周期 3.线程控制(线程的方法) 4.线程同步 5.线程同步锁 一. 两种方式的差异 A extends Thread :简单 不能再继承其他类了(Java单继承)同 ...

  10. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

随机推荐

  1. Charles4.5.1抓取HTTPS请求

    Charles下载以后发现 抓取http请求是成功的: 抓取https请求是失败的: 按照失败提示设置即可: 1.点击 Help -> SSL Proxying -> install ch ...

  2. HarmonyOS_Text_Image

    Text组件 ohos:属性 id="$+id:text_helloworld" #在程序中控制,需要id="$+id:name",转回MainAbilityS ...

  3. Selenium显式、隐式等待

    显式等待: 显式等待是你在代码中定义等待一定条件发生后再进一步执行你的代码.简单的说就是在指定时间内,一直等待某个条件成立,条件成立后立即执行定位元素的操作:如果超过这个时间条件仍然没有成立,则会抛出 ...

  4. 微信小程序 实现点击返回顶部

    效果: wxml: <!-- 点击回顶部 --> <image src='/images/top.jpg' class='goTop' hidden='{{showTop}}' bi ...

  5. ubuntu 16.04 安装VNC远程桌面 安装wine+hfs

    1.安装$sudo apt-get install xfce4 $sudo apt-get install vnc4server$sudo apt-get install xrdp 2.启动VNC s ...

  6. NX二次开发VS环境搭建

    1.安装VS2019(直接安装高版本:与NX匹配时向下兼容,不需要纠结) 2.安装习惯使用的NX(建议直接上NX1980,新版不管是功能还是界面都比低版好用得多.很多人说新版不好用,这只是个人习惯和接 ...

  7. ArcEngine创建注记类及生成注记要素

    在宗地出图的时候遇到此功能要求,看代码 ※创建注记类 public void createBlackAnno(IMap pMap) { //创建mdb数据库文件 IWorkspaceFactory p ...

  8. 2021SWPUCTF-WEB(一)

    gift_F12 给了一个网站,题目提示是F12,就F12找一下 ​ WLLMCTF{We1c0me_t0_WLLMCTF_Th1s_1s_th3_G1ft} jicao 一个代码,逻辑很简单 ​ 大 ...

  9. DataTable 导出到TXT

    public static string cExportTXT(DataView dv) { try { SaveFileDialog saveFileDialog1 = new SaveFileDi ...

  10. 实验十 团队作业7：团队项目用户验收&Beta冲刺

    项目 内容 课程班级博客链接 2018级卓越班 这个作业要求链接 实验十 团队名称 零基础619 团队成员分工描述 任务1:亚楠,桂婷任务2:团队合作任务3:团队合作任务4:荣娟,鑫 团队的课程学习目 ...