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

在前端开发过程中，有涉及到使用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的组件效果

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