ReactでのTempleteの作成について学ぶ

学んだこと

Templete とは

• ページのレイアウトのみを表現しする要素(実際のデータは持たない)
  • (例)Twitter
    • サイドメニュー
    • ツイートエリア
    • トピックエリア等のレイアウト情報

実際に作成してみた

• 今回は以下の実装を Templete で作成する。
  • ヘッダとフッターの情報を持ったレイアウト
  • ヘッダのみの情報を持ったレイアウト

作成したコンポーネントの詳細情報

• Templete
  • DefaultLayout.jsx
    • フッター＋ヘッダーの情報を持ったレイアウトのコンポーネント
  • HeaderOnly.jsx
    • ヘッダーのみの情報を持ったレイアウトのコンポーネント
• Atomic
  • Footer.jsx
    • フッダーのレイアウトと情報を持ったコンポーネント
  • Header.jsx
    • ヘッダーのレイアウトと情報を持ったコンポーネント

DetaultLayout.jsx

import { Footer } from '../atoms/layout/Footer';
import { Header } from '../atoms/layout/Header';

export const Defaultlayout = (props) => {
  const { children } = props;
  return (
    <>
      <Header />
      {children}
      <Footer />
    </>
  );
};

HeaderOnly.jsx

import { Header } from '../atoms/layout/Header';

export const HeaderOnly = (props) => {
  const { children } = props;
  return (
    <>
      <Header />
      {children}
    </>
  );
};

Header.jsx

import { Link } from 'react-router-dom';
import styled from 'styled-components';
export const Header = () => {
  return (
    <SHeader>
      <SLink to="/">HOME</SLink>
      <SLink to="/users">USERS</SLink>
    </SHeader>
  );
};

const SHeader = styled.header`
  background-color: #11999e;
  color: #fff;
  text-align: center;
  padding: 8px 0;
`;

const SLink = styled(Link)`
  margin: 0 8px;
`;

Footer.jsx

import { Link } from 'react-router-dom';
import styled from 'styled-components';
export const Footer = () => {
  return <SFooter>&copy; 2025 test Inc.</SFooter>;
};

const SFooter = styled.header`
  background-color: #11999e;
  color: #fff;
  text-align: center;
  padding: 8px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
`;