[ Day 05 ] JSX 语法

我们昨天 Day 04 的时候在 App.js 档案中有看到以下的程序码：

不过，为什麽能够在一个 JavaScript 函式中撰写看起来像是 HTML 标签的东西呢？今天就要带大家来一探究竟这个语法：JSX 语法。

JSX 语法

一个 JavaScript 的语法扩充，并且支援所有 JavaScript 的功能。

在详细说明 JSX 语法之前，要先让大家知道 React.js 其实是使用 JavaScript 来产生出 HTML 的，所以其实在函式内部中我们是可以使用原生 JavaScript 来做撰写。不过采用原生的 JavaScript 的话一样会随着专案的大小而产生出程序码过於复杂和冗长的状况，所以 React.js 的官方文件中也推荐我们使用 JSX 语法来做撰写喔！

为什麽要使用 JSX 语法？

刚刚上面有提及到，如果使用原生的 JavaScript 写法的话是很容易让较庞大的专案产生更复杂的程序码的。所以使用 JSX 语法就可以将我们的 UI 画面和程序逻辑撰写在一起（也就是结合 HTML 标签和 JavaScript 逻辑），减少程序码的复杂程度和维护时的便利性。
不过这边要特别注意，因为 JSX 语法是特殊的语法扩充，所以一般的浏览器是没办法辨识 JSX 语法的。这时候需要像是 Babel 等类似工具来转译成浏览器可以理解的 JavaScript 。

备注：使用 create-react-app 创建专案时，里面已经有 Babel 等转译的相关设定了，所以可以直接使用 JSX 语法。

如何撰写？

这边先带大家认识几个 JSX 语法的特色和规则：

1. HTML 可以当作参数

const greeting = <h1>Hello, world!</h1>;

ReactDOM.render(
    greeting,
    document.getElementById('root')
);

上面的范例就是最简易的 JSX 语法，我们将一个参数设定成 HTML 的标签，并在 ReactDOM 中去引用该参数。这样浏览器上就可以如下图般确实地显示出该段 HTML 标签内容。

2. JSX 语法中的保留字

function PersonOne() {
  return (
    <div className="person">
      <h1>Bill</h1>
      <p>Your Age: 26</p>
    </div>
  );
}

上面的范例中，我们在 div 标签中使用 className 来取代原本的 class 属性，那是因为 class 这个单字是 JSX 语法的保留字（ Preserve Word ）所以要使用 className 来替代。

3. 在 JSX 中撰写 JavaScript Expression

function formatName(user) {
  return user.firstName+ ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

上面的案例大家可以发现，在 JSX 也是可以撰写 JavaScript 的。不过要特别记得，如果有撰写 JavaScript 的话就必须使用 {} 包起来。

4. CSS 中的属性要使用驼峰式命名（ camelCase ）

  const style = {
        fontSize: '10px',
        marginBottom:'5%',
  };
    
  <p style={style}>Hello World!</p>

除了 CSS 中的属性要使用驼峰式命名之外，在撰写 style 的时候也必须使用 JavaScript 的物件格式。

5. 至少需要一个根节点

function PersonOne() {
  return (
    <div>
      <h1>Bill</h1>
      <p>Your Age: 26</p>
    </div>
  );
}

在上面范例中，我们提供了 PersonOne() 这个函式一个 div 标签的根节点，这样的写法在 JSX 当中才不会出现错误。
但是在 React.js 的 v16.2.0 开始提供了 Fragment 的方法来解决必须要有一个根节点的问题， React.js 提供这样的方法是想要减少不必要的节点，因此只要使用 Fragment 的话便可以在 JSX 语法中写上多个标签。

import { Fragment } from "react";

function PersonOne() {
  return (
    <Fragment>
      <h1>Bill</h1>
      <p>Your Age: 26</p>
    </Fragment>
  );
}

以上就是关於 JSX 语法的基本介绍！
另外有任何问题一样都非常非常欢迎提出和指教～
那我们下篇见ʘ‿ʘ