构建React框架的具体步骤是什么？

构建React框架的步骤：1.使用create-Reactapp创建项目。

2、 CSS重置

3.配置SCSS。

4.配置样式化组件。

5.使用React Router。

6.介绍SVG图标。

1.使用create-react-app创建项目：首先创建项目目录，将目录拖到VSCode中，输入create-react-app。--在终端上输入模板typescript，然后输入yarn start

如果您不想在每次启动yarn时自动打开浏览器，请在项目下创建一个名为的新文件。env，然后添加BROWSER=none

如果使用WebStorm，请添加/。gitignore的想法

如果使用vscode，请添加/。.gitignore中的VSCode

如果使用Git状态查找.ida或。vscode，添加以下代码：

git rm-rf--缓存.idagit rm.rf--缓存.vscode

然后提交代码，项目创建完成。

在创建的项目中，index.tsx文件中有一个React.StractMode，用于检查代码的有用或错误位置，并可将其删除。

创建react项目后，没有内置的Router、Redux和SCSS。如有必要，您可以根据文档自行安装。

2.CSS重置：重置样式，删除所有默认样式，并规范化：使所有浏览器的样式趋于相同。（使默认样式基本相同。）。

在索引Css处添加@import normalize；好的。但是，默认样式通常会被覆盖，因此它没有用处。

3.配置SCSS：（node-ass很难使用，因此不建议使用它，而不是dart-sass）终端输入：yarn add--devnode-sass@npm：dart-sass，然后将css文件后缀更改为scs以成功使用sass。

React长期以来支持SRC目录中的直接引用，因此为了css@import报价更方便。它可以直接和绝对地使用。

对于js的引用，首先使用tsconfig。在json中，compilerOptions较低，并添加了“quote”；baseUrl“："；src”，在这句话中，确保有“outside；include”：[“src”]这句话。然后，js可以直接引用具有低src的文件。

然后创建一个助手。scs文件存储变量、函数和其他公共事物。到目前为止，已经配置了css和js。

使用css，可以使用calssnName在标记上写上标签名，然后导入css文件。

在index.scss文件夹中设置全局样式。

4.配置样式化组件：除了在文件中放置CSS的方法外，还可以在JS scheme:样式化组件中使用CSS。

在终端上输入yarn add styled components和yarn add--dev@types/styled components

5.使用React Router：首先添加React Router及其typescript支持文件：

终端操作：yarn add react router dom和yarn add--dev@types/react router-dom，然后直接查看文档以供使用：

V6已升级。有关具体更改，请参阅：

默认路由需要被配置/“”；以及错误路由*”；

如果没有后台服务器，则只能使用哈希模式。如果有后台服务器，请将主页的所有路径配置为使用历史记录模式。

配置哈希模式：

只需将Router的类型更改为HashRouter。

6.SVG图标的介绍（如果直接引入SVG，则不能更改颜色，因此建议使用SVG符号）：可以导入但不能导入。

首先下载要使用的svg文件，然后在终端输入yarn eject（注意，弹出后webpack文件不会隐藏）。弹出成功后，请记住提交代码。接下来，在终端上输入yarn add--dev-svg sprite loader。成功后，打开config/webpack.config.js，返回模块规则oneOF，并在数组顶部添加代码：

｛test://.svg$/，使用：[｛loader:“svg sprite loader”，选项：｛｝｝，｛loader：“svgo loader”、选项：｛｝｝｝，]， ； ； ；}，然后，终端添加“svgo-loader”：yarn add--devsvgo-lloader

然后再次运行纱线，您可以使用它。

如何使用它：（TreeShaking不适用于require，但适用于导入，因此使用require更方便，因为需要调用import才能显示svg，而rquire则不适用。）

require（“icons/money.svg”）；&书信电报；svg fill=“red”className=“icon”>；&书信电报；使用xlinkHref=“#money”/>；<；/svg>然后可以设置图标的样式。

最后，需要一个目录/文件夹来方便svg的导入。

输入以下代码之一：

let importAll=（requireContext：__WebpackModuleApi.requireContext）=>requireContext.keys（）.forEach（requireContext）；尝试｛importAll（require.context（“icons”，true，/\.svg$/））；｝catch（error）｛console.log（error）；}然后，终端输入：yarn add--dev@types/webpack-env，eliminting__WebpackModuleApi警告。

然后在上下文之后输入svg路径，然后关闭并重新启动。没关系此时，您可以自定义图标组件