ParseReact實作（三）--將gmap放入react.js中

想show出固定座標的gmap，但是show出這個component之前需要先initialize，所以我在TodoList中加入initial function 

出現這樣的訊息

Warning: getInitialState was defined on TodoList, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

由於TodoList為了要使用observe()，是經由extend ParseComponent的class

                                  

https://medium.com/@kevintcoughlin/working-with-state-in-react-0-13-747fd594892

所以我想把initial的部分放到map裡面

先搞懂component的life cycle

Mounting （插入真實DOM節點）掛載流程

1.getInitialState()：當物件被調用時此方法會在寫入 DOM 之前被觸發，通常用來管理狀態的元件可以用這個方法初始化資料。

2.componentWillMount：當元件內部的結構處理完畢準備寫入 DOM 之前觸發。

3.componentDidMount(DOMElement rootNode)：當元件被寫入 DOM 之後觸發。當初始化需要操作 DOM 元素就可以用這個方法。

Updating 更新流程

1.componentWillReceiveProps(nextProps)：已掛載的元件收到新的 props 時被觸發。在這個方法裡你通常會去比較 this.props 和 nextProps 然後再用 this.setState 去改變狀態。

2.shouldComponentUpdate(nextProps, nextState)：這個函式需要回傳一個布林值，當元件判斷是否需要更新 DOM 時會被觸發。你可以在這個方法裡面去比較 this.props，this.state，nextProps，nextState 來決定是否需要更新，回傳 false 則會跳過此次觸發不更新，如果你什麼都不回傳預設會當做 false 。

3.componentWillUpdate：例如在上面 shouldComponentUpdate 你回傳了 true ，元件確定要更新了，在準備更新前這個方法會被觸發。

4.componentDidupdate(prevProps, prevState, rootNode)：更新後觸發。

Unmounting 卸載流程

componentWillUnmount()：當元件準備要被移除或破壞時觸發。

掛載後才能使用的方法

所以我把code改成這樣 

結果

這表示其實在todolist中，是有render到<Map/>這個class的，
我不信邪，把console log加入所有function中

果不其然

表示都有跑啊！！！gmap你到底死哪裡去啦
為什麼沒瓣法show出元件呢？救救我.........

11/16更新
找到答案了！！！！其實元件週期沒有錯，錯在於傳入gmap的時候就必須設定他的長跟寬。
這麼說好了，我們現在是在react裡面使用gmap.js去產生一個圖檔（地圖）然後傳給react的元件，去render他，使他出現在頁面上。
所以我們將render的部分改成

於是.........

出來了！！！！此刻我真的好想哭.........


其實會要發現這個小問題真的不容易，有時我常常debug一直會在自己的圈圈裡打轉，認為問題就是出在哪裡哪裡，卻總是忘記應該要從最底層開始，這次有主管的幫忙，我們從最底層的html開始改起，把map這個tag直接放在html裡面，在網頁上找到這個tag卻發現！這個map居然是1451*0！所以沒有設定他的長跟寬是永遠顯示不出來的！

大家要照步驟來喔～～～～～bug是很難找滴


引用：http://andyyou.logdown.com/tags/ReactJS

React tutorial 中文版

看完React.js的官方tutorial之後，我只有一句話想問：到底寫這麼抽象是給誰看......
這種東西不是應該要有圖嗎！！！！誰接誰哪裡看得懂啊，於是乎我決定狠下心來用我的破英文假裝翻譯一個新的中文官方網站，然後寄給官方哈哈哈
首先在這篇tutorial中我們會學到三個大方向
ㄧ、留言板的view
二、提交留言的表單
三、動態的資料更新
先來下載官方的react-tutorial

我們要先架一個假server，用terminal到根目錄之後用

即可在 http://localhost:3000/ 看見成功的demo。
在這裡我有一個笨問題，為啥是port3000？主管大大說每個port都有定義過的傳輸型態，由你傳輸的內容來決定你是哪個port，像FTP(File Transform Protocol )就是固定21port，3000屬於自己可以定義的範圍，可以讓code在上面跑。

接下來HTML中該include的就include

