可以少去理解一些不必要的概念，而多去思考為什麼會有這樣的東西，它解決了什麼問題，或者它的運行機制是什麼？ JS JavaScript 是互聯網上最流行的腳本語言，這門語言可用於 HTML 和 web，更可廣泛用於伺服器、PC、筆記本電腦、平板電腦和智能手機等設備。 https://www.runoo ...
可以少去理解一些不必要的概念，而多去思考為什麼會有這樣的東西，它解決了什麼問題，或者它的運行機制是什麼？
JS
JavaScript 是互聯網上最流行的腳本語言，這門語言可用於 HTML 和 web，更可廣泛用於伺服器、PC、筆記本電腦、平板電腦和智能手機等設備。
JSX
1. 什麼是 JSX
下麵我們看一段代碼：
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
JSX 是一種 JavaScript 的語法擴展，運用於 React 架構中，可以讓你在 JavaScript 文件中書寫類似 HTML 的標簽。再通過翻譯器轉換到純 JavaScript 後由瀏覽器執行，在實際開發中，JSX 在產品打包階段都已經編譯成純 Javascript，不會帶來任何副作用，反而會讓代碼更加直觀並易於維護。
JSX 允許你在 JavaScript 中編寫類似 HTML 的標簽，從而使渲染的邏輯和內容可以寫在一起。有時候，你可能想要在標簽中添加一些 JavaScript 邏輯或者引用動態的屬性。這種情況下，你可以在 JSX 的大括弧內來編寫 JavaScript。
元素是構成 React 應用的最小單位，JSX 就是用來聲明 React 當中的元素，React 使用 JSX 來描述用戶界面。
可以通過以下兩個方面瞭解 JSX：
- 擴展混合：JSX 是一種 JS 擴展的表達式，混合使用 Javascript 和類 html 來編寫代碼。
- 混合支持：支持樣式、邏輯表達式和事件的統一混合實現。
2. JSX 編譯之 Babel 編譯器
JSX 編譯過程由 Babel 編譯器實現。所謂的 JSX 其實就是 Javascript 對象加 XML，所以使用 React 和 JSX 的時候一定要經過編譯的過程：Bable 將 JSX 編譯成 JavaScript 對象，然後通過 ReactDom.render() 構造 DOM 元素保持隨時頁面更新。
// JSX 代碼
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<div>Babel 編譯器</div>);
// JSX 編譯後
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(React.createElement("div",{id: "babel", className: "babel"}, "Babel 編譯器1"))
3. 為什麼使用 JSX？
React 認為渲染邏輯本質上與其他 UI 邏輯內在耦合，比如，在 UI 中需要綁定處理事件、在某些時刻狀態發生變化時需要通知到 UI，以及需要在 UI 中展示準備好的數據。
React 並沒有採用將標記與邏輯分離到不同文件這種人為的分離方式，而是通過將二者共同存放在稱之為“組件”的鬆散耦合單元之中，來實現關註點分離。我們將在後面章節中深入學習組件。如果你還沒有適應在 JS 中使用標記語言，這個會議討論應該可以說服你。
React 不強制要求使用 JSX，但是大多數人發現，在 JavaScript 代碼中將 JSX 和 UI 放在一起時，會在視覺上有輔助作用。它還可以使 React 顯示更多有用的錯誤和警告消息。
4. JSX 官方文檔
官網：https://zh-hans.react.dev/learn/writing-markup-with-jsx
TypeScript
TypeScript 是 JavaScript 的一個超集，支持 ECMAScript 6 標準。TypeScript 設計目標是開發大型應用，它可以編譯成純 JavaScript，編譯出來的 JavaScript 可以運行在任何瀏覽器上。
TypeScript 特點：
1）TypeScript 的定位是靜態類型語言，在寫代碼（編譯）階段就能檢查錯誤，而非運行階段（動態語言邊解析邊執行）。
2）類型系統是最好的文檔，增加了代碼的可讀性和可維護性。
3）強類型、類型推斷。
4）有一定的學習成本，需要理解介面 (Interfaces)、泛型 (Generics)、類 (Classes)等。
5）介面：介面是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應該是抽象的，需要由具體的類去實現，然後第三方就可以通過這組抽象方法調用，讓具體的類執行具體的方法。即介面也是一種規範，用來描述、約束對象、函數、類的形狀的，即規範類等裡面必須實現哪些方法。
6）TS 最後也是編譯為 JS，運行在任何瀏覽器上。
語法學習：
TSX
TSX 表明是 Typescript 文件並使用了 JSX 語法，JSX 語法參考上面提到的 JSX 詳解。最後提供一個別人寫的文章幫助理解。
