Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

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

Zacząć od tworzenie aplikacji ReactJS w folderze na twoim komputerze. Alternatywnie możesz podążać za urzędnikiem Reaguj poradnik o tworzeniu nowej aplikacji.

Pobierz szablon Bootstrap

Pobierz wybrany szablon ze strony Uruchom Bootstrapa witryna z motywami lub inna, którą wolisz. Istnieje kilka witryn z darmowymi szablonami Bootstrap online.

instagram viewer

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 publiczny w Twojej aplikacji React. Zauważysz, że teraz masz dwa pliki index.html. Skopiuj zawartość pliku Bootstrap indeks.html plik do aplikacji React indeks.html plik.

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:

np 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 Reagować z'reagować'
konst Nagłówek = () => {
powrót (




"jabłko">
"pojemnik">
„nagłówek główny”>Witamy w naszym Studio!</div>









„tekst nagłówka głównego wielkimi literami”>
 ToMiło cię poznać
 </div>



„btn btn-primary btn-xl tekst-wielkie litery” href="#usługi">
 Powiedz mi więcej
 </a>
 </div>
 </header>
 </div>
 );
};


eksportdomyślny nagłówek

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 wyskakującym oknie, 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:

HTML>
<HTMLlang="pl">


<głowa>
<metazestaw znaków="utf-8" />
<połączyćrel="Ikona"href=„%PUBLIC_URL%/favicon.ico” />
<metanazwa=„rzutnia”treść=„szerokość = szerokość urządzenia, skala początkowa = 1” />
<metanazwa=„kolor motywu”treść="#000000" />
<metanazwa="opis"treść=„Witryna internetowa utworzona za pomocą aplikacji create-react-app”/>
<połączyćrel="jabłko-dotyk-ikona"href="%PUBLIC_URL%/logo192.png" />
<połączyćrel="oczywisty"href=„%PUBLIC_URL%/manifest.json” />
<tytuł>Reagujtytuł>
<połączyćrel="Ikona"typ=„obraz/ikona x”href="aktywa/favicon.ico" />


 Ikony Font Awesome (darmowa wersja)
<scenariuszźródło=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"krzyżowe pochodzenie="anonimowy">scenariusz>


 Czcionki Google
<połączyćhref=" https://fonts.googleapis.com/css? rodzina=Montserrat: 400 700"rel=„arkusz stylów”typ="tekst/css" />
<połączyćhref=" https://fonts.googleapis.com/css? rodzina=roboto+płyta: 400,100,300,700"rel=„arkusz stylów”typ="tekst/css" />


 Podstawowy motyw CSS (zawiera Bootstrap)
<połączyćhref="%PUBLIC_URL%/css/styles.css"rel=„arkusz stylów” />
głowa>


<ciało>
<noscript>Aby uruchomić tę aplikację, musisz włączyć JavaScript.noscript>


<dzID="źródło">dz>


 Bootstrapowy rdzeń JS
<scenariuszźródło=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">scenariusz>


 Podstawowy motyw JS
<scenariuszźródło=„%PUBLIC_URL%/js/scripts.js”>scenariusz>


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


 * * Formularze SB JS * *


 * * Aktywuj swój formularz na https://startbootstrap.com/solution/contact-forms * *


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


<scenariuszźródło=" https://cdn.startbootstrap.com/sb-forms-latest.js">scenariusz>
ciało>
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 reagowanie-router-dom

w Aplikacja.js zaimportuj BrowserRouter jako Router, Routes i Route z pliku biblioteka reakcji-router-dom. Następnie zaimportuj wszystkie składniki I Strony. Plik powinien wyglądać tak:

import { Router przeglądarki Jak Router, Trasy, Trasa } z„React-router-dom”;
import Nawigacja z„./komponenty/Nawigacja”;
import Dom z„./Strony/Strona główna”;
import O z„./Strony/O mnie”;
import Kontakt z„./Strony/Kontakt”
import nagłówek z„./komponenty/Nagłówek”;
funkcjonowaćAplikacja() {
powrót (


„Aplikacja”>










"/" element={} />
"/o" element={} />
"/kontakt" element={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


eksportdomyślny Aplikacja;

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.