最近因為專案需要所以接觸到了Node.js進而接觸到了React這個JavaScript framework
這個framework是由Facebook所開發且Instagram也在使用
雖然目前還在開發中版本也只到0.14.2(2015.11.12) 但API也已經很成熟囉
React 關於官網的介紹為:
React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.
We built React to solve one problem: building large applications with data that changes over time.
有關更多的說明可以去官網內觀看
這裡內容會持續更新也有可能有錯誤，有點像是筆記本....
有問題也請告訴我!!! 謝謝喔
Setup
首先要來安裝React, 首先到官網內的Download頁面
你可以選擇直接下載的方式, 或是利用npm去做install的動作
在這裡我們選擇直接下載(0.14.2), 載下來之後我們可以看到裡面有兩個資料夾跟一個檔案
/build (Library)
/examples (範例程式碼)
README.md (說明文件)
Try it now
現在來動手做看看!! 當然你有空也可以照example內的程式碼來去做練習
上面的HelloMessage就是一個由React所建立的物件，他被建立出來之後可以作為HTML的元件來使用
有點像是物件導向的概念，而在HelloMessage裡面render裡面所要回傳的是html的描述
針對這個元件你所要賦予的HTML描述，而在裡面我加入了onMessageClick這個Function
用來監聽當我的元件被使用者點下之後會觸發setState進而去改變clicked這個變數的boolean值
而當setState被觸發之後ReactDOM.render這個function會在觸發一次進而改變view
ReactDOM.render這個function的用意在於把HelloMessage這個元件插入到<div> id=example這個位置
P.S. 有興趣開發Node桌面應用程式的可以利用atom/electon + webpack 來開發
留言列表
