React の人気と、このライブラリによってフロントエンド開発者にとって開発タスクがいかに容易になったかは誰もが知っています。 React は、アプリケーションのユーザー インターフェイスを構築するための最も人気のあるフロントエンド ライブラリです。業界は、アプリケーションを構築するための jQuery および DOM ライブラリの使用を徐々に減らしています。

レスポンシブなアプリを構築する場合、市場では CSS フレームワークが役立ちます。フロントエンド開発者として働いている場合、Bootstrap、Foundation、Bulma のようなフレームワークは新しいものではありません。ほとんどの業界はブートストラップ フレームワークを使用しています。何百万もの Web サイトがブートストラップで実行されています。

このブログでは、React と Bootstrap の使用方法、React アプリにブートストラップを追加する方法について説明します。 React ブートストラップ パッケージをインストールする方法と、それを React アプリケーションで使用する方法。まずはそれから始めましょう…

React JS アプリで Bootstrap を使用する方法は主に 3 つあります。

目次

• ブートストラップ CDN の使用
• ブートストラップを依存関係としてインポートする
• React-Bootstrap パッケージをインストールする

方法 1: ブートストラップ CDN を使用する

これは、React アプリでブートストラップを使用する最も簡単な方法の 1 つです。ブートストラップ CDN の最も優れた点は、インストールやダウンロードの必要がないことです。アプリのヘッドセクションにリンクをコピーして貼り付けるだけで機能します。以下は必要なリンクです。

 integrity='sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4'  crossorigin='anonymous'>>>

アプリケーションにブートストラップとともに JavaScript コンポーネントが必要な場合は、ページの下部、終了タグの直前にタグを配置します。

  
integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo'  
クロスオリジン='匿名'>