iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
2
Modern Web

Zero to hero with React.js系列 第 4

【Day4 React】終於跟 World 說 Hello World!

簡易起手式,我使用 CDN 引入 React 來理解 React 的運作原理

我們需要的 CDN 有三個:

  1. 最基本的 React CDN
  2. React 在 0.14 後將 React DOM 跟 React core 分離,更符合了 React 跨平台抽象化的理念。因此我們要引入 react-dom 的函式庫
  3. 需要引入 babel 函式庫,因為 Babel 會將我們所寫的 JSX 翻譯成瀏覽器看得懂的語言,因此可以將 Babel 想成是翻譯的工具。React JS 和 React Native 已經全部採用第三方 Babel 的 JSX 編譯器實現。
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>

有了 Babel 翻譯機,我們用 JSX 語法暢快地在 JavaScript tag 裡面寫 HTML 語法,而在 <h1>Hello World!!!</h1> 的下一行又是原生 JS 語法,讀取擁有 root ID name 的元素,將我們要渲染的內容透過 ReactDOM.render 填入我們要產生 DOM 的區塊。

  <body>
    <div id="root"></div>

    <script type="text/babel">
        ReactDOM.render(
          <h1>Hello World!!!</h1>,
          document.getElementById('root')
        );
    </script>
  </body>
</html>

我把剛剛那段 JSX 程式碼貼到 Babel 去 compile 看看它會幫我們翻譯成什麼樣的程式碼:

可以看到 Babel 幫我們轉譯為 createElement 這個 JavaScript 語法。

Babel 讓我們的程式碼在各個瀏覽器都可以使用,如果你寫了很高深很前衛的語法,但你的瀏覽器版本可能比較舊,Babel 會 transpile 協助將你的程式碼降到瀏覽器可以支援的版本


上一篇
【Day3 React】認識 JSX Syntax
下一篇
【Day5 React】render 一個會動的 React 日曆
系列文
Zero to hero with React.js30

尚未有邦友留言

立即登入留言