接触antd design

antd design真的非常的棒！里面包含了许多的组件，同时也可以帮助初学react的小白更好地学习react，当然我也是众多小白中的一个。
废话不多说，我是在cerate-react-app的方法下使用的antd design
打开命令行(Win + R），首先先安装create-react-app(这里安装yarn)
$ npm install -g create-react-app yarn
然后新建一个项目
$ create-react-app antd-demo
接着进入项目目录并启动
$ cd antd-demo
$ yarn start
然后耐心地等待一会儿，浏览器显示Welcome to React之后就成功了第一步。
antd 是个库，所以我们要引入。现在从yarn 中引入安装并引入antd
$ yarn add antd
接着我们打开刚才创建的文件目录中，修改src/App.js,引入antd的按钮组件

1.png

然后就是修改src/App.css, 在文件顶部引入antd/dist/antd.css

2.png

发现浏览器上面有一个蓝色的按钮就代表成功了。
补充一下，先看一下crate-react-app生成的默认目录结构：

3.png

node_modules
项目依赖包存放位置。当我们运行npm install安装package.json中的依赖包是，该文件夹会自动创建，所有的依赖包会安装到该文件夹中。

public
主要的作用是html入口文件的存放。当然我们也可以存放其他公用的静态资源，如图片，css等。其中的index.html文件就是我们的项目入口html文件。

src
组件的存放目录。在create-react-app 创建的项目中，每一个单独的文件都可以被看成一个单独的模块，单独的image，单独的css，单独的js等，而所有的组件都存在src目录中，其中index.js是js的入口文件。