React 初嘗試(二):利用 Babel CDN 讓瀏覽器直接跑 JSX

2019/08/17 3,037 0 網站技術 , HTML , JavaScript , React

JSX 常常被使用在 ⚛️ React 中,React 官方文件給了一段原始碼:

const element = <h1>Hello, world!</h1>;

官方說它既不是字串也不是 HTML,而是 JavaScript語法擴展,它用來與 React 一起來描述 UI(使用者介面)應該長成什麼樣子,也就是說 JSX 可以更方便開發者用 JavaScript 撰寫與 React 有關係的 UI,看了很舒服,JSX 是很棒的輔助工具,但 JSX 並不是必須的,但多數開發者還是會去使用它。我們在開發時會希望立刻輸出結果讓我們可以偵錯或預覽,這時候就可以運用 Babel CDN 讓瀏覽器直接跑 JSX,但請注意!這僅限在開發時使用,一旦上網,這樣直接用瀏覽器編譯 JSX 的做法非常沒有效率,還是要使用 npm(請參考:Node.js)安裝預處理器(例如:Babel)進行編譯,先將 JSX 轉換成瀏覽器可以讀取的 ES5 或 ES6(JavaScript 的版本,多數瀏覽器都可支援到 ES6 了!IE 還是去 ... 😜)再上網。

關於 React 如何使用、相關知識,請先瀏覽本文主題的上一篇教學:React 初嘗試:不使用 npm、Babel 和 webpack 的 HELLO頁面

如果網頁中直接寫 JSX 瀏覽器是看不到的,甚至會在開發者工具中報錯,因此我們就要用 Babel CDN 讓瀏覽器暫時擁有 JSX 編譯器,就可以馬上看到結果了!請將以下原始碼加入到 HTML </head> 前:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

這次用 JSX 寫一段 UI,並寫入 ID 為「root」的 <div> 中,原始碼如下:

class HELLO extends React.Component {
  render() {
    return <h1> 您好!{this.props.who}~來點好吃的{this.props.food}吧!</h1>;
  }
}

ReactDOM.render(<HELLO who="萌芽站長" food="香蕉" />, document.getElementById("root"));

以上存成「React_With_JSX.js」,接著在 HTML <body>~</body> 中加入以下原始碼:

<div id="root">
<!-- 這個 div 區塊由 React 管理 -->
</div>
<script type="text/babel" src="React_With_JSX.js"></script>

「type="text/babel"」是關鍵,這讓瀏覽器內的 Babel 編譯器知道這個文件是 JSX 且需要處理。有了以上原始碼後就成功將 JSX 與 HTML 連結起來了!現在就可以用瀏覽器來跑這個 HTML,看「您好!萌芽站長~來點好吃的香蕉吧!」這段文字有沒有正常顯示啦!如果有就代表成功啦!可以到開發者工具(F12)「Console」,你會看到這段文字:「You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/」,意思就是「您正在用瀏覽器內的 Babel 編譯器,如果要成為產品前請使用預處理器(Precompile)」,這個貼心的訊息就是要強調這個「瀏覽器內的 Babel 編譯器」僅限開發使用


▲ 我把 JSX 都寫在「React_With_JSX.js」中了!這樣分開 IDE 比較方便撰寫,例如要做格式化之類的~

▲ 「瀏覽器內的 Babel 編譯器」讓 JSX 可以直接使用並預覽,這樣開發 React 應用會輕鬆很多,尤其是需要常常控制 UI 的應用,「Console」內的提示訊息我也附在截圖內了!可以自己用用看,就會出現這個小提醒唷!😉

💬 本文為站長的筆記文章,若有錯誤請告知!我並沒有對 React 生態有太多了解,還請大神指教🙏。

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