[React] JSXを理解するところから始めてみる

JSXとは?

JavaScriptの構文拡張。
XMLのようなマークアップ形式で記述ができる。

コンポーネントを作成するために利用される。

JSXのサンプル

import React from 'react';

type Props = {
  message: string;
}

const SampleComponent: React.FC<Props> = ({ message }) => {
  return <h1>{message}</h1>;
}

export default SampleComponent;

---

JSXによって何がされているのか？

JSXは、ReactElementを作成する関数です。
ReactElementとはReact APIを介して、HTMLに変換されるオブジェクトのことです。

イメージ

<MyComponent foo="bar">baz</MyComponent> 

↓ ReactElementを生成するcreateElementメソッドに変換

React.createElement('MyComponent', { foo: 'bar' }, 'baz');

↓ createElementによって、ReactElementオブジェクトが作成

{ type: 'MyComponent', props: { foo: 'bar', children: 'baz' }, key: null, }

---

JSXの拡張子

JSXの拡張子はJavaScript, TypeScriptによって異なり、それぞれ以下の通りです。
.jsx（JavaScript）
.tsx（TypeScript）

---

JSX構文

React.FC

React.FCは関数コンポーネントを定義するための型です。

const SampleComponent: React.FC = () => { ... }

型定義

// React.FC
type React.FC<P = {}> = FunctionComponent<P>;

// FunctionComponent
interface FunctionComponent<P = {}> {
  (props: P & { children?: ReactNode }, context?: any): ReactElement | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}

FunctionComponentのエイリアスであることがわかります。
propsを受け取り、 ReactElemement | null を返す関数ということです。

---

式を埋め込む

JSXでJavaScriptの値を扱うには、中括弧 {} を使用します。

const user = 'Taro';
const element = <h1>Hello, {user}!</h1>;

尚、ifなどの式以外の構文は埋め込むことができません。

---

条件による表示制御

JSXでは、if文などの式が埋め込めないため、&&、||、?? といった演算子を使って表示を制御します。

{isLoggedIn && <LogoutButton />}

{user.name || "Anonymous"}

{user.name ?? "Anonymous"} 

---

繰り返し

JSXでリストや配列の要素を繰り返し表示する場合、アロー関数を用います。

<ul>
    {items.map(item => (
        <li key={item}>{item}</li>
    ))}
</ul>

---

コメントアウト

JSXでコメントを書くには、一般的に{/* */}を使用します。

{/* コメント */}
<div>Hello, world!</div>

---

フラグメント

Reactのコンポーネントでは、戻り値として単一の要素しか返すことができません。

divなどで要素をラップすることで解決することができますが、これだと不要な要素が作成されてしまいます

return (
    <div>
      <ChildA />
      <ChildB />
      <ChildC />
    </div>
)

フラグメント（<>）を使うと、余分なDOMノードを追加せずに複数の要素をグループ化できます。

return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
)

まとめ

JSXの基本についてまとめてみました。
参考になると嬉しいです。