02 基于umi搭建React快速开发框架(国际化)

前言 之前写过一篇关于 "React的国际化" 文章,主要是用react intl库,雅虎开源的。react intl是用高阶组件包装一层来做国际化。 基于组件化会有一些问题,比如在一些工具方法中需要国际化,就需要自己去实现了。在umi react快速开发框架我们采用 "react intl uni ... »

规避 React 组件中的 bind(this)

React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看。 请看如下的示例: class App extends Component { constructor() { super(); this.state = { i ... »

如何解决React官方脚手架不支持Less的问题

说在前面 "create react app" 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 "Less" 的。如果我们的项目必须要使用 Less 呢,这就需要我们手动集成一下。本篇主要针对集成的 ... »

React Components之间的通信方式了解下

先来几个术语: |官方|我的说法|对应代码| |: :|: :|: :| |React element|React元素| | |Component|组件| | |无|App为父元素,App1为子元素|``| 本文重点: 组件有两个特性 1、传入了一个“props” 2、返回了一个React元素 组件 ... »

React.js 三周 -- 入门到搭建团队基础项目

吐槽 公司自己的产品,由于历史遗留问题,前端一直是和java放到一个项目里写的。 导致了,前端就被死死的绑在了IDEA战车上。想要看页面效果,先起几个java服务。想要调试一个改动,重启个java服务先。(热更新是有,但是间歇性失效,会给调试带来意想不到的困扰。) 选择 React.js 的原因 打 ... »

ant-mobile的Toast的样式修改(react)

最近使用了ant-mobile来作为项目的UI框架。 项目中,点击列表的时候回出现一个提示,这个提示是ant-mobile自带的toast,我们可以直接调用。 toast的提示很多的,我这里只是用的toast.info。 最开始的时候,是这样的。 根据项目的设计UI需要修改其样式,因为这个toast ... »

学习React从接受JSX开始

详情参考官方 "JSX规范" 虽然JSX是扩展到ECMAScript的类XML语法,但是它本身并没有定义任何语义。也就是说它本身不在ECMAScript标准范围之内。它也不会被引擎或者浏览器直接执行。通常会利用很编译器预处理器来将这些JSX转化为标准的ECMAScript。 吐槽:虽然JSX出发点是 ... »

教你如何在React及Redux项目中进行服务端渲染

服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端的功能) 服务端渲染的优点主要由三点 1. 利于SEO 2. 提高首屏渲染速度 3. 同构直出,使用 ... »

React.js 新手教程

正如你能从标题猜到的,这篇文章的目标是给那些有很少编程经验的读者的。比如,像我这样的人:因为迄今为止,我才探索了编程世界6个月。所以,这将是一篇新手村教程! 你只需要拥有对 HTML 和 CSS 的理解,以及基本的 JavaScript(JS)知识就能看懂本文。 注意:在接下来的例子中,我们将会利用 ... »

React 实现一个时钟

最终效果 其实主要难点在于最左边的小时钟 指针的实现方式很简单,就是通过绝对定位将指针移到中间,然后以下边中间的位置为圆心旋转即可。代码如下: 效果 秒针转起来的效果也很简单,通过定时器setInterval每隔一秒更新秒针的角度。 现在就可以看到指针一跳一跳的了。但是呢,我希望指针平缓的走,那么可 ... »

react中手动重置redux

前段时间使用redux在react-native中,安卓后退两次关闭后redux未清空的问题,一直觉得处理的不够优雅,没有根本解决问题。 后来发现再退出登录后,也有部分数据因为redux的逻辑处理数据缓存问题被留了下来,造成一些意料之外的问题,于是要彻底解决重置redux的办法。 我的解决方法是,写 ... »

React中的数据双向传递

数据从父组件到子组件 一、将数据从父组件传递到子组件,参数传递过程时,注意父组件和子组件中各自属性的名称 父组件代码: 子组件代码: 运行结果: 二、将数据从父组件传递到子组件,若有多个数据要传递,如1000个,可一次性传递,参数传递过程时,注意父组件和子组件中各自属性的名称,与前面代码相比,下列代 ... »

react系列教程

这个系列将从基础语法讲起,把react全家桶都讲到,然后到具体的使用,最后完成后,会写一个完整的demo。 前置要求: 基本的CSS,JS要熟练。 部分ES6语法需要了解。可以参考下面提到的阮一峰老师的《ECMAScript 6 入门》和MDN文档。 目前已经完成的内容: "react教程(零)安装 ... »

react-native使用redux 存在的坑

前几天安卓真机测试的时候,突然发现一个严重的问题。 后退两次退出应用,再开启白屏。而杀掉进程后再开启就是好的。 这个重大bug我跟了好久,以为是splash-screen的问题。 后来一点一点打console,才找出问题————redux在后退两次退出时,未重置,而保留了退出前的状态值。 我不知道为 ... »

react实现页面切换动画效果

一.前情概要 注:(我使用的路由是react router4)     如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使用页面切换显得生硬,用户体验大大提升;     but the 问题是,react的路由动画没有vue那么方便,在vue里面写几 ... »

create-react-app不暴露配置设置proxy代理

此方法可以在不暴露配置的情况下直接设置代理,非常便捷 在package.json里添加 "proxy":"http://institute.dljy.lzdev" 请求时,例如请求地址为 http://institute.dljy.lzdev/api/activity_auth/join ... »

React学习笔记

一、React初探 es6写法 "code" es5写法(遗憾的是现在最新版本的react,已经不再能使用createClass去创建react组件了 "code" ) 核心思想:封装组件,各个组件维护自己的状态(state, prop)和UI,当状态变更,自动重新渲染组件,数据流向是单向的。 需要 ... »