跟著蘇泰安一起實探 React & Flux 風景

第一次見到蘇泰安是在去年的 Rails Girls Yilan,以為他是全職的 Ruby / Rails 開發者,想不到他自嘲:「好不容易進了用 Rails 的公司,卻都在寫 JavaScript。」能夠在五倍紅寶石再次見到他,讓我又驚又喜。

泰安這次來到五倍紅寶石分享當今火紅的 React。有趣的是,泰安並非一開始就切入正題,而是先聊聊程式語言的歷史。可惜正值缺氧的早晨,我只記得 ……

“Github Major Service Outage” — Georges Seurat, 1884

還有……什麼?! JavaScript 的年紀居然跟我差不多?!(重點誤)

直到在 Modern Web 2016 現場見到 Douglas Crockford 本人,我才後悔當初課後沒有趕緊買一本 JavaScript: The Good Parts 來拜讀,完全錯失了捧書簽名的大好機會 😭

泰安帶來的 JavaScript 有大量的 ES6 語法實作,還有 map, filter, reduce 等函式的介紹。儘管接觸 JS 至少一年了,知道到會寫卻還有一大段的差距,更不提我目前遇到最多的問題都是… TypeError 🙄


React 一詞對我來說並不陌生,從聽聞到真正實作卻相隔半年之久。直到這一陣子無預警地被指派了一個由 React + Flux + Radium 開發的網站,我才開始接觸這套火紅的 JS 函式庫。

上了戰場才發現自己不會用槍,為了活命還是得硬著頭皮匍匐前進。在完全沒有概念的情況下面對密密麻麻陌生的程式碼,慘賠數十億的腦細胞。幸虧泰安即時帶來了詳細的 React 教學(救星!!!)

泰安以 Workshop 的方式安排了一場 React + Flux 實作課程,課程內容如附圖般淺顯易懂:

對於過去只接觸過 jQuery 的我,React 帶來完全不一樣的觀點,完全顛覆我對前端開發的想像:

  • Always rerender
  • One way data flow
  • Component
  • Virtual DOM

在 MVC 的概念當中,React 只包括了 View 的部分。於是泰安接著帶來 Flux,Flux do the rest:

Single source of truth, in one place: Store

藉此機會雙管齊下,讓我對後端有了更深的瞭解。這次的工作坊激發了我對 React 的興趣,持續鑽研之外,未來也打算試試看 React Native。

Let’s get your hands dirty!
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.