在 React 應用程式中匯入 Bootstrap CSS

1. 在 React 中匯入和使用 Bootstrap CSS 來設定 create-react-app
2. 在 React 中匯入和使用 Bootstrap CSS 進行自定義 Webpack 配置

從頭開始建立和設定 React 元件的樣式可能是一個耗時的過程。這就是為什麼這麼多 React 開發人員依賴像 Bootstrap 這樣的外部庫來設定他們的元件樣式的原因。

這些庫激發了 UI 元件的樣式，例如按鈕和輸入欄位。

安裝 Bootstrap 不會使其樣式在你的應用程式中自動可用；你仍然需要匯入庫。

在你的 React 應用程式中使用 Bootstrap 的確切過程取決於你的設定和環境。本文將探討使庫在你的應用程式中可用的最常見解決方案。

在 React 中匯入和使用 Bootstrap CSS 來設定 create-react-app

create-react-app 設定使匯入和使用 Bootstrap CSS 變得容易。如果你像大多數初學者 React 開發人員一樣使用此環境，那麼你只需遵循簡單的步驟。

首先，你必須安裝 Bootstrap。

npm install bootstrap

下一步是匯入 CSS 檔案。為此，你必須使用 import 語句。

你必須在 index.js 檔案中匯入 Bootstrap CSS 檔案，該檔案包含整個元件樹。一旦你找到了這個檔案，你所要做的就是在頂部新增 import 語句。

import 'bootstrap/dist/css/bootstrap.min.css';

完成後，你可以使用 Bootstrap CSS 中的樣式和類。請記住，在 React 中，class 是一個保留字，因此我們使用 className 屬性將類應用於元素。

在 React 中匯入和使用 Bootstrap CSS 進行自定義 Webpack 配置

如果你使用自定義 webpack 配置，你必須找到配置檔案並將另一個物件新增到 loaders 陣列。實物如下。

{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
 }

你還需要安裝 Bootstrap 庫本身。

一旦你安裝了它並編輯了 webpack 配置，就只剩下一步了。你必須在 index.js 檔案中匯入 Bootstrap CSS 和 JS 檔案。

找到檔案後，應在頂部新增以下內容。

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

完成後，你可以在 React 中使用樣式和基於 jQuery 的元素。但是，React 不能很好地與 jQuery 和其他 JavaScript 工具配合使用。

這是因為 jQuery 和類似的庫在 React 框架的邊界之外改變了狀態，這使得 React 很難跟蹤狀態變化。所以避免在 React 中使用基於 jQuery 的元素。

用於 React 的 Bootstrap 庫

許多 Web 開發人員喜歡使用 Bootstrap 的穩定性和靈活性。然而，正如我們之前提到的，CSS 庫不能很好地與 React 結合。

有兩個優秀的庫受 Bootstrap 的啟發，但被定製為與 React 相容。

react-bootstrap 庫是 Bootstrap 的修訂版。它提供了自定義元件，而不是傳統的 jQuery 和 CSS，這些元件提供了許多主要的庫功能。

它允許開發人員自定義 React 應用程式的感覺、功能和外觀。該包是輕量級的，更重要的是，它允許你匯入特定的模組。

例如，如果你不需要其他任何東西，你可以只匯入自定義的 Button 元件。

reactstrap 是另一個庫，旨在在你的 React 應用程式中提供 Bootstrap 的特性和功能。你可以使用 npm 安裝它或通過 CDN 包含它。

這個庫沒有它的樣式，但會對主 Bootstrap 庫的樣式定義做出 React。

與 react-bootstrap 一樣，它允許你匯入特定的自定義元件。你可以使用許多 props 來自定義自定義元件的功能和外觀。

在 React 中你應該使用 Bootstrap

許多 React 開發人員選擇其他替代方案，例如 Material UI 而不是受 Bootstrap 影響的庫。

儘管 react-bootstrap 和 reactstrap 庫提供了很多定製機會，但它們的元件仍然只接受有限數量的 props，這可能會限制某些人。

一般來說，在這裡和那裡使用 Bootstrap CSS 沒有任何問題。但是，如果你只使用少量的 Bootstrap CSS，那麼匯入整個庫可能不值得。

最好找另一個框架或自己編寫那些自定義樣式。