react项目+antd组件-demo:hello-world

╰半橙微兮° 2023-10-12 08:31 25阅读 0赞

在前端开发过程中，有涉及到使用antd组件部分。在项目中加一个antd,调整组件的大小、位置、颜色，花费时间比较多，效率不高，可以通过本文叙述的方式建立一个前端demo，用于调整组件的大小、位置、颜色，验证组件的用法等，提高开发效率。

在进行下述操作前，可以提前参考下述文章：

【新建一个react新项目】 [新建一个react新项目\_西晋的no1的博客-CSDN博客][react_no1_-CSDN]

## **1.****新建一个文件夹** ##

准备在该文件夹下新建react项目-demo。如文件夹名为test

## **2.****新建原生****react****项目** ##

进入上述新建的文件夹中，打开cmd,输入创建新项目的命令：create-react-app 项目名称

如： create-react-app hello-world

等待几分钟，新项目即可新建完成。

**注：**项目名称不能包含大写字母，可以用-分隔单词

![96a364391ff94bbe96d4ba475161f462.png][]

创建成功后，会显示如下信息

![6625a036f17642e4ba059a49cb4db0cc.png][]

后续需要使用的命令为： npm start

## **3.****用****IDEA****打开新建好的****react-demo****项目文件夹** ##

如：hello-world文件夹

![847a311378bc445e8115b387b2d93867.png][]

打开后显示如下

![641db18a7e9941be8938b3a5f4859525.png][]

## **4.****在****IDEA****中添加启动命令** ##

操作过程如下图

![84fc1dfb0a9c4309b37b33d22e79cebc.png][]

在弹出的页面添加start到脚本行，点击确定

![96b0bba3c9834fb380d339f77a7e7043.png][]

配置添加完成后，如下图

![bbb96c03692d48c1a7e022a2bc11292f.png][]

## **5.****启动项目** ##

点击运行图标或者快捷键Shift + F10即可运行项目

![2cc46767882e452fb2e5a9039d2604e6.png][]

## **6.****查看启动结果** ##

启动成功后，会自动打开页面；同时IDEA中会有访问路径提示，点击路径也能跳转到页面

![f7f29d7a0b8a4bc7b0cfd2ae3d7a3f25.png][]

![00abb147e60e4af8baf4b748aa481cbb.png][]

## **7.****删除多余文件，精简内容，便宜后续的测试和开发** ##

删除下图中框选部分的3个文件，注意同步删除使用了这些文件的地方(也可以在启动项目时哪里报错就处理哪)

![dd18ed3b60d148adaf66be883a8a2ee1.png][]

## **8.****再次启动项目** ##

启动方式同步骤5，成功启动项目后的现象与步骤6一致。

异常启动时在IDEA中显示如下，可以通过点击Line定位到出错点，进行代码修改，直到启动成功再继续往下

![d68273c1b7b04500849b77fc71bdc491.png][]

## **9.****复制****App.js****文件，重新命名。** ##

如：App2.js

## **10.****用****antd****组件代码覆盖****App2.js****中的代码** ##

访问antd官网，进到组件页面，随便找一个实例的JavaScript代码，全部覆盖复制到App2.js中

antd官网组件： [组件总览 - Ant Design][- Ant Design]

![fa7a35513aef45989ca77b80a3bc75c9.png][]

![f112a76ae64441388d979dd3caba14a1.png][]

## **11.****安装****antd** ##

![945576aa61d742f391963142de4fd7cd.png][]

## **12.****修改引用路径** ##

上述已经将antd的组件写在App2.js中了，接下来修改引用路径，使其生效。

由于组件名没有修改，依然使用了App,因此在index.js中仅需要修改引用路径即可。

![5f563eba8eb944a2b3297b46c440f98c.png][]

## **13.****查看****antd****组件效果** ##

修改后会自动同步到浏览器中，切换到浏览器查看，可以看到页面已经更新为antd的组件效果

![e71408616ec4444ca770c85eaac8b9f1.png][]

项目工程下载链接： [https://download.csdn.net/download/xijinno1/87866757][https_download.csdn.net_download_xijinno1_87866757]

[react_no1_-CSDN]: https://blog.csdn.net/xijinno1/article/details/129787496
[96a364391ff94bbe96d4ba475161f462.png]: https://img-blog.csdnimg.cn/96a364391ff94bbe96d4ba475161f462.png
[6625a036f17642e4ba059a49cb4db0cc.png]: https://img-blog.csdnimg.cn/6625a036f17642e4ba059a49cb4db0cc.png
[847a311378bc445e8115b387b2d93867.png]: https://img-blog.csdnimg.cn/847a311378bc445e8115b387b2d93867.png
[641db18a7e9941be8938b3a5f4859525.png]: https://img-blog.csdnimg.cn/641db18a7e9941be8938b3a5f4859525.png
[84fc1dfb0a9c4309b37b33d22e79cebc.png]: https://img-blog.csdnimg.cn/84fc1dfb0a9c4309b37b33d22e79cebc.png
[96b0bba3c9834fb380d339f77a7e7043.png]: https://img-blog.csdnimg.cn/96b0bba3c9834fb380d339f77a7e7043.png
[bbb96c03692d48c1a7e022a2bc11292f.png]: https://img-blog.csdnimg.cn/bbb96c03692d48c1a7e022a2bc11292f.png
[2cc46767882e452fb2e5a9039d2604e6.png]: https://img-blog.csdnimg.cn/2cc46767882e452fb2e5a9039d2604e6.png
[f7f29d7a0b8a4bc7b0cfd2ae3d7a3f25.png]: https://img-blog.csdnimg.cn/f7f29d7a0b8a4bc7b0cfd2ae3d7a3f25.png
[00abb147e60e4af8baf4b748aa481cbb.png]: https://img-blog.csdnimg.cn/00abb147e60e4af8baf4b748aa481cbb.png
[dd18ed3b60d148adaf66be883a8a2ee1.png]: https://img-blog.csdnimg.cn/dd18ed3b60d148adaf66be883a8a2ee1.png
[d68273c1b7b04500849b77fc71bdc491.png]: https://img-blog.csdnimg.cn/d68273c1b7b04500849b77fc71bdc491.png
[- Ant Design]: https://ant.design/components/overview-cn/
[fa7a35513aef45989ca77b80a3bc75c9.png]: https://img-blog.csdnimg.cn/fa7a35513aef45989ca77b80a3bc75c9.png
[f112a76ae64441388d979dd3caba14a1.png]: https://img-blog.csdnimg.cn/f112a76ae64441388d979dd3caba14a1.png
[945576aa61d742f391963142de4fd7cd.png]: https://img-blog.csdnimg.cn/945576aa61d742f391963142de4fd7cd.png
[5f563eba8eb944a2b3297b46c440f98c.png]: https://img-blog.csdnimg.cn/5f563eba8eb944a2b3297b46c440f98c.png
[e71408616ec4444ca770c85eaac8b9f1.png]: https://img-blog.csdnimg.cn/e71408616ec4444ca770c85eaac8b9f1.png
[https_download.csdn.net_download_xijinno1_87866757]: https://download.csdn.net/download/xijinno1/87866757