2015年4月19日 星期日

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 起來

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

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

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

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

修改你的 preprocessor.js,如下所示:


2015年4月12日 星期日

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

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