React – 初探

  1. 先道官網下載
  2. 解壓縮後放到你的本機伺服器環境,如 http://localhost,因為有些部分需要引用內部 .js 檔案,如果不是在伺服器環境,Chrome 會出現跨網域限制提示訊息
  3. 關於 Hello World, 可參考。先在根目錄建立 helloworld.html ,並貼上

    這是內嵌的方法。
  4. 若要外嵌 React JSX 就需要這麼做。先在根目錄建立 src/helloworld.js 接著貼上


    然後在你的 helloworld.html 添加參考

     

透過上面步驟,就可以讓你簡單了解使用方式了,主要 React 建議使用 jsx 的方式來建構。下面我們看看這兩種方式的不同。原文參考


  1. HTML 元素的名稱,可使用小寫,如同上面的  className=”commentBox” ;然而 React 自訂的 class 名稱,開頭務必要使用大寫,如上方的 CommentBox。可自行修改大小寫,就會發現問題了。
  2. 若將上面改成使用 JSX 語法,就這麼寫

    – 上面的 var CommentBox 可以自定名稱。你可以改成如 obj ,這裡的開頭大小寫沒有限制。因為這只是變數,準備放到 React.createElement( 第一個參數這邊 ) 而已。
    – 透過 React.createClass() 可以建立一個 React 組件。
    – 最重要的方法 render ,是可以返回一個 React 的樹狀組件結構,最終會渲染到 HTML。
    – 這裡的 div 標籤,並不是真正實際的 DOM 節點,而是 React 的一個元素。也就當作是個虛擬的吧!這是安全的,因為不是實際產生 HTML,所以可以避免XSS攻擊的問題。
    – render 不可以返回基本的 HTML ,需要返回樹狀的組件結構。這就是為什麼要使用 React 的樹狀組件結構。這是非常關鍵的!
    – 透過 React.render() 產生的根組件,會注入為原始的 DOM,作為二次使用時的立足點。

    – 我將上方改寫這樣來幫助了解變化。一樣他是先建立虛擬的 React 組件後,才注入到  HTML 。

    這是使用 JSX 的格式來寫, React 推薦使用。關於 JSX 語法文章可參考這裡

我們組合多個使用

 

建構組件 (Composing components) ,原文參考

先貼入你的 file.js

 

使用 Markdown 與 for each 資料

 

helloworld.html

 

helloworld.js

請按照順序看喔 0) -> 1) -> 2) ….

改為遠端獲取 JSON 資料

修改這段就可以了。使用 url=’你的伺服器獲取網址’

 

發表迴響