如何將 Bootstrap 主題模板與 React 應用程序集成
如果您是 ReactJS 的新手，創建前端界面可能具有挑戰性。Bootstrap 框架及其模板使它更容易、更快速。
Bootstrap 擁有任何人都可以免費定制和發布的主題模板。在您的應用程序中下載和使用它們之前，您可以從許多模板中進行選擇。
模板可幫助您快速創建卓越的前端界面，讓您有更多時間專注於復雜的功能。您可以通過將一個模板與 ReactJS 應用程序集成來了解 Bootstrap 模板。
創建你的 React 應用程序
首先在您機器上的文件夾中創建一個 ReactJS 應用程序。或者，您可以按照有關創建新應用程序的官方React 指南進行操作。
下載引導程序模板
從Start Bootstrap主題網站或您喜歡的其他網站下載您選擇的模板。有幾個網站提供免費的在線 Bootstrap 模板。
對於本指南，請下載名為 Agency 的 Bootstrap 主題。
下載後，解壓縮文件夾文件以查看其內容。您會注意到您有名為 assets、CSS、JS 的文件夾和一個名為 index.html 的文件。
將 Bootstrap 模板添加到 ReactJS 應用程序
接下來，將下載文件夾的內容複製到React App 中名為public的文件夾中。您會注意到現在您有兩個 index.html 文件。將 Bootstrap index.html文件的內容複製到 React App 的index.html文件中。
顯示 Bootstrap 模板
將Bootstrap HTML 添加到App 的index.html 後，運行App 查看是否集成成功。使用以下命令：
npm start
您應該會在瀏覽器中看到該模板，如下圖所示。
將 Bootstrap 主題集成到應用程序組件中
要將 Bootstrap 模板集成到 React App 中，您必須將 HTML 部分從 index.html 複製到每個組件。組件允許您為應用程序的不同部分編寫代碼並重用它們。這減少了重複並組織了您的應用程序的結構。
index.html 文件現在有不同的部分 Navigation、About us、Contact 和 Footer。在 src 文件夾中，創建兩個文件夾、components 和 pages。將這些部分劃分到如下所示的文件夾中：
這些組件應包括以下內容：
- Header.jsx：標頭部分。
- Navigation.jsx：導航欄和頁腳。
頁面的文件夾將包含以下內容：
- AboutUs.jsx：關於我們的信息。
- Home.jsx：服務、投資組合、客戶和團隊部分。
- Contacts.jsx：聯繫信息。
從 index.html 文件中復制每個部分的 HTML，並將其添加到每個組件中。語法應如下所示：
import React from 'react'
const Header = () => {
return (
<div>
<header className="masthead">
<div className="container">
<div className="masthead-subheading">Welcome To Our Studio!</div>
<div className="masthead-heading text-uppercase">
It's Nice To Meet You
</div>
<a className="btn btn-primary btn-xl text-uppercase" href="#services">
Tell Me More
</a>
</div>
</header>
</div>
);
};
export default Header
接下來，將組件中 HTML 的語法更改為 JSX。要在 Vscode 編輯器上自動執行此操作，請單擊Ctrl + Shift + P。在彈出的窗口中單擊 HTML to JSX 選項，將 HTML 更改為 JSX。
JSX 是 JavaScript 的語法擴展。它允許您混合使用 HTML 和 JavaScript 在組件中編寫代碼。將所有部分複製到組件後，index.html 文件將僅保留樣式鏈接和腳本。
它看起來像這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="%PUBLIC_URL%/css/styles.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="%PUBLIC_URL%/js/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>
為組件創建路由
現在您在 App 中有了鏈接、腳本和組件，您必須在 App.js 文件中為它們創建路由。路由將呈現應用程序上的頁面以使其動態化。
要呈現頁面，請使用以下命令安裝 react-router-dom：
npm install react-router-dom
在App.js文件中，將 BrowserRouter 作為 Router、Routes 和 React-router-dom 庫中的 Route 導入。然後導入所有組件和Pages。該文件應如下所示：
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from './components/Navigation';
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact'
import Header from "./components/Header";
function App() {
return (
<div className="App">
<Header />
<Home />
<About />
<Contact/>
<Router>
<Navigation>
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/about" element={<About />} />
<Route exact path="/contact" element={<Contact />} />
</Routes>
</Navigation>
</Router>
</div>
);
}
export default App;
當您瀏覽瀏覽器時，您應該會在本地主機上看到呈現的頁面。類似於您下載的模板，如下圖所示。
恭喜，您已成功將 Bootstrap 主題集成到您的 React 應用程序中。您現在可以根據自己的喜好自定義頁面。
為什麼使用 Bootstrap 的主題模板？
Bootstrap 模板有助於在很短的時間內創建出色的前端界面。有很多主題可供選擇。所有主題都是最新的 Bootstrap 版本。它們還帶有 MIT 許可證，並且是最新的行業設計。
雖然優點很多，但依賴模板會降低創造力。在其他在線網站上找到一個流行的主題是很常見的。但是，您可以將模板自定義為獨特的設計。
現在您可以將 Bootstrap 模板與您的 React 應用程序集成。使用 Bootstrap 模板開始構建並享受漂亮的前端界面。
發佈留言