rosnąca popularność aplikacji jednostronicowych w ciągu ostatnich kilku lat doprowadziła do napływu frameworków JavaScript, w tym Angular, React, Vue.js, Ember – lista jest długa. W rezultacie nie jest już konieczne używanie biblioteki DOM, takiej jak jQuery, do tworzenia aplikacji internetowych.
zbiegło się to z pojawieniem się frameworków CSS, które mają pomóc programistom w tworzeniu responsywnych aplikacji internetowych., Jeśli jesteś programistą frontend, prawie na pewno używałeś lub przynajmniej słyszałeś o Bootstrap, Foundation i Bulma, wszystkich responsywnych (mobilnych) frameworkach CSS z solidnymi funkcjami i wbudowanymi narzędziami. Jeśli React jest najczęściej używanym frameworkiem JavaScript do tworzenia aplikacji internetowych, Bootstrap jest najpopularniejszym frameworkiem CSS, zasilającym miliony stron internetowych.,
w tym samouczku pokażemy, jak używać Reacta i Bootstrap, jak dodać Bootstrap do aplikacji Reacta, jak zainstalować pakiety Reacta bootstrap, takie jakreact-bootstrap (wraz z przykładami), i wreszcie, jak utworzyć aplikację Reacta za pomocą Bootstrap.
Jeśli dopiero zaczynasz pracę z tymi frameworkami, sugerowałbym przeglądanie oficjalnej dokumentacji Reacta i Bootstrapa. Zachęcam również do obejrzenia obszernego samouczka wideo poniżej, aby głębiej nurkować.,
Dodaj Bootstrap do Reacta
trzy najczęstsze sposoby dodania Bootstrap do aplikacji Reacta to:
- użyj BootstrapCDN
- Importuj Bootstrap w Reaccie jako zależność
- zainstaluj pakiet Bootstrap (taki jak
bootstrap-reactlubreactstrap)
używanie Bootstrapcdn
bootstrapcdn jest najprostszym sposobem na dodanie Bootstrap do aplikacji react. Nie wymaga instalacji ani pobierania. Po prostu umieść <link> w sekcji<head> swojej aplikacji, jak pokazano w poniższym fragmencie.,
Jeśli jesteś zainteresowany używaniem komponentów JavaScript dostarczanych z Bootstrap, musisz umieścić następujące znaczniki<script> na końcu stron, tuż przed zamknięciem znacznika</body>, aby je włączyć.
Jak widać, Bootstrap 4 wymaga jQuery i Poppera.js dla swoich komponentów JavaScript. W powyższym fragmencie użyliśmy wersji slim jQuery, chociaż możesz również użyć pełnej wersji.
w przypadku aplikacji React te fragmenty kodu są zwykle dodawane do strony indeksu aplikacji., Jeśli użyłeś create-react-app aby utworzyć swoją aplikację, Twoja strona public/index.html powinna wyglądać następująco:
teraz możesz zacząć używać wbudowanych klas Bootstrap i komponentów JavaScript w komponentach aplikacji Reactowej.
Importuj Bootstrap jako zależność
Jeśli używasz narzędzia do budowania lub pakietu modułów, takiego jak webpack, jest to preferowana opcja dodawania Bootstrap do aplikacji Reactowej. Musisz zainstalować Bootstrap jako zależność dla swojej aplikacji.,
npm install bootstrap
lub jeśli używasz Yarn:
yarn add bootstrap
Po zainstalowaniu Bootstrap dołącz go do pliku JavaScript w aplikacji. Jeśli używasz create-react-app, powinien to być Twój plik src/index.js.
zauważ, że zaimportowaliśmy Bootstrap minified CSS jako pierwszą zależność. Dzięki temu możemy korzystać z wbudowanych klas Bootstrap w naszych komponentach aplikacji React., Jednak zanim będziesz mógł użyć komponentów JavaScript Bootstrap w swojej aplikacji, musisz zainstalować jquery I popper.js jeśli nie są one jeszcze zainstalowane.
npm install jquery popper.js
następnie dokonasz dodatkowych zmian w pliku src/index.js, aby dodać nowe zależności, jak pokazano w poniższym fragmencie.
tutaj dodaliśmy import dla$ IPopper. Zaimportowaliśmy również Bootstrap JavaScript minified bundle file. Teraz możesz używać komponentów JavaScript Bootstrap w swojej aplikacji React.,
zainstaluj pakiet Bootstrap
trzecim sposobem dodania Bootstrap do aplikacji Reactowej jest użycie pakietu, który przebudował komponenty Bootstrap zaprojektowane tak, aby działały jak Komponenty Reactowe. Dwa najpopularniejsze Pakiety to:
react-bootstrapreactstrap
oba pakiety są świetnym wyborem do używania Bootstrap z aplikacjami Reactowymi, chociaż niekoniecznie musisz ich używać. Mają bardzo podobne cechy.,
korzystając z wbudowanych klas i komponentów Bootstrap
Możesz używać Bootstrap bezpośrednio na elementach i komponentach w aplikacji React, stosując wbudowane klasy, tak jak każda inna klasa. Zbudujmy prosty komponent reactowy do przełączania motywów, aby zademonstrować użycie klas i komponentów Bootstrap.,
jak pokazano w tym demo, używamy rozwijanego komponentu dostępnego w bootstrap, aby zaimplementować nasz przełącznik motywów. Używamy również wbudowanych klas przycisków, aby ustawić rozmiar i kolor przycisku rozwijanego.
napiszemy kod dla naszego komponentu ThemeSwitcher. Upewnij się, że masz już skonfigurowaną aplikację Reactową., Utwórz nowy plik dla komponentu i dodaj do niego następujący fragment kodu:
tutaj zbudowaliśmy bardzo prosty komponent theme switcher wykorzystujący rozwijany komponent Bootstrap i kilka wbudowanych klas. Możesz dowiedzieć się więcej o korzystaniu z rozwijanego menu Bootstrap tutaj.
najpierw skonfigurowaliśmy stan komponentu za pomocą właściwościtheme I zainicjowaliśmy go nanull., Następnie zdefiniowaliśmy dwa narzędzia obsługi zdarzeń kliknięć resetTheme()I chooseTheme() na klasie komponentów do wyboru motywu i resetowania motywu.
w metodzie render() renderujemy rozwijane menu przycisków dzielonych zawierające trzy motywy. mianowicie: Primary, Danger oraz Success. Każda pozycja menu jest dołączona do obsługi zdarzenia kliknięcia dla odpowiedniej akcji. Zauważ, jak używamy theme.toLowerCase(), aby uzyskać klasę kolorów motywu zarówno dla przycisków rozwijanych, jak i tekstu., Domyślnie używamy secondary jako koloru motywu, jeśli nie jest ustawiony motyw.
w tym przykładzie widzieliśmy, jak łatwo jest używać wbudowanych klas i komponentów Bootstrap w naszej aplikacji React. Sprawdź dokumentację Bootstrap, aby dowiedzieć się więcej o wbudowanych klasach i komponentach.
react-bootstrap przykład
teraz przebudujemy nasz przełącznik motywów za pomocą react-bootstrap. Do stworzenia naszej aplikacji użyjemy narzędzia wiersza poleceń create-react-app. Upewnij się, że masz zainstalowane na komputerze narzędzie create-react-app.,
Utwórz nową aplikację Reactową używając create-react-app w następujący sposób:
create-react-app react-bootstrap-app
następnie zainstaluj zależności w następujący sposób:
yarn add bootstrap@3 react-bootstrap
react-bootstrap aktualnie celuje w Bootstrap v3. Trwają jednak prace nad zapewnieniem obsługi Bootstrap v4.
Utwórz nowy plik o nazwie ThemeSwitcher.js w katalogusrc i umieść w nim następującą zawartość.
tutaj staraliśmy się jak najbardziej naśladować nasz początkowy przykład używającreact-bootstrap., Importujemy dwa komponenty z pakietu react-bootstrap, a mianowicie SplitButtonI MenuItem. Więcej informacji można znaleźć w dokumentacji rozwijanej react-bootstrap.
najpierw skonfigurowaliśmy stan komponentu za pomocą właściwościtheme I zainicjowaliśmy go nanull. Następnie definiujemy chooseTheme() kliknij obsługę zdarzenia, aby wybrać motyw lub zresetować motyw.
ponieważ używamy Bootstrap 3.3.,7, stworzyliśmy kilka stylów kontenerów w metodzie render(), aby pomóc nam osiągnąć poziome i pionowe centrowanie.
zauważ, jak określamy rozmiar przycisku na komponencieSplitButton używając właściwościbsSize. Zauważ również, jak przekazujemythemeClass dobsStyle, aby dynamicznie zmieniać kolor przycisku w oparciu o motyw stanu.
przekazujemy nazwę motywu do prop każdego komponentuMenuItem., Ustawiamy również obsługęonSelect nathis.chooseTheme(), którą zdefiniowaliśmy wcześniej. Komponent MenuItem przekazuje eventKey I event do onSelect w następujący sposób:
(eventKey: any, event: Object) => any
na koniec zmodyfikujemy plik src/index.js tak, aby wyglądał jak Poniższy fragment:
tutaj najpierw importujemy minifikowane pliki CSS Bootstrap. Importujemy również nasz komponent ThemeSwitcher I renderujemy go do DOM.,
jeśli uruchomisz aplikację teraz za pomocą polecenia yarn start lub . Twoja aplikacja powinna rozpocząć się na porcie 3000 I powinna wyglądać następująco:
react-bootstrap demo. reactstrap przykład
tym razem przebudujemy nasz przełącznik motywów za pomocą reactstrap., Do stworzenia naszej aplikacji użyjemy narzędzia wiersza poleceń create-react-app. Upewnij się, że masz zainstalowane na komputerze narzędzie create-react-app.
Utwórz nową aplikację React używając create-react-app w następujący sposób:
create-react-app reactstrap-app
następnie zainstaluj zależności w następujący sposób:
yarn add bootstrap reactstra
Utwórz nowy plik o nazwie ThemeSwitcher.js w katalogu src i umieść w nim następującą zawartość:
tutaj przebudowaliśmy nasz początkowy przykład używając reactstrap., Importujemy kilka komponentów z reactstrap. Więcej informacji można znaleźć w rozwijanej dokumentacji przycisku reactstrap.
najpierw skonfigurowaliśmy stan komponentu z dwiema właściwościami:
-
themewłaściwość zainicjalizowana donull
dropdownOpenzainicjalizowana dofalse. Ta właściwość będzie używana w komponencie ButtonDropdown z reactstrap do utrzymania stanu przełączania rozwijanej listy.,
definiujemy również metodętoggleDropdown() do przełączania stanu otwartego listy rozwijanej. Będzie to również używane w komponencie ButtonDropdown.reactstrap zapewnia również niekontrolowany komponentUncontrolledButtonDropdown, który nie wymagaisOpen lubtoggle do działania. W większości przypadków można tego użyć zamiast ButtonDropdown.
każda pozycja w rozwijanym menu jest renderowana przy użyciu komponentuDropdownItem., Zauważ, jak określamy rozmiar przycisku w komponencie DropdownToggleużywając właściwości size. Zauważ również, jak przekazujemythemeClass docolor Propp na obu komponentachButton IDropdownToggle w celu dynamicznej zmiany koloru przycisku w oparciu o motyw stanu.
ustawiamy również obsługę onClickna każdym DropdownItemtak jak wcześniej, używając chooseTheme()I resetTheme() obsługi zdefiniowanej wcześniej.,
na koniec zmodyfikujemy pliksrc/index.js tak, aby wyglądał jak Poniższy fragment:
tutaj najpierw importujemy minifikowany plik CSS Bootstrap. Importujemy również nasz komponent ThemeSwitcher I renderujemy go do DOM.
jeśli uruchomisz aplikację teraz za pomocą polecenia yarn start lub ., Twoja aplikacja powinna rozpocząć się na porcie 3000 I powinna wyglądać następująco:
Utwórz aplikację reactstrap za pomocą Bootstrap
popchnijmy to nieco dalej, aby utworzyć aplikację z więcej szczegółów. Postaramy się użyć jak największej ilości klas i komponentów Bootstrap. Będziemy również używać reactstrap do integracji Bootstrap z Reactem, ponieważ obsługuje on Bootstrap 4.,
będziemy używać narzędzia wiersza poleceńcreate-react-app do tworzenia naszej aplikacji. Upewnij się, że masz zainstalowane na komputerze narzędzie create-react-app. Oto zrzut ekranu tego, co będziemy tworzyć.,
Utwórz nową aplikację reactową używając create-react-app w następujący sposób:
create-react-app sample-app
następnie zainstaluj zależności w następujący sposób:
yarn add axios bootstrap reactstrap
zauważ, że instalujemy axios jako zależność. Axios to klient HTTP oparty na obietnicy dla przeglądarki i węzła.js. Umożliwi nam to pobieranie postów z BaconIpsum JSON API.,
dokonaj małej modyfikacji w plikusrc/index.js, aby dołączyć minifikowany plik CSS Bootstrap. Powinien on wyglądać następująco:
Utwórz nowy katalog o nazwiecomponents w katalogusrc twojego projektu. Utwórz nowy plik Header.js w utworzonym właśnie katalogucomponents o następującej zawartości:
komponent, który właśnie stworzyliśmy w tym fragmencie, to komponentHeader, który zawiera menu nawigacyjne., Następnie utworzymy nowy plik o nazwie SideCard.js w katalogu components o następującej treści:
następnie utworzymy nowy plik o nazwie Post.js w katalogu components I dodaj do niego następujący fragment kodu:
tutaj stworzyliśmy komponent Post, który renderuje post na stronie. Stan komponentu inicjalizujemy za pomocą właściwościpost ustawionej nanull., Gdy komponent montuje się, używamy axios, aby pobrać losowy post z czterech akapitów z API BaconIpsum JSON i zaktualizować właściwośćpost w stanie.
na koniec zmodyfikuj plik src/App.js, aby wyglądał jak następujący fragment:
tutaj po prostu dołączamy Header, SideCard I Post komponenty w komponentu App. Zauważ, jak używamy kilku responsywnych klas narzędzi dostarczanych przez Bootstrap, aby dostosować naszą aplikację do różnych rozmiarów ekranu.,
jeśli uruchomisz aplikację teraz za pomocą polecenia yarn startlub, Twoja aplikacja powinna rozpocząć się na porcie 3000 i powinna wyglądać dokładnie tak, jak zrzut ekranu, który widzieliśmy wcześniej.
podsumowanie
w tym samouczku omówiliśmy kilka różnych sposobów integracji Bootstrap z naszymi aplikacjami Reactowymi. Widzieliśmy również, jak możemy używać dwóch najpopularniejszych bibliotek Bootstrap, a mianowicie react-bootstrapI reactstrap.,
w tym samouczku użyliśmy tylko kilku komponentów Bootstrap, takich jak alert, odznaka, rozwijany pasek nawigacyjny, nav, formularz, przycisk, Karta itp. Istnieje jeszcze kilka komponentów Bootstrap, z którymi można eksperymentować, takich jak tabele, Modale, podpowiedzi, Karuzela, jumbotron, paginacja, karty itp.
Możesz sprawdzić dokumentację pakietów, których użyliśmy w tym samouczku, aby dowiedzieć się więcej na ich temat. Kod źródłowy wszystkich aplikacji demonstracyjnych w tym samouczku można znaleźć na GitHub.,
Pełna widoczność aplikacji reactowych
debugowanie aplikacji Reactowych może być trudne, zwłaszcza gdy użytkownicy doświadczają problemów, które są trudne do odtworzenia. Jeśli interesuje Cię monitorowanie i śledzenie stanu Redux, automatyczne wykrywanie błędów JavaScript oraz śledzenie powolnych żądań sieci i czasu ładowania komponentów, spróbuj LogRocket. 
LogRocket jest jak rejestrator dla aplikacji internetowych, nagrywając dosłownie wszystko, co dzieje się w Twojej aplikacji React., Zamiast zgadywać, dlaczego występują problemy, możesz agregować i raportować stan aplikacji, w którym wystąpił problem. LogRocket monitoruje również wydajność aplikacji, raportując za pomocą wskaźników, takich jak obciążenie procesora klienta, zużycie pamięci klienta i wiele innych.
pakiet oprogramowania pośredniego LogRocket Redux dodaje dodatkową warstwę widoczności do sesji użytkownika. LogRocket rejestruje wszystkie akcje i stan z Twoich sklepów Redux.
Unowocześnij sposób debugowania aplikacji Reacta — Rozpocznij monitorowanie za darmo.