React入門 - Part3 - コンポーネントを書いてみる

目次

React入門 - 目次

コンポーネントの記述方法

実は、React入門 - Part2 - Next.jsを使ってページ遷移を行うで既にコンポーネントを記述しちゃっいました。

React.FC

ってやつです。これはReact+typescriptでの記述方法で、
Reac.FunctionalComponentの省略系のようです。

コンポーネントの書き方には、

• クラスコンポーネント
• typescriptを用いないファンクショナルコンポーネント

などもありますが、ここではtypescriptのみの紹介とします。

※クラスコンポーネントは、react hooksが出てくるまではよく使用されていたようですが、
たぶん今ではあまり使われない記述方法かと思います。

親子コンポーネントを書いてみる

私が経験したプロジェクトでは、eslintやprettierなどが設定されていて、且つ１コンポーネント300行までなど色々コーディング規約が自動で設定されていました。
また、React自体がコンポーネント思考ということもあり、役割でコンポーネントを分ける場面というのはよくあります。

親子関係のコンポーネントを作ってみましょう。

React入門 - Part2 - Next.jsを使ってページ遷移を行う

で行ったようにプロジェクトを作成し、next.jsへようこそが表示できるところまで準備しておきます。

４つのファイルをpages配下に作成します。
(私には3人の男の子供がいるので、人数分の子コンポーネントを作りました。)

• parent.tsx ⇒ 親コンポーネント
• child1.tsx ⇒ 子(長男)コンポーネント
• child2.tsx ⇒ 子(次男)コンポーネント
• child3.tsx ⇒ 子(三男)コンポーネント

parent.tsx

import React from 'react'
import Child1 from './child1';
import Child2 from './child2';
import Child3 from './child3';

export const Parent: React.FC = () => {

    /** レンダー部分 */
    return (
        <>
          <span>{'私は親です'}</span>
          <ul>
            <Child1 />
            <Child2 />
            <Child3 />
          </ul>
        </>
    )
}

export default Parent;

child1.tsx

import React from 'react'

export const Child1: React.FC = () => {

    /** レンダー部分 */
    return (
        <li>{'私は長男です'}</li>
    )
}

export default Child1;

child2.tsx, child3.tsxは

ファイル名が違うのと、
コンポーネント名Child1がChild2,Child3になるのと

<li>{'私は長男です'}</li>

の部分が次男、三男になるだけです。

各ファイル作成、実装が完了したら

http://localhot:3000/parent

にアクセスして見てください。

以下のように表示されたら完成です。
ソース眺めてたらなんとなく雰囲気が分かると思いますので中身については解説しません。

以上