Facebook 本身有提供 Test Utilities,但由于不够好用,所以目前主流开发社群比较倾向使用 Airbnb 团队开发的 enzyme,其可以与市面上常见的测试工具(Mocha.Karma.Jest 等)搭配使用.其中 Jest 是 Facebook 所开发的单元测试工具,其主要基于 Jasmine 所建立的测试框架.Jest 除了支援 JSDOM 外,也可以自动模拟 (mock) 透过 require() 进来的模组,让开发者可以更专注在目前被测试的模组中. Component…

You often find duplication between the name of a prop and a variable you will assign to the prop. JSX allows you to spread an object containing your named props into your Component which enables you to avoid the repetition of matching prop names and…

JSX------HTML tags vs React Components: 1.To render a html tag,just use lower-case tag names in JSX; var myDivElement = <div className="foo" />; React.render(myDivElement, document.body); 2.To render a React Component,just create a local v…

在之前的文章中,已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做. 现在来一些例子吧. 在这个例子中,我们通过使用一个箭头函数(=>)来bind用户ID到每个删除按钮中. ## index.js import React from 'react'; import { render } from 'react-dom'; import User from './User'…

Airbnb React/JSX 编码规范 算是最合理的React/JSX编码规范之一了 内容目录 基本规范 Class vs React.createClass vs stateless 命名 声明模块 代码对齐 单引号还是双引号 空格 属性 Refs引用 括号 标签 函数/方法 模块生命周期 isMounted Basic Rules 基本规范 每个文件只写一个模块. 但是多个无状态模块可以放在单个文件中. eslint: react/no-multi-comp. 推荐使用JSX语法. 不要…

React入门的的时候,我们(我自己啦)喜欢都跟着例子来,用标签的语法写JSX,比如:<Mycomponent  key={this.props.id}  onClick={this.props.doSth} ></Mycomponent  > 觉得真是在js里写html. 现在文档告诉我们,JSX这种写法呀,其实是React.createElement(component, props, ...children)的语法糖,就好像类是创建对象的语法糖一样. 三个参数分别是其类型.属…

http://goexpresstravel.com/ 今天 Express 的作者 TJ Holowaychuk 发了一篇文章,正式宣告和 Node.js 拜拜了,转向 Go 语言. Go verses Node 如果你在做分布式工作,你会发现 Go 语言丰富的并发原语非常有帮助.虽然我们用 Node 的 generator 也可以做类似的事,但在我看来,generator 永远只能做一半.没有独立的栈错误处理和报告,充其量是中等.我也不想再等(Node)社区花3 年去整理(改善),尤其是我们…

Scripting Languages 簡介 何謂 Scripting? 命令稿語言 scripting language 是什麼? 很難給一個嚴格的定義; 不妨看看最具代表性的幾個例子: perl, python, php, tcl, guile, ruby. 另外, UNIX 上的各種 shells, MS Windows 上的 visual basic, OS/2 上的 rexx 也都可以算是 scripting languages. 用這些語言所寫的程式, 執行的方式都是以解譯 (int…

React & styled component https://www.styled-components.com/#your-first-styled-component tagged template literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates https://www.styled-components.com/do…

Table of Contents 1. 什麼是 Source Tree ? 1.1. 下載 1.2. SourceTree 介面簡介 1.3. git 指令/狀態圖 2. SourceTrees 超簡單使用 2.1. 設定 git 使用的 Email 2.2. 開始新的 git 專案 2.3. 開始舊專案開發 2.4. 把目前修改的東西記錄下來 2.5. 抓取最新的程式碼 (Pull) 2.6. 上傳變更的部份 (Push) 3. 其他學習資源 1 什麼是 Source Tree ? Atla…