這篇文章的主要內容

簡單說明 JSX 跟 babel 的作用。

JSX 語法

在上一篇文章中有出現一個有點像是 html 的標籤。

const App: React.FC<AppProps> = ({ name = "World" }) => {
  return <h1>Hello, {name}!</h1>;
};

createRoot(root).render(<App />);

就是這一個 <App name="Evan" /> 標籤，在 html tag 裡面沒有這個 App 的標籤，那為什麼可以在這裡寫這個標籤呢？

這個有點像是 html 的語法叫做 JSX，除了這 JSX 以外還有另一種寫 react 的方法。

React.createElement

const name = "Evan";
createRoot(root).render(
  React.createElement("h1", { name: name }, `Hello, ${name}`)
);

這個寫法跟上面 <App /> 的結果會相同，React.createElement 的這一個 method 可以接收三個以上的參數。

Syntax

React.createElement(type, props, ...children)

• type: tag 的名稱，可以是 react 元件或是 html tag。
• props: 這個元件接收的參數，在上面的例子中是 name 也可以是 class 或是 id。
• children: 元件中間所包住的所有元素，可以是複數，元素也是透過 React.createElement 產生。

假設我們希望在 react 裡面渲染一個列表，使用 React.createElement 的話會像下面這樣。

import React from "react";
import { createRoot } from "react-dom/client";

const root = document.createElement("div");
const body = document.body;

createRoot(root).render(
  React.createElement(
    "div",
    { className: "box" },
    React.createElement("h1", { id: "title" }, "Shopping List"),
    React.createElement(
      "ul",
      { id: "#shopping-list" },
      React.createElement("li", { className: "shopping-item" }, "apple"),
      React.createElement("li", { className: "shopping-item" }, "banana")
    )
  )
);

body.appendChild(root);

結果如下

一樣的結果如果透過 JSX 來實現的話會像下面這樣。

import React from "react";
import { createRoot } from "react-dom/client";

const root = document.createElement("div");
const body = document.body;

function App() {
  return (
    <div className="box">
      <h1 className="title">Shopping List</h1>
      <ul id="shopping-list">
        <li className="shopping-item">apple</li>
        <li className="shopping-item">banana</li>
      </ul>
    </div>
  );
}

createRoot(root).render(<App />);

body.appendChild(root);

結果是相同的。

看到上面兩種不同的開發方法，我相信大多數的人應該都會選擇使用 JSX 的語法來進行開發。
但是 react 其實沒有辦法解析 JSX 的語法，也就是說 react 看不懂 <App /> 或是 <div />，那該怎麼辦呢？

幸好我們有 Babel 可以使用！

Babel

Babel 是一個 JavaScript 編譯器，主要用來將新版本的 JavaScript 轉換成向後兼容的舊版本，讓舊的瀏覽器也可以執行。

它也可以用來編譯 JSX，讓 JSX 變成 React.createElement 的語法，讓 react 可以運作。

JSX 有一些語法上跟 html 不太一樣的地方

• 返回單個根元素
  所有 return 內容的最外層只能有一個根元素，不能返回複數根元素。

• 關閉所有標籤
  <img> 必須為 <img />
<br> 必須為 <br />

• 大多數東西都採用駝峰命名法
  stroke-width -> strokeWidth
background-color -> backgroundColor

• class 要改成 className
class 是 JavaScript 裡的保留關鍵字，所以如果要寫 css class 時會寫 className 來區分。

Writing Markup with JSX - react document

下一篇簡單說明 react 渲染 variable & props 傳遞
如果內容有誤再麻煩大家指教，我會盡快修改。

這個系列的文章會同步更新在我個人的 Medium，歡迎大家來看看 👋👋👋
Medium