基于WebStorm, React和Ant.Design开发WebAppDemo

前提条件：

已安装过webstorm和nodejs。

安装create-react-app和yarn

npm install -g create-react-app yarn

打开WebStorm创建工程

安装antd

yarn add antd --save

修改app.js代码

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'antd';class App extends Component {render() {return (<div className="App"><div className="App-header"><img src={logo} className="App-logo" alt="logo" /><h2>Welcome to React</h2></div><Button type="primary">Button</Button><p className="App-intro">To get started, edit <code>src/App.js</code> and save to reload.</p></div>);}
}export default App;

修改app.css代码

@import '~antd/dist/antd.css';.App {text-align: center;
}

运行程序

yarn start

生产环境运行yarn run build

--结束--

基于WebStorm, React和Ant.Design开发WebAppDemo相关推荐

使用create-react-app搭建TypeScript+React+Ant Design开发环境
一.使用create-react-app创建一个支持TypeScript+React的开发环境: 要创建一个支持TypeScript的Create React App项目,可以运行: npx crea ...
基于React、Ant Design的ButtonGroup组件
目录介绍使用方式安装使用 API Props children 介绍本组件基于React.Ant Design,适用于React + Ant Design项目本组件设计为超过一定数量的按钮 ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（一）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(一) 前言现在的效果安装 dva-cli 创建新应用预览项目文件结构简单介绍使用 antd做页面定义 ...
Artiely Vue Admin - 基于蚂蚁金服Ant Design构建的高颜值开源管理后台UI框架
继承 Ant Design 专业美观的优点,支持PC/手机/平板的响应式布局的优秀后台管理系统 UI 框架. 关于 Artiely Vue Admin Ant Design 是阿里巴巴蚂蚁金服团队出品 ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（二）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(二) 前言定义 Model connect 起来更新state 拥抱变化主题切换更换页面获取当前设备类 ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
(开源)基于vue, react, node.js, go开发的微商城（含微信小程序）
微商城地址: https://github.com/shen100/wemall 求star,求关注项目截图微信小程序项目环境搭建 1 克隆代码 git clone https://githu ...
#react 之ant design Pro 学习研究#----启动项目
2019独角兽企业重金招聘Python工程师标准>>> #首页 src/index.js import '@babel/polyfill'; import 'url-polyfill ...
React再ant design 中弹窗把子组件表单的数据传递给父组件
父组件 handleOk = () => {const changeValue = this.formRef.current.getFieldValue('categoryName') // 取 ...

基于WebStorm, React和Ant.Design开发WebAppDemo

基于WebStorm, React和Ant.Design开发WebAppDemo相关推荐

最新文章

热门文章