React to jeden z najpopularniejszych frameworków i bibliotek JavaScript do budowania aplikacji jednostronicowych i interfejsów użytkownika. Jego elastyczność w budowaniu interfejsów użytkownika przy użyciu komponentów wielokrotnego użytku, szybkość rozwoju i wspierająca społeczność to powody jego popularności.
Jednak React musi być połączony z Cascading Style Sheets (CSS), aby jego aplikacje były bardziej atrakcyjne wizualnie i prezentowalne. Pisanie CSS od podstaw może być czasochłonne.
Deweloperzy mogą spędzać dużo czasu pracując nad stylizacją zamiast nad kluczowymi funkcjonalnościami aplikacji React. Dobrą wiadomością jest to, że narzędzia i frameworki, takie jak Bootstrap, ułatwiają dodawanie CSS do aplikacji React.
Spis treści:
Co to jest Bootstrap?
Bootstrap to framework CSS typu open source do programowania front-end. Bootstrap umożliwia programistom tworzenie responsywnych i dostosowanych do urządzeń mobilnych stron internetowych za pomocą wszechstronnego zestawu narzędzi i szablonów do projektowania opartych na JavaScript i CSS.
Bootstrap został stworzony przez Twittera i jest również utrzymywany przez zespół inżynierów z tej samej firmy. Jego kod źródłowy jest utrzymywany na GitHub, a członkowie społeczności mogą wnosić wkład i wysyłać raporty o błędach i sugestie. Bootstrap 5.3.0-alpha1 to najnowsza wersja w momencie pisania.
Dlaczego warto używać Bootstrapa z Reactem?
- Oszczędność czasu: Bootstrap zajmuje się formatowaniem, dając Ci więcej czasu na skupienie się na funkcjonalności. Dzięki temu nie musisz się martwić takimi kwestiami, jak wygląd formularzy lub przycisków, ale o obszary, takie jak to, czy przycisk wysyłania wysyła dane do Twojego backendu lub API.
- Łatwość użycia: po dodaniu Bootstrap do aplikacji React, po prostu weź wstępnie zaprojektowane komponenty interfejsu użytkownika i dodaj je do swojej aplikacji.
- Spójny projekt: większość aplikacji powiększa się z czasem. Zapewnienie spójnego projektu witryny jest ważne, jeśli chcesz przyciągnąć lojalnych użytkowników. Bootstrap ma spójny styl, który nada Twoim stronom jednolity wygląd.
- Mnóstwo szablonów do wyboru: Bootstrap ma setki szablonów, od pasków nawigacyjnych, przycisków, formularzy i karuzel po listy rozwijane, by wymienić tylko kilka, do wyboru.
- Łatwość dostosowywania: mimo że Bootstrap ma szablony projektów, zawsze możesz dostosować rozmiar czcionki, kolor i inne funkcje do swoich potrzeb.
- Wsparcie społeczności: Bootstrap ma obszerną dokumentację, która pomoże Ci zacząć. Jednak nadal możesz polegać na dużej społeczności, zawsze dodając nowe funkcje i utrzymując tę strukturę CSS.
- Responsywny projekt: po dodaniu Bootstrap do aplikacji React masz pewność, że Twoja aplikacja internetowa będzie responsywna na wszystkich rozmiarach ekranu.
Jak zainstalować Bootstrap w React
Aplikacja React nie jest domyślnie dostarczana z zainstalowanym Bootstrapem. Ale zanim zbadamy, jak dodać/zainstalować Bootstrap w React, musimy sprawdzić kilka rzeczy;
Wymagania wstępne
Użyj tego polecenia, aby sprawdzić, czy node.js jest zainstalowany na twoim komputerze:
node -v
Jeśli zainstalowany jest plik node.js, na terminalu pojawi się wynik podobny do tego.
Wersja węzła
Jeśli nie jest zainstalowany, możesz sprawdzić instrukcje pobierania na stronie https://nodejs.org/en/.
Użyj tego polecenia, aby sprawdzić, czy React jest zainstalowany na twoim komputerze:
npm list react
Jeśli React jest zainstalowany globalnie na twoim komputerze, będziesz miał coś takiego na swoim terminalu.
Wersja Reaguj
- Zainstaluj aplikację react-create-app na swoim komputerze. Za pomocą tego polecenia
npm install -g create-react-app
- Utwórz swoją aplikację React za pomocą tego polecenia
npx create-react-app my-app
Możesz zastąpić my-app dowolną nazwą. W naszym przypadku nazwaliśmy naszą aplikację Reaguj-b.
Po zainstalowaniu będziesz mieć coś podobnego na swoim terminalu:
Uruchom te polecenia, aby rozpocząć
- cd react-b (użyj nazwy swojej aplikacji wybranej w poprzednim kroku)
- npm start (to polecenie uruchamia twoją aplikację React)
Możemy teraz przejść do kolejnych kroków i dodać/zainstalować Bootstrap do naszej aplikacji React:
NPM Zainstaluj metodę Bootstrap
Node.js jest dostarczany z domyślnie zainstalowanym npm (menedżerem pakietów węzłów).
Możesz sprawdzić wersję swojego npm za pomocą tego polecenia:
npm -v
Jeśli npm jest zainstalowany, otrzymasz wyjście takie jak 9.2.0
Możesz teraz zainstalować bootstrap za pomocą tego polecenia:
npm install bootstrap
Po zakończeniu przejdź do pliku ./src/index.js. Dodaj tę linię na górze.
zaimportuj „bootstrap/dist/css/bootstrap.css”;
Korzystanie z Menedżera pakietów przędzy
W przeciwieństwie do npm przędza nie jest domyślnie instalowana podczas instalacji pliku node.js.
Zainstaluj stocznię za pomocą tego polecenia;
npm install -g yarn
To polecenie zainstaluje przędzę globalnie, więc nie musisz już instalować pakietu za każdym razem, gdy tworzysz aplikację React.
Uruchom to polecenie, aby dodać bootstrap do React:
yarn add bootstrap
Po zakończeniu przejdź do pliku ./src/index.js. Dodaj tę linię na górze.
zaimportuj „bootstrap/dist/css/bootstrap.css”;
Powinieneś zawsze importować Bootstrap na górze pliku wejściowego aplikacji przed innymi plikami CSS. Ułatwia to zmianę wpisów Bootstrap, jeśli chcesz zmienić domyślne wartości szablonów podczas tworzenia aplikacji React.
Metoda CDN
Korzystając z łącza Content Delivery Network (CDN), możesz dodać Bootstrap do React. Dodając to łącze CDN, dołączasz bibliotekę Bootstrap do swojej aplikacji React bez pobierania i hostowania plików w folderze projektu. Wykonaj następujące kroki.
- W folderze głównym przejdź do pliku .public/index.html
- W tagu dodaj ten tag
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Musisz dodać zależności JavaScript do swojej aplikacji. Przejdź do treści pliku index.html i dodaj ten tag tuż przed tagiem zamykającym :
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Bootstrap został wreszcie zainstalowany w Twojej aplikacji React.
Korzystanie z pakietu React Bootstrap
Podejścia, które omówiliśmy do tej pory, zostały pierwotnie zaprojektowane dla plików HTML. Aby lepiej to zrozumieć, rozważ ten rozwijany kod z Bootstrap:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Co jest nie tak z kodem? Bootstrap domyślnie używa klasy do klasyfikowania swoich działów (DIV). Jednak React używa JSX, który używa składni camelCase. W związku z tym musisz ręcznie zamienić klasę na className.
Aby ten kod działał w React, musimy zastąpić każdą „klasę” przez „className”. Ostateczny kod będzie:
<div className="dropdown"> <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul className="dropdown-menu"> <li><a className="dropdown-item" href="#">Action</a></li> <li><a className="dropdown-item" href="#">Another action</a></li> <li><a className="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Na szczęście mamy jeszcze dwa podejścia, react-bootstrap i reactstrap, gdzie ręczna interwencja nie jest potrzebna.
React-bootstrap
React-bootstrap ma prawdziwe komponenty React zbudowane od podstaw. Biblioteka jest kompatybilna z rdzeniem Bootstrap.
Wykonaj następujące kroki, aby rozpocząć korzystanie z React-bootstrap:
- Zainstaluj React-bootstrap za pomocą tego polecenia:
npm install react-bootstrap bootstrap
- Przejdź do pliku src/index.js lub App.js i dodaj ten wiersz przed innymi plikami CSS
importuj „bootstrap/dist/css/bootstrap.min.css”;
React-bootstrap umożliwia importowanie określonego komponentu zamiast całej biblioteki. Na przykład, jeśli chcesz zaimportować przycisk do jednego ze swoich komponentów, możesz to zrobić w następujący sposób;
zaimportuj {Przycisk} z „react-bootstrap”;
Pasek reakcji
To jest biblioteka komponentów React dla Bootstrap. Reactstrap opiera się na frameworku Bootstrap CSS dla swoich stylów i motywu. Ta biblioteka importuje odpowiednie klasy Bootstrap do Twojej aplikacji React, umożliwiając spójny styl aplikacji. Nie musisz także dodawać plików JavaScript Bootstrapa, aby wyzwalać funkcjonalność.
Wykonaj następujące kroki, aby dodać Reactstrap do swojej aplikacji React:
- Zainstaluj Reactstrap za pomocą tego polecenia:
npm install reactstrap react react-dom
- Importuj Bootstrap za pomocą tych poleceń:
npm install --save bootstrap
importuj „bootstrap/dist/css/bootstrap.min.css”; (dodaj tę linię do pliku app.js)
Możesz także użyć opcji łącza CDN, aby dołączyć Bootstrap do swojej aplikacji. Po pierwszym kroku przejdź do katalogu głównego i przejdź do pliku .public/index.html i dodaj tę linię do znacznika
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
Reactstrap umożliwia importowanie określonego komponentu zamiast całej biblioteki. Na przykład, jeśli chcesz zaimportować przycisk do jednego ze swoich komponentów, możesz zaimportować jako;
importuj {Przycisk} z „reactstrap”;
Wniosek
Powyżej znajduje się kilka podejść, których możesz użyć do zainstalowania Bootstrapa w aplikacji React, aby nadać styl aplikacjom internetowym. Wybór podejścia do instalacji jest kwestią preferencji, ponieważ cel końcowy jest taki sam.
Połączenie React z Bootstrap pozwala uniknąć bólu związanego z koniecznością śledzenia wszystkich stylów CSS w miarę rozwoju aplikacji. Stylizacja aplikacji staje się łatwa i wydajna, gdy masz więcej czasu na skupienie się na funkcjonalności.
Możesz poznać kilka powodów, dla których warto wybrać React Native do tworzenia aplikacji mobilnych.