react ui框架_Web开发 React 学习(二十)连载基础篇大结局

584fa1e35d09dbb7a2d32938b916b701.png

    系列文章:

         测开技能--Web开发 React 学习(一)

         测开技能--Web开发 React 学习(二)环境搭建

         测开技能--Web开发 React 学习(三)元素的渲染

         测开技能--Web开发 React 学习(四)元素的动态渲染

         测开技能--Web开发 React 学习(五)JSX

         测开技能--Web开发 React 学习(六)组件

         测开技能--Web开发 React 学习(七)提取组件

         测开技能--Web开发 React 学习(八)Props 的只读性

         测开技能--Web开发 React 学习(九)条件渲染

         测开技能--Web开发 React 学习(十)表单

         测开技能--Web开发 React 学习(十一)

         测开技能--Web开发 React 学习(十二)网络请求 

         测开技能--Web开发 React 学习(十三)网络请求封装

         测开技能--Web开发 React 学习(十四)

         测开技能--Web开发 React 学习(十五)

         测开技能--Web开发 React 学习(十六)

         测开技能--Web开发 React 学习(十七)

         测开技能--Web开发 React 学习(十八)

         Web开发 React 学习(十九)

这是基础链接系列,最后一篇。

    日志中间件

npm install redux-logger --save-dev

    在项目的根目录倒入

import  {createStore,applyMiddleware} from "redux"import {Provider} from "react-redux"import rootReducer from "./routerd"import logger from "redux-logger"const store1=createStore(rootReducer,applyMiddleware(logger))

我们在跳转的时候,可能页面的组件被多个页面所公用,所以呢,我们在roter 一定要写入根路径。然后就可以在实际的dev环境中使用了。

    由于原声的UI的原因,我们需要引入第三方库,可以考虑bootstrap的库。

https://www.bootcdn.cn/twitter-bootstrap/

    然后在index.html引入急可以使用。当然了,除了这个,我们还可以引入蚂蚁开源的antd框架。https://ant.design/index-cn

     我们可以到官网,根据官网的教程去在我们本地使用。里面有丰富的UI的库,使用方便。我们可以看下官网给的一个实例的项目的展示。

d536b850c46a6622b3658e0e485d3a1b.png

    我们可以根据我们的实际的工作的需要,去打造属于我们自己的UI界面

    在这里https://ant.design/components/overview-cn/ 可以看到各个组件的使用。大家可以根据这里做出来更加漂亮的适合自己的效果图。

        上述简单的介绍了logger   以及bootstrap 还有蚂蚁金服开源的antd框架。大家可以在日常的开发中去使用这些脚手架,快速的搭建属于自己的前端页面。React 基础篇系列连载到这里就完成了。后续还会出来更多的连载的系列。同时也欢迎大家继续关注。雷子说测试开发,一个有温情的专注技术分享的公众号的博主。持续分享。如果你感觉雷子分享的可以,请点亮在看。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值