React - 随笔分类 - shamgod

React开发项目例子

摘要：一、需求1.分析：用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/，界面类似如下：2.确定发目标:3.确定开发顺序4.开发流程介绍测试采用TDD二、代码1.Card.js 1 var Rea... 阅读全文

posted @ 2015-12-27 14:59 shamgod 阅读(2616) 评论(0) 推荐(0)

用 React 编写SVG图表

摘要：1.代码 1 2 3 4 5 万能的React 6 7 8 9 10 39 40 2.运行结果阅读全文

posted @ 2015-12-25 21:22 shamgod 阅读(1150) 评论(0) 推荐(0)

用 React 编写2048游戏

摘要：1.代码 1 2 3 4 5 万能的React 6 55 56 57 58 59 261 262 2.结果阅读全文

posted @ 2015-12-25 20:42 shamgod 阅读(644) 评论(0) 推荐(1)

React测试Mixin

摘要：1.test.jsx 1 var randomNumberMixin = require("./randomNumberMixin.jsx"); 2 3 describe("test randomNumberMixin", function () { 4 it("should return... 阅读全文

posted @ 2015-12-25 00:21 shamgod 阅读(365) 评论(0) 推荐(0)

React组件测试(模拟组件、函数和事件)

摘要：一、模拟组件1.用到的工具(1)browerify(2)jasmine-react-helpers(3)rewireify（依赖注入）(4)命令：browserify - t reactify -t rewireify test1.jsx > app.js2.代码(1)test1.jsx 1 var... 阅读全文

posted @ 2015-12-24 23:21 shamgod 阅读(966) 评论(0) 推荐(0)

用React.addons.TestUtils、Jasmine进行单元测试

摘要：一、用到的工具1.React.addons.TestUtils2.Jasmine3.Browserify(处理jsx文件的require依赖关系)4.Reactify(能和browserify很好的配合，把jsx转换为js)5.编译命令为browserify -t reactify test.jsx... 阅读全文

posted @ 2015-12-24 21:50 shamgod 阅读(1205) 评论(0) 推荐(0)

React gulp、Browserify、Webpack实例

摘要：一、gulp 1 var gulp = require('gulp'); 2 var react = require('gulp-react'); 3 4 gulp.task('jsx', function() { 5 gulp.src('./app.jsx') 6 .pi... 阅读全文

posted @ 2015-12-23 21:48 shamgod 阅读(475) 评论(0) 推荐(0)

React-用Jest测试

摘要：一、1.目录结构二、代码1.CheckboxWithLabel.jsx 1 var React = require('react/addons'); 2 var CheckboxWithLabel = React.createClass({ 3 getInitialState: functi... 阅读全文

posted @ 2015-12-21 22:45 shamgod 阅读(1505) 评论(0) 推荐(0)

React-Flux 介绍及实例演示

posted @ 2015-12-20 21:45 shamgod 阅读(498) 评论(0) 推荐(0)

React-用ImmutableJS提高性能

摘要：一、需求1.子组件有更新时，只重新渲染有变化的子组件，而不是全部二、ImmutableJS原理三、代码1.CheckboxWithLabel.jsx 1 var React = require('react/addons'); 2 var CheckboxWithLabel = React.crea... 阅读全文

posted @ 2015-12-20 21:00 shamgod 阅读(836) 评论(0) 推荐(0)

React Jest测试

摘要：一、 1 var jest = require('jest'); 2 3 jest.dontMock('../CheckboxWithLabel.js'); 4 describe('CheckboxWithLabel', function() { 5 it('changes the tex... 阅读全文

posted @ 2015-12-20 20:25 shamgod 阅读(374) 评论(0) 推荐(0)

React如何性能调优

摘要：一、二、调优例子 1 2 3 4 5 React性能调优 6 7 8 9 10 74 75 三、运行结果阅读全文

posted @ 2015-12-20 18:29 shamgod 阅读(310) 评论(0) 推荐(0)

React 性能调优原理

摘要：一、React影响性能的两个地方二、调优原理阅读全文

posted @ 2015-12-20 17:31 shamgod 阅读(187) 评论(0) 推荐(0)

React使用rAF动画介绍

摘要：一、 1 2 3 4 5 6 React动画 7 8 9 10 11 12 41 42 43 阅读全文

posted @ 2015-12-20 17:01 shamgod 阅读(846) 评论(0) 推荐(0)

React用JS 模拟动画介绍

摘要：一、 1 2 3 4 5 6 React动画 7 8 9 10 11 12 41 42 43 二、结果阅读全文