React webでsematic-ui-reactを使い基本的なサイトを作成する

概要

みなさんこんにちはcandleです。今回はSemantic UIを使ってReactのデザイン開発をして見たいと思います。
Semantic UIはCSSフレームワークの１つで他に有名なところはTwitter Bootstrapなどがあります。
一方でSemantic UIは用意されているコンポーネントのシンプルさと使い勝手の良さが評価されています。

前提
create-react-app コマンドが入っている

react プロジェクトを作成

適当なフォルダで、以下のコマンドを時刻して、reactプロジェクトを作成します。

create-react-app hello_sematic
cd hello_semantic

semantic-ui-cssライブラリのインストール

semantic-ui-cssはsematic-ui用のcssを提供するライブラリです。
semantic-ui-reactはreactのコンポーネントだけを提供するライブラリなので、スタイリングはこっちが請け負っています。

yarn add semantic-ui-css

cssをimportします。
src/index.jsを開いて、上の方に以下を記述します。

import 'semantic-ui-css/semantic.min.css'

semantic-uiで使用するcssの読み込みができました。

semantic-ui-reactライブラリのインストール

次に、react用のコンポーネントライブラリのsematic-ui-reactをインストールします。
このライブラリはReactのJSXで使えるコンポーネントをあらかじめ用意してくれています。

yarn add semantic-ui-react

以上です。

Semantic-ui-reactのコンポートを使ったサイト作成

詳しくは下記のドキュメントを参考にしてください。

https://react.semantic-ui.com

src/App.jsを開いて、以下のように書き換えます。

import { Container, Divider, Header, Segment, Table } from 'semantic-ui-react'
import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <Container text style={{ marginTop: '7rem' }}>
        <Header as="h2">概要</Header>
        <Divider />
        <Table basic="very">
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>項目</Table.HeaderCell>
              <Table.HeaderCell>内容</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Sematic-UIとは</Table.Cell>
              <Table.Cell>CSSフレームワークの１つである</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Reactとの相性は？</Table.Cell>
              <Table.Cell>公式がReactライブラリを提供しているので安定感がある</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table>
        <Header as="h2">公式サイト</Header>
        <Divider />
        <Segment>
          <Header as="h3">公式ドキュメント</Header>
          <a href="https://react.semantic-ui.com"> https://react.semantic-ui.com</a>
        </Segment>
        <Segment>
          <Header as="h3">Github</Header>
          <a href="https://github.com/Semantic-Org/Semantic-UI-React">
            https://github.com/Semantic-Org/Semantic-UI-React
          </a>
        </Segment>
        <Header as="h2">解説</Header>
        <Divider />
        <p>このように、あらかじめ用意されているコンポーネントを利用して、綺麗なサイトを作成できる。</p>
      </Container>
    )
  }
}

export default App

このように表示されます。

semantic-ui-reactを使ったreact開発

具体的に、どのように、Sematic-UIのコンポーネントを使って開発したら良いかはドキュメント見ることをオススメします。

例えば、Buttonコンポーネントの使い方を見て見ましょう

以下のサイトに移動して

https://react.semantic-ui.com/elements/button/

基本的なButtonコンポーネント使い方のサンプルが書かれています。
一番上の「Button」のセグメント見ますと、右端に「」記号があります。これをクリックすると、ReactのJSXのコードが展開されます。
これを真似て自分のコードに書けば利用できます。

また、sematic-ui-reactのコンポーネントは多くのプロップスを受け取れます。
どのような値があるかはサイト上部の「Props」の「Button」をクリックすると表示されます。

Buttonコンポーネントは多くのプロップスがありますね。
それぞれのコンポーネントとプロップス、サンプルなどをみて、サイトを設計して見てください。

まとめ

cssフレームワークは大雑把なサイト制作の時には素早く作ることができます。
一方で、凝ったデザインを施したサイトを作りたい場合は融通が効かないことが多いです。
用途に合わせて適切に使っていきましょう。