React+Antd表单搭建

Antd 是 React 中广泛使用的 UI 框架。本教程将逐步演示如何在 React 项目中使用 Antd 的 Form 组件构建表单界面。

1、 安装 Ant Design 及相关依赖组件

2、 安装 Ant Design 组件库

3、 安装React路由组件

4、 安装 Webpack 工具

5、 安装 Babel 节点相关工具与依赖

6、 安装对应的加载器工具

7、 配置 Babel，创建 .babelrc 文件。

8、 添加如下内容：

9、 {

10、 ],

11、 }]

12、 ]

13、 }

14、 设置Webpack配置

15、 创建 webpack.config.js 文件并进行配置。

16、 加入以下内容：全新启程

17、 页面主文件配置设置

18、 配置入口文件输出内容

19、 },

20、 加载器设置

21、 {

22、 },

23、 {

24、 },

25、 {

26、 }

27、 ]

28、 }

29、 }

30、 文件夹设置

31、 创建名为src的文件夹

32、 创建名为dist的新文件夹

33、 在src目录下创建名为react.js的新文件。

34、 在src目录下创建一个名为react.jsx的新文件。

35、 在dist目录下创建一个新的index.html文件。

36、 在项目根目录下创建名为server.js的文件。

37、 最终文件目录所示

38、 开发表单组件

39、 在react.js文件中加入如下代码内容。

40、 )

41、 在react.jsx文件中添加如下代码内容。

42、 }

43、 }

44、 )

45、 }

46、 }

47、 在server.js中添加如下代码内容：

48、 });

49、 })

50、 在 index.html 文件中插入如下代码内容：

51、 打包后浏览器校验

52、 封装

53、 启动Express服务

54、 浏览器中输入网址访问

55、 点击提交后，控制台将显示hello信息。