一个新的React项目我们该如何配置

news2024/11/5 10:56:22

最近组长让我负责一个新的项目,项目的技术栈是React + typescript + redux + and design,一个工龄1年的小白菜只能先去github找开源项目看看他们做了哪些配置,然后去百度这些配置改如何安装。下面就是我记录一个新的React项目配置的过程。

安装react

npx create-react-app my-app --template typescript

安装完成过后,后序我们可能需要修改一下webpack,比如我们使用到less,那肯定安装对应的loader去解析,因此需要把react的webpack配置暴露出来。进入项目的根目录,然后使用以下命令:

yarn eject

执行效果如下,等待完成即可。
在这里插入图片描述
执行到这里发现所有JS文件都会报错,没有更好。
在这里插入图片描述
只需要到package.json文件中加点配置即可,终于不报错,强迫症又好了。

"eslintConfig": {
	"extends": [
		"react-app",
		"react-app/jest"
	],
	// 下面就是要加的配置
	"parserOptions": {
		"babelOptions": {
			"presets": [
				[
					"babel-preset-react-app",
					false
				]
			]
		}
	}
},

配置路由

安装react-router, 如果不指定版本就会安装最新的;v6很多api不同了,要注意一下。

yarn add react-router-dom@^5.1.3

由于使用的是typescript,还需要typescript的支持,还需要安装@types/react-router-dom

yarn add @types/react-router-dom@^5.1.3 -D
简单的使用一下路由看看是否生效

在这里插入图片描述
访问一下页面,功夫不负有心人,它竟然成了。这里只是简单的测试一下路由功能是否正常,具体代码还需要根据业务来调整。

在这里插入图片描述

配置less预编译

安装解析less文件的loader,尽量指定一下版本,如果包太新了说不定有问题,稳一手。

yarn add less@^3.13.1 less-loader@^7.3.0

上面不是执行了yarn eject命令了,就会出现config文件夹里面有webpack,我们就要在里面做些手脚了。

  • 添加less的正则
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 新增的就是下面的两行
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
  • 然后去oneOf数组追加两个对象,添加关于less的loader
{
	test: lessRegex,
	exclude: lessModuleRegex,
	use: getStyleLoaders(
		{
			importLoaders: 2,
			sourceMap: isEnvProduction && shouldUseSourceMap,
		},
		"less-loader"
	),
	sideEffects: true,
},
{
	test: lessModuleRegex,
	use: getStyleLoaders(
		{
			importLoaders: 2,
			sourceMap: isEnvProduction && shouldUseSourceMap,
			modules: true,
			getLocalIdent: getCSSModuleLocalIdent,
		},
		"less-loader"
	),
},

赶紧去实验一下,less到底有没有配置成功,还真可以,稳妥的很。
在这里插入图片描述

配置一下redux

肯定要先安装一个redux

yarn add @reduxjs/toolkit react-redux

redux-toolkit是目前redux官方推荐的编写redux逻辑的方法,针对redux的创建store繁琐、样板代码太多、依赖外部库等问题进行了优化,官方总结了四个特点是简易的/有想法的/强劲的/高效的,总结来看,就是更加的方便简单了。
在这里插入图片描述
下面有具体代码

创建一个Redux State Slice
import { createSlice } from "@reduxjs/toolkit";

export interface CounterStateType {
	value: number;
}

const initialState: CounterStateType = {
	value: 0,
};

export const counterSlice = createSlice({
	name: "counter",
	initialState,
	reducers: {
		increment: (state) => {
			// Redux Toolkit允许我们在reducers中直接写改变state的逻辑.
			// 由于使用了Immer库,所以并没有真的改变state
			// 而是检测到“草稿state”的更改并根据这些更改生成一个全新的不可变state
			state.value += 1;
		},
		incrementByAmount: (state, action) => {
			state.value += action.payload;
		},
	},
});

// reducer方法的每一个case都会生成一个Action
export const { increment, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;
将reducer添加进Store
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./features/counter/counterSlice";

export const store = configureStore({
	reducer: {
		counter: counterReducer,
	},
});

// 下面两个type,在组件里面会用到
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
在react中使用store
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import MainRouter from "./router";
import { Provider } from "react-redux";
import { store } from "./store";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
	<Provider store={store}>
		<MainRouter>
			<App />
		</MainRouter>
	</Provider>
);
页面中使用redux state和action
import React from "react";
import "./index.less";
import { useSelector, useDispatch } from "react-redux";
import {
  increment,
  incrementByAmount
} from "../../store/features/counter/counterSlice";
import { RootState } from "../../store";

