React+AntDesign学习系列之《搭建React+AntDesign框架》

约定不等于承诺〃 2023-06-23 10:56 10阅读 0赞

### react学习之路 ###

*  react+AntDesign搭建
 *   *  环境准备
     *  全局安装create-react-app脚手架
     *  创建项目命名为：antd-demo1
     *  引入Ant Design组件库
     *  启动项目

# react+AntDesign搭建 #

大家好！之前有做过react+AntDesign的项目，但是都是别人搭建好的，我需要实现功能就可以，现在有时间了，想好好钻研一下，往深层学习一下

## 环境准备 ##

1.安装Noje.js(全局安装)  
这块的教程可以参照一下我的另一篇博文：  
[ https://blog.csdn.net/weixin\_36775115/article/details/93074279][https_blog.csdn.net_weixin_36775115_article_details_93074279].

## 全局安装create-react-app脚手架 ##

npm install -g create-react-app yarn

## 创建项目命名为：antd-demo1 ##

create-react-app antd-demo1

我安装的时候遇到了这个问题：解决方法在我的下一个博文里面：  
[https://blog.csdn.net/weixin\_36775115/article/details/103599176][https_blog.csdn.net_weixin_36775115_article_details_93074279].  
![在这里插入图片描述][2019121816533951.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 1]

## 引入Ant Design组件库 ##

npm add antd

![在这里插入图片描述][2019121817014898.png]

## 启动项目 ##

npm start
    网页会自动打开：
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191218170536281.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ==,size_16,color_FFFFFF,t_70)
    此时此刻已大功告成！

[https_blog.csdn.net_weixin_36775115_article_details_93074279]: https://mp.csdn.net
[2019121816533951.png]: https://img-blog.csdnimg.cn/2019121816533951.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019121816590576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191218165835144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ==,size_16,color_FFFFFF,t_70
[2019121817014898.png]: https://img-blog.csdnimg.cn/2019121817014898.png