ReactのAtomicDesign(molecule)について学ぶ

学んだこと

Molecule の作成

• Molecule は Atom の組み合わせで意味を持つデザインパーツを指す。
• 検索用のテキストボックスとボタンが一緒になっているコンポーネントを作成する。

SearchInput.jsx

• 検索用テキストボックスとボタンのコンポーネント
• input は別途 atom として作成している。

import { PrimatyButton } from '../atoms/button/PrimaryButton';
import { Input } from '../atoms/input/input';
import styled from 'styled-components';

export const SearchInput = () => {
  return (
    <div>
      <SContainer>
        <Input placeholder="検索条件を入力" />
        <SButtonWrapper>
          <PrimatyButton>検索</PrimatyButton>
        </SButtonWrapper>
      </SContainer>
    </div>
  );
};

const SButtonWrapper = styled.div`
  padding-left: 8px;
`;

const SContainer = styled.div`
  display: flex;
  align-items: center;
`;

App.jsx

• Molecules である SearchInput を追加した。

import { BrowserRouter, Link } from 'react-router-dom';
import './App.css';
import { SecondaryButton } from './components/atoms/button/SecondaryButton';
import { SearchInput } from './components/molecules/SearchInput';
import { PrimatyButton } from './components/atoms/button/PrimaryButton';

export default function App() {
  return (
    <div className="App">
      <PrimatyButton>テスト</PrimatyButton>
      <SecondaryButton>検索</SecondaryButton>
      <SearchInput />
    </div>
  );
}

input.jsx

• SearchInput で使う input の atom を用意した。
• 基本的な CSS はここで記述し、変更があった場合は Molecule 側で修正を行う。

import styled from 'styled-components';

export const Input = (props) => {
  const { placeholder = '' } = props;
  return <SInput type="text" />;
};

const SInput = styled.input`
  padding: 8px 16px;
  border: solid #ddd 1px;
  border-radius: 9999px;
  outline: none;
`;