最近因為專案需要所以接觸到了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 來開發 


arrow
arrow
    文章標籤
    React Nodejs html javascript
    全站熱搜

    cookiesp 發表在 痞客邦 留言(0) 人氣()