React——配置环境、ES6语法补充、Components

文章目录

架构设计
前置知识
- DOM树
配置环境
- 安装 create-react-app
- 安装两个插件
- 创建
- 安装 nodejs
- 仍然无法创建
下次需要创建新项目就使用这三行命令
安装 bootstrap
使用 bootstrap 包
画图
追求
写 jsx
短路原则
绑定函数
快捷键修改变量名
箭头函数简写
删除无用的文件
写组件
调用组件
使用 bootstrap 构建一个表单
绑定删除函数
添加
结语

架构设计

一图胜千言

前置知识

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