はじめに

Angular Tour of heroesの1章(ヒーローエディター)をReactで試してみました。

heroプロパティの表示

export default function Heroes() {
   const hero = 'Windstorm';

   return(
      <h2>{hero}</h2>
   );
}

Angularは中括弧2つでしたが、Reactは1つ。中括弧によって、この中はJavascriptの変数を使いますよという意になるそう。

対して、Angularの中括弧の意味👇

中括弧間のテキストは多くの場合、コンポーネントのプロパティ名です。 Angular は、その名前を対応するコンポーネントプロパティの文字列値に置き換えます。より一般的には、中括弧間のテキストは、 Angular が最初に評価してから文字列に変換するテンプレート式です。

長年Angularをやっていると、どうしてもTypescriptとHTMLが混在してるのが気持ち悪い。

表示された画面

ちなみに、このreturn内のJSXの中は階層構造になってないといけない。
不要なdivで囲うのが嫌だってときは、

<React.Flagment></React.Flagment>

または、省略形で

<></>

と書かないといけない。忘れそう。

Heroインターフェースの作成とオブジェクト表示

特にこれといって大きな書き方の違いはなし。

interface Hero {
   id: number;
   name: string;
 }

export default function Heroes() {
   const hero: Hero = {
      id: 1,
      name: 'Windstorm'
    };

   return(
      <>
         <h2>{hero.name} Details</h2>
         <div><span>id: </span>{hero.id}</div>
         <div><span>name: </span>{hero.name}</div>
      </>
   );
}

Pipe演算子

AngularのようなPipeはありません。ので、Javascriptを使っていい感じに実装すればよいとのこと。

双方向データバインディング

こちらはAngularと大きく異なりました。

Angularは[(ngModel)]を使うことで双方向バインディングができました。
しかし、Reactには双方向バインディングがありません。
そのため、useStateとイベントハンドラでデータ更新処理を実装しないといけません。

ja.react.dev

import { useState } from "react";

interface Hero {
   id: number;
   name: string;
 }

export default function Heroes() {
   const initHero: Hero = {
      id: 1,
      name: 'Windstorm'
    };

   const [hero, setHero] = useState(initHero);
   const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => setHero({...hero, name: e.target.value});
   
   return(
      <>
         <h2>{hero.name} Details</h2>
         <div><span>id: </span>{hero.id}</div>
         <div>
            <label>Hero name: </label>
            <input type="text" value={hero.name} onChange={onChangeName} />
         </div>
      </>
   );
}