interface IProps {
  title: string;
}

const Home: React.FC<IProps> = (props: IProps) => {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();
  return (
    <div>
      <h1>home page{count}</h1>
      <button
        onClick={() => {
          dispatch(increment());
        }}
      >
        +1
      </button>

      <button
        onClick={() => {
          dispatch(incrementByAmount(5));
        }}
      >
        +5
      </button>
    </div>
  );
};

export default Home;
最终效果

在这里插入图片描述

配置ant design

yarn add antd@^4.24.5

v5太新了不敢用,用个v4的稳一手;按照官网全局注入antd.css样式,页面使用组件。大功告成
在这里插入图片描述

项目规范问题

可以参考:https://blog.csdn.net/qq_39583550/article/details/125458727

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/95831.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

知识图谱有哪些应用领域?

知识图谱通常应用于自然语言处理和人工智能领域&#xff0c;常用于提高机器学习模型的准确性和效率。它还可以用于数据挖掘、信息检索、问答系统和语义搜索等领域。近年来知识图谱在电子商务、金融、公安、医疗等行业逐步开始落地&#xff0c;在这些行业的渗透、深入中&#xf…

部门还有谁在? 已经没几个人了~

正文大家好&#xff0c;我是bug菌&#xff5e;终于熬过了阳性的第三天&#xff0c;症状相对没之前那么痛苦了&#xff0c;打算要家里面的兄弟帮忙处理点事情&#xff0c;一个电话打过去&#xff0c;没想到整个部门都没几个人了&#xff0c;病毒的毒性是减弱了&#xff0c;这传染…

Linux进程概念(一)

Linux进程概念冯诺依曼体系结构操作系统操作系统是什么操作系统与硬件的关系操作系统如何管理硬件数据操作系统与软件的关系操作系统的安全操作系统的服务系统调用和库函数概念进程的基本概念什么是进程如何查看进程进程常见的调用冯诺依曼体系结构 常见的计算机&#xff08;台…

牛客题霸sql入门篇之条件查询(三)

牛客题霸sql入门篇之条件查询(三) 3 高级操作符 3.1 高级操作符练习(1) 3.1.1 题目内容 3.1.2 示例代码 SELECT device_id,gender,age,university,gpa FROM user_profile WHERE gendermale AND gpa>3.53.1.3 运行结果 3.1.4 考察知识点 AND关键字表示会筛选出符合左右两…

java DDD领域分层架构设计思想

1为什么要分层 高内聚&#xff1a;分层的设计可以简化系统设计&#xff0c;让不同的层专注做某一模块的事低耦合&#xff1a;层与层之间通过接口或API来交互&#xff0c;依赖方不用知道被依赖方的细节复用&#xff1a;分层之后可以做到很高的复用扩展性&#xff1a;分层架构可…

正则表达式总结

React15前的渲染方式 React15以前&#xff0c;React是用全量渲染的方式进行页面渲染&#xff0c;每次更新都需要整个页面重新渲染。全量当数据量大的时候&#xff0c;页面就会掉帧卡顿。 为什么需要React Fiber 为了解决上述React15带来的卡顿问题&#xff0c;我们不能让一个…

PG::PyExp

nmap -Pn -p- -T4 --min-rate1000 192.168.115.118 nmap -Pn -p 1337,3306 -sCV 192.168.115.118 1337端口是ssh服务&#xff0c;3306是数据库&#xff0c;没有web服务&#xff0c;只能尝试进行爆破。 由于不知道ssh用户名&#xff0c;所以尝试root用户爆破3306端口。 hydra …

昆仑万维或将引领国内 AIGC 技术发展

AIGC 发展历程 如果说 2021 年是元宇宙元年&#xff0c;那么 2022 年绝对可以称作 AIGC 元年。自从 Accomplice 于 2021 年 10 月推出 Disco Diffusion 以来&#xff0c;AIGC 受到了前所未有的关注&#xff0c;相关产品和技术更是以井喷之势快速更新迭代。 AIGC&#xff08;A…

