在开始实践之前要确保搭建React单页面开发环境,如果还没有搭建好开发环境的朋友请移步到如何搭建React单页面开发环境

首先在命令行模式下创建一个React项目(项目名使用小写字母命名):(win10的命令行打开方式有很多种)例如 WINDOWS键+R,它会在左下角弹出一个窗口

输入cmd回车即可打开命令行模式。

在命令行中输入

create-react-app 项目名

当命令行提示Happy hacking! 则提示项目创建成功。

输入下行命令进入创建的项目

cd test-antd

在命令行模式下安装蚂蚁金服的Antd组件库

yarn add antd  或者 npm install antd --save

最后测试一下能否正常运行项目

yarn start 或 npm start

当你把这一行命令敲上去之后,成功的页面是这样的

接下来打开Antd组件库官网

react项目使用antd的更多相关文章

  1. react项目中antd组件库的使用需要注意的问题

    antd是蚂蚁金服推出的ui组件库,给我们在react项目开发中提供了大大的便利.但在使用的过程中,或多或少的会遇到一些问题,毕竟,用的是别人的东西,就得遵守别人的规则嘛!官方文档:https://a ...

  2. react项目结合echarts,百度地图实现热力图

    一.最近在一个react项目(antd pro)中需要展示一个热力地图.需求是: 1.热力地图可缩放: 2.鼠标点击可以展示该点地理坐标,及热力值. 3.初始化时候自适应展示所有的热力点. 4.展示热 ...

  3. react项目中使用antd

    1.antd官网: https://ant.design/docs/react/introduce-cn 2.React中使用Antd 1.安装antd npm install antd --save ...

  4. 使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目

    1.安装.构建 # 全局安装 npm install -g create-react-app # 构建一个my-app的项目 npx create-react-app my-app cd my-app ...

  5. react项目中使用less并修改antd主题样式

    一.react项目中使用less 1. 安装配置 npm i -D less less-loader 2. 查看webpack配置 npm run eject 此操作不可逆,生成新的目录. 3. 修改 ...

  6. 七天接手react项目 系列 —— 尾篇(antd 和 mobx)

    其他章节请看: 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识.react 脚手架创建项目.react 路由,已经花费了不少时间,但距离接手 spug_web 项目还有一 ...

  7. React项目搭建与部署

    React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...

  8. react + react-router + less +antd 开发环境

    react + react-router + less +antd 开发环境搭建 1.基于create-reacte-app,需要先安装这个脚手架,然后初始化项目. 2.进入项目目录,首先 npm r ...

  9. React项目

    React项目 React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人 ...

随机推荐

  1. Libev源码分析01:Libev中的监视器结构(C结构体实现继承)

    在Libev的源码中,用到了一种用C实现类似C++中继承的技巧,主要是用宏和结构体实现. 在Libev中,最关键的数据结构就是各种监视器,比如IO监视器,信号监视器等等.这些监视器的多数成员都是一样的 ...

  2. better-scroll在移动端绑定click事件失效

    在做一个列表的时候需要点击列表将列表信息输出,给<li>加个一个很简单的@click,可是没有反应. 原因是使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加 ...

  3. 关于XIFF开发IM的一些想法

    因为发现网上XIFF的资料真的不多,何况现在gg又被和谐,查询资料很是不便.我写这篇文章的目的除了跟大家分享一些开发心得,也希望有类似经验的朋友看到文章后有机会多多交流. 之前我没有怎么接触过flas ...

  4. PHP调用纯真IP数据库返回具体地址

    function convertip($ip) { $ip1num = 0; $ip2num = 0; $ipAddr1 =""; $ipAddr2 =""; ...

  5. Jenkins安装总结

    Jenkins官方文档说的安装步骤,http://jenkins.io/zh/doc/pipeline/tour/getting-started/ 相关安装资源可在官方文档下载 安装Jenkins之前 ...

  6. IDEA sql自动补全/sql自动提示/sql列名提示

    一.启用idea的database插件 File->Settings->Plugins 搜索Database Tools and SQL 选择Enable 启用或者勾选 二.新建Datab ...

  7. 第一章 区块链系列 联盟链FISCO BCOS 底层搭建

    想了解相关区块链开发,技术提问,请加QQ群:538327407 FISCO BCOS 基础安装教程:https://fisco-bcos-documentation.readthedocs.io/zh ...

  8. linux 字符设备注册

    如我们提过的, 内核在内部使用类型 struct cdev 的结构来代表字符设备. 在内核调用你 的设备操作前, 你编写分配并注册一个或几个这些结构. [11] 11为此, 你的代码应当包含 < ...

  9. 11-28-----vertor和list使用场景

    1.vector拥有一段连续的内存空间,因此支持随机访问,如果需要高效的随机访问,而不子啊胡插入和删除的效率,使用vector, 2.list拥有一段不连续的内存空间,如果需要高效的插入和删除,而不关 ...

  10. python写的有声小说爬虫

    querybook.py from bs4 import BeautifulSoup from lxml import html import xml import requests import s ...