React er blandt de mest populære JavaScript-rammer og biblioteker til opbygning af enkeltsidede applikationer og brugergrænseflader. Dets fleksibilitet til at bygge brugergrænseflader ved hjælp af dets genanvendelige komponenter, udviklingshastighed og understøttende fællesskab er årsager til dens popularitet.
React skal dog kombineres med Cascading Style Sheets (CSS) for at gøre sine apps mere visuelt tiltalende og præsentable. Det kan være tidskrævende at skrive CSS fra bunden.
Udviklere kan bruge meget tid på at arbejde på styling i stedet for nøglefunktionerne i en React-app. Den gode nyhed er, at værktøjer og rammer som Bootstrap gør det nemmere at tilføje CSS til din React-app.
Indholdsfortegnelse
Hvad er Bootstrap?
Bootstrap er en open source CSS-ramme til frontend-udvikling. Bootstrap giver udviklere mulighed for at skabe responsive og mobile-first-websteder gennem dets omfattende sæt af JavaScript og CSS-baserede designværktøjer og skabeloner.
Bootstrap blev skabt af Twitter og vedligeholdes også af et team af ingeniører fra samme virksomhed. Dens kildekode vedligeholdes på GitHub, og fællesskabsmedlemmer kan bidrage og sende fejlrapporter og forslag. Bootstrap 5.3.0-alpha1 er den seneste version i skrivende stund.
Hvorfor bruge Bootstrap med React?
- Sparer tid: Bootstrap tager sig af formatering, hvilket giver dig mere tid til at fokusere på funktionalitet. Du behøver således ikke bekymre dig om spørgsmål som udseendet af dine formularer eller knapper, men om områder som om submit-knappen sender data til din backend eller API.
- Brugervenlighed: Når du har tilføjet Bootstrap til din React-app, skal du blot tage de foruddesignede UI-komponenter og tilføje dem til din app.
- Konsekvent design: De fleste apps vokser i størrelse over tid. Det er vigtigt at sikre et ensartet design af din hjemmeside, hvis du vil tiltrække loyale brugere. Bootstrap har en ensartet stil, der vil give dine sider et ensartet udseende.
- Tonsvis af skabeloner at vælge imellem: Bootstrap har hundredvis af skabeloner lige fra navbarer, knapper, formularer og karruseller til dropdowns, for at nævne nogle få, at vælge imellem.
- Nem tilpasning: Selvom Bootstrap har designskabeloner, kan du altid tilpasse skriftstørrelse, farve og andre funktioner, så de passer til dine behov.
- Community support: Bootstrap har omfattende dokumentation for at komme i gang. Du kan dog stadig satse på det store fællesskab, altid tilføje nye funktioner og vedligeholde denne CSS-ramme.
- Responsivt design: Når du har tilføjet Bootstrap til din React-app, er du sikker på, at din web-app vil være responsiv på alle skærmstørrelser.
Sådan installeres Bootstrap i React
En React-app kommer ikke med Bootstrap installeret som standard. Men før vi undersøger, hvordan man tilføjer/installerer Bootstrap i React, skal vi tjekke et par ting;
Forudsætninger
Brug denne kommando til at kontrollere, om node.js er installeret på din pc:
node -v
Hvis node.js er installeret, vil du have et output svarende til dette på din terminal.
Node version
Hvis det ikke er installeret, kan du tjekke downloadinstruktionerne fra https://nodejs.org/en/.
Brug denne kommando til at kontrollere, om React er installeret på din pc:
npm list react
Hvis React er installeret globalt på din maskine, vil du have noget lignende på din terminal.
Reager version
- Installer react-create-app på din maskine. Bruger denne kommando
npm install -g create-react-app
- Opret din React-app ved hjælp af denne kommando
npx create-react-app my-app
Du kan erstatte min-app med et hvilket som helst navn efter eget valg. I vores tilfælde kaldte vi vores app react-b.
Når det er installeret, vil du have noget lignende på din terminal:
Kør disse kommandoer for at komme i gang
- cd react-b (brug navnet på din app valgt i det forrige trin)
- npm start (denne kommando starter din React-app)
Vi kan nu gå til de næste trin og tilføje/installere Bootstrap til vores React-app:
NPM Installer Bootstrap-metoden
Node.js kommer med npm (node package manager) installeret som standard.
Du kan tjekke versionen af din npm gennem denne kommando:
npm -v
Hvis npm er installeret, vil du få en ud som 9.2.0
Du kan nu installere bootstrap ved at bruge denne kommando:
npm install bootstrap
Når du er færdig, skal du gå til filen ./src/index.js. Tilføj denne linje øverst.
import ‘bootstrap/dist/css/bootstrap.css’;
Brug af Garnpakke Manager
I modsætning til npm er garn ikke installeret som standard, når du installerer node.js.
Installer gård ved hjælp af denne kommando;
npm install -g yarn
Denne kommando vil installere garn globalt, så du ikke længere behøver at installere pakken, hver gang du opretter en React-app.
Kør denne kommando for at tilføje bootstrap til React:
yarn add bootstrap
Når du er færdig, skal du gå til filen ./src/index.js. Tilføj denne linje øverst.
import ‘bootstrap/dist/css/bootstrap.css’;
Du bør altid importere Bootstrap øverst i din apps indgangsfil før andre CSS-filer. Dette gør det nemt at ændre dine Bootstrap-indgange, hvis du har brug for at ændre standardværdierne for skabelonerne, mens du opretter din React-app.
CDN metode
Ved at bruge et Content Delivery Network-link (CDN) kan du tilføje Bootstrap til React. Ved at tilføje dette CDN-link inkluderer du Bootstrap-biblioteket til din React-app uden at downloade og hoste filerne i din projektmappe. Følg disse trin.
- Naviger til .public/index.html-filen på din rodmappe
- På -tagget skal du tilføje dette -tag
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Du skal tilføje JavaScript-afhængigheder til din app. Gå til brødteksten i din index.html-fil, og tilføj dette tag lige før det afsluttende -tag:
<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 installeret på din React-app.
Brug af React Bootstrap Package
De tilgange, vi har dækket indtil videre, var oprindeligt designet til HTML-filer. For at forstå dette bedre, overvej denne drop-down kode 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>
Hvad er der galt med koden? Bootstrap bruger som standard klasse til at klassificere dens divisioner (DIV’er). React bruger dog JSX, som bruger camelCase syntaks. Du skal således erstatte klassen med className manuelt.
For at få den kode til at fungere på React, skal vi erstatte hver “klasse” med “className”. Den endelige kode bliver:
<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 tilgange mere, react-bootstrap og reactstrap, hvor manuel indgriben ikke er nødvendig.
React-bootstrap
React-bootstrap har ægte React-komponenter bygget fra bunden. Biblioteket er kompatibelt med Bootstrap-kernen.
Følg disse trin for at komme i gang med React-bootstrap:
- Installer React-bootstrap med denne kommando:
npm install react-bootstrap bootstrap
- Naviger til filen src/index.js eller App.js, og tilføj denne linje før andre CSS-filer
importer ‘bootstrap/dist/css/bootstrap.min.css’;
React-bootstrap giver dig mulighed for at importere en specifik komponent i stedet for hele biblioteket. For eksempel, hvis du har brug for at importere en knap på en af dine komponenter, kan du importere den som følger;
importer { Button } fra ‘react-bootstrap’;
Reactstrap
Dette er et React-komponentbibliotek til Bootstrap. Reactstrap er afhængig af Bootstrap CSS-rammen for dens stilarter og tema. Dette bibliotek importerer de rigtige Bootstrap-klasser til din React-app, så du kan have ensartet app-styling. Du behøver heller ikke tilføje Bootstraps JavaScript-filer for at udløse funktionalitet.
Følg disse trin for at tilføje Reactstrap til din React-app:
- Installer Reactstrap gennem denne kommando:
npm install reactstrap react react-dom
- Importer Bootstrap ved hjælp af disse kommandoer:
npm install --save bootstrap
importer ‘bootstrap/dist/css/bootstrap.min.css’; (tilføj denne linje til din app.js)
Du kan også bruge CDN-linket til at inkludere Bootstrap i din app. Efter det første trin skal du gå til rodmappen og navigere til .public/index.html-filen og tilføje denne linje til
-tagget<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
Reactstrap giver dig mulighed for at importere en specifik komponent i stedet for hele biblioteket. Hvis du for eksempel skal importere en knap på en af dine komponenter, kan du importere som;
importer { Button } fra ‘reactstrap’;
Konklusion
Ovenfor er nogle metoder, du kan bruge til at installere Bootstrap til din React-app for at style dine webapps. Valget af installationstilgang er et spørgsmål om præference, da slutmålet er det samme.
Ved at kombinere React med Bootstrap slipper du for smerten ved at skulle holde styr på alle CSS-stile, efterhånden som din app vokser. At style din app bliver nemt og effektivt, efterhånden som du får mere tid til at fokusere på funktionaliteten.
Du kan undersøge nogle grunde til at vælge React Native til udvikling af mobilapps.