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

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

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

react项目+antd组件-demo:hello-world_第1张图片

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

react项目+antd组件-demo:hello-world_第2张图片

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

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

如:hello-world文件夹

react项目+antd组件-demo:hello-world_第3张图片

打开后显示如下

react项目+antd组件-demo:hello-world_第4张图片

4.IDEA中添加启动命令

操作过程如下图

react项目+antd组件-demo:hello-world_第5张图片

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

react项目+antd组件-demo:hello-world_第6张图片

配置添加完成后,如下图

react项目+antd组件-demo:hello-world_第7张图片

5.启动项目

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

react项目+antd组件-demo:hello-world_第8张图片

6.查看启动结果

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

react项目+antd组件-demo:hello-world_第9张图片

react项目+antd组件-demo:hello-world_第10张图片

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

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

react项目+antd组件-demo:hello-world_第11张图片

8.再次启动项目

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

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

react项目+antd组件-demo:hello-world_第12张图片

9.复制App.js文件,重新命名。

如:App2.js

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

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

antd官网组件: 组件总览 - Ant Design

react项目+antd组件-demo:hello-world_第13张图片

react项目+antd组件-demo:hello-world_第14张图片

11.安装antd

react项目+antd组件-demo:hello-world_第15张图片

12.修改引用路径

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

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

react项目+antd组件-demo:hello-world_第16张图片

13.查看antd组件效果

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

react项目+antd组件-demo:hello-world_第17张图片

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

你可能感兴趣的:(react.js,前端,javascript)