今天要學習的是 React 中非常常用來搭配一起使用的語法JSX

JSX是什麼

JSX全名為 JavaScript eXtension ，屬於一種 React 的擴充語法
更容易理解的意思就是，JSX 語法讓我們可以在 JavaScript 中寫上 HTML 標籤
並且 JSX 能夠讓 React 產生一個 Element

寫寫看JSX吧
在 React 中嘗試寫了一個 App 的 Function

function App() {
  return (
    <div>
      <h1>Dear React</h1>
      <p>my name is React</p>
      <button>click</button>
    </div>
  )
}

查看 localhost:3000 預覽出來的成效

React中也可以這樣寫
這是一個簡單的使用JSX方法

const element = <p>Hello World!</p>;

把變數放到JSX中使用
宣告一個 name 變數，隨後將 name 變數透過大括號的方式放至 JSX 語法中也是可以正確被執行

const name = "Allison";
const element = <p>Hello {name}</p>;

JSX命名方法
React DOM 使用 camelCase 來命名屬性
ex：原本在 HTML 中 username ，在 JSX 則是使用 userName 來命名

以上文章內容如果有誤，歡迎大大們給予指教

參考資料：React官方文件