架构设计

一图胜千言

前置知识

DOM树

DOM（Document Object Model，文档对象模型）树指的是用来表示网页文档结构的一种树形数据结构。它将整个 HTML 文档以树的形式进行抽象和表示，使得 JavaScript 可以通过 DOM 接口来操作网页的内容、结构和样式。

配置环境

这个算是比较头疼的，其实有一些自己之前装过了
react官网

本地有 powershell ，不需要额外装终端，比较开心，虽然已经装了 git bash

nodejs 和 git bash 可能很多地方都需要用到，自己之前搭建个人博客网站的时候使用过这两个工具

安装 create-react-app

npm i -g create-react-app

安装两个插件

Simple React Snippets,Prettier - Code formatter，目前笔者 vscode 因为写前端装了一些插件，然后中文插件，还有 git 插件，总共装了九个插件

新装的这两个插件主要是帮助自动补全和代码高亮的

创建

提示我需要更新 nodejs 版本

安装 nodejs

安装地址

我现在在 c 盘新建了一个文件夹专门存放各种新装的软件，刚刚勾选了让软件自己安装它需要的相关工具（自己也算看得懂几句英文哈哈）

现在疯狂装一堆东西，早知道不选这个选项了，其实我最担心的是安装的时候没有选环境变量这个选项，假设还需要自己设置环境变量，就非常无奈了（我现在看到环境变量还是非常害怕，虽然操作过几次环境变量了，但是还是感觉不是很熟练）

喜出望外哈哈哈

仍然无法创建

create-react-app react-app

用 power shell 也不行

有可能是因为删除了 nodejs 重新安装了，之前安装的 react 需要重新安装一次

满屏的 error

使用管理员模式安装试试

提示我 npm 版本过低，现在安装一个新版本的 npm

 npm install -g npm@10.8.2

还是报错

试一下下面这篇博客的解决办法
博客，还是解决不了
React v5.0.8——下载和安装过程:看一下这个，这个第一条命令就报错了

• 修改镜像源

npm config set registry https://registry.npm.taobao.org

还是没有解决

npx create-react-app react-app

试了一下也没有用

• 工程课 Web-5.1. 配置环境、ES6语法补充、Components :看一下这个,没有解决
• 如何使用 create-react-app 安装 React.js
• NPM（Node 包管理器）
• 现在去官网看一下怎么安装，官网说不需要安装就可以体验，不是很靠谱

npm error Error: EPERM: operation not permitted, open ‘C:\new_app\node-v11.0.0-win-x64\node_cache_cacache\index-v5\00\c2\77c04a67c72d7e54a9a73f181e946b8889e2250d5589aeceaebfa3454bf7’

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported.
npm warn deprecated uid-number@0.0.6: This package is no longer supported.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated fstream@1.0.12: This package is no longer supported.
npm warn deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

搜了很多帖子都没有解决这个问题，这是为什么呢？

我先把整个教程全部看一遍再来跟着操作

不着急，一定是可以把这个问题解决的

不行，不能直接过掉，现在就努力解决这个问题

C:\new_app\node-v11.0.0-win-x64\node_cache_logs
比较简单直接的方法就是把安装好的全部删除掉，然后重新安装一遍，应该确实能解决问题，人一我十

刚刚把之前安装的低版本的 nodejs 的环境变量删除了，之前安装的时候没有好好看英文，可能是因为之前的 nodejs 没有完全卸载

不把新装的 nodejs 安装到之前安装旧版本的 nodejs 里面，貌似比较正常了，现在正在安装 react ，但是比较缓慢，
果然还是不行

react中文社区
npm报错：request to https://registry.npm.taobao.org failed, reason certificate has expired:参考这个解决了

npx create-react-app my-app

成功了！！！

下次需要创建新项目就使用这三行命令

npx create-react-app my-app #my-app 是自己随便取得名字
cd my-app
npm start

不过新建一个 app 是真的比较慢，等的花都谢了

安装 bootstrap

