Apply ⏱ 45 min

TypeScript for React Components From Beginners to Masters

What You Will Learn

React コンポーネントの基本的なタイプを使用する方法
コンポーネントのプロパティとデフォルト値を定義する方法
ジェネリックを使用して再利用可能なコンポーネントを作成する方法

Key Concepts

React コンポーネントのタイプとプロパティの定義
デフォルト値とオプショナル値の使用
ジェネリックを使用したコンポーネントの作成
React Node と React Element の違い

Code Examples

const Heading = ({ title }: { title: string }) => {
  return <h1>{title}</h1>;
}
// タイトルをstring型で定義する

interface ContainerProps {
  heading: React.ReactNode;
}

const Container: React.FC<ContainerProps> = ({ heading }) => {
  return <div>{heading}</div>;
}
// headingをReact.ReactNode型で定義する

const List = <Item,>({
  items,
  render,
}: {
  items: Item[];
  render: (item: Item) => React.ReactNode;
}) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{render(item)}</li>
      ))}
    </ul>
  );
}
// ジェネリックを使用して再利用可能なリストコンポーネントを作成する

Lesson Summary

このレッスンでは、React コンポーネントの基本的なタイプとプロパティの定義方法について説明しました。まず、コンポーネントのプロパティを定義する方法と、デフォルト値とオプショナル値を使用する方法を紹介しました。次に、ジェネリックを使用して再利用可能なコンポーネントを作成する方法について説明しました。最後に、React Node と React Element の違いについて触れています。このレッスンを通じて、React コンポーネントの基本的な概念と、TypeScript を使用したコンポーネントの作成方法を理解することができます。

Practice Exercise

次のコンポーネントを作成してください。

interface Props {
  name: string;
}

const Greeting: React.FC<Props> = ({ name }) => {
  return <div>Hello, {name}!</div>;
}

このコンポーネントを使用して、名前を表示するアプリケーションを作成してください。

What Is Next

次のレッスンでは、React Hooks の基本的な概念と、TypeScript を使用した Hooks の作成方法について説明します。

Choose Language