React & Bootstrap: 4 enkle måter å style din app!

by
Tweet
Share
Share
Pin
0 Shares

React og Bootstrap: En kraftfull kombinasjon for webutvikling

React er et av de mest brukte JavaScript-rammeverkene og bibliotekene for å skape dynamiske nettsider og brukergrensesnitt. Populariteten skyldes i stor grad fleksibiliteten i å bygge grensesnitt med gjenbrukbare komponenter, den raske utviklingsprosessen og det store støttefellesskapet.

For å skape visuelt tiltalende applikasjoner må React imidlertid kombineres med Cascading Style Sheets (CSS). Det å skrive CSS fra bunnen av kan være tidkrevende.

Utviklere kan bruke mye tid på styling i stedet for de sentrale funksjonene i React-applikasjonen. Heldigvis finnes det verktøy og rammeverk som Bootstrap som gjør det lettere å implementere CSS i React-prosjekter.

Hva er Bootstrap?

Bootstrap er et åpen kildekode CSS-rammeverk for front-end-utvikling. Det gir utviklere muligheten til å skape responsive og «mobile-first» nettsider ved hjelp av et omfattende sett med JavaScript- og CSS-baserte designverktøy og maler.

Bootstrap ble opprinnelig utviklet av Twitter og vedlikeholdes av et team av ingeniører fra samme selskap. Kildekoden er tilgjengelig på GitHub, der fellesskapsmedlemmer kan bidra, rapportere feil og komme med forslag. Den nyeste versjonen er Bootstrap 5.3.0-alpha1.

Hvorfor bruke Bootstrap med React?

  • Tidsbesparelse: Bootstrap tar seg av formateringen, slik at du kan fokusere på funksjonaliteten. Du slipper å bekymre deg for utseendet til skjemaer og knapper, og kan heller konsentrere deg om viktige funksjoner som datainnsending til backend eller API.
  • Brukervennlighet: Etter at Bootstrap er lagt til i React-appen din, kan du enkelt bruke de ferdigdesignede UI-komponentene.
  • Konsekvent design: De fleste applikasjoner vokser over tid. Et konsistent design er viktig for å tiltrekke lojale brukere. Bootstrap sørger for et enhetlig utseende på alle sidene dine.
  • Stort utvalg av maler: Bootstrap tilbyr et bredt spekter av maler, inkludert navigasjonsbarer, knapper, skjemaer, karuseller og rullegardinmenyer.
  • Enkel tilpasning: Du kan enkelt tilpasse skriftstørrelser, farger og andre designelementer i Bootstrap for å passe dine behov.
  • Fellesskapsstøtte: Bootstrap har omfattende dokumentasjon, og et stort fellesskap som bidrar med nye funksjoner og vedlikeholder rammeverket.
  • Responsivt design: Med Bootstrap er du sikret at webapplikasjonen din vil fungere optimalt på alle skjermstørrelser.

Slik installerer du Bootstrap i React

React-applikasjoner kommer ikke med Bootstrap installert som standard. Før vi ser på hvordan du legger til Bootstrap i React, må vi sjekke noen forutsetninger:

Forutsetninger

  • Sjekk at Node.js er installert: Dette plattformuavhengige JavaScript-kjøremiljøet lar utviklere kjøre JavaScript utenfor en nettleser.

Bruk denne kommandoen for å sjekke om Node.js er installert:

node -v

Hvis Node.js er installert, vil du se en utskrift som ligner på denne i terminalen:

Hvis det ikke er installert, finner du nedlastingsinstruksjoner på https://nodejs.org/en/.

  • Sjekk at React er installert: Du vil bruke React til å lage funksjonalitet, mens Bootstrap tar seg av formateringen.

Bruk denne kommandoen for å sjekke om React er installert:

npm list react

Hvis React er installert globalt på maskinen din, vil du se noe som dette i terminalen:

  • Opprett en React-app: Du kan opprette en React-app manuelt, men dette krever mye arbeid. For demonstrasjonsformål skal vi bruke kommandoen «create-react-app». Følg disse trinnene:
  • Installer react-create-app på maskinen din ved å bruke denne kommandoen:
npm install -g create-react-app
  • Opprett React-appen din ved å bruke denne kommandoen:
npx create-react-app my-app

Du kan erstatte «my-app» med et hvilket som helst navn. I dette eksemplet har vi kalt appen vår «react-b».

Etter installasjonen vil du se noe lignende i terminalen:

Kjør disse kommandoene for å komme i gang:

  • cd react-b (bruk navnet på appen du valgte)
  • npm start (denne kommandoen starter React-appen din)

Nå kan vi gå videre til de neste trinnene og installere Bootstrap i vår React-app:

NPM Install Bootstrap-metoden