設定都好了之後重頭戲來了
先稍微講解一下此project的結構

我來畫個圖解釋一下我們所看見的view的樣子

建立第一個Component---CommentBox，利用最基本的<div>

！！！注意！！！在react.js中，以小寫開頭的tag是html中本來就存在的tag(像是<div>,<span>,<p>.....)而以大寫開頭的則是我們自己建立的tag(像是<CommentBox />）
可以自己建標籤？這是什麼？這就是XML的架構啊。所以將JavaScript配上XML，成為了JSX。
很多人都說看不懂JSX是什麼，我這麼菜更是看不懂了......
不用擔心，其實上面的程式碼經過babel的翻譯會變成

原來標籤的部分其實就是createElement而已，經由呼叫render來return資料。
我們剛剛經由React.createClass()來建立一個新的React components，而最重要的是一定要呼叫render，他才會回傳React components的樹狀結構，最後render給HTML。
<div>在DOM中並不是一個真實的節點，只是屬於React中的<div> Component，由於不是真實節點，React可以避免XSS的竄改攻擊。

什麼是XSS?

 會建立Component之後，我們要學著如何把他們組起來。
在同個js中加入CommentList 和 CommentForm

然後把原來的CommentBox寫死的內容改掉，變成render  CommentList 和 CommentForm這兩個Component

關係就是

最後的ReactDOM.render，我們就只需要render CommentBox這個Component就好了。ReactDOM.render具有container的概念，他會去看container中哪些element有改變，只需重新render更改的element，所以一定要放最後面，才能看到所有element。

接下來要談的是props屬性，在一個Component中可以存在多種屬性，例如CommentList會有發表者、內容、時間等等.....prop屬性可以繼承父母親的屬性，並且用prop來接收父母親的資料，例如this.props就是拿來接收父母親Component中的某種屬性的內容。

我們可以利用 {this.props.author} 來接收到CommentList中餵給Comment的屬性，{this.props.author} 就是接收author這個屬性的內容，那其他nested的內容（例如text）就是{this.props.children}。

Adding Markdown的部分只是為了防止xss的入侵，這部分就不多加撰述。

資料指定成功之後，我們再進一步，改成讀入一個可變動的JSON File。

第一步我們要先在CommentBox的render中先定義好接收的資料的名字，所以我們可以看到，<CommentBox data={data} />表示{data}是讀入的json file，然後把讀入的資料指給在CommentBox中的data。如此一來，CommentBox的小孩就可以用{this .prop.data}去接收。

第二步，在上述程式碼中，CommentList data接收到的資料傳入CommentList之後，利用 this.props.data.map（其實這就類似於for each）的概念，可以把每個Comment中的元素都讀出來，再把傳回來的東西指給他的小孩--comment，並且把所有讀出來的都集中在 commentNodes這個集合變數中。

資料流向圖說明

到目前為止，我們看到了很多prop，那prop的特性是取決於爸爸，對於接收的小孩來說，那是不能更改的(immutable)。所以我們要介紹另外一個--state，可以透過this.setState()區呼叫，這是屬於component自己的狀態，不屬於他的父親，是可以做更改的。

要利用state有兩個步驟

第一：我們要先initial state

第二：再將要傳送的data={this.state.data}

其實只被比原來的props多了一個initial的動作。

接下來是動態讀入的部分，這個時候就要提到MVC的觀念，我們來複習一下

對我們來說，先前讀入的JSON File就是Model，利用擷取的新資料來更新view，而接收action去處理data的就是Controller，等等我們會介紹那些接受action的function，Render就是呈現view，屬於React.js負責的部分。

現在假裝我們給了一個server，

利用ajax去讀入server給的東西，componentDidMount是一個React的function，當component重新render的時候會被呼叫，所以當動態讀入時會一直呼叫這個function，要把動態讀入的程式碼都放在裡面。重點是！！！！！用this.setState()就可以更改component自己所屬的state，呼應了前面說的，props無法改變的特點。

tutorial真的寫得很麻煩（哈哈哈哈偷罵），他又把ajax動態讀入的程式碼獨立出來，定義為loadCommentsFromServer，再在componentDidMount呼叫他，其他部分都一樣喔，ReactDOM.render還是只render CommentBox。

最後，資料流向都確定好了之後，就是要建立輸入表格的時候，這部分是CommentForm負責，最基本的就是先建立html的input

可是我們要做的是有互動的表格，什麼叫有互動？就是在使用者輸入完之後我們要清除表單內的東西，並且提交內容給我們的server，我們把互動的功能寫進handleSubmit的function中。

為什麼又出現了一個新的----this.ref！！！！！

ref存在的意義是，指定一個名字給child，而this.ref就是可以透過它，指向內部的元件，有點像在DOM裡面id的意思。

最後一步就是新增comment了，要如何新增comment到我們的server呢？

我們要先在CommentBox中定義一個 handleCommentSubmit  function是和server溝通這部分的事情，因為只有CommentBox是和server溝通的，任何關於server的事情都要從他開始。

資料從 CommentForm 繼承下來，用this.props接收onCommentSubmit給他的資料

然後再用ajax和server溝通

回呼順序為

以MVC的角度來看這個例子，被觸發的function，也就是handleSubmit()，就是Controller

完成了～～～～～

我真的很菜所以如果有啥不好的地方請一定要告訴我喔！！！我不想害到別人！！！

ParseReact觀念架構

ParseReact是一個可以利用Parse API來跟React.js溝通的library

建立在Parse JS SDK上層，透過web kit來讀取在雲端parse的資料。
簡單來說啦，就是前端用React，後端用Parse而已啦，基本上是用React寫，用ParseReact提供的一些特定function可以去query Parse上的資料。

為什麼會使用這個呢？其實我使用Parse已經有一段時間了，Parse就是一個免費的雲端資料庫，透過撰寫Cloud Code來讀取存在雲端的資料。由於Parse是在FB底下的一項服務，在網路上也是蠻紅的，功能也很多，像是處理geopoint、或是對query做處理，也有關於promise同步非同步的觀念架構，算是蠻強大的雲端資料庫。

而React是最近最火紅的view library，像今年的jsdc，大概有一半的講者都提到的了React!!!!

可見他現在在javascript佔有一席之地。

同時，他也是fb底下的服務，現在就來稍稍介紹一下React。

React的核心就是利用個別的component來維護state和UI，再重新render component

概念分為四部份

ㄧ、component

二、JSX

三、Virtual DOM

四、Data Flow

ㄧ、component

能將頁面配置為各component，例如：

在這張圖片中可以看見，一個網頁分成許多不同區塊，這樣的好處是，當你明確知道哪裡需要更改，直接去那個component改好之後就可以render新的部分就好，而不需要全部都重新載入，可以減少時間和server負擔。

二、JSX

JSX就是將html嵌入javascript的一種語言，優點就是html是顯示的內容，javascript是邏輯處理，我們常常為了理解html中的一個view是怎麼得到的而在javascript內找半天，若適合在一起，網頁的view和邏輯能一起，開發的過程中會省去很多心力。

三、Virtual DOM

Virtual DOM用來記錄component state的改變，通過特殊的diff算法找到DOM節點，再做修改。

優點是不需找整個DOM，花時間也對server造成很大的負擔，當程式開發越來越大的時候，需要負荷的就會越多。性能相較起來較好。

四、Data Flow

單向數據流，和Flux結合。React 負責的是MVC中的view，而Flux就相當於添加了MVC中的model、controller。

1.view去觸發action

2.action傳給dispatcher去做分發

3.store再觸發change事件通知view"data改了喔"

4.利用change事件，調用setstate更新UI

這個時候我就想問

那原來的mvc和flux有啥不同？

原來的mvc不限制數據只能單向流，於是view跟model間的關係就會變得非常複雜，當專案邊大的時候，會很難維護。

且單向資料比較容易了解，就算發展成大型結構的城市也較易維護，雙向資料流的綁定會贈呈連鎖更新，比較不易找出單一action所造成的改變結果。

好啦接下來觀念建構好了之後，我們下一篇再來實作吧