React 與 DOM 的差異

DOM 的差異

React 為了跨瀏覽器和提升效能的因素,實作一套和瀏覽器本身無關的 events 以及模擬 DOM 的機制。我們可以借由這個機制處理一些關於原始 DOM 設計上一些不足的地方。

繼續閱讀

React classSet 方法

操作樣式名稱(Class)

classSet() 是一個協助您快速操作 DOM 裏 class 字串的工具。
這裡有一些常見的情況,當沒有使用 classSet() 的時候:

繼續閱讀

React 雙向資料繫結

雙向繫結(Two-way binding)輔助函式

React 可以搭配 ReactLink 是一種實作雙向資料繫結較簡單的方式。

繼續閱讀

React 動畫

動畫

React 提供了一個 ReactTransitionGroup 的組件元件來作為一個底層的動畫 API,以及另一個 ReactCSSTransitionGroup 來方便實作基本的 CSS 動畫。

繼續閱讀

React 附加組件介紹

附加組件(Add-ons)

官方會把一些實用的共用工具放置在 React.addons。這些工具應該暫時被視為還在實驗階段,但最後官方應該會將其整合進核心功能或者如下列共用的工具函式庫:

繼續閱讀

React 關於工具整合

工具整合

一般來說,每一個專案使用不同的建置方式,系統環境,以及部署方式。React 試著盡可能的讓一切與系統環境沒有任何相依性。
意味著官方盡可能讓所有平台都能用一樣的方式運行 React。

繼續閱讀

關於 Reactjs 的核心觀念

這篇文章為官方部落格的文章隻翻譯。原文

以觀念來說React 是一種使用 Javascript 來快速建立大型 Web 的方式,它非常容易擴展,且官方已將其使用在 Facebook 與 Instagram 上。

繼續閱讀

理解 Javascript 的 Function.prototype.bind

Function.prototype.bind 函式繫結大概是當您開始學習 Javascript 時最後關注到的議題。
通常是當您遇到一種狀況:需要在其他 Function 保留 this 的執行環境(Context)。
講執行環境可能太抽象,舉例來說就是當您需要在函式的另外一個函式中呼叫 this.action() 的時候。
(這邊如果看不懂請耐著性子看下去)
不過通常這時您可能也不知道您需要的就是 Function.prototype.bind()

繼續閱讀

Gulp 使用問題與記錄

這篇文章除了記錄一下最後只是堪用的解法,如果有高手知道更好的做法煩請賜教。

話說小弟今天要來寫一些 React 的測試專案,就想說那就搭上 Gulp 吧!原本的目的很單純就只是用 Gulp compile 一些常用的 meta language,像是 Less, Jade 外加上 Jsx。也不是什麼很大的專案所以架構上其實就是在 React 的 StartKit上面再開個自己的測試目錄。

繼續閱讀

使用 Gulp 為前端開發伺服器

因為 Gulp 這個任務執行工具最近越來越流行,所以想說試著用它來做些事情,其實它跟 Grunt 一樣可以拿來處理很多事情像是整合 Javascript 檔案,壓縮圖片等等。如果你之前從來沒聽過 Gulp 這裡建議您先閱讀 英文教學, Gulp 初體驗
在這篇文章中,我們將學習使用 Gulp 來完成一個簡單的小型伺服器以協助您平日的前端開發,當然這也支援 livereload

繼續閱讀