C++ Reference: Standard C++ Library reference: Containers: map: map: rend

C官网参考链接&#xff1a;https://cplusplus.com/reference/map/map/rend/ 公有成员函数 <map> std::map::rend C98 reverse_iterator rend(); const_reverse_iterator rend() const; C11 reverse_iterator rend() noexcept; const_reverse_iterator rend() const noe…

Unity - 搬砖日志 - MatierlaPropertyDrawer 中的参数如何匹配 - 自定义 Attribute 的参数提取

环境 Unity : 2020.3.37f1 搬一下砖&#xff0c;并记录&#xff0c;免得后续重新搬砖 完成的测试shader Shader "Unlit/TestMyEnuMatAttributeShader" {Properties{_MainTex ("Texture", 2D) "white" {}[MyEnumMatAttribute] _TestProp (&quo…

前端CSS实现苹果官网文字渐入效果

效果 分析 文字是从左到有慢慢呈现出来&#xff0c;不是整体消失和出现&#xff0c;那么肯定不能使用透明度。 我们可以想到渐变文字&#xff0c;然后通过改变背景的位置来控制文字的显示与隐藏。 渐变文字 渐变文字该如何实现呢&#xff1f;这是实现这个效果的关键步骤。 其…

计算机毕设Python+Vue校园闲置物品管理系统的实现(程序+LW+部署)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

看了那么多SSM整合,这一篇真的很用心。

1.邂逅 SSM 前言 记得大二上学期老师第一次讲 SSM 整合的时候&#xff0c;自己竟然浑浑噩噩睡过去了。 平时上课不好好听讲&#xff0c;后来听说期末要交大作业了&#xff0c;只能被迫去网上自学。 不对。。。少打个S&#xff0c;不过这真的是我第一次搜 SSM 的资料&#xff0…

华新环保深交所上市:市值49亿 前9个月净利降幅近30%

雷递网 雷建平 12月16日华新绿源环保股份有限公司&#xff08;简称&#xff1a;“华新环保”&#xff0c;证券代码&#xff1a;301265&#xff09;今日在深交所上市。华新环保本次发行股票7575万股&#xff0c;发行价13.28元&#xff0c;募资10.06亿元。华新环保开盘价为16元&a…

爬虫应用场景的利弊分析

相信大家在春节的时候都有过抢火车票的经历&#xff0c;对一些抢票软件一定不会感到陌生。今天我们就来从技术的角度&#xff0c;来看看抢票软件背后的东西——爬虫。通俗点说&#xff0c;爬虫就是模拟人的行为去各个网站溜达&#xff0c;并把看到的信息背回来的探测机器。如今…

Swagger是什么?Swagger怎么用?

Swagger 是一个规范且完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。 Swagger 的目标是对 REST API 定义一个标准且和语言无关的接口&#xff0c;可以让人和计算机拥有无须访问源码、文档或网络流量监测就可以发现和理解服务的能力。当通过 S…

(直连主题扇形)交换机

目录 一、交换机简介 1. Exchange&#xff08;交换机&#xff09;的作用 2.Exchange&#xff08;交换机&#xff09;的类型 ①.直连交换机&#xff1a;Direct Exchange ② 主题交换机&#xff1a;Topic Exchange ③ 扇形交换机&#xff1a;Fanout Exchange ④ 首部交换机…

NMS与Soft NMS算法解析与numpy实现

1. NMS算法 1.1 什么是NMS算法 NMS全称为Non Maximum Suppression&#xff0c;中文意思是非极大值抑制&#xff0c;字面意思就是不是极大值的元素被抑制掉&#xff0c;其实就是筛选出局部最大值得到最优解。NMS算法被广泛运用于目标检测算法处理网络输出的边界框。 1.2 为什…

【HTML基础篇002】HTML之form表单超详解

文章目录 &#x1f304;一、form表单是什么 &#x1f304;二、form表单的属性 &#x1f304;三、input中的各种Type属性值 &#x1f304;四、标签 &#x1f304;一、form表单是什么 表单是一个包含表单元素的区域。表单用于向服务器传输数据&#xff0c;从而实现用户与Web服…

jsp+ssm计算机毕业设计潮流服饰网店平台【附源码】

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; JSPSSM mybatis Maven等等组成&#xff0c;B/S模式 Mave…