![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
scorpio_h
这个作者很懒,什么都没留下…
展开
-
使用CSS3制作简单的React的动画效果
React上仅使用CSS3实现简单的动画效果,以下demo实现的是简单的文字展现和消失动画1、展现效果的React模版和简单的JS代码,主要是通过state.show的bool值控制hello的展现和消失import React, { Component, Fragment } from 'react'import './style.css'class App extends Co...原创 2018-12-22 10:07:31 · 735 阅读 · 0 评论 -
react-transition-group中CSSTransition的基础用法
1、加载react-transition-groupyarn add react-transition-group或npm install react-transition-group --save2、在react组件中引入import { CSSTransition } from 'react-transition-group'3、编写简单的React组件代码...原创 2018-12-22 14:32:11 · 4916 阅读 · 0 评论 -
新建项目 react+dva+antd
1、安装dva-clinpm i dva-cli -gdva -v2、创建应用dva new myprojectcd myproject3、配置 antd 和 babel-plugin-importbabel-plugin-import 用于按需引入 antd 的 JavaScript 和 CSS,这样打包出来的文件不至于太大npm i antd -...原创 2017-09-27 11:04:49 · 657 阅读 · 0 评论 -
react-transition-group中TransitionGroup配合CSSTransition做列表动画渲染
1、js文件import React, { Component, Fragment } from 'react'import { CSSTransition, TransitionGroup } from 'react-transition-group'import './style.css'class App extends Component { constructor(pr...原创 2018-12-22 15:15:12 · 917 阅读 · 0 评论 -
Redux的简介和规范化的使用方法(以todoList为例)
Redux 是 JavaScript 状态容器,提供可预测化的状态管理。Redux的核心概念主要有3个 actions、store、reducers。actions:简单地,Actions就是事件。Actions传递来自这个应用(用户接口,内部事件比如API调用和表单提交)的数据给store。store只获取来自Actions的信息。内部Actions就是简单的具有一个type属性(通...原创 2018-12-23 17:14:02 · 454 阅读 · 0 评论 -
redux-thunk的配置和使用
1、安装thunknpm install redux-thunk --save或yarn add redux-thunk2、创建store时引入中间键和配置(参照官方文档)首先需要在创建store时引入applyMiddleware方法和thunk:import { createStore, applyMiddleware } from 'redux'import thu...原创 2019-01-13 11:19:06 · 1123 阅读 · 1 评论 -
redux-saga的配置和使用简介
1、安装redux-sagayarn add redux-saga或npm install redux-saga -save2、配置redux-saga在store的index文件中引入redux-sagaimport createSagaMiddleware from 'redux-saga'并按照官方文档所说添加如下配置(https://github.com/red...原创 2019-01-20 11:36:01 · 975 阅读 · 0 评论 -
styled-components的配置和使用
在react中,正常的给组件引入css文件,该css文件会直接作用于全局,使用styled-components可以有效控制好css作用域。1、安装yarn add styled-components2、配置并设置全局样式,新建一个js文件,style.js,使用createGlobalStyle创建全局样式。import { createGlobalStyle } from ...原创 2019-02-02 22:34:40 · 2049 阅读 · 0 评论 -
react路由的基础用法
1、安装yarn add react-router-dom2、在app.js内引入routerimport { BrowserRouter, Route } from 'react-router-dom'3、使用BrowserRouter作为容器,Route作为路由规则填写path等路径,exact为完全符合path才可展示。import React, { Compone...原创 2019-02-13 22:21:45 · 156 阅读 · 0 评论