2017-04-02

React.js開發入門教學(1)-Hello World

現在JavaScript的函式庫琳瑯百目，其中很受到注目的就是由Facebook所推出的React.JS了。

我也是剛開始初學，所以就一邊練習一邊教學吧（笑），但我的最終目的是希望能夠透過ReactNative

來寫些小小的APP～。那就廢話不多說，讓我們先從不需要安裝任何環境的狀況下來學習React的

撰寫方式吧！

首先呢，我們就先透過鼎鼎大名的 https://jsfiddle.net 來練習練習吧！

我們知道React就像是jQuery之類的Javascript的函式庫，所以在執行的一開始一定

都得先匯入這些函式庫，所以我們先在HTML的部份寫上

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

以前的舊版本的話只需要react.js就可以執行，但是因為現在React也能夠開發手機軟體

所以facebook把網站用的部分給拉出來到react-dom.js中了，所以這邊得兩個都得匯入

接著我們來建個 div 區塊來測試等一下的代碼！

<div id="test"></div>

然後馬上按下左上角的 Run !!……………什麼事情都沒發生。

所以我們再來寫一下下面javascript格子中的東西…

ReactDOM.render(
  React.DOM.h2(null,'hello world'),
  document.getElementById('test')
);

然後馬上按下左上角的 Run !!……………這時候終於可以看到我們執行的結果啦！

＝＝＝＝＝
※ReactDOM.render() 是把React轉成HTML的最重要的方法！

※React.DOM則是要建立一個虛擬DOM所需要的方法，在這個地方我們要建立起一個h2標籤。其中

這個方法裡面有兩個參數，一個我們填 null 一個填上了hello world，第一個是可以讓我們

自由變更該標籤屬性的參數，而後面則是該標籤的HTML要顯示些什麼東西的參數。

※第三行我應該不需要多作解釋了吧！就是取得ID為test的元素囉！
＝＝＝＝＝

上方提到React.DOM這個用法，是一個比較簡短的用法。如果你需要自行創立一些標籤，你也可以這麼寫

ReactDOM.render(
  React.createElement('h2', null, 'hello world'),
  document.getElementById('test')
);

也是可以的。

再來就是所謂標籤屬性的部份，什麼是標籤屬性？其實就是HTML標籤中的屬性。我們都知道HTML

標籤中如果要對應到CSS，那麼就是使用style屬性了。那我們馬上來試試看改變背景文字顏色吧！

讓我們把javascript內容改一下

var style = {style:{backgroundColor: 'black', color: '#FFFFFF'}}

ReactDOM.render(
  React.createElement('h2', style, 'hello world'),
  document.getElementById('test')
);

馬上在執行看看，是不是就看到黑色背景與白色文字了呢？恭喜恭喜，我們終於學會最基本的寫些

DOM的方法了！！

React