4 sposoby na zainstalowanie Bootstrapa w React, aby stworzyć bardziej szczegółową aplikację

Spis treści:

Integracja Bootstrap z React: Przewodnik krok po kroku

React, jako popularna biblioteka JavaScript, zyskała uznanie w świecie tworzenia aplikacji internetowych. Umożliwia budowanie interaktywnych interfejsów użytkownika i aplikacji jednostronicowych, charakteryzujących się komponentową architekturą, szybkością oraz prężnie działającą społecznością. Niemniej jednak, aby aplikacje React były atrakcyjne wizualnie, konieczne jest zastosowanie arkuszy stylów CSS. Ręczne tworzenie CSS może być czasochłonne, a programiści mogą poświęcać zbyt wiele czasu na stylizację zamiast koncentrować się na kluczowej funkcjonalności aplikacji.

Na szczęście, istnieją rozwiązania, takie jak Bootstrap, które znacząco ułatwiają dodawanie stylów CSS do projektów React.

Czym jest Bootstrap?

Bootstrap to otwartoźródłowy framework CSS, który znacząco upraszcza proces tworzenia stron internetowych. Dostarcza on szeroki wachlarz narzędzi i szablonów opartych na JavaScript i CSS, umożliwiając programistom szybkie tworzenie responsywnych witryn, które doskonale prezentują się na różnych urządzeniach, w tym mobilnych. Bootstrap, stworzony przez zespół inżynierów z Twittera, jest stale rozwijany i udoskonalany dzięki wsparciu społeczności. Aktualną wersją jest 5.3.0-alpha1.

Korzyści z używania Bootstrapa w React

Oszczędność czasu: Bootstrap oferuje gotowe elementy interfejsu, co pozwala programistom skupić się na logice aplikacji zamiast na stylizacji. Nie trzeba martwić się o wygląd formularzy czy przycisków, co pozwala na szybsze wdrożenie kluczowych funkcji, np. obsługi przesyłania danych do serwera.
Prostota użycia: Wystarczy dodać Bootstrap do projektu React, aby korzystać z gotowych komponentów interfejsu użytkownika.
Spójność wizualna: Bootstrap zapewnia jednolity wygląd aplikacji, co jest niezwykle ważne dla budowania lojalności użytkowników. Jego spójny styl nadaje witrynie profesjonalny i uporządkowany charakter.
Bogactwo szablonów: Bootstrap oferuje setki szablonów, w tym paski nawigacyjne, przyciski, formularze, karuzele i wiele innych.
Personalizacja: Pomimo gotowych szablonów, Bootstrap umożliwia dostosowanie rozmiaru czcionek, kolorów i innych aspektów do indywidualnych potrzeb projektu.
Wsparcie społeczności: Bootstrap posiada rozbudowaną dokumentację oraz aktywną społeczność, która stale rozwija framework.
Responsywność: Bootstrap zapewnia responsywność aplikacji, dzięki czemu idealnie prezentuje się ona na ekranach o różnych rozmiarach.

Instalacja Bootstrapa w React

Aplikacja React nie posiada domyślnie zainstalowanego Bootstrapa. Zanim przejdziemy do instalacji, warto upewnić się, że spełniamy kilka wymagań wstępnych.

Wymagania wstępne:

Zainstalowane Node.js: Node.js to środowisko uruchomieniowe JavaScript, które pozwala uruchamiać kod poza przeglądarką. Aby sprawdzić, czy jest zainstalowane, użyj polecenia node -v w terminalu. Jeżeli Node.js jest zainstalowane, zobaczysz numer wersji. Jeśli nie, odwiedź stronę Node.js i pobierz instalator.
Zainstalowane React: React jest niezbędny do tworzenia funkcjonalności, natomiast Bootstrap zadba o warstwę wizualną. Użyj polecenia npm list react w terminalu, aby sprawdzić, czy React jest zainstalowany.
Utwórz nową aplikację React: Możesz to zrobić ręcznie, ale na potrzeby tego przykładu użyjemy narzędzia create-react-app. Wykonaj poniższe polecenia:

