const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

function App() {
  return (
    <div className="App">
      <h1>Welcome to {user.name} app {msg}</h1>
      <MyButton />
      {/* 同じコンポーネントを複数の場所でレンダーした場合、それぞれが独自の state を持ちます。 */}
      <MyButton />

      {isLoggedIn ?  "ようこそ" : "Loginしてね" }

      <MyList mylists={products}/>  ★ここ

    </div>
  );
}

type MyListType = {
  id: number;
  isFruit: boolean;
  title: string
}

type MyListProps = {
  mylists: MyListType[];
};

const MyList: React.FC<MyListProps> = ({mylists}) => {  ★ここ
    const listItems = mylists.map(mylist =>
        <li
          key={mylist.id}
          style={{
            color: mylist.isFruit ? 'magenta' : 'darkgreen'
          }}
        >
          {mylist.title}
        </li>
      );

    return (
        <ul>{listItems}</ul>
      );
}

export default MyList;

Reactアプリはコンポーネントで構成される。
コンポーネントとは、独自のロジックと外見を持つ UI（ユーザインターフェース）の部品のこと。
Reactにおけるコンポーネントとは、マークアップを返す JavaScript 関数です。

<MyButton /> のようにコンポーネント名は常に大文字で始める必要があり、HTML タグは小文字でなければなりません。

JSX は HTML より構文が厳格です。コンポーネントは複数の JSX タグを return することはできません。
<div>...</div> や空の <>...</> ラッパのような共通の親要素で囲む必要があります。

React では、CSS クラスを className で指定します。HTML の class 属性と同じ方法で動作します。

<li> に key 属性があることに注意してください。リスト内の各項目には、兄弟の中でそれを一意に識別するための文字列または
数値を渡す必要があります。通常、key はデータから来るはずで、データベース上の ID などが該当します。
React は、後でアイテムを挿入、削除、並べ替えることがあった際に、何が起こったかを key を使って把握します。

onClick={handleClick} の末尾に括弧がないことに注意してください！ そこでイベントハンドラ関数を呼び出すわけではありません。
渡すだけです。ユーザがボタンをクリックしたときに、React がイベントハンドラを呼び出します。

画面の更新
use で始まる関数は、フック (Hook) と呼ばれます。useState は React が提供する組み込みのフックです。
API リファレンスで他の組み込みフックを見ることができます。また、既存のフックを組み合わせて独自のフックを
作成することもできます。
フックには通常の関数より多くの制限があります。フックはコンポーネントのトップレベル（または他のフック内）
でのみ呼び出すことができます。
条件分岐やループの中で useState を使いたい場合は、新しいコンポーネントを抽出してそこに配置します。