joppot

コピペで絶対動く。説明を妥協しない

プログラミング

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

投稿日:


概要

みなさんこんにちはcandleです。今回はSemantic UIを使ってReactのデザイン開発をして見たいと思います。
Semantic UIはCSSフレームワークの1つで他に有名なところは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フレームワークの1つである</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フレームワークは大雑把なサイト制作の時には素早く作ることができます。
一方で、凝ったデザインを施したサイトを作りたい場合は融通が効かないことが多いです。
用途に合わせて適切に使っていきましょう。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

MAMPのPHPからSQLite3データベースにアクセスして値を取得する

概要 みなさんこんにちはcandleです。MAMPのSQLiteデータベースとテーブルを作成して、レコードも挿入した事なので、値を取得してみましょう。 前提 phpのバージョンが5.3以上である SQ …

railsのroutesでhttpのGETやPOSTを指定してルーティングを表示する

概要 みんさんこんにちはcandleです。今回は少し頭をひねれば分かる事ですが、少し迷ったので、記事にまとめました。 railsですごいwebアプリケーションを作っていると、ルーティングが複雑きわまり …

ruby on railsのckeditor gemの使い方をscaffoldを用いて解説する

概要 みなさんこんにちはcandleです。今回はruby on railsのckeditorという素晴らしいgemを使って見たいと思います。 ckeditorとはweb版の高機能なwordとかテキスト …

basscss v8以降にv7以前のスタイルを追加する(自分用メモ)

概要 みなさんこんにちはcandleです。今回はbasscssのv8でかなりデフォルトのスタイルから削除されてしまったスタイルをインポートします。 v7以降からbasscssのスタイルはかなり分割され …

ruby on railsのckeditor gemをapacheのproductionの本番環境で動かす

概要 みなさんこんにちはcandleです。今回はckeditorを本番環境で動かしてみたいと思います。 とは言っても基本的な記述はdevelopment環境と同じなので、そこまでは前回の記事を参照お願 …

  • English
  • 日本語

ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー