Atoms/Title の頁で基本的な React コンポーネントの作成の流れをお伝えしました。これ以降も同じ流れで作成していきましょう。課題ページでは、各コンポーネントの作成におけるポイントを解説していきます。

まずはindex.jsxとindex.stories.jsx（旧テンプレートの場合はstory.jsx）を作成しましょう。

ディレクトリ構造

src
  └ components
    └ Atoms
      └ EditButton
        ├ index.jsx
        ├ story.jsx （旧テンプレートの場合）
        └ index.stories.jsx （新テンプレートの場合）

コンポーネントの構造の分析

Atoms/Title はただテキストが一つ入るだけのコンポーネントでしたが、Atoms/EditButton は鉛筆アイコンと、その上にマウスを当てたときに出る円の二つを含みます。

React コンポーネントの return の中身は一つの要素の中にまとまっている必要があるので、このコンポーネントでは以下のようになるでしょう。

 return (
	<ボタン全体>
    <鉛筆アイコン/>
  </ボタン全体>
  );

入れ物とホバー時の円は styled-components で、鉛筆アイコンは後述する方法で作成しましょう。また、ボタン全体は要素の意味を表すためにbuttonタグを元に作るのがよいでしょう。（styled.button）

アイコン画像といえどただの画像です。HTML で普通に画像を表示するのと同じ要領で表示することができます。

ただし、今回のように webpack を使って最終的に一つの js ファイルにコードをまとめる場合は、画像ファイルの扱い方は次の二通りとなります。

import文を使うと画像ファイルのサイズ分（厳密に言うとその 1.6 倍くらい）js ファイルのサイズが巨大化してしまいますが、 web サイト設置後にパスが切れたりする心配がないのでなにかと楽です。

今回使う画像ファイルは svg という、あまりファイルサイズの大きくならない形式なので、import 文を使ったやり方で実装しましょう。

本課題で必要なアイコン画像は全てsrc/assets/svg/の中に入っているので、見た目を確認しながら適切なものを選んで使いましょう。 Atoms/EditButton で使うのは pencil.svg ですね。