iT邦幫忙

DAY 2
2

Reactjs 30 天邊做邊學系列系列 第 2

Reactjs Day 2 - 快速概覽起手式

入門
開始學習了解 React 最方便的方式就是使用_JSFiddle_來觀察實作的範例: Hello Worlds。

事實上由於codepen.io有提供樣板與各種主流 Meta-Language 故小弟偏愛使用 CodePen。不過使用 CodePen 撰寫 JSX 需要一些額外的設定。請參考

[*] React JSFiddle
[*] React JSFiddle without JSX

下載入門套件
下載入門範例與套件。
[*] 下載 StartKit 0.11.2
[*] 官方下載頁面
[*] CND

解開壓縮檔後,在根目錄建立一個_helloworld.html_然後輸入下面的例子。

    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  
  
    <div id="example"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  

在 Javascript 裡面使用 XML 格式的語法叫做_JSX_,這種語法是官方推薦的寫法。可以參考學習更多關於 JSX 的用法。為了使 JSX 可以正確的轉換為 Javascript 我們會使用 <script type="text/jsx"> 標簽,以及記得要載入_JSXTransformer.js_以確保程式正確執行。在這邊我們會先提醒那些有程式開發經驗的學習者。
不要忘記在一開始加入_/** @jsx React.DOM */_,這不是一般註解,它是 React 用來定義要處理的 JSX 。如果你沒有加入這個片段,你的程式碼將不會被轉換。

獨立的檔案
你的 React JSX 檔案可以是分開的獨立檔案。接著讓我們建立_src/helloworld.js_

/** @jsx React.DOM */
React.renderComponent(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

然後在_helloworld.html_加入

<script type="text/jsx" src="src/helloworld.js"></script>

即使是分開檔案功能仍然可以運行,這在大型專案中將有助于 DRY 原則,同樣功能的元件應該抽離獨立。

離線轉換 JSX
安裝這個指令轉換工具(command-line)需要先安裝_npm_。

npm install -g react-tools

然後轉換_src/helloworld.js_檔案為原生 Javascript。

jsx --watch src/ build/

看看自動產生的_build/helloworld.js_如下,因為使用了_--watch_參數,你可以直接修改 JSX ,然後工具就會自動更新。指令的語法是_jsx --watch <source directory> <output directory>_ ,所以請不要指定到檔案。

/** @jsx React.DOM */
React.renderComponent(
  React.DOM.h1(null, 'Hello, world!'),
  document.getElementById('example')
);

注意
註解的解析器是非常嚴格的;為了能夠提取_@jsx_修飾子,兩件事情必須遵守:

  1. @jsx 註解區塊必須要在檔案或程式碼的開頭,也必須是第一段註解。
  2. 註解的開頭必須是 /** (_/*//將會不正常)。
    如果解析器找不到
    @jsx註解區塊_輸出時就不會執行轉換。

讓我們接著更新 HTML 如下:

    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <!-- No need for JSXTransformer! -->
  
  
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  

注意:type='text/jsx' 要拿掉,否則無法運作。

使用 CommonJS
如果你想要使用模組化的 React , 請 fork 官方專案,然後執行_npm install_和_grunt_,便可以產出遵循 CommonJS 規則模組化的程式碼。官方提供的 jsx 編譯工具可以整合可以簡單地整合到大部份的封裝系統。
CommonJS 補充

下一步
查閱官方教學和其他_/examples_範例目錄學習更多。


上一篇
Reactjs Day 1 - 前言與理解 Function.prototype.bind
下一篇
Reactjs Day 3 - 動態留言框範例教學
系列文
Reactjs 30 天邊做邊學系列30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
wwwerd25
iT邦新手 5 級 ‧ 2014-10-20 10:39:37

<Hello name= 'word' />, 少一個斜線喔~~

0
yes302
iT邦新手 5 級 ‧ 2015-07-27 16:50:19

andyyu0920 大大
請教一下,我在做jsx --watch src/ build/ 這個動作後,他所Create的js file,結果不太一樣呢

你是

&lt;pre class="c" name="code"> React.DOM.h1(null, 'Hello, world!'), 

我是
<pre class="c" name="code"> React.createElement("h1", null, "Hello, world!"),

這是為什麼呢?

我要留言

立即登入留言