react-问卷星项目（1）
学习的一位MOOC老师的经验，记载一放学习的过程本项目技能栈：React18+TS4+AntDesign5+Next.js13
项目：低代码，B/C
react官方文档
https://i-blog.csdnimg.cn/direct/a8e489d862cd4dbb88b9b9b648a5edc4.png
核心价值：
组件化：不是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模块中添加如下语句，生存后使用第二句指令启动项目，会看到更改了相应操纵的文件目录，即将单引号更换为双引号，可自行查看是否生效。
https://i-blog.csdnimg.cn/direct/b61864eef33743c390c3a2ec529612fb.png
"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）
ping github.com
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]