React er blant de mest populære JavaScript-rammeverkene og -bibliotekene for å bygge enkeltsideapplikasjoner og brukergrensesnitt. Dens fleksibilitet i å bygge brukergrensesnitt ved å bruke gjenbrukbare komponenter, utviklingshastighet og støttende fellesskap er grunner til populariteten.
Imidlertid må React kombineres med Cascading Style Sheets (CSS) for å gjøre appene mer visuelt tiltalende og presentable. Å skrive CSS fra bunnen av kan være tidkrevende.
Utviklere kan bruke mye tid på å jobbe med styling i stedet for nøkkelfunksjonene til en React-app. Den gode nyheten er at verktøy og rammeverk som Bootstrap gjør det enklere å legge til CSS i React-appen din.
Innholdsfortegnelse
Hva er Bootstrap?
Bootstrap er et åpen kildekode CSS-rammeverk for frontend-utvikling. Bootstrap lar utviklere lage responsive og mobil-første nettsteder gjennom sitt omfattende sett med JavaScript og CSS-baserte designverktøy og maler.
Bootstrap ble opprettet av Twitter og vedlikeholdes også av et team av ingeniører fra samme selskap. Kildekoden vedlikeholdes på GitHub, og fellesskapsmedlemmer kan bidra og sende feilrapporter og forslag. Bootstrap 5.3.0-alpha1 er den nyeste versjonen i skrivende stund.
Hvorfor bruke Bootstrap med React?
- Sparer tid: Bootstrap tar seg av formatering, og gir deg mer tid til å fokusere på funksjonalitet. Du trenger dermed ikke å bekymre deg for problemer som utseendet til skjemaene eller knappene dine, men om områder som om send-knappen sender data til din backend eller API.
- Brukervennlighet: Når du har lagt Bootstrap til React-appen din, er det bare å ta de forhåndsdesignede UI-komponentene og legge dem til i appen din.
- Konsekvent design: De fleste apper vokser i størrelse over tid. Å sikre et konsistent design av nettstedet ditt er viktig hvis du ønsker å tiltrekke lojale brukere. Bootstrap har en konsistent stil som vil gi sidene dine et enhetlig utseende.
- Tonnevis av maler å velge mellom: Bootstrap har hundrevis av maler som spenner fra navbarer, knapper, skjemaer og karuseller til rullegardiner, for å nevne noen, å velge mellom.
- Enkel tilpasning: Selv om Bootstrap har designmaler, kan du alltid tilpasse skriftstørrelse, farge og andre funksjoner for å passe dine behov.
- Fellesskapsstøtte: Bootstrap har omfattende dokumentasjon for å komme i gang. Du kan imidlertid fortsatt stole på det store fellesskapet, alltid legge til nye funksjoner og opprettholde dette CSS-rammeverket.
- Responsiv design: Når du har lagt til Bootstrap i React-appen din, er du trygg på at nettappen din vil være responsiv på alle skjermstørrelser.
Hvordan installere Bootstrap i React
En React-app kommer ikke med Bootstrap installert som standard. Men før vi utforsker hvordan du legger til/installerer Bootstrap i React, må vi sjekke et par ting;
Forutsetninger
Bruk denne kommandoen for å sjekke om node.js er installert på din PC:
node -v
Hvis node.js er installert, vil du ha en utgang som ligner denne på terminalen din.
Node versjon
Hvis den ikke er installert, kan du sjekke nedlastingsinstruksjonene fra https://nodejs.org/en/.
Bruk denne kommandoen for å sjekke om React er installert på din PC:
npm list react
Hvis React er installert globalt på maskinen din, vil du ha noe slikt på terminalen din.
Reager versjon
- Installer react-create-app på maskinen din. Bruker denne kommandoen
npm install -g create-react-app
- Lag React-appen din ved å bruke denne kommandoen
npx create-react-app my-app
Du kan erstatte min-appen med et hvilket som helst navn du ønsker. For vårt tilfelle kalte vi appen vår react-b.
Når den er installert, vil du ha noe lignende på terminalen din:
Kjør disse kommandoene for å komme i gang
- cd react-b (bruk navnet på appen du valgte i forrige trinn)
- npm start (denne kommandoen starter React-appen din)
Vi kan nå gå til de neste trinnene og legge til/installere Bootstrap til vår React-app:
NPM Install Bootstrap Method
Node.js kommer med npm (node package manager) installert som standard.
Du kan sjekke versjonen av din npm gjennom denne kommandoen:
npm -v
Hvis npm er installert, vil du få en ut som 9.2.0
Du kan nå installere bootstrap ved å bruke denne kommandoen:
npm install bootstrap
Når du er ferdig, går du til filen ./src/index.js. Legg til denne linjen øverst.
import «bootstrap/dist/css/bootstrap.css»;
Bruke Garnpakkebehandling
I motsetning til npm, er ikke garn installert som standard når du installerer node.js.
Installer verftet ved å bruke denne kommandoen;
npm install -g yarn
Denne kommandoen vil installere garn globalt, slik at du ikke lenger trenger å installere pakken hver gang du oppretter en React-app.
Kjør denne kommandoen for å legge til bootstrap til React:
yarn add bootstrap
Når du er ferdig, går du til filen ./src/index.js. Legg til denne linjen øverst.
import «bootstrap/dist/css/bootstrap.css»;
Du bør alltid importere Bootstrap øverst i appens oppføringsfil før andre CSS-filer. Dette gjør det enkelt å endre Bootstrap-oppføringene dine hvis du trenger å endre standardverdiene til malene mens du oppretter React-appen.
CDN-metoden
Ved å bruke en Content Delivery Network-kobling (CDN) kan du legge til Bootstrap til React. Ved å legge til denne CDN-koblingen inkluderer du Bootstrap-biblioteket i React-appen din uten å laste ned og være vert for filene i prosjektmappen din. Følg disse instruksjonene.
- Naviger til .public/index.html-filen på rotmappen
- På -taggen legger du til denne -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 brødteksten i index.html-filen og legg til denne taggen rett før den avsluttende -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 endelig installert på React-appen din.
Bruker React Bootstrap Package
Tilnærmingene vi har dekket så langt var opprinnelig designet for HTML-filer. For å forstå dette bedre, vurder 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 galt med koden? Bootstrap bruker som standard klasse for å klassifisere divisjonene (DIV-er). React bruker imidlertid JSX, som bruker camelCase-syntaks. Du må dermed erstatte klassen med className manuelt.
For å få den koden til å fungere på React, må vi erstatte hver «klasse» med «className». Den endelige koden vil være:
<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 har vi to tilnærminger til, react-bootstrap og reactstrap, der manuell intervensjon ikke er nødvendig.
React-bootstrap
React-bootstrap har ekte React-komponenter bygget fra bunnen av. Biblioteket er kompatibelt med Bootstrap-kjerne.
Følg disse trinnene for å komme i gang med React-bootstrap:
- Installer React-bootstrap med denne kommandoen:
npm install react-bootstrap bootstrap
- Naviger 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»;
React-bootstrap lar deg importere en spesifikk komponent i stedet for hele biblioteket. Hvis du for eksempel trenger å importere en knapp på en av komponentene dine, kan du importere den som følger;
importer { Button } fra «react-bootstrap»;
Reactstrap
Dette er et React-komponentbibliotek for Bootstrap. Reactstrap er avhengig av Bootstrap CSS-rammeverket for stiler og tema. Dette biblioteket importerer de riktige Bootstrap-klassene til React-appen din, slik at du kan ha konsekvent app-stil. Du trenger heller ikke legge til Bootstraps JavaScript-filer for å utløse funksjonalitet.
Følg disse trinnene for å legge til Reactstrap i React-appen din:
- Installer Reactstrap gjennom denne kommandoen:
npm install reactstrap react react-dom
- Importer Bootstrap ved å bruke 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-koblingsalternativet for å inkludere Bootstrap i appen din. Etter det første trinnet, gå til rotkatalogen og naviger til .public/index.html-filen og legg til denne linjen i
-taggen<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
Reactstrap lar deg importere en bestemt komponent i stedet for hele biblioteket. Hvis du for eksempel trenger å importere en knapp på en av komponentene dine, kan du importere som;
importer { Button } fra «reactstrap»;
Konklusjon
Ovenfor er noen tilnærminger du kan bruke for å installere Bootstrap til React-appen din for å style nettappene dine. Valget av installasjonstilnærming er et spørsmål om preferanse, da sluttmålet er det samme.
Ved å kombinere React med Bootstrap slipper du smerten ved å måtte holde styr på alle CSS-stiler etter hvert som appen din vokser. Å style appen din blir enkel og effektiv ettersom du får mer tid til å fokusere på funksjonaliteten.
Du kan utforske noen grunner til å velge React Native for utvikling av mobilapper.