React+Semantic UI Reactの環境構築

タイトルの通り、React+Semantic UI Reactの環境構築手順をまとめます。
https://react.semantic-ui.com/

前提

• Node.jsのインストールは完了している

手順

1. create-react-appコマンドでReactのひな型を作成
2. Semantic UI Reactをインストール
3. index.jsにimportを追加

手順1:create-react-appコマンドでReactのひな型を作成

コマンドプロンプトを開き、アプリソースを設置するフォルダまで移動します。
今回はCドライブ直下のsourcesフォルダ内にします。

コマンドプロンプト

C:\User\motona> cd C:\sources

入力してEnterで以下のようになればOKです。

コマンドプロンプト

C:\sources>

移動出来たら<code>create-react-app</code>のコマンドを実行します。
アプリは「react-with-semantic-ui」とします。

コマンドプロンプト

C:\sources> npx create-react-app react-with-semantic-ui

しばらく待って、「Happy hacking!」と表示されればOKです。

コマンドプロンプト

(前略)
Happy hacking!

C:\sources>

手順2:Semantic UI Reactをインストール

Semantic UI ReactのGet startに沿って進めます。
まず、作成したアプリのフォルダ内に移動します。

コマンドプロンプト

C:\sources> cd ./react-with-semantic-ui
C:\sources\react-with-semantic-ui>

続いて、ライブラリをインストールするコマンドを流します。
開発環境に応じて、npm, yarnは切り替えてください。

コマンドプロンプト

C:\sources\react-with-semantic-ui> npm install semantic-ui-react semantic-ui-css

コマンドが正常に完了すればOKです。
package.jsonを確認し、dependenciesにsemantic-ui-cssとsemantic-ui-reactがあるかを確認する方法でも確認可能です。

package.json

{
  // 前略
  "dependencies": {
    // 中略
    "semantic-ui-css": "^2.5.0",
    "semantic-ui-react": "^2.1.4"
  },
  // 後略
}

手順3.index.jsにimportを追加

Semantic UI ReactのGet Startedにあるように、アプリのエントリーファイルにimportを追加します。

After install, import the minified CSS file in your app's entry file:

create-react-appでアプリを作成した場合、エントリーファイルはindex.jsになるので、そこにimportを追加します。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
+ import 'semantic-ui-css/semantic.min.css'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

終わり

これでSemantic UI Reactを使った開発のための環境構築は完了です。
動作確認がてら、App.jsでButtonを表示してみたりすると良いと思います。

src/App.js

import './App.css';
import { Button } from 'semantic-ui-react';

function App() {
  return (
    <div className="App">
      <Button>Click!</Button>
    </div>
  );
}

export default App;

↓実行してみるとこんなボタンが表示されると思います。

それでは良いReactライフを！