npm install -g create-react-app

npx create-react-app my-app

Zastąp my-app dowolną nazwą. Po utworzeniu aplikacji, przejdź do jej katalogu (np. cd my-app) i uruchom ją za pomocą npm start.

Przejdźmy teraz do instalacji Bootstrap w aplikacji React.

Metody instalacji Bootstrap

Instalacja za pomocą npm

Node Package Manager (npm) jest domyślnie dołączony do Node.js. Aby sprawdzić jego wersję, użyj polecenia npm -v. Następnie zainstaluj Bootstrap:

npm install bootstrap

Po zakończeniu instalacji, przejdź do pliku ./src/index.js i dodaj na jego początku linię:

import 'bootstrap/dist/css/bootstrap.css';

Instalacja za pomocą Yarn

Yarn jest alternatywnym menedżerem pakietów, który nie jest domyślnie instalowany z Node.js. Aby go zainstalować, użyj polecenia:

npm install -g yarn

Następnie dodaj Bootstrap do projektu:

yarn add bootstrap

Podobnie jak w przypadku npm, dodaj linię import 'bootstrap/dist/css/bootstrap.css'; na początku pliku ./src/index.js.

Pamiętaj, aby importować Bootstrap na początku pliku, przed innymi plikami CSS, aby łatwiej było dostosowywać jego style.

Instalacja za pomocą CDN

CDN (Content Delivery Network) pozwala dodać Bootstrapa do projektu bez konieczności pobierania i hostowania plików. W tym celu:

Przejdź do pliku .public/index.html.
W sekcji <head> dodaj następujący tag <link>:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

Dodaj także tag <script> bezpośrednio przed zamykającym tagiem <body>:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Po wykonaniu tych kroków, Bootstrap będzie dostępny w twojej aplikacji React.

Użycie pakietu React Bootstrap

Wcześniej opisane metody były dedykowane dla HTML. W React używamy JSX, w którym klasy CSS są zapisywane jako className. Na przykład, kod 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>

wymagałby zmiany każdego wystąpienia class na className.

Na szczęście istnieją biblioteki, takie jak react-bootstrap i reactstrap, które eliminują konieczność ręcznej zmiany nazw klas CSS.

React-bootstrap

Biblioteka react-bootstrap oferuje komponenty React zgodne z podstawowymi stylami Bootstrap. Aby ją zainstalować, użyj polecenia:

npm install react-bootstrap bootstrap

Następnie, w pliku src/index.js lub App.js, dodaj linię:

import 'bootstrap/dist/css/bootstrap.min.css';

react-bootstrap umożliwia importowanie konkretnych komponentów, np.: import { Button } from 'react-bootstrap';

Reactstrap

Reactstrap to kolejna biblioteka komponentów React, która bazuje na Bootstrap CSS. Umożliwia spójne stylowanie aplikacji bez konieczności dodawania plików JavaScript Bootstrapa. Aby ją zainstalować, użyj poleceń:

npm install reactstrap react react-dom

npm install --save bootstrap

Następnie, w pliku app.js dodaj linię:

import 'bootstrap/dist/css/bootstrap.min.css';

Alternatywnie, możesz wykorzystać CDN (jak opisano wcześniej), dodając link do arkusza stylów Bootstrap w pliku .public/index.html, w sekcji <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>

Podobnie jak w przypadku react-bootstrap, Reactstrap umożliwia importowanie poszczególnych komponentów, np. import { Button } from 'reactstrap';

Podsumowanie

Przedstawione metody pozwalają na integrację Bootstrapa z aplikacją React. Wybór metody zależy od indywidualnych preferencji, ale cel pozostaje ten sam: ułatwienie stylizacji aplikacji. Połączenie React z Bootstrapem pozwala zaoszczędzić czas i wysiłek, umożliwiając programistom skupienie się na kluczowej funkcjonalności aplikacji. Stylowanie staje się łatwe, a aplikacje zyskują profesjonalny wygląd.

Zapraszamy także do zapoznania się z artykułem o korzyściach z wykorzystania React Native w tworzeniu aplikacji mobilnych.