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 生態有太多了解，還請大神指教🙏。
《上一篇》AI 人工智慧無失真放大影像線上工具匯集包／免費使用比較／推薦列表 
《下一篇》jQuery CDN 掛點解決方案？簡單的 JavaScript 讓您有本地替代方案！ 
留言區 / Comments
萌芽論壇