【React】项目的搭建

Moon里

已于 2025-04-18 16:08:58 修改

阅读量447

点赞数 12

分类专栏： React 文章标签： react.js

于 2025-04-17 18:57:35 首次发布

本文链接：https://blog.csdn.net/qq_57567877/article/details/147131511

版权

React 专栏收录该内容

6 篇文章

订阅专栏

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中的依赖包，无需手动修改删除

项目目录：

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 搭建

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
不建议直接暴露文件的不可逆操作，建议使用 craco （create-react-app config）在 React 脚手架的基础上进行 Webpack 配置。具体内容在Webpack\Vite栏中查看

如何在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