React课堂笔记1

一、概要

 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>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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 安装指南创建一个新的项目
?
1
npx create-react-app my-app

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

4.4、vite+react项目

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

 4.5、官网四个demo案例 

 

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

main.tsx文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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文件 

?
1
2
3
4
5
6
7
import React from 'react'
 
export default class HelloMessage extends React.Component<any> {
    render() {
      return <div>Hello {this.props.name}</div>;
    }
  }

组件 Timer.tsx

 组件TodoApp.tsx文件

组件MarkdownEditor.tsx文件 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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 代码模板/代码片段

 

 

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

点击查看细节用法

 

 

 例子

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

SnippetRenders
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
 

 好了，第一节结束！

posted @   is橙子  阅读(61)  评论(0)  编辑  收藏  举报
相关博文：
· React课堂笔记2
· React Native组件（二）
· React学习笔记（一）—— React快速入门
· React面试题
· React小结
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