【React】项目的搭建

create-react-app 搭建
vite 搭建
相关下载

在Vue中搭建项目的步骤：1.首先安装脚手架的环境，2.通过脚手架的指令创建项目

在React中有两种方式去搭建项目：1.和Vue一样，先安装脚手架然后通过脚手架指令搭建；2.npx create-react-app my-app （项目名称小写的英文字母）

npm和npx的区别：npm搭建的命令环境，( 脚手架版本 )不会再发生变化。npx创建的项目永远是最新的( 脚手架版本 )，它不用下载环境，直接创建项目

create-react-app 搭建

脚手架搭建：

npx create-react-app myapp

如果不想安装最新的react版本怎么办需要版本升级或降级：

npm i react-dom@18.3.1 --legacy-peer-deps
npm i react@18.3.1 --legacy-peer-deps执行以上命令会自动更新package.json中react-dom和react的版本号以及node_modules中的依赖包，无需手动修改删除

项目目录：

publicindex.html：单页面应用的入口，唯一的htmlmanifest.json：移动端app配置文件（等同于uniApp中的manifest.json）robots.txt：爬虫协议，给搜索引擎看的，这个协议没有强制性，它是用于pc端的（小程序中的爬虫协议是sitemap.json）
srcApp.css：根组件的css文件App.js：根组件的js文件App.test.js：根组件的测试文件（可以不要）index.css：全局css文件index.js：主入口js文件（类似于vue的main.js）reportWebVitals.js：配置测试用的（可以不要）setupTests.js：在它里面配置引入了测试文件/模块（可以不要）.gitignore：git文件，哪些文件不需要上传package.json：项目对npm各种包的依赖，但是它锁定的是大版本，也就是版本号第一位如："react": "^18.3.1"，锁定的是18如果有向上的标号"^"，是根据情况下载最新的包，所以实际上可能项目中的包版本是"react": "^18.3.3"package-lock.json：锁定安装时的包的版本号，需要上传到git，保证大家的依赖包一致

在这里插入图片描述

vite 搭建

npm create vite@latest

在这里插入图片描述

npm create vite@latest myapp -- --template react npm create vite@latest myapp -- --template react-ts

在这里插入图片描述

相关下载

AntD：npm install antd --save

官网：https://ant.design/docs/spec/introduce-cn  （蚂蚁金服的UI框架Ant Design）Ant Design它提供组件库：React基于移动端的组件库：Ant Design Mobile  <!-- https://mobile.ant.design/zh/ -->Vue各个版本： Ant Design of Vue  <!-- https://antdv.com/docs/vue/introduce -->Angular：Ant Design of Angular  <!-- https://ng.ant.design/docs/introduce/zh -->(1) 使用的时候，在组件内引入，按需加载import {Button} from 'antd';<Button type="primary">Primary Button</Button>(2) 引入主文件，src > App.css中引入（重置默认样式表，或者其它的如：Normalize.css）@import '~antd/dist/reset.css';

路由：npm i react-router-dom

ReactRouter包含三个内容：(1) react-router：核心库
(2) react-router-dom：正常PC用的
(3) react-router-native：移动native用的

Sass：npm i sass

如何在React中使用Less | Sasssass(1) npm i sass(2) src > App.scss（sass文件的后缀有两种：.scss 或 .sass，前者更符合我们的代码编写习惯）less(1) npm i less less-loader（less-loader可以把less转成css）(2) 改react的配置项目create-react-app的配置文件被作者隐藏起来了，需要暴露配置文件首先需要将项目提交到本地仓：git add .git commit -m 'init'(3) npm run eject （暴露配置，弹出配置操作是不可逆的）(4) config文件夹下 => webpack.config.js文件 （具体修改内容查看文件中，修改了配置文件后重启一下项目）快捷键：ctrl + f，查找输入：scss，修改后即可在React中使用Less