bootstrap

cssをあてるのに、bootstrapをインストールしましょう。

bootstrapとは最も人気のあるCSSフレームワークで、直感的なclass名をつけることで、簡単にcssをあてることができます。

npm install bootstrap

現在作成しているReactアプリでは、srcディレクトリ配下にApp.cssとindex.cssがあるかと思います。App.cssに関しては、App.tsxにてimportしていたのですが、削除したのでファイルを削除しましょう。index.cssに関しては、main.tsxにてimportされているかと思います。このようにimportすすることでcssを当てることでき、main.tsxでimportしているものはページ全体で適応されるものなので、グローバルcssといいます。今回は使用しないので、こちらの記述を削除し、代わりにbootstrapをimportしましょう。

main.tsx◎

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";

import "bootstrap/dist/css/bootstrap.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

上記にてbootstrapを使用できるようになりました。

次に新たなComponentを作成しましょう。

src配下にcomponentsディレクトリを作成します。実務では基本的にcomponents配下にComponentを格納していきます。

components配下にBreadcrumb.tsxを作成します。

このコンポーネントをbootstrapにてスタイリングしていくのですが、bootstrapは以下のURLにアクセスして、左側にさまざまな部品やレイアウトの名称が表示され、クリックすると、各部品やレイアウトのCSSの当て方を確認することができます。

Bootstrapをはじめるgetbootstrap

今回は、以下のページのBreadcrumbを利用します。

ブレッドクラムgetbootstrap

こちらを参考にBreadcrumb.tsxを以下のように記述しましょう。

Breadcrumb.tsx◎

export const Breadcrumb = () => {
  return (
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="#">Home</a>
        </li>
        <li class="breadcrumb-item">
          <a href="#">Library</a>
        </li>
        <li class="breadcrumb-item">
          <a href="#">Date</a>
        </li>
      </ol>
    </nav>
  );
};

エディタにて確認すると、classの部分にてエラーになっているかと思います。理由として、tsxでタグにクラス名をつける場合は、classではなくclassNameとつけることになっています。

上記のclassをclassNameに修正しましょう。

Breadcrumb.tsx◎

export const Breadcrumb = () => {
  return (
    <nav aria-label="breadcrumb">
      <ol className="breadcrumb">
        <li className="breadcrumb-item">
          <a href="#">Home</a>
        </li>
        <li className="breadcrumb-item">
          <a href="#">Library</a>
        </li>
        <li className="breadcrumb-item">
           <a href="#">Date</a>
        </li>
      </ol>
    </nav>
  );
};

作成したBreadcrumbコンポーネントをApp.tsxにてimportしましょう。

App.tsx◎

import { UserDetail } from "./UserDetail";
import { Breadcrumb } from "./components/BreadCrumb";

const App = () => {
  return (
    <div>
      <Breadcrumb />
      <UserDetail />
    </div>
  );
};

export default App;

上記修正にてブラウザで確認すると、以下のように表示されているかと思います。

このように、bootstrapを導入することで、class名に特定の名前を与えることで、いい感じのcssを当てることができます。