ReactでSemantic UIのCardコンポーネントを使ってみる_100DaysOfCodeチャレンジ28日目(Day_28:#100DaysOfCode)

## はじめに
この記事はTwitterで人気のハッシュタグ#100DaysOfCodeをつけて、
100日間プログラミング学習を続けるチャレンジに挑戦した28日目の記録です。

## 動作環境
* react 16.4.1

## 本日学んだこと

* ReactでのSemantic UIの使い方


## 導入編

まずは`create-react-app`コマンドでアプリの雛形を作成。

```bash
$ create-reacte-app sample-app
```

## CDNでSemantic UIを導入

```react
// public/index.htmlの<head>タグ内
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.3/dist/semantic.min.css">
```

## Cardコンポーネントを作成

srcディレクトリ内に新規で`Components`ディレクトリを作成。

```bash
$ mkdir src/Components
```

続けて、Cardディレクトリを作成。(コンポーネントごとにディレクトリを分けて、管理しやすくする為)

```bash
$ mkdir src/Components/Card
```

Cardディレクトリの中に、`Card.js`を作成する。

```bash
touch src/Components/Card/Card.js
```

`Card.js`に、クラスコンポーネントを作成する。

```react
import React, { Component } from "react";

class Card extends Component {
  render() {
    return (
      <div className="ui three stackable link cards">
        {/* カード1 */}
        <div className="card">
          <div className="image">
            <img src="" />
          </div>
          <div className="content">
            <div className="header">イベント名</div>
          </div>
          <div className="meta">
            <p>サブタイトル</p>
          </div>
          <div className="description">
            <p>おすすめポイント</p>
          </div>
          <div className="extra content">
            <span className="right floated">所在地:池袋</span>
            <span>
              <i className="user icon" />
              飼育数
            </span>
          </div>
        </div>
        {/* カード2 */}
        <div className="card">
          <div className="image">
            <img src="" />
          </div>
          <div className="content">
            <div className="header">イベント名</div>
          </div>
          <div className="meta">
            <p>サブタイトル</p>
          </div>
          <div className="description">
            <p>おすすめポイント</p>
          </div>
          <div className="extra content">
            <span className="right floated">所在地:池袋</span>
            <span>
              <i className="user icon" />
              飼育数
            </span>
          </div>
        </div>
        {/* カード3 */}
        <div className="card">
          <div className="image">
            <img src="" />
          </div>
          <div className="content">
            <div className="header">イベント名</div>
          </div>
          <div className="meta">
            <p>サブタイトル</p>
          </div>
          <div className="description">
            <p>おすすめポイント</p>
          </div>
          <div className="extra content">
            <span className="right floated">所在地:池袋</span>
            <span>
              <i className="user icon" />
              飼育数
            </span>
          </div>
        </div>
        {/* カード4 */}
        <div className="card">
          <div className="image">
            <img src="" />
          </div>
          <div className="content">
            <div className="header">イベント名</div>
          </div>
          <div className="meta">
            <p>サブタイトル</p>
          </div>
          <div className="description">
            <p>おすすめポイント</p>
          </div>
          <div className="extra content">
            <span className="right floated">所在地:池袋</span>
            <span>
              <i className="user icon" />
              飼育数
            </span>
          </div>
        </div>
        {/* カード5 */}
        <div className="card">
          <div className="image">
            <img src="" />
          </div>
          <div className="content">
            <div className="header">イベント名</div>
          </div>
          <div className="meta">
            <p>サブタイトル</p>
          </div>
          <div className="description">
            <p>おすすめポイント</p>
          </div>
          <div className="extra content">
            <span className="right floated">所在地:池袋</span>
            <span>
              <i className="user icon" />
              飼育数
            </span>
          </div>
        </div>
        {/* カード6 */}
        <div className="card">
          <div className="image">
            <img src="" />
          </div>
          <div className="content">
            <div className="header">イベント名</div>
          </div>
          <div className="meta">
            <p>サブタイトル</p>
          </div>
          <div className="description">
            <p>おすすめポイント</p>
          </div>
          <div className="extra content">
            <span className="right floated">所在地:池袋</span>
            <span>
              <i className="user icon" />
              飼育数
            </span>
          </div>
        </div>
        {/* カードここまで。あとはもっとみる */}
      </div>
    );
  }
}
export default Card;
```

## `App.js`にCardコンポーネントを読み込ませる

`App.js`でCardコンポーネントを表示させるために、importした上でJSXで記述する。

```react
import React, { Component } from "react";
import "./App.css";
import Header from "./components/Header/Header";
import Card from "./components/Card/Card"; //Cardコンポーネントをインポート

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <div className="ui segment"> //セグメントでContainerを作る
          <Card /> //Cardコンポーネントの表示
        </div>
      </div>
    );
  }
}

export default App;
```

ポイントとしては、`stackable`というクラス名を使うと、`three`のように指定したカード数を横並びにしてくれる。

例えば、`ui three stackable cards`のように指定すれば、カードを横並びで5枚表示してくれるようになる。

#### イメージ画像

![スクリーンショット 2018-07-18 00.49.03.png](https://qiita-image-store.s3.amazonaws.com/0/195539/48bd4a05-cd35-0954-d037-cd48921c853e.png)


## `yarn start`して表示を確認してみる

こんな感じになっていれば成功です。

![スクリーンショット 2018-07-18 00.44.34.png](https://qiita-image-store.s3.amazonaws.com/0/195539/2985df4e-cfb6-9ecf-083e-98659cc36d38.png)