昨天我正覺得好像都沒講到 JSX 和 Babel，發現課程接著就是介紹他們兩個。

• JSX

JSX 搭配 React 的狀況下，我們可以直接在 .js 檔案裡面用 HTML 編輯。

var React = require ("react");
var ReactDom = require("react-dom");

ReactDom.render(<h1>Hello World</h1>, document.getElementById("root"));

以上的 HTML 被一個 compiler 接過去，所以被轉換或是 compiled 成為真正的 Javascript，而這個 compiler 是來自 react module。

• Babel

react 裡面有個東西叫做 Babel，Babel 在自己官網首頁上的介紹就是他是個 JavaScript compiler，所以他可以把 JavaScript 轉譯成每個瀏覽器都看得懂的 JavaScript 版本，而轉譯的範疇包含了 JSX。

如果不想用 JSX 和 Babel，ReactDom.render 這段就不只有一行了：

var h1 = document.createElement("h1");
h1.innerHTML = "Hello world";
document.getElementById("root").appendChild(h1);

這樣的三行執行結果，會和以下的結果一模一樣：

ReactDom.render(<h1>Hello World</h1>, document.getElementById("root"));

因為以上的資訊有點少，所以我又大概 Google 了一下 React 詳細的介紹，連帶還有 JSX, Babel 的介紹也一起找到了～ 所以我筆記在下方：

Day02-React.js基本介紹(JSX)
Day03 | JSX 瀏覽器看不懂？要翻譯就靠 Babel