在开始实践之前要确保搭建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. Chrome接口请求一直是pending状态,但接口实际上是正常的

    1.现象 个别机器突然出现Chrome访问我司产品异常,本该通过接口获取的数据没有呈现,之前都是好好的,而且其他机器同样用同版本Chrome访问正常. 出现问题的机器重装Chrome问题依然存在,直到 ...

  2. [C#] WebClient性能优化

    WebClient缺省是为了安全和方便,不是为了性能.所以,当你打算做压力测试的时候,就会发现WebClient很慢. WebClient性能很差,主要原因有: 1.它缺省会使用IE的代理设置,而IE ...

  3. pip 将 某包指定到某目录 安装

    pip 将 某包指定到某目录  安装: pip install --target=d:\somewhere\other\than\the\default package_name

  4. 利用 jquery 获取某个元素下的所有图片并改变其属性

    HTML代码 <div id="mochu"> <p>内容....<./p> <p><img src="xxxx.p ...

  5. 日历价差(calendar spread)

    日历价差(calendar spread) 是指投资者买进到期日较远的期权 (简称远期期权),同时又卖出相同行权价格.相同数量但到期日较近的期权(简称近期期权),赚取两个不同期权隐含波动率的差价或者其 ...

  6. Codeforces Round #529 (Div. 3) E. Almost Regular Bracket Sequence(思维)

    传送门 题意: 给你一个只包含 '(' 和 ')' 的长度为 n 字符序列s: 给出一个操作:将第 i 个位置的字符反转('(' ')' 互换): 问有多少位置反转后,可以使得字符串 s 变为&quo ...

  7. Java日志框架——JCL

    JCL,全称为"Jakarta Commons Logging",也可称为"Apache Commons Logging". 一.JCL原理 1.基本原理 JC ...

  8. echarts 图表自适应外部盒子大小

    项目中用到了echarts,由于页面是自适应的,还得兼容移动, 因此图表还需要根据盒子的大小来变化. 自适应窗口及盒子大小 页面中有一个[放大.缩小]功能,及全屏展示和预览图表 窗口自适应 let m ...

  9. vue通信、传值的方式

    原文博主地址:https://blog.csdn.net/qq_35430000/article/details/79291287 看完还是受益匪浅,讲得很详细..感谢!

  10. vue-learning:29 - component - 组件三大API之三:slot

    组件三大API之三: slot <slot>标签 v-slot指令 普通插槽 有默认值的插槽 具名插槽 作用域插槽 v-slot是Vue 2.6.0引入的一个新语法指令,目的是统一之前sl ...