antd的学习 有关react

2019-02-13 21:52:49 weixin_43943881 阅读数 1623

React学习笔记(六):在react中使用AntD

官方文档:https://ant.design/docs/react/use-with-create-react-app-cn

基础使用

一、安装AntD,cnpm install antd --save

二、在react项目中的全局样式文件中的头部引入 AntD的css@import '~antd/dist/antd.css';

三、看文档使用,例如使用AntD的按钮:

1、在要使用的组件中导入按钮,import Button from 'antd/lib/button';

2、使用按钮,<Button type="primary">Primary</Button>

按需加载

一、安装react-app-rewired,cnpm install react-app-rewired --save

二、修改 package.json,把react-scripts改为react-app-rewired,如下图所示
在这里插入图片描述
三、在项目根目录创建一个 config-overrides.js 用于修改默认配置,在文件中使用如下配置

module.exports = function override(config, env) {
    return config;
};

四、安装babel插件,cnpm install babel-plugin-import --save

五、修改config-overrides.js的配置,删除原先所有配置,并添加如下配置

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    }),
);

六、移除前面在全局样式中添加的 @import '~antd/dist/antd.css';

2018-08-05 13:42:53 qq_37860930 阅读数 51281

自己利用业余时间,基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React,页面主要还是展示页面,比较简单不涉及后台交互。

github地址:基于React+antd实现后台模板
预览地址:预览地址

项目重构地址:react+koa实现登陆、聊天、留言板功能后台
重构预览地址:重构预览地址

登录的背景图比较大,所以做了一个loading效果,等图载入完毕后再显示登录页面,首次载入可能比较慢

技术栈

  • react
  • antd
  • react-router
  • mobx
  • canvas
  • ES6
  • cookie

自己参考了其他优秀的插件,比如动态打字效果、背景粒子效果、shuffle(洗牌)全屏插件等,自己对有些插件封装成类使用

所有路由都需要登录才可进入,自己封装了PrivateRoute组件来实现路由认证,登录信息保存在cookie中,原本是保存在store中,但是刷新页面后登录状态丢失,所以就保存在cookie中
登录背景图太大,使用了TinyPNG进行压缩,并编写了一个loading效果

项目目录结构

这里写图片描述
assets----存储静态图片资源和共用icon图标
components----存储共用组件
routes----业务页面入口和常用模板
store----状态管理
utils----工具函数

项目截图

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

问题

整个demo不复杂,主要是熟悉react和路由等,在打包的过程中出现了一点小问题。我打包的文件是放在服务器二级目录下,所以打包的路径要改为相对路径,不能使用绝对路径,我在package.json中添加了homepage:’.'解决了路径问题。然后BrowserRouter加上了 basename=‘二级目录名称’ 属性,结果还是出现js路径错误,我一直以为是webpack打包的问题,找了很久才发现是因为BrowserRouter,将BrowserRouter改为HashRouter就访问正确。
使用react-router(v4)时,如果有服务器端的动态支持,建议使用 BrowserRouter,否则建议使用 HashRouter。
关于BrowserRouter和HashRouter的区别,可以参考:关于 reactrouter 4.0版本中 BrowserRouter和HashRouter的问题react-router v4中 HashRouter 和 BrowserRouter的使用

最后

demo是我断断续续写的,只有下班和周末有时间。写demo的目的主要是熟悉React和react-router以及antd,整个demo中参考了一些其他人的想法,如动画效果等。另外基于vue的个人项目可以看这个仿制移动端QQ音乐

其他个人项目



觉得不错的给个star鼓励支持!^_^

2020-01-14 10:10:05 qq_42813491 阅读数 379

  • 学习资源推荐 https://blog.csdn.net/qq_42813491/article/details/90213353

docs

  • https://ant.design/docs/react/use-with-create-react-app-cn

安装

  • yarn add antd
  • 或者npm i antd --save

样式表的引入

  • App.css全局引用样式表
    @import '~antd/dist/antd.css';

按需引入组件

  • import Button from ‘antd/lib/button’;

在这里插入图片描述

  • demo
import React from 'react';
import './css/app.css'
import Button from 'antd/lib/button';
class App extends React.Component {
  render() {

    return (
      <div >
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

效果图

在这里插入图片描述

2018-09-04 19:24:09 qq8241994 阅读数 1728

公司最近在向react+antd框架进行转型,之前没有接触过这类模块化开发的框架,所以最近一直在学这个东西,忙到忘了更新博客,现在终于稍微有点理解了,总结一下自己遇到的一些坑:

使用的脚手架是dva-cli,模板的话是antd-admin-pro。

1.

 ./src/router.js是页面整体的路由配置,格式都是固定的,需要注意的就是两点1.中括号里面的是你需要加载的model的文件名(不是namespace),import()里面是你对应的组件的路径

2.

apps文件夹下的每个模块下都有一个router.js文件,这个文件是配置当前模块的model依赖的(每次配置完成之后记得执行npm run router:php命令,否则需要手动配置src/router.js);

3.

在用npm crud生成代码后   当你需要修改mock数据时需要注意了,不要创建名为id的字段,这样会让内部生成的id无效,然后删除功能就无法使用了

 

明天再抽出时间记录一下该项目下的各个目录下的功能,以及个人理解的数据走向

2018-12-25 14:44:40 yan88888888888888888 阅读数 1821

一个方便极速开发应用的插件 Ant Design ,这些相当于帮我们封装了常用的组件,我们直接拿来用就行。

在vue中也有这样的插件如:element-ui 和 ivew

链接:https://ant.design/docs/react/introduce-cn

快速使用步骤:

1、安装插件

 cnpm install antd --save

2、在用到的地方引入组件和css (css可以在全局css的上面引入)

import {DatePicker,Button} from 'antd';  // 加载 JS
import 'antd/lib/date-picker/style/css';        // 加载 CSS 

3、在render方法中使用 

<DatePicker />
<Button type="primary">Hello</Button>

源码:

import React,{Component} from 'react'
import {DatePicker,Button} from 'antd';  // 加载 JS
import 'antd/lib/date-picker/style/css';        // 加载 CSS
class AntdDemo extends Component {
    constructor(props){
        super(props);
    }


    render(){
        return (
            <div>
                <DatePicker />
                <Button type="primary">Hello</Button>
            </div>

        )
    }
}

export default AntdDemo;

效果图:

 

 

React+antd的搭建

阅读数 1153