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

学んだこと

Organism とは

• Atom や Molecule の組み合わせで構成される単体である程度の意味を持つ要素群
• (例)Twitter
  • ツイート入力エリア
  • サイドメニュー
  • 1 つのツイートエリア

実際に作成してみる

• 今回は、１つのユーザ情報を Organism として処理を作成する。
• 以下の様な構成で作成を行った。
  • Atomic
    • Card.jsx
      • ユーザ情報を載せたレイアウトを出力
  • Molecules
    • UserIconWithName.jsx
      • ユーザのアイコンやユーザ名の情報を取得し、表示するコンポーネント
  • Organism
    • UserCard.jsx
      • Card コンポーネントを使ってカードを生成し、カード内の情報は UserIconWithName コンポーネントを使って、ユーザの表示周りを生成。

Card.jsx

import styled from 'styled-components';

export const Card = (props) => {
  const { children } = props;
  return <SCard>{children}</SCard>;
};

const SCard = styled.div`
  background-color: #fff;
  box-shadow: #ddd 0px 0px 4px 2px;
  border-radius: 8px;
  padding: 16px;
`;

UserIconWithName.jsx

import styled from 'styled-components';

export const UserIconWithName = (props) => {
  const { image, name } = props;
  return (
    <SContainer>
      <SImg height={160} width={160} src={image} alt={name} />
      <SName>{name}</SName>
    </SContainer>
  );
};

const SContainer = styled.div`
  text-align: center;
`;

const SImg = styled.img`
  border-radius: 50%;
`;

const SName = styled.p`
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: #40514;
`;

UserCard.jsx

import styled from 'styled-components';
import { Card } from '../../atoms/card/Card';
import { UserIconWithName } from '../../molecules/user/UserIcomWithName';

export const UserCard = (props) => {
  const { user } = props;
  return (
    <Card>
      <UserIconWithName image={user.image} name={user.name} />
      <SDl>
        <dt>メール</dt>
        <dd>{user.email}</dd>
        <dt>TEL</dt>
        <dd>{user.phone}</dd>
        <dt>会社名</dt>
        <dd>{user.company.name}</dd>
        <dt>WEB</dt>
        <dd>{user.website}</dd>
      </SDl>
    </Card>
  );
};

const SDl = styled.dl`
  text-align: left;
  dt{
    float: left;
  }
  dd{
    padding-left: 32px;
    padding-bottom: 8px;
  }
`;