. React Flowbite を使ってみる@準備回 | 心を無にして始める React | 「それなら猫の手で」
React Flowbite を使ってみる@準備回 | 心を無にして始める React | 「それなら猫の手で」
React Flowbite を使ってみる@準備回 | 心を無にして始める React | 「それなら猫の手で」

Flowbite

TailWind CSS Rapidly build modern websites without ever leaving your HTML. Bootstrap とはまた違 .

flowbite-react をインストール

npm install flowbite flowbite-react

設定

tailwind.config.js の content と plugin に、 flowbite を追加します。

/** @type */ module.exports = < content: [ "./src/**/*.", "node_modules/flowbite-react/**/*.", ], theme: < extend: , >, plugins: [ require('flowbite/plugin') ], >

heroicons をインストール

Flowbite React Components の紹介でも使われている アイコン のライブラリです。

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.Available as basic SVG icons and via first-party React and Vue libraries.

npm install @heroicons/react

動かしてみる

とりあえず動かしてみます。例によって App.js を編集します。

import < Fragment >from 'react'; import < Alert >from 'flowbite-react'; import < EyeIcon, InformationCircleIcon >from '@heroicons/react/24/solid' import './App.css'; function App() < return ( icon= > This is a info alert ); > export default App; 結果
  • React | 心を無にして始める React
  • React Bootstrap | 心を無にして始める React
  • [React Bootstrap] Alert を表示してみる | 心を無にして始める React
  • [React Bootstrap] Badge を表示してみる | 心を無にして始める React
  • [React Bootstrap] Breadcrumb を表示してみる | 心を無にして始める React
  • [React Bootstrap] Buttons を表示してみる | 心を無にして始める React
  • [React Bootstrap] Button Group を表示してみる | 心を無にして始める React
  • [React Bootstrap] Cards を表示してみる | 心を無にして始める React
  • [React Bootstrap] Carousel を表示してみる | 心を無にして始める React
  • [React Bootstrap] Close Button を表示してみる | 心を無にして始める React
  • [React Bootstrap] Dropdowns を表示してみる | 心を無にして始める React
  • [React Bootstrap] Figures を表示してみる | 心を無にして始める React
  • [React Bootstrap] Images を表示してみる | 心を無にして始める React
  • [React Bootstrap] List Group を表示してみる | 心を無にして始める React
  • [React Bootstrap] Modal を表示してみる | 心を無にして始める React
  • [React Bootstrap] Navs を表示してみる | 心を無にして始める React
  • [React Bootstrap] Navbar を表示してみる | 心を無にして始める React
  • [React Bootstrap] Offcanvas を表示してみる | 心を無にして始める React
  • [React Bootstrap] Placeholder を表示してみる | 心を無にして始める React
  • [React Bootstrap] Pagination を表示してみる | 心を無にして始める React
  • [React Bootstrap] Progress を表示してみる | 心を無にして始める React
  • [React Bootstrap] Spinners を表示してみる | 心を無にして始める React
  • [React Bootstrap] Tabs を表示してみる | 心を無にして始める React
  • [React Bootstrap] Overlays を表示してみる | 心を無にして始める React
  • [React Bootstrap] OverlayTrigger を表示してみる | 心を無にして始める React
  • [React Bootstrap] Tooltips を表示してみる | 心を無にして始める React
  • [React Bootstrap] Popovers を表示してみる | 心を無にして始める React
  • [React Bootstrap] Toasts を表示してみる | 心を無にして始める React
  • [React Bootstrap] Table を表示してみる | 心を無にして始める React
  • [React] Axios で通信してみる | 心を無にして始める React
  • [Node.js] FileSaver でファイルを保存してみる | 心を無にして始める React
  • [React] Axios で CRUD してみる | 心を無にして始める React
  • [React] React Webcam でカメラ映像を表示してみる | 心を無にして始める React
  • [React] React Webcam のカメラ映像をimgタグの画像に変換してみる
  • [React] React Webcam のカメラ映像を canvas に表示してみる
  • [React] 画像ファイルをドラッグ＆ドロップで取得してみる | 心を無にして始める React
  • [React+OpenCV] JavaScript で 画像処理をはじめてみる＠準備回 | 心を無にして始める React
  • [React] OpenCV で画像をグレースケールにしてみる | 心を無にして始める React
  • [React] OpenCV で画像を2値化してみる | 心を無にして始める React
  • [React] OpenCV で画像の膨張＆収縮をしてみる | 心を無にして始める React
  • [React] OpenCV で画像の簡単なノイズ除去をしてみる | 心を無にして始める React
  • [React] OpenCV で画像からエッジ抽出してみる | 心を無にして始める React
  • [React] OpenCV で画像のトップハット、ブラックハットをしてみる | 心を無にして始める React
  • [React] OpenCV で画像の HITMISS(Hit or Miss) をしてみる | 心を無にして始める React
  • [React] Axios で複数の通信を待ち合わせてみる | 心を無にして始める React
  • 今日から React 18 | 心を無にして始める React
  • [React] Suspense(React 18 の新機能) を Axios と合わせてみる | 心を無にして始める React
  • [React] TanStack Table v8 を React で使ってみる | 心を無にして始める React
  • [React] React 18 から setInterval などの非同期処理で気をつけること
  • [React] React Table で テーブル内のファジー（あいまい）検索 をしてみる | 心を無にして始める React
  • [React] react highlight words で検索文字列をハイライトしてみる | 心を無にして始める React
  • [React] Leader Line で要素同士を線でつないでみる | 心を無にして始める React
  • [React] React Table で ソート をしてみる | 心を無にして始める React
  • [React] Tailwind CSS を使ってみる@準備回 | 心を無にして始める React
  • [React] Flowbite を使ってみる@準備回 | 心を無にして始める React
  • [React+Tailwind] Flowbite で Alert を表示してみる | 心を無にして始める React
  • [React+Tailwind] Alert を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Accordion を表示してみる | 心を無にして始める React
  • [React+Tailwind] Accordion を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Avatar を表示してみる | 心を無にして始める React
  • [React+Tailwind] Avatar を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Badge を表示してみる | 心を無にして始める React
  • [React+Tailwind] Badge を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Breadcrumb を表示してみる | 心を無にして始める React
  • [React+Tailwind] Breadcrumb を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Button を表示してみる | 心を無にして始める React
  • [React+Tailwind] Button を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で ButtonGroup を表示してみる | 心を無にして始める React
  • [React+Tailwind] ButtonGroup を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Card を表示してみる | 心を無にして始める React
  • [React+Tailwind] Card を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Carousel を表示してみる | 心を無にして始める React
  • [React+Tailwind] Carousel を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Dropdown を表示してみる | 心を無にして始める React
  • [React+Tailwind] Dropdown を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Form を表示してみる | 心を無にして始める React
  • [React+Tailwind] Form を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Footer を表示してみる | 心を無にして始める React
  • [React+Tailwind] Footer を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で ListGroup を表示してみる | 心を無にして始める React
  • [React+Tailwind] ListGroup を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Modal を表示してみる | 心を無にして始める React
  • [React+Tailwind] Modal を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Navbar を表示してみる | 心を無にして始める React
  • [React+Tailwind] Navbar を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Pagination を表示してみる | 心を無にして始める React
  • [React+Tailwind] Pagination を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Progress を表示してみる | 心を無にして始める React
  • [React+Tailwind] Progress を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Rating を表示してみる | 心を無にして始める React
  • [React+Tailwind] Rating を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Sidebar を表示してみる | 心を無にして始める React
  • [React+Tailwind] Sidebar を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Spinner を表示してみる | 心を無にして始める React
  • [React+Tailwind] Spinnerを TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Table を表示してみる | 心を無にして始める React
  • [React+Tailwind] Tableを TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Tab を表示してみる | 心を無にして始める React
  • [React+Tailwind] Tab を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Timeline を表示してみる | 心を無にして始める React
  • [React+Tailwind] Timeline を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Toast を表示してみる | 心を無にして始める React
  • [React+Tailwind] Toast を TypeScript に書き直してみた | 心を無にして始める React
  • [React+Tailwind] Flowbite で Tooltip を表示してみる | 心を無にして始める React
  • [React+Tailwind] Tooltip を TypeScript に書き直してみた | 心を無にして始める React
