はじめに
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とイベントハンドラでデータ更新処理を実装しないといけません。
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> </> ); }
画面初期表示時
消してく
名前変える
ひとまず1章はここまで。
参考
- JSXに関して
Reactで使用するJSXの基本をわかりやすく解説|Kinsta®
- Reactの双方向バインディングに関して
【React】Reactで双方向バインディング!テキスト入力して、即座に変数を変えてる方法!|muchi-no-chi
- Stateに関して