Jak zintegrować szablon motywu Bootstrap z aplikacją React
Tworzenie interfejsu front-end może być trudne, jeśli dopiero zaczynasz korzystać z ReactJS. Framework Bootstrap wraz ze swoimi szablonami sprawia, że jest to łatwiejsze i szybsze.
Bootstrap ma szablony tematyczne, które każdy może dostosować i opublikować za darmo. Możesz wybierać spośród wielu szablonów przed pobraniem i użyciem ich w swojej aplikacji.
Szablony pomagają szybko tworzyć niezwykłe interfejsy frontendowe, pozostawiając więcej czasu na skupienie się na złożonych funkcjach. Możesz dowiedzieć się o szablonach Bootstrap, integrując jeden z aplikacją ReactJS.
Stwórz swoją aplikację React
Zacznij od utworzenia aplikacji ReactJS w folderze na swoim komputerze. Alternatywnie możesz skorzystać z oficjalnego przewodnika React na temat tworzenia nowej aplikacji.
Pobierz szablon Bootstrap
Pobierz wybrany przez siebie szablon ze strony motywów Start Bootstrap lub innego, który preferujesz. Istnieje kilka witryn z darmowymi szablonami Bootstrap online.
W tym przewodniku pobierz motyw Bootstrap o nazwie Agency.
Po pobraniu rozpakuj plik folderu, aby zobaczyć jego zawartość. Zauważysz, że masz foldery o nazwach asset, CSS, JS i plik o nazwie index.html.
Dodaj szablon Bootstrap do aplikacji ReactJS
Następnie skopiuj zawartość pobranego folderu do folderu o nazwie public w aplikacji React. Zauważysz, że teraz masz dwa pliki index.html. Skopiuj zawartość pliku index.html Bootstrapa do pliku index.html aplikacji React .
Wyświetl szablon Bootstrap
Po dodaniu kodu HTML programu Bootstrap do pliku index.html aplikacji uruchom aplikację, aby sprawdzić, czy integracja przebiegła pomyślnie. Użyj następującego polecenia:
npm start
Powinieneś zobaczyć szablon w swojej przeglądarce, jak pokazano na poniższym obrazku.
Zintegruj motyw Bootstrap ze składnikami aplikacji
Aby zintegrować szablon Bootstrap z aplikacją React, musisz skopiować sekcje HTML z index.html do każdego komponentu. Komponenty umożliwiają pisanie kodu dla różnych części Aplikacji i ich ponowne wykorzystanie. Zmniejsza to liczbę powtórzeń, a także porządkuje strukturę Twojej aplikacji.
Plik index.html zawiera teraz różne sekcje Nawigacja, O nas, Kontakt i Stopka. W folderze src utwórz dwa foldery, komponenty i strony. Podziel sekcje na foldery pokazane poniżej:
Komponenty powinny zawierać następujące elementy:
- Header.jsx: Sekcja mastheadu.
- Navigation.jsx: Pasek nawigacji i stopka.
Folder stron będzie zawierał następujące elementy:
- AboutUs.jsx: Informacje o nas.
- Home.jsx: sekcje Usługi, Portfolio, Klienci i Zespół.
- Contacts.jsx: Informacje kontaktowe.
Skopiuj kod HTML każdej sekcji z pliku index.html i dodaj go do każdego komponentu. Składnia powinna wyglądać tak:
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
Następnie zmień składnię kodu HTML w komponentach na JSX. Aby zrobić to automatycznie w edytorze Vscode, kliknij Ctrl + Shift + P. Kliknij opcję HTML na JSX w oknie, które się pojawi, aby zmienić HTML na JSX.
JSX to rozszerzenie składni JavaScript. Pozwala używać mieszanki HTML i JavaScript do pisania kodu w komponentach. Po skopiowaniu wszystkich sekcji do komponentów plik index.html pozostanie tylko z linkami stylizacyjnymi i skryptami.
Będzie to wyglądać tak:
<!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>
Utwórz trasy dla komponentów
Teraz, gdy masz już łącza, skrypty i komponenty w aplikacji, musisz utworzyć dla nich trasy w pliku App.js. Trasy będą renderować strony w aplikacji, aby były dynamiczne.
Aby renderować strony, zainstaluj react-router-dom za pomocą następującego polecenia:
npm install react-router-dom
W pliku App.js zaimportuj BrowserRouter jako Router, Routes i Route z biblioteki react-router-dom. Następnie zaimportuj wszystkie komponenty i Pages . Plik powinien wyglądać tak:
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;
Powinieneś zobaczyć renderowane strony na lokalnym hoście podczas nawigacji w przeglądarce. Podobny do pobranego szablonu, jak pokazano poniżej.
Gratulacje, pomyślnie zintegrowałeś motyw Bootstrap ze swoją aplikacją React. Możesz teraz dostosować strony do swoich preferencji.
Dlaczego warto używać szablonów tematycznych Bootstrap?
Szablony Bootstrap pomagają tworzyć niezwykłe interfejsy front-endowe w bardzo krótkim czasie. Istnieje wiele motywów do wyboru. Wszystkie motywy pochodzą z najnowszej wersji Bootstrap. Posiadają również licencje MIT i są najnowszymi projektami branżowymi.
Chociaż zalet jest wiele, poleganie na szablonach ogranicza kreatywność. Często można znaleźć jeden popularny motyw używany w innych witrynach online. Możesz jednak dostosować szablon do unikalnego projektu.
Teraz możesz zintegrować szablon Bootstrap ze swoją aplikacją React. Zacznij budować z szablonami Bootstrap i ciesz się pięknymi interfejsami front-end.
Dodaj komentarz