【デイトラ学習記録】DAY29 JSXとコンポーネント

今回はJSXとコンポーネントについて学習していきます。

JSX(JavaScript XML)とは

Reactで使われる構文
HTML(のような構文)をJavaScriptの中に書き込める

JSXの基本構文

要素

HTMLタグと同じように書けるので、UIの開発が直感的に認識できる

TSX

const element = <h1>Hello</h1>;

属性

素のHTMLと同様に書けるが、属性はキャメルケースで書く必要があり、className や onClick になる。

TSX

const element = <h1 className="title">Hello</h1>;

ネスト

ネストも可能

TSX

const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>This is a React component.</p>
  </div>
);

変数

TSX

const todo: string = "掃除";
const element = (
  <div>
    <h2>TODO</h2>
    <p>{todo}</p>
  </div>
);

イベントハンドリング

クリックイベントの場合

TSX

const onOpenMenu = () => {
  alert("MENUが開きます");
};

const element = <button onClick={onOpenMenu}>menu</button>;

コンポーネント

コンポーネントとは

Reactの基本単位であり、再利用可能なUIの部品
アプリのUIを小さな独立した部品として管理できる
再利用性とメンテナンス性が向上する
現在は関数コンポーネントが主流で、TypeScriptとの相性も⚪︎

Propsとは

Propsは、コンポーネントにデータを渡すしくみ
書き方は以下の二通りある

TSX

type Props = {
  name: string;
};

const App = ({ name }: Props) => {
  return <h1>Hello, {name}</h1>;
};

root.render(<App name="world" />);

TSX

type Props = {
  name: string;
};

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

root.render(<App name="world" />);

コンポーネントのネスト

コンポーネントをネストして使用することができる
繰り返し処理には、map を使うのが推奨で、キーを使用する
リスト(繰り返し)で表示する場合には、キーが重要
- キーを正しく設定することで、効率的な再レンダリングとバグの防止が可能です。
- ユニークなIDや値をキーとして使用し、インデックスの使用は控えるのが理想
- キーを適切に設定することで、Reactの仮想DOMが持つパフォーマンスの利点を最大限活かすことができる

TSX

type ItemProps = {
  id: number;
  name: string;
  price: string;
};

const Item: React.FC<ItemProps> = ({ name, price }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>価格: {price}</p>
    </div>
  );
};

const ItemList: React.FC = () => {
  const items = [
    { id: 1, name: "リンゴ", price: "100円" },
    { id: 2, name: "バナナ", price: "150円" },
  ];

  return (
    <div>
      {items.map((item) => (
        <Item key={item.id} id={item.id} name={item.name} price={item.price} />
      ))}
    </div>
  );
};

// Reactコンポーネントをレンダリング
const root = createRoot(document.getElementById("app")!);
root.render(<ItemList />);

ファイル分割

1つのファイルに全てのコードを書いていたので、1コンポーネント1ファイルに分割していきます。

src/js/component/Item.tsx

import * as React from "react";

type ItemProps = {
  name: string;
  price: string;
};

const Item: React.FC<ItemProps> = ({ name, price }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>価格: {price}</p>
    </div>
  );
};

export default Item;

src/js/component/ItemList.tsx

import * as React from "react";
import Item from "./Item";

const ItemList: React.FC = () => {
  const items = [
    { name: "リンゴ", price: "100円" },
    { name: "バナナ", price: "150円" },
  ];

  return (
    <div>
      {items.map((item, index) => (
        <Item key={index} name={item.name} price={item.price} />
      ))}
    </div>
  );
};

export default ItemList;

src/js/index.tsx

import * as React from "react";
import { createRoot } from "react-dom/client";
import ItemList from "./component/ItemList";

// Reactコンポーネントをレンダリング
const root = createRoot(document.getElementById("app")!);
root.render(<ItemList />);

感想

JSX(JavaScript XML)とコンポーネントの基本について学習してきました。

Reacの案件に参画した際も、見様見真似でなんとなく書いていた部分が多かったので、基本から学ぶことができました。