比较开心，算是跨过一小个门槛，按 ctrl + ` ，可以打开 vscode 的命令行

npm i bootstrap

每一个项目之间都是独立的，这个包是独立的安装在项目文件里面

• 在 index.js 里面调用这个包

import 'bootstrap/dist/css/bootstrap.css'

使用 bootstrap 包

在浏览器收藏这个网址：bootstrap，需要使用什么样式的时候，可以在里面搜索，因为 class 是一个 html 里面的关键字，在 react 里面可以用 className 来代替

render() { return (<React.Fragment><div>{this.toString()}</div><button className='btn btn-primary'>left</button><button className='btn btn-danger'>right</button></React.Fragment>);}

画图

画出三张图，分别是流程图，UML（类图），还有数据库模型图DMD，来帮助我们第二次独立自己开发项目

之前自己学软件体系结构，软件工程的时候对这些东西不以为然，现在确实感觉到这些图的重要性，这个算是一个架构的作用，可以帮助我们形成一个整体的思维，其实和思维导图什么的比较像

追求

追求就是无错误无警告

写 jsx

凡是用到 map 函数的时候，需要定义一个 key ，因为 map 函数是 key-value 键值对

短路原则

&& 连接起来的表达式，前面只要出现了 false 就不用判断后面的了，很多时候很多事情都是这样子哈哈哈，比如说女神要求她的男朋友是高富帅，这个条件不符合，你说你性格好啥的，可能不太管用了

|| 也是一样，也是短路原则，判断的是第一个为真的表达式，假设前面的全部为假，那就返回最后一个表达式，也比较好理解，女神在一个接一个的追求者中选择一个她认为是真的男朋友，一旦选择了一个真（命天子）之后，一段时间之内就不会再选择其他的了，哪怕后面还有真，哈哈哈

绑定函数

执行函数的时候需要在函数名后面加上小括号，绑定函数的时候不需要加小括号

• 箭头函数可以使得这个函数里面的 this 是我们需要的 this ，或者换句话说就是我们当前使用的

 handleClickLeft=()=>{console.log("click left",this);}

快捷键修改变量名

选中该变量名，按 F2 ，修改完成之后按回车，即可实现全局的变量修改，最近学软件开发，学了一堆的快捷键哈哈

箭头函数简写

• 去掉大括号，分号，return （在该函数只有一句话的时候）

<button onClick={()=> this.handleClickLeft(10)} className='btn btn-primary m-5'>left</button>
<button onClick={()=> this.handleClickRight(10)} className='btn btn-danger'>right</button>

删除无用的文件

选中的文件是暂时用不上的文件，但是不要轻易自己乱尝试快捷键，我刚刚用 ctrl +d 没有删除，按 ctrl + shift +d ，把整个文件夹都给删掉了

public 里面的 index.html 里面的注释代码也可以删除

在 src 里面创建一个文件夹，components ，里面新建一个文件 solution.jsx ，src 表示的是源文件的意思

自动生成的 app 相关的文件和引用都可以删除

import reportWebVitals from './reportWebVitals';
reportWebVitals();

上面这一行也删除，暂时都用不到，都先删除

ctrl +u 查看网页源代码

可以看到 react 帮我们把代码打包成了一个 js 代码，我们自己写的时候是有很多 js 代码的，和之前写 django 项目的时候有一个打包的脚本文件，把所有的 js 打包估计差不多

写组件

imrc
cc

输入上面的缩写，剩下的交给 vscode 自动补全

import React, { Component } from 'react';
class Solution extends Component {state = {  } render() { return <h1>hello world</h1>;}
}export default Solution;

调用组件

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Solution from './components/solution';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Solution/></React.StrictMode>
);

使用 bootstrap 构建一个表单

state = { solutions:[{key:0,number:1160,title:"加工零件0",views:1230,},{key:1,number:1161,title:"加工零件1",views:1231,},{key:2,number:1162,title:"加工零件2",views:1232,},{key:3,number:1163,title:"加工零件3",views:1233,},{key:4,number:1164,title:"加工零件4",views:1234,},{key:5,number:1165,title:"加工零件5",views:1235,},{key:6,number:1166,title:"加工零件6",views:1236,},{key:7,number:1167,title:"加工零件7",views:1237,},]} render() { return <table className="table"><thead><tr><th>#</th><th>标题</th><th>阅读数</th><th>编辑</th></tr></thead><tbody>{this.state.solutions.map(solution=>(<tr key={solution.key}><td>{solution.number}</td><td>{solution.title}</td><td>{solution.views}</td><td><button className='btn btn-danger'>删除</button></td></tr>))}</tbody></table>;

绑定删除函数

实现删除操作

handleDelete=(s)=>{const solutions=this.state.solutions.filter(solution=>solution!==s);this.setState({solutions}); }

调用删除函数

<td><button onClick={()=>this.handleDelete(solution)} className='btn btn-danger'>删除</button></td>

添加

函数名还有调用都没有改，只是改了一下函数里面的内容，… 表示展开，因为没有输入框，所以每一次输入都是添加一个固定的元素

handleDelete=(s)=>{const solutions=[...this.state.solutions,{key:18,number:1172,title:"hhh",views:666,}];this.setState({solutions});}

所以可以看出来，可以用一些库里面定义好的样式写出比较漂亮的样式，react 可能在写前端页面的时候比较好用，在写前端应用，逻辑比较复杂的时候，其实是没有什么优势的

结语

『沾衣欲湿杏花雨，吹面不寒杨柳风。』—— 志南「绝句·古木阴中系短篷」

对方正在输入，备注，对方正在输入；
…（3分钟后）；
在吗?