はじめてのJSX

ReactではHTMLを組み立てる上でJSXというJavaScriptの拡張構文を用いる。

関数コンポーネントを使う場合、そのコンポーネントを表す関数でJSXをreturnする。

例えばこんな感じ

export const Abc = () => {
    return <p>abac</p>;
}

JSXのなかでは{と}でくくることでJavaScriptの式を書くことができる。

条件分岐は３項演算子を使う。

import { useState } from "react";
export const Bbs = () => {
  const [flag] = useState<boolean>(true);

  return <div>{flag ? <>真</> : <>偽</>}</div>;
};

ループにはmapを使う。returnを忘れないように。

return (<ul> {
  ary.map((item: string, key: number)=>{
     return <li key={key}>{ item }</li>
   });}</ul>);