3. componentファイルの作成

2025/08/31 React

複数のファイルで利用する共通部品（凝ったH2タグ等）はcomponentファイルとしてあらかじめ作成しておきます

componentファイルはpublic/src/componentsディレクトリ下に置きます

src/components/Headline2.jsx

import React from 'react';

const Headline2 = (props) => {
  return (
    <hgroup>
      <h2>{props.name}</h2>
      <p>{props.subname}</p>
    </hgroup>
  )
};

export default Headline2;  // 名前なしExport

src/About.jsx

import Headline2 from './components/Headline2';  // Exportされたコンポーネントをインポート

const About = () => {
  return (
    <>
      <Headline2
        name={'About'}
        subname={'このサイトについて'}
      />
    </>
  );
}

BACK