react-问卷星项目（1）

学习的一位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中进行操纵需要权限）

1. sudo npm install -g http-server

复制代码

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

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

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

1. npx create-react-app myApp

复制代码

办理方法如下（非mac电脑可忽略sudo）
用npm下载和创建名为my-app的项目，起首项目名称中不能包涵大写字母，否则会报错，后缀--template typescript的意思是按照ts的模版进行创建，否则会默认为js语言

1. // 下载相关包
2. sudo npm install -g create-react-app
4. // 配置项目
5. create-react-app my-app --template typescript

复制代码

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

官网创建指令

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

复制代码

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

选择Create-React-App

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

设置编码规则

Prettier统一代码功能
在项目根目录实验下面的指令 --> package.json文件中查看是否成功添加devDependencies模块

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

复制代码

添加成功后在vsc中搜刮prettier插件，没有下载点击下载就行。
在package.json文件中，在scripts模块中添加如下语句，生存后使用第二句指令启动项目，会看到更改了相应操纵的文件目录，即将单引号更换为双引号，可自行查看是否生效。

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

复制代码

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

1. {
2.   "editor.codeActionsOnSave": {
3.     "source.fixAll.eslint": "explicit"
4.   }
5. }

复制代码

我在这一步碰到了一个题目，就是生存文件的时候修改并没有生效，搜刮了一下，很大概率还是缺少了eslint文件，由于前面缺失了一节课，所以我就按照自己的步骤往下添加。
先在根目录下载eslint，指令为下列代码中的第一句，然后在根目录创建一个文件.eslintrc.js，其中的设置如下,module会有报红波浪线，不消理会，记得文件前面要加.否则没效果，生存好了之后可以任意拿一个文件进行修改，会看到单引号路径会报错，生存后会自动修改为双引号，就表现设置生效了。

1. npm install eslint --save-dev

复制代码

1. // .eslintrc.js
2. module.exports = {
3.   env: {
4.     browser: true,
5.     es2021: true,
6.   },
7.   extends: [
8.     "eslint:recommended",
9.     "plugin:react/recommended",
10.     "plugin:@typescript-eslint/recommended",
11.     "plugin:prettier/recommended",
12.   ],
13.   parser: "@typescript-eslint/parser",
14.   parserOptions: {
15.     ecmaVersion: "latest",
16.     sourceType: "module",
17.   },
18.   plugins: ["react", "@typescript-eslint"],
19.   rules: {
20.     // 你的规则配置
21.   },
22. };

复制代码

提交到github堆栈

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

1. cd ～/.ssh

复制代码

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

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

复制代码

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

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

复制代码

接下来就是在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文件，没有的话就实验下面的步骤

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

复制代码

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

1. ping github.com

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。