【React】项目的搭建

  • [create-react-app 搭建](#create-react-app 搭建)
  • [vite 搭建](#vite 搭建)
  • 相关下载

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

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

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

create-react-app 搭建

脚手架搭建:

javascript 复制代码
npx create-react-app myapp

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

javascript 复制代码
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中的依赖包,无需手动修改删除

项目目录:

html 复制代码
public
		index.html:单页面应用的入口,唯一的html
		manifest.json:移动端app配置文件(等同于uniApp中的manifest.json)
		robots.txt:爬虫协议,给搜索引擎看的,这个协议没有强制性,它是用于pc端的(小程序中的爬虫协议是sitemap.json)
src
		App.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 搭建

javascript 复制代码
npm create vite@latest



javascript 复制代码
npm create vite@latest myapp -- --template react 

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

相关下载

AntD:npm install antd --save

xml 复制代码
官网: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

xml 复制代码
ReactRouter包含三个内容:

(1) react-router:核心库
(2) react-router-dom:正常PC用的
(3) react-router-native:移动native用的

Sass:npm i sass

javascript 复制代码
如何在React中使用Less | Sass

sass
	(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

清理项目,将多余的文件不要的内容删除

相关推荐
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
然我16 小时前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html
马特说19 小时前
React金融数据分析应用性能优化实战:借助AI辅助解决18万数据量栈溢出Bug
react.js·金融·数据分析
归于尽19 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课19 小时前
React useEffect 详解与运用
前端·react.js
中微子20 小时前
React Props 传值规范详解
前端·react.js
卸任20 小时前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js
LeeAt20 小时前
React Hooks 编程:useState和useEffect的详解
前端·react.js
Dream耀20 小时前
React Hooks 指南:useState 与 useEffect 的用法与技巧
前端·javascript·react.js
我想说一句20 小时前
React Hooks 生存指南:让你的函数组件"活"起来 🧬
前端·javascript·react.js