React.js from scratch part 1
React.js 在 2015 年 1/28, 29 的 facebook React.js Conf 正式 release
幾乎讓整個 web 前端開發有了翻天覆地的改變
聽起來可能有些誇張
但是事實上很多原本從事 Angular 的夥伴們都已經紛紛投靠到 React 的陣營
那是說 Angular 不好嗎？
或是其他的框架出了什麼問題？
會需要使用框架的原因 其實脫不開兩點原因
- data 的雙向流通
- UI Component 的多次利用
這些往往是一般單靠 pure javascript, jQuery 比較難以達到的（當然可以辦到 但就變成重造輪子了…）
小弟我還記憶猶新大三那年與隊友們用 pure PHP, jQuery 硬幹出的學生問題交流平台
當時 jQuery 的 ajax 事件與各種頁面切換的效果 來來回回寫了一兩千行 還全部都押在同一個檔案
現在回頭看看 還真的覺得年輕真好 什麼都不害怕（老實說現在我還覺得當初寫的挺美的xDD）
廢話不多說了
我們來看看幾個 React 它驚人好用的地方吧
Pros
- 利用 jsx 以及 virtual dom 的機制 讓我們能夠不去理會如何最佳化 re-render DOM
- 提供良好的 API 讓我們可以做出 server-side render 的效果（不用再透過 Phantom.js 啦）
- Component 的思考邏輯讓人在更正確的道路上去覆用元件
- 透過 react-native 實現 write once, write eerywhere！
Cons
- 變化速度太快 才剛學的馬上就過期
- React 本身很好理解 但是如何把一大包有的沒的工具整在一起 是最大的進入障礙
在介紹完以上的優缺點後 相信每個 engineer 都自命自己是刻苦耐勞的學習者 絕對不會害怕變化速度快
以及面對一大堆英文的窘境吧！
況且 React 到現在也將近一年了 在台灣以及大陸早就有相當多豐富的實戰文章 已經跟小弟三月踏進去是完全不同的天地了QQ
讓我們來看看如何開始 React 的第一趟旅程吧！
這邊我們簡單抓了兩個 react 所必需的 javascript file
分別是 react, react-dom
P.S： 在 react 0.14 之後的版本 將原本放在 react 裡面關於 DOM 相關的 API 另外搬到 react-dom
依照 react 的精神 我們將不會在 html 裡面寫多餘的 html 了
而是將這些 html 全部寫在 javascript 裡面 由 react 去決定如何 render
因此上面特別放一個
<div id=”root”></div> 的目的只是為了讓 react 知道要綁在什麼 element 底下
當然也可以完全是空的 直接塞在
<body></body> 是沒有問題的
最底下透過 render 可以把客製化的 element 綁在指定的位置底下
而這個客製化的 element 就是上面的 Hello
基本上每個 element 都一定會用到 render 的這個方法
我們可以在該 function 裡面進行許多 data 解析
最後在 return 裡面是我們熟悉已久的 html element
這樣我們就完成了 最最最最最簡單的 React project 了！
