Next.js 試用感想

在使用過 Vue 社群的 Nuxt.js 開發過一次專案後,便對 React 方的 Next.js 抱有很大的興趣,尤其在知道 Nuxt 是由此啟發之後,對他抱的期待又更高了,於是在專案上線後,就轉去摸索了 Next 幾天,來試試看能不能把很久之前的 React 專案搬到上面,以下大概講一下那段時間的心得。

以下以 3.0.1-beta.X 為主

React/Redux 一個月的開發感想

banner

之前自學 React 時寫了一個簡單的線上簡歷,而我也確實靠他加分而拿到了工作,之後進去也是開始用 React 建立頁面,之後加上了 Redux;雖然這兩個總天數加起來大概就一個月,不敢說自己有摸清這些東西,不過還是就開發經驗來寫一些感想。

先講結論

React 其實不討厭,還算是喜歡的;但若是要我向別人推荐的話,我會建議學 Vue.js 入門,熟了再考慮要不要碰 React。若是不排斥用其他語言轉換成 js 的話,Elm 看起來是個不錯的選擇,但 ES6 開始普及之後我對這方面的興趣不大,所以這個建議比較不負責任一點。

摸新東西當然都會面臨挫折、觀念轉變以及學習曲線的問題,但事實上,不把前後分離這件事考慮進去的話(畢竟這是前端 framework 最主要的目的),失去的不會比獲得的感受來的少多少,頂多接近打平,剩下的端看你的 M 體質點多高來去彌補。說實在的,當初把玩 Rust 語言被摧殘到躺地板時我覺得還比較爽一點。

React.js 筆記 - Flux 的個人理解

banner

React.jsFlux 的部份我看了好久還是不太能理解他的意思,這幾天總算理出點頭緒(雖然不知道對不對…),在這邊做一點紀錄。

簡單介紹

Flux 算是一套前端的處理流程,一般的講法就是前端版的 MVC,主要分四大部份:

  • Action: 事件觸發或是跟後端溝通後,發送資料給 Dispatcher。
  • Dispatcher: 根據資料內容,分派至對應的函式做處理(通常是參照資料裡面的一個 type 屬性)。
  • Store: 儲存負責處理資料的函式,向 Dispatcher 註冊後,再由 Dispatcher 負責分發。
  • View: 接收處理後的結果並更新頁面。

這邊所指的資料在 React.js 裡叫作 state,當 state 更新之後 View 就會對頁面做相對應的更新。

用 jQuery 當範例

以點擊按鈕就新增一張卡片為例,一開始用 jQuery 寫時,大概會像下面這樣子:

1
2
3
4
5
6
7
$('#addCard').click(function() {
//- 新增數據
/* do something */

//- 生成 html 並放進網頁裡
/* do something */
});