在前端开发过程中，有涉及到使用antd组件部分。在项目中加一个antd,调整组件的大小、位置、颜色，花费时间比较多，效率不高，可以通过本文叙述的方式建立一个前端demo，用于调整组件的大小、位置、颜色，验证组件的用法等，提高开发效率。
在进行下述操作前，可以提前参考下述文章：
【新建一个react新项目】 新建一个react新项目_西晋的no1的博客-CSDN博客
1.新建一个文件夹
准备在该文件夹下新建react项目-demo。如文件夹名为test
2.新建原生react项目
进入上述新建的文件夹中，打开cmd,输入创建新项目的命令：create-react-app 项目名称
如： create-react-app hello-world
等待几分钟，新项目即可新建完成。
注：项目名称不能包含大写字母，可以用-分隔单词
创建成功后，会显示如下信息
后续需要使用的命令为： npm start
3.用IDEA打开新建好的react-demo项目文件夹
如：hello-world文件夹
打开后显示如下
4.在IDEA中添加启动命令
操作过程如下图
在弹出的页面添加start到脚本行，点击确定
配置添加完成后，如下图
5.启动项目
点击运行图标或者快捷键Shift + F10即可运行项目
6.查看启动结果
启动成功后，会自动打开页面；同时IDEA中会有访问路径提示，点击路径也能跳转到页面
7.删除多余文件，精简内容，便宜后续的测试和开发
删除下图中框选部分的3个文件，注意同步删除使用了这些文件的地方(也可以在启动项目时哪里报错就处理哪)
8.再次启动项目
启动方式同步骤5，成功启动项目后的现象与步骤6一致。
异常启动时在IDEA中显示如下，可以通过点击Line定位到出错点，进行代码修改，直到启动成功再继续往下
9.复制App.js文件，重新命名。
如：App2.js
10.用antd组件代码覆盖App2.js中的代码
访问antd官网，进到组件页面，随便找一个实例的JavaScript代码，全部覆盖复制到App2.js中
antd官网组件： 组件总览 - Ant Design
11.安装antd
12.修改引用路径
上述已经将antd的组件写在App2.js中了，接下来修改引用路径，使其生效。
由于组件名没有修改，依然使用了App,因此在index.js中仅需要修改引用路径即可。
13.查看antd组件效果
修改后会自动同步到浏览器中，切换到浏览器查看，可以看到页面已经更新为antd的组件效果
