React 是啥

React 是一個用來建構使用者介面的 JavaScript 庫（他其實不算框架？！），只是用於建立 UI渲染，可以和其他函式庫或套件搭配使用，以在特定環境中渲染。

那 jsx 是啥

而 JSX 是一種語法擴展，讓你能在 JavaScript 中寫出類似 HTML 的代碼。

在 React 中，JSX 用於描述 UI，並隨著組件狀態的變化而動態更新。JSX 使 React 代碼更易讀寫，並將 UI 與 JavaScript 更緊密地結合。
=> 簡單說就是 JSX 讓 React 更容易寫也更易讀啦 ＸＤ

React特性：最大限度減少開發者建構 UI 介面時出現的錯誤

(使用)React 的主要目標是最大限度減少開發者建構 UI 介面時出現的錯誤。它通過使用元件——描述部分使用者界面且自成一體的邏輯與程式碼段落來實現這點。

React 應用程式有許多開發者體驗(developer-experience)優勢，例如使用 JSX 編寫介面時會需要編譯過程。添加如 Babel 這樣的編譯器到網站上會讓程式碼執行效率變慢，因此開發者通常會在建構階段中設置此類開發工具。React 對開發工具需求蠻吃重的，但這些都是可以學習的。

JSX 語法

React 在許多設計模式中利用了現代 JavaScript 特性。它與 JavaScript 最大的區別在於使用JSX語法。JSX 擴展了 JavaScript 語法，以便能與類似 HTML 的程式碼並存。

JSX 是一種 JavaScript 的語法糖，它看起來很像 HTML，但實際上是 JavaScript。

JSX 方法允許我們將元素互相嵌套：

const header = (
  <header>
    <h1>Mozilla Developer Network</h1>
  </header>
);

若沒有其他的幫助，你的瀏覽器是無法直接讀取解析 JSX 的，當編譯完成（藉由使用像Babel或Parcel之類的工具），如果未經編譯且使用 JavaScript，我們的 header 表達式要寫成這樣才可以運行：

const header = React.createElement(
  "header",
  null,
  React.createElement("h1", null, "Mozilla Developer Network"),
);

是可以跳過編譯階段，並使用React.createElement()來撰寫你自己的 UI 介面的。但是，這樣做會失去 JSX 的聲明性優勢，並且程式碼更難閱讀。雖然編譯是開發過程的額外步驟，但是許多 React 社群的開發者認為為了可讀性，使用 JSX 是值得的。

每個 JSX 元素都只是呼叫 React.createElement(component, props, …children) 的語法糖。所有任何你能用 JSX 做的事，你都能用純 JavaScript 做到。

來源：
https://zh-hant.legacy.reactjs.org/docs/react-without-jsx.html

JSX 的主要特點：

標籤語法：JSX 使用類似 HTML 的標籤語法來創建 React 元素。
例如，<div /> 創建了一個 DIV 元素。

表達式插入：JSX 允許你在標籤內部插入 JavaScript 表達式。這些表達式需要被大括號 {} 包裹。
例如，<h1>{title}</h1> 會創建一個 H1 元素，其內容為變量 title 的值。

組件語法：在 JSX 中，你可以直接使用 React 組件。組件名需要以大寫字母開頭。
例如，<MyComponent /> 會創建一個 MyComponent 組件的實例。

屬性和子元素：JSX 標籤可以有屬性（類似 HTML 的屬性）和子元素。
例如，<div className="myClass">Hello, world!</div> 創建了一個帶有 class 屬性和文字子元素的 DIV 元素。

更詳細的 JSX 用法可以看這：

React 官方對於 JSX 的描述
https://zh-hant.legacy.reactjs.org/docs/jsx-in-depth.html