[React+Tailwind] Flowbite で Alert を表示してみる | 心を無にして始める React Next [React] Tailwind CSS を使ってみる@準備回 | 心を無にして始める React Prev

関連記事

Google Search Console Insight の通知（過去28日間でクリック数が〇〇クリックに到達しました。）

このサイトでも Google Search Console を使っているのですが .

[React+Tailwind] Flowbite で Rating を表示してみる | 心を無にして始める React

準備 Flowbite が使えるプロジェクトを準備します。 Rating コンポ .

[React+Tailwind] Flowbite で Button を表示してみる | 心を無にして始める React

準備 Flowbite が使えるプロジェクトを準備します。 Button コンポ .

[React+Tailwind] ListGroup を TypeScript に書き直してみた | 心を無にして始める React

準備 書き直すベースはこちらの ListGroup コンポーネントです。 Jav .

[React+Tailwind] Sidebar を TypeScript に書き直してみた | 心を無にして始める React

準備 書き直すベースはこちらの Sidebar コンポーネントです。 JavaS .

[React+Tailwind] Flowbite で Spinner を表示してみる | 心を無にして始める React

準備 Flowbite が使えるプロジェクトを準備します。 Spinner コン .

作ったもの
  • 🔖 お菓子づくりの記録「お菓子ノート」
  • 🔖 [メメントモリ攻略] メメモリデータベース（仮）
  • 🔖 表記ゆれ検出ツール「どっかあった？」
  • 🔖 物体カウントツール「数を数えるやつ」
  • 🔖 [スロット] スロット設定判別ツール
  • 🔖 [スロット] まどマギ4 設定判別ツール
  • 🔖 [遊戯王 デュエルリンクス] ドロー計算機
  • 🔖 [遊戯王 デュエルリンクス] カード検索
  • 🔖 [遊戯王 OCG] カード検索
  • 🔖 [遊戯王 OCG] エヴァイユ計算機
  • 🔖 サプライチェーン排出量 算定サポート
プロフィール ８６プログラミングは、おもしろい。むずかしいことは、わからない。 カテゴリー タグ 新着記事

このサイトでも Google Search Console を使っているのですが .

お菓子どころか料理もしない人が、お菓子を作りはじめた記録です。 レシピ 必要なも .

準備 書き直すベースはこちらの Tooltip コンポーネントです。 JavaS .

準備 Flowbite が使えるプロジェクトを準備します。 Tooltip コン .

準備 書き直すベースはこちらの Toast コンポーネントです。 JavaScr .

準備 Flowbite が使えるプロジェクトを準備します。 Toast コンポー .

準備 書き直すベースはこちらの Timeline コンポーネントです。 Java .

Copyright © 2021 -2026 「それなら猫の手で」 All Rights Reserved.

WordPress Luxeritas Theme is provided by "Thought is free".

📎📎📎📎📎📎📎📎📎📎