React学习笔记—Ant Design组件库

  1. 一、Ant Design组件库介绍
  2. 二、Ant Design组件库的安装与使用
    1. 1、安装Ant Design
    2. 2、在页面中使用Ant Design

一、Ant Design组件库介绍

Ant Design 是一个致力于提升『用户』和『设计者』使用体验的设计语言 ;旨在统一中台 项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源; 包含很多设计原则。

React常用的框架:


二、Ant Design组件库的安装与使用

1、安装Ant Design

npm isntall antd --save
yarn add antd

2、在页面中使用Ant Design

css 样式文件引入到 index.js 文件当中

import React from 'react'; // React 核心库
import ReactDOM from 'react-dom'; // 操作DOM的包
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker'; // 帮项目做好缓存,加载更快
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

// ReactDOM.render("根组件","节点")
// new Vue({}).$mount("#root") vue写法

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

在页面中使用简单的按钮:

import { Button } from 'antd';

ReactDOM.render(
  <div>
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="link">Link</Button>
  </div>,
  mountNode,
);

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:React学习笔记—Ant Design组件库

文章字数:370

本文作者:Spicy boy

发布时间:2020-04-30, 12:58:05

最后更新:2020-08-26, 13:06:28

原始链接:http://www.spicyboy.cn/2020/04/30/React%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94Ant-Design%E7%BB%84%E4%BB%B6%E5%BA%93/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