簡易起手式，我使用 CDN 引入 React 來理解 React 的運作原理
我們需要的 CDN 有三個：
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 協助將你的程式碼降到瀏覽器可以支援的版本
iThome鐵人賽
看影片追技術