在 codepen.io 上使用 React

為了能夠在 CodePen 上使用 React 和 JSX 您必須要:

1. 加入這支 script 到 CodePen http://codepen.io/chriscoyier/pen/yIgqi.js
2. React: http://fb.me/react-0.11.1.js
3. JSX Transformer: http://fb.me/JSXTransformer-0.11.0.js

前言

自從 2013 年 Reactjs 開放原始碼後就被其單純的架構和理念所吸引。但由於沒有迫切的需求一直沒有將其使用于產品中。
且在當時 Angular 正流行，大部份的人都被 two-way binding 神奇簡練的寫法給嚇傻了，相較之下在第一眼看到 Reactjs 其給人的感受為: 怎麼好像要多打很多 Code 啊!?
而在 2014 因為 Facebook 提出 Flux 與 Jest 等東西的使我決定認真的研究一下並將其使用在產品上。
但由於 React 相關文章大多很散且中文文章不多，所以接下來的 30 天我將逐步根據官網教學與一些國內外高手的文章心得，佐以實作驗證後，記錄為此系列文章。

複製元件

在少數的情況下，某個元件可能想要變更不屬於自己的 props(例如: 修改 this.props.children 的 className )。
或者是複製多個被傳入的元件。cloneWithProps() 是這件事變的可能。

單元測試

React.addons.TestUtils 讓您可以在您的測試框架中更簡單的測試您的元件(官方使用 Jest)。
簡單的來說它是一系列輔助的方法以協助您測試 React 元件。

DOM 的差異

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

操作樣式名稱(Class)

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

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

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

動畫

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

附加組件(Add-ons)

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

工具整合

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