分类:

使用React.js开发chrome插件

使用React.js开发chrome插件
一、背景相信看到这篇文章的人应该都用过Chrome插件吧,最近刚好有个这方面的需求,我就把Chrome插件的相关知识学习了一下,发现其实Chrome插件的开发和大前端Web开发的底子是一...

2年前 (2017-06-24) 383℃ 暂无评论 27

React应用在产品环境下的性能优化

React应用在产品环境下的性能优化
只有10%~20%的最终用户响应时间花在了下载HTML文档上,其余的80%~90%时间花在了下载页面中的 所有组件 上。 - 性能黄金法则,Steve SoudersSteve Souders在2007年提出这样的“...

2年前 (2017-06-05) 735℃ 暂无评论 31

React单文件的编写方式

React单文件的编写方式
single-react-loader通过该插件,你可以使用单文件形式编写react组件(将jsx与style组合在一起)特性将jsx和css组合在一个文件内支持less,sass支持style样式的私有化例子//about.r...

2年前 (2017-04-27) 268℃ 暂无评论 28

React多语言解决方案

React多语言解决方案
由于框架使用的是 React , 多语言方案也选择了生态系统下的 react-intl 模块,它是雅虎 FormatJS 计划的一部分。翻译字符串替换使用 react-intl 替换字符串用以翻译很方便。只...

2年前 (2017-04-21) 714℃ 暂无评论 38

初识React-React新特性

初识React-React新特性
ReactReact中有两大核心组件:react:核心库 (React)react-dom:提供与DOM相关的功能 (ReactDOM)npm install react react-dom –save-dev1、JSX和DOM操作//->在入口中导入CSS,使...

2年前 (2017-02-19) 532℃ 暂无评论 22

React之JSX语法(一)

React之JSX语法(一)
JSX 语法的本质目的是为了使用基于 xml 的方式表达组件的嵌套,保持和 HTML 一致的结构,语法上除了在描述组件上比较特别以外,其它和普通的 Javascript 没有区别。 并且最终所有...

2年前 (2017-01-24) 208℃ 暂无评论 20

React入门 Demo实例之⑤ 组件的嵌套使用

React入门 Demo实例之⑤ 组件的嵌套使用
在封装react时,我们往往按照最小单位封装,例如封装一个通用的div,一个通用的span,或者一个通用的table等,所以各自组件对应的方法都会随着组件封装起来,例如div有自己的方法可以更...

2年前 (2017-01-01) 205℃ 暂无评论 28

React入门 Demo实例之④ 网络请求触发状态变化

React入门 Demo实例之④ 网络请求触发状态变化
上一节讲到状态变化触发render的重新渲染,这里将常用的网络请求引入,结合到状态变化中。这个例子中,页面每秒会请求一次网络,将请求到的数据中时间戳更新到状态中。但是这个例子中实际上并没有使用服务返回的时间戳,因为我在公司使用测试网的接口拿数据,但是开放给大家要换一个公网能拿到时间戳的api,简单的找了下没找到,也不想用公司的接口试,所以算是mock了下~,在complete中每次都取浏览器时间来更新。
仍旧是先看代码,相比于上一个例子,这里多了两个函数request和componentDidMount...

2年前 (2017-01-01) 221℃ 暂无评论 24

React入门 Demo实例之③ state,react的核心

React入门 Demo实例之③ state,react的核心
state算是react的核心了,任何页面的变化,刷新都是state的变化引起。在react中,只要调用了setState都会引起render的重新执行。下面介绍下如何通过键盘事件触发状态变化。代码:<h...

2年前 (2017-01-01) 157℃ 暂无评论 24

React入门 Demo实例之② 带有参数的react

React入门 Demo实例之② 带有参数的react
往往在使用中,文本的内容并不是写死的,而是需要被我们指定,这样组件才能更通用。下面介绍下,如何向react中传递参数。首先,这个大体上跟第一个demo类似,唯有实例化Text时,多了参数。
当我们传递参数时,写了两种方式,一种是 name="react"另一种是age={181},这两种写法是有区别的,并不仅仅因为一个是str,一个是int。如果是str这种类型,写成 name="xxx"或者name={"xxx"}都是可以的,加了{}的意思就是js中的变量,更加精确了。而后者age={18...

2年前 (2017-01-01) 137℃ 暂无评论 24

React入门 Demo实例之① 最简单的react渲染

React入门 Demo实例之① 最简单的react渲染
React入门 Demo实例之① 最简单的react渲染 这段代码是用来渲染react组件额,第一个参数是组件,第二个参数是要渲染的位置。
* 使用的 方式就可以实例化组件,或者写成,要注意下,react中标签的闭合非常严格,任何标签的关闭与打开必须一一对应,否则会报错。
* 到目前为止,就完成了一次渲染,将Text组件render函数返回的内容,填充到了id=well的div中。...

2年前 (2017-01-01) 228℃ 暂无评论 36