React 元件運作與生命週期

與瀏覽器之間的運作

React 針對瀏覽器提供了十分強大的抽象化概念,讓你在大部份的情況下不必再直接操作 DOM ,不過有些時候或許還是需要單純的存取底層的 API(DOM API),可能是使用第三方函式庫或者事已經寫好的程式碼。

繼續閱讀

React 關於表單

表單

表單元件像是 <input><textarea><option>和其他元件有些不同,因為他們可以被使用者操作而產生變化。這些元件提供一個介面好讓我們以表單的形式和使用者產生互動。

繼續閱讀

React 重複利用元件

重複利用元件

這裡的設計界面,指的是打破現有的設計元素(button, form, fields 等)組合出定義良好可重複使用的元件。這樣一來下次你需要建置一樣的界面的時候就可以少寫一些程式碼,同時也節省許多開發時間。

繼續閱讀

React 複合式元件

複合式元件

到目前為止我們看過了如何建立一個單一的元件去呈現資料以及回應使用者的操作。接下來讓我們來看看 React 的另一個重要的功能:可組成。

繼續閱讀

JSX 常見的陷阱

JSX 常見的陷阱

JSX 看起來像 HTML 但有一些您應該知道關鍵性的差異。
注意:對於和 DOM 之間的差異,例如行內式屬性設定(inline style),請查閱這裡

繼續閱讀

Gulp 初體驗

Gulp 初體驗

從轉用 Grunt 以來其實我沒有遇到太多問題,加上大部份的 Framework 都把 Task 寫得好好的,對我來說用就好了。特別要客製的地方大概也都是小改一下別人的 Gruntfile 。
這篇記錄沒有要特別去分析 Gulp 。介紹在這篇The streaming build system Gulp就解釋得蠻清楚的了。
只不過在這不想外出的下雨天稍微用看看 Gulp。以下記錄非常單純,只是透過 Gulp 來編譯 Coffee, Jade,使用一下 watch 功能體驗一下。

繼續閱讀

為什麼使用 React ?

原文

為什麼使用 React ?

React 是 Facebook 和 Instagram 用來建置使用者介面的函式庫。近來有許多人考慮使用 React 來處理 MVC 中的 V 的部分。
Facebook 創造了 React 是為了解決構建一個大型且資料不斷變動的應用程式時遇到的問題。
為了達到這個需求,React 採用了兩個主要的核心概念。

繼續閱讀

React 第一個實戰範例

學習手冊

本篇教學會協助你建立一個簡單,但是實用的留言框功能,你可以放置到你的 blog 中。類似于DisqusLiveFyre,或者 Facebook comments。
留言框提供下列功能:

  • 留言框的界面(view)。
  • 一個表單(form)可以送出留言。
  • 為你的後端程式提供一個 Hooks ,
繼續閱讀