P03: Redux基础-Ant Design介绍和环境初始化
目录
Ant Design
是一套面向企业级开发的 UI 框架,视觉和动效作的很好。阿里开源的一套 UI 框架,它不只支持React
,还有ng
和Vue
的版本,我认为不论你的前端框架用什么,Ant Design
都是一个不错的选择。习惯性把AntDesign
简称为antd
。 目前有将近 5 万 Star,算是 React UI 框架中的老大了。
官网为:AntDesign
初始化项目
这里我默认你已经看过我的“React16 教程”了,所以我认为你这个过程已经了解了知识点,我只是带着你作一遍。
1.如果你没有安装脚手架工具,你需要安装一下:
npm install -g create-react-app
2.直接用脚手架工具创建项目
D: //进入 D 盘 mkdir ReduxDemo //创建 ReduxDemo 文件夹 cd ReduxDemo //进入文件夹 create-react-app demo01 //用脚手架创建 React 项目 cd demo01 //等项目创建完成后,进入项目目录 npm start //预览项目
这样项目就制作好了,我们删除一下没用的文件,让代码结构保持最小化。删除 src 里边的所有文件,只留一个index.js
,并且 index.js 文件里也都清空。
快速生成基本代码结构
编写index.js
文件,这个文件就是一个基础文件,基本代码也都是一样的。
import React from 'react'; import ReactDOM from 'react-dom' import TodoList from './TodoList' ReactDOM.render(<TodoList/>,document.getElementById('root'))
编写TodoList.js
文件,这个文件可以用Simple React Snippets
快速生成。 先输入imrc
,再输入ccc
代码如下:
import React, { Component } from 'react'; class TodoList extends Component { render() { return ( <div>Hello World</div> ); } } export default TodoList;
做完这个,算是项目基本构建完成,可以打开浏览器看一下效果。接下来就可以安装Ant Design
UI 框架了。
安装AntDesign
这里使用npm
来进行安装,当然你有可以用yarn
的方式进行安装.
npm install antd --save
yarn
的安装方式是:
yarn add antd
如果你的网络情况不好,最好使用cnpm
来进行安装。等待程序安装完以后,就可以进行使用了。下节课学习一下如何使用用 Ant Design 制作 UI 界面吧。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P03: Redux基础-Ant Design介绍和环境初始化
码云笔记 » P03: Redux基础-Ant Design介绍和环境初始化