Node.js kommer med npm (Node Package Manager) installert som standard.

Du kan sjekke versjonen av npm med denne kommandoen:

npm -v

Hvis npm er installert, vil du få en utskrift som for eksempel «9.2.0».

Du kan installere Bootstrap med denne kommandoen:

npm install bootstrap

Etter installasjonen går du til filen ./src/index.js og legger til denne linjen øverst:

import "bootstrap/dist/css/bootstrap.css";

Bruke Yarn Package Manager

Yarn er ikke installert som standard når du installerer Node.js, i motsetning til npm.

Installer Yarn med denne kommandoen:

npm install -g yarn

Denne kommandoen vil installere Yarn globalt, slik at du ikke trenger å installere pakken hver gang du oppretter en React-app.

Kjør denne kommandoen for å legge til Bootstrap i React:

yarn add bootstrap

Etter installasjonen går du til filen ./src/index.js og legger til denne linjen øverst:

import "bootstrap/dist/css/bootstrap.css";

Det anbefales å importere Bootstrap øverst i applikasjonens inngangsfil før andre CSS-filer. Dette gjør det enklere å overstyre standardverdiene til Bootstrap-malene i React-appen.

CDN-metoden

Du kan legge til Bootstrap i React ved hjelp av en Content Delivery Network-lenke (CDN). Denne metoden inkluderer Bootstrap-biblioteket i React-applikasjonen din uten å laste ned og hoste filene i prosjektmappen. Følg disse instruksjonene:

  • Gå til .public/index.html-filen i rotmappen
  • Legg til denne <link>-taggen i <head>-taggen:
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  • Du må legge til JavaScript-avhengigheter i appen din. Gå til <body>-delen i index.html-filen, og legg til denne taggen rett før den avsluttende <body/>-taggen:
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Bootstrap er nå installert i React-appen din.

Bruke React Bootstrap Package

De metodene vi har sett på til nå er opprinnelig designet for HTML-filer. For å forstå dette bedre, la oss se på denne rullegardinkoden fra 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>

Hva er problemet med koden? Bootstrap bruker «class» for å style elementene. React bruker derimot JSX, som bruker camelCase-syntaks. Derfor må du manuelt erstatte «class» med «className».

For at koden skal fungere i React, må vi erstatte hver «class» med «className». Den endelige koden blir:

<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>

Heldigvis finnes det to andre metoder, react-bootstrap og reactstrap, der manuell endring ikke er nødvendig.

React-bootstrap

React-bootstrap har ekte React-komponenter bygget fra bunnen av. Biblioteket er kompatibelt med Bootstrap-kjernen.

Følg disse trinnene for å komme i gang med React-bootstrap:

  • Installer React-bootstrap med denne kommandoen:
npm install react-bootstrap bootstrap
  • Gå til filen src/index.js eller App.js og legg til denne linjen før andre CSS-filer:

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

Med React-bootstrap kan du importere en spesifikk komponent i stedet for hele biblioteket. Hvis du for eksempel vil importere en knapp, kan du gjøre det slik:

import { Button } from "react-bootstrap";

Reactstrap

Dette er et React-komponentbibliotek for Bootstrap. Reactstrap er avhengig av Bootstrap CSS-rammeverket for stiler og temaer. Dette biblioteket importerer de riktige Bootstrap-klassene til React-appen din, slik at du får et konsistent app-design. Du trenger heller ikke å legge til Bootstraps JavaScript-filer for å aktivere funksjonalitet.

Følg disse trinnene for å legge til Reactstrap i React-appen din:

  • Installer Reactstrap med denne kommandoen:
npm install reactstrap react react-dom
  • Importer Bootstrap med disse kommandoene:
npm install --save bootstrap

import "bootstrap/dist/css/bootstrap.min.css"; (legg til denne linjen i app.js)

Du kan også bruke CDN-lenkealternativet for å inkludere Bootstrap i appen. Etter første trinn, gå til rotkatalogen og naviger til .public/index.html-filen og legg til denne linjen i <head>-taggen:

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

Reactstrap gir deg mulighet til å importere en bestemt komponent i stedet for hele biblioteket. Hvis du for eksempel vil importere en knapp, kan du gjøre det slik:

import { Button } from "reactstrap";

Konklusjon

Ovenfor har vi sett på noen metoder du kan bruke for å installere Bootstrap i React-appen din og style nettsidene dine. Valget av installasjonsmetode er i hovedsak en preferansesak, siden alle har samme mål.

Ved å kombinere React med Bootstrap slipper du å holde oversikt over alle CSS-stilene etter hvert som appen din vokser. Styling av appen blir enklere og mer effektiv, slik at du kan fokusere på funksjonalitet.

Du kan utforske noen grunner til å velge React Native for utvikling av mobilapper.