在前幾天我們淺談了 JSX 語法，以及講解了 Component、props 等，在 React 的世界中所需要用到的工具
那今天就讓我來更深入的了解 JSX 這個語法，究竟幫了我們多大了忙了～

為什麼瀏覽器可以看懂 JSX

基本上瀏覽器只認得 HTML、CSS、JavaScript，假如我們直接丟給瀏覽器 JSX 語法的話，它會滿頭問號？？所以我們需要 Babel 這個編譯器的幫忙，他會變成我們的翻譯官，將 JSX 依照語法規則翻譯給瀏覽器看，這樣才會使得瀏覽器正常運作。

我們可以進到專案，並開啟 npm start 開啟開發者工具，你就可以在原始碼的地方找到這裡，這就是 Babel 幫我們做的事情

但我們今天的重點不在 Babel
你有想過如果在 React 中不使用 JSX 語法會怎樣嗎？

在 React 中不使用 JSX !?

官方網站也有提到

JSX 對於使用 React 並不是不可或缺的。當你不想在開發環境中設置編譯時，不使用 JSX 開發 React 格外方便。

https://reactjs.org/docs/react-without-jsx.html

雖然我想在 React 專案中應該沒人會這樣做，但是我們用另一種方式是這來寫寫看 React，你會更讚嘆 JSX 這個語法糖，到底有多棒！

我想大家在 create-react-app 的時候，會在看到 package.json 看到這兩行，但是這兩個套件安裝了卻用在哪了?

"react": "^18.2.0",
"react-dom": "^18.2.0"

看我們看到 src/index.js ，原來是用在這裡啊！

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

	     // ReactDOM 在這
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // React 在這
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

那我們到底要怎麼在 React 中不寫 JSX 語法啊 !？

其實跟非常有關係

import React from 'react';

讓我們進入 src/App.js 並改寫成這樣
這邊我先額外做個 Component他的內容只是個簡單的 div 包 h1 而已

import React from 'react';
import { Component } from './Component'


function App() {
  return (
    <div>
      <h1>DOM</h1>
      <Component className="component" />
    </div>
  );
}

export default App;

// src/Component.js
const Component = () => {
  return (
    <div>
      <h1>Component</h1>
    </div>
  )
}

export { Component }

這時我們看看他的結構長怎樣

來吧讓我們不用 JSX 來實踐它吧
我們將 src/App.js 改寫成這樣

import React from 'react';
import { Component } from './Component'

function App() {
  return (
    React.createElement
    (
      'div', {className: "我有改寫喔"}, 
      React.createElement('h1', {}, 'DOM'),
      React.createElement(Component, {className: 'component'})
    )

    // <div className='APP'>
    //   <h1>DOM</h1>
    //   <Component className="component" />
    // </div>
  );
}

export default App;

再打開瀏覽器看他的結構，還是跟剛剛 JSX 的寫法結構一樣

我們來看看 React.createElement 接受的參數是什麼吧

React.createElement( 'HTML標籤' ,{物件 代表我的 HTML屬性}, 第三個參數之後都是代表每個子元素  )

這樣我們就知道了為什麼 JSX 只能回傳一個根元素了，
若我們將回傳的直改改成這樣

function App() {
  return ( 
      React.createElement('h1', {}, 'DOM')
      React.createElement(Component, {className: 'component'})
    )

除非這兩格元素是個陣列，不然在 JavaScript 中也是不行的

所以我們就知道了為什麼 JSX 語法回傳時需要用 div 或是 <></> 或是
<React.StrictMode> 包成一個元素並回傳了。

小結

今天透過不寫 JSX 語法來寫 React， 也讓我們更了解了 JSX 為啥只能回傳一個根元素，也讓我們知道 JSX 是一個相當直觀的語法