接触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的入口文件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • jHipster - 微服务搭建 CC_简书[https://www.jianshu.com/u/be0d56c4...
    quanjj阅读 847评论 0 2
  • React简介 React是一个用于构建用户界面的JavaScript库。React主要用于构建UI,很多人认为R...
    LU7IN阅读 703评论 0 1
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,895评论 25 709
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,721评论 7 110
  • 简介 职责链使多个对象都有机会处理请求,将这些对象连成一条链,并沿着这条链传递该请求,知道有一个对象处理他为止。避...
    卡卡卡卡颂阅读 185评论 0 0