React.js - using Jest and Babel to test ES6 code

本偏介紹一下如果你是用 ES6 的語法寫的 React.js 應用程式，如果利用 Jest 測試時要住意那些部份

原則上測試的過程不外乎 Jest 官網介紹的 >>here<<

如果你是用 ES6 語法進行開發的話，你需要注意的是利用 react-tools 作 transform 時需要指定你的 JS 語法是 ES6

設定方式就是透過 preprocessor.js 讓 react-tools 在 transform 的時候可以將 ES6 語法 enabled 起來

	// preprocessor.js
	var ReactTools = require('react-tools');
	module.exports = {
	process: function(src) {
	return ReactTools.transform(src, {
	harmony:true
	});
	}
	};

view raw preprocessor.js hosted with ❤ by GitHub

根據 react-tools 的官方介紹，如同上述的方式加入 harmony 並指定為 true 就可以了

此外我再額外介紹一種方式就是利用 babel 來進行 transform 的動作

babel 本身就可以對 ES6 的語法以及 JSX 的進行轉換，所以你也不用擔心 babel 不認得 React.js

透過 npm install babel --save-dev 安裝 babel 之後

修改你的 preprocessor.js，如下所示：

	var babel = require("babel");
	module.exports = {
	process: function(src, filename) {
	if (!babel.canCompile(filename)) {
	return '';
	}
	if (filename.indexOf('node_modules') === -1) {
	return babel.transform(src, {filename: filename}).code;
	}
	return src;
	}
	};

view raw preprocessor1.js hosted with ❤ by GitHub

React.js - Bootstrap table

I created a Bootstrap Table rebuilt for React.js, current version is 0.3.0.

Home page is here: React-bootstrap-table

You can visit Github on here: react-bootstrap-table

The features on react-bootstrap-table

• Column align
• Basic table style: striped, hover, condensed, border..
• Scrolling
• Table sort
• Column format
• Pagination
• Row selection 
• Cell Edit

You can reference more examples on here.

In the future, I will provide more function on ReactBsTable, like  table event or some change on table.

If you like it, give it a star on github, Thanks

----------------------------------------------------------------------------------

最近用了空閒時間寫了一個基於 React.js 的 Bootstrap table 元件

首頁在這邊: React-bootstrap-table

Github: react-bootstrap-table

ReactBsTable 支援基本的 Bootstrap table classes

例如： .table-striped, .table-hover, .table-condensed ... 等

另外也支援了欄位的 排序(sort), 格式(format), 對齊(align), 分頁等

可以在這邊看到所有的範例： here

之後我也會繼續提供更多的功能以及事件

如果你喜歡的話，可以到GitHub react-bootstrap-table 給個 Star

我會更有動力繼續改善的，感謝!!!!