react-问卷星项目（1）

news2024/11/15 8:09:53

学习的一位MOOC老师的经验，记录一下学习的过程

本项目技术栈：React18+TS4+AntDesign5+Next.js13

项目：低代码，B/C

react官方文档

核心价值：

组件化：不是React原创，但在React中流行开来

数据驱动视图：定义好数据和UI的显示规则，即UI=f(state).只关注业务数据的修改，不用再操作DOM，增加开发效率。直接操作DOM风险大，容易影响性能等，vue也是同理。

开始

React常见脚手架

vite和webpack的区别

Create-React-App内部使用webpack打包

Vite既是构建工具，又是打包工具

Vite比CRA打包项目更快，快是因为使用了ES Module（仅开发环境）

ESModule

分别创建index.html文件和main.js文件，在index中导入main.js

确定是否下载了http-server，没有的话执行下面的命令下载，如果你还没有安装npm，可以先安装Node.js，它会自带npm。访问 node.js官网下载并安装。使用Sudo是因为我没把npm配置到全局，在mac中进行操作需要权限）

sudo npm install -g http-server

下载完后，进入项目的根目录，用下面这段指令在指定端口（8881）启动

http-server -p 8881

可以看到控制台有输出。这是webpack传统的打包方式，会把所有内容打包成mean.js后一次性塞给html文件，vite可以把零散文件通过ES Modul引用，即export/import，webpack会将几个文件压缩到一起并打包，vite使用script的时候添加type="module"即可按需饮用，wenpack需要全部结合，计算需要时间，所以vite快

安装软件

node.js 使用国内的npm镜像，不使用国内的可能会慢(国内镜像)
VSC（Visual Studio Code）
安装git

创建项目

Create-React-App

创建命令，这条是官方提供的，但我使用的时候莫名卡半天，也不报错，也没有进度。

npx create-react-app myApp

解决方法如下（非mac电脑可忽略sudo）

用npm下载和创建名为my-app的项目，首先项目名称中不能包涵大写字母，不然会报错，后缀--template typescript的意思是按照ts的模版进行创建，不然会默认为js语言

// 下载相关包
sudo npm install -g create-react-app

// 配置项目
create-react-app my-app --template typescript

在App.tsx文件中更改内容再重新保存可以更换启动项目时展示页面的内容。

Vite

官网创建指令

npm create vite@latest my-app -- --template react-ts

在App.tsx文件中更改内容再重新保存可以更换启动项目时展示页面的内容。

总结

选择Create-React-App

是React官网推荐的
时间更久，可查找资源更多
要考虑稳定性，求稳不求新

配置编码规则

Prettier统一代码功能

在项目根目录执行下面的指令 --> package.json文件中查看是否成功添加devDependencies模块

npm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev

添加成功后在vsc中搜索prettier插件，没有下载点击下载就行。

在package.json文件中，在scripts模块中添加如下语句，保存后使用第二句指令启动项目，会看到更改了相应操作的文件目录，即将单引号更换为双引号，可自行查看是否生效。

"format": "prettier --write 'src/**/*.+(js|ts|jsx|tsx)' "

npm run format

接下来在项目根目录下创建.vscode文件夹（注意这个vscode前面有个小圆点），并在文件夹下面新建文件settings.json，配置如下，意思是在保存的时候自动更改格式，而不需要像前面一样另外使用指令运行。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

我在这一步碰到了一个问题，就是保存文件的时候修改并没有生效，搜索了一下，很大概率还是缺少了eslint文件，因为前面缺失了一节课，所以我就按照自己的步骤往下添加。

先在根目录下载eslint，指令为下列代码中的第一句，然后在根目录创建一个文件.eslintrc.js，其中的配置如下,module会有报红波浪线，不用理会，记得文件前面要加.不然没效果，保存好了之后可以随便拿一个文件进行修改，会看到单引号路径会报错，保存后会自动修改为双引号，就表示配置生效了。

npm install eslint --save-dev

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {
    // 你的规则配置
  },
};

提交到github仓库

参考文章：提交到github

创建一个github账号，可以通过下面这一条指令检查.ssh是否存在，我使用的时候没有查出来，但是后面创建新的内容时又显示有这个文件。

cd ～/.ssh

若提示“-bash: cd: ～/.ssh: No such file or directory” 那就说明.ssh文件夹不存在，那么则进行下一个步骤，否则就是将原来的.ssh文件夹备份以下，亦或是切换到其他路径下建立ssh。输入以下命令来创建ssh，xxx@xx.com为你注册GitHub时的邮箱账号，命令执行成功后，会有以下提示

$ ssh-keygen -t rsa -C xxx@xx.com

这个默认路径最好不要改，我就是改了，结果推送项目的时候失败了。当然如果知道怎么处理这种情况当我没说

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/yuyuhang/.ssh/id_rsa):       
// .ssh默认路径，不输入则不修改
Enter passphrase (empty for no passphrase):                              
// 密码长度至少为4，否则失败
Enter same passphrase again: 
Your identification has been saved in /Users/yuyuhang/.ssh/id_rsa.
Your public key has been saved in /Users/yuyuhang/.ssh/id_rsa.pub.
The key fingerprint is:
8d:d3:5f:31:ae:13:48:f0:78:df:a1:8f:a5:a4:c0:06 352091626@qq.com
The key's randomart image is:
+--[ RSA 2048]----+
|        .        |
|         +       |
|      E . +   +  |
|       o * o + + |
|        S + = =  |
|       . o + O   |
|          . * .  |
|             .   |
|                 |
+-----------------+

接下来就是在GitHub上创建SSH。首先登陆你的GitHub，右上角用户头像下选择Settings，在SSH Keys 选项里面添加ssh，然后创建一个仓库，仓库不需要勾选创建README.md。

Title：xxx@xx.com
Key：打开生成的id_rsa.pub文件（/User/yourname/.ssh/is_rsa.pub），将其中内容拷贝过来

创建成功后，查看项目中是否有README.md文件，没有的话就执行下面的步骤

$ touch README.md                                         
//新建一个README文档，若上一步勾选了创建README.md，提交时导致冲突
$ git init                                                
//初始化本地仓库
$ git add README.md                                       
//添加刚刚创建的README文档
$ git commit -m "你的注释...."                             
//提交到本地仓库，并写一些注释
$ git remote add origin git@github.com:yourname/xxxx.git  
//连接远程仓库并建了一个名叫：origin的别名，当然可以为其他名字，但是origin一看就知道是别名，youname记得替换成你的用户名
$ git push -u origin master                              
//将本地仓库的文件提交到别名为origin的地址的master分支下，-u为第一次提交，需要创建master分支，下次就不需要了

链接期间可以用下面这条指令查看和github的链接是否正常，如果链接不正常那就先解决连接问题，如果这个链接返回的结果是正常的，但是项目推送的时候有问题，可以考虑下是不是我遇到的两个，1 生成的钥匙更换了默认路径 2 使用https提供的项目链接进行操作（应该使用SSH）