最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

P03: Redux基础-Ant Design介绍和环境初始化

Ant Design是一套面向企业级开发的UI框架,视觉和动效作的很好。阿里开源的一套UI框架,它不只支持React,还有ngVue的版本,我认为不论你的前端框架用什么,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 DesignUI框架了。

安装AntDesign

这里使用npm来进行安装,当然你有可以用yarn的方式进行安装.

npm install antd --save

yarn的安装方式是:

yarn add antd

如果你的网络情况不好,最好使用cnpm来进行安装。等待程序安装完以后,就可以进行使用了。下节课学习一下如何使用用Ant Design制作UI界面吧。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P03: Redux基础-Ant Design介绍和环境初始化

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发