4 sätt att installera Bootstrap i React för att skapa en mer detaljerad app

React är bland de mest populära JavaScript-ramverken och biblioteken för att bygga ensidiga applikationer och användargränssnitt. Dess flexibilitet när det gäller att bygga användargränssnitt med hjälp av dess återanvändbara komponenter, utvecklingshastighet och stödjande community är skälen till dess popularitet.

React måste dock kombineras med Cascading Style Sheets (CSS) för att göra apparna mer visuellt tilltalande och presentabla. Att skriva CSS från grunden kan vara tidskrävande.

Utvecklare kan lägga mycket tid på att arbeta med styling istället för nyckelfunktionerna i en React-app. Den goda nyheten är att verktyg och ramverk som Bootstrap gör det enklare att lägga till CSS i din React-app.

Vad är Bootstrap?

Bootstrap är ett CSS-ramverk med öppen källkod för frontend-utveckling. Bootstrap låter utvecklare skapa responsiva och mobilförsta webbplatser genom dess omfattande uppsättning JavaScript och CSS-baserade designverktyg och mallar.

Bootstrap skapades av Twitter och underhålls också av ett team av ingenjörer från samma företag. Dess källkod underhålls på GitHub, och communitymedlemmar kan bidra och skicka felrapporter och förslag. Bootstrap 5.3.0-alpha1 är den senaste versionen i skrivande stund.

Varför använda Bootstrap med React?

  • Sparar tid: Bootstrap tar hand om formateringen, vilket ger dig mer tid att fokusera på funktionalitet. Du behöver alltså inte oroa dig för frågor som utseendet på dina formulär eller knappar utan om områden som om submit-knappen skickar data till din backend eller API.
  • Användarvänlighet: När du har lagt till Bootstrap i din React-app tar du bara de fördesignade UI-komponenterna och lägger till dem i din app.
  • Konsekvent design: De flesta appar växer i storlek med tiden. Att säkerställa en konsekvent design av din webbplats är viktigt om du vill attrahera lojala användare. Bootstrap har en konsekvent stil som ger dina sidor ett enhetligt utseende.
  • Massor av mallar att välja mellan: Bootstrap har hundratals mallar, allt från navigeringsfält, knappar, formulär och karuseller till rullgardinsmenyer, för att nämna några, att välja mellan.
  • Enkel anpassning: Även om Bootstrap har designmallar kan du alltid anpassa teckenstorlek, färg och andra funktioner för att passa dina behov.
  • Communitysupport: Bootstrap har omfattande dokumentation för att komma igång. Du kan dock fortfarande lita på det stora samhället, alltid lägga till nya funktioner och underhålla detta CSS-ramverk.
  • Responsiv design: När du har lagt till Bootstrap i din React-app är du säker på att din webbapp kommer att vara responsiv på alla skärmstorlekar.

Hur man installerar Bootstrap i React

En React-app kommer inte med Bootstrap installerad som standard. Men innan vi utforskar hur man lägger till/installerar Bootstrap i React måste vi kontrollera några saker;

Förutsättningar

  • Kontrollera att Node.js är installerat: Denna plattformsoberoende JavaScript-runtime-miljö tillåter utvecklare att köra JavaScript utanför en webbläsare.
  • Använd det här kommandot för att kontrollera om node.js är installerat på din PC:

    node -v

    Om node.js är installerat kommer du att ha en utgång som liknar denna på din terminal.

    Nodversion

    Om det inte är installerat kan du kontrollera nedladdningsinstruktionerna från https://nodejs.org/en/.

  • Kontrollera att React är installerat: Du kommer att använda React för att skapa funktionalitet medan Bootstrap tar formateringen.
  • Använd detta kommando för att kontrollera om React är installerat på din PC:

    npm list react

    Om React är installerat globalt på din maskin kommer du att ha något liknande på din terminal.

    Reagera version

  • Skapa din React-app: Du kan skapa React-appen manuellt, men det kräver mycket arbete. För våra demonstrationsändamål ska vi använda kommandot create-react-app. Följ dessa steg för att skapa din React-app:
    • Installera react-create-app på din maskin. Använder detta kommando
    npm install -g create-react-app
    • Skapa din React-app med det här kommandot
    npx create-react-app my-app

    Du kan ersätta my-app med valfritt namn. För vårt fall döpte vi vår app till react-b.

    När det är installerat kommer du att ha något liknande på din terminal:

    Kör dessa kommandon för att komma igång

    • cd react-b (använd namnet på din app som du valde i föregående steg)
    • npm start (det här kommandot startar din React-app)

    Vi kan nu gå till nästa steg och lägga till/installera Bootstrap i vår React-app:

    NPM Install Bootstrap Method

    Node.js kommer med npm (nodpakethanterare) installerad som standard.

    Du kan kontrollera versionen av din npm genom detta kommando:

    npm -v

    Om npm är installerat får du en out som 9.2.0

    Du kan nu installera bootstrap med detta kommando:

    npm install bootstrap

    När du är klar, gå till filen ./src/index.js. Lägg till den här raden överst.

    importera ’bootstrap/dist/css/bootstrap.css’;

    Använder Garnpakethanteraren

    Till skillnad från npm installeras inte garn som standard när du installerar node.js.

    Installera gård med detta kommando;

    npm install -g yarn

    Detta kommando kommer att installera garn globalt, så du behöver inte längre installera paketet varje gång du skapar en React-app.

    Kör det här kommandot för att lägga till bootstrap till React:

    yarn add bootstrap

    När du är klar, gå till filen ./src/index.js. Lägg till den här raden överst.

    importera ’bootstrap/dist/css/bootstrap.css’;

    Du bör alltid importera Bootstrap överst i appens inmatningsfil före andra CSS-filer. Detta gör det enkelt att ändra dina Bootstrap-poster om du behöver ändra standardvärdena för mallarna när du skapar din React-app.

    CDN-metod

    Med hjälp av en Content Delivery Network-länk (CDN) kan du lägga till Bootstrap till React. Genom att lägga till denna CDN-länk inkluderar du Bootstrap-biblioteket i din React-app utan att ladda ner och lagra filerna i din projektmapp. Följ dessa steg.

    • Navigera till .public/index.html-filen i din rotmapp
    • Lägg till denna -tagg på -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åste lägga till JavaScript-beroenden i din app. Gå till brödtexten i din index.html-fil och lägg till denna tagg precis före den avslutande -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 är äntligen installerat på din React-app.

    Använder React Bootstrap Package

    De tillvägagångssätt som vi hittills har täckt var ursprungligen utformade för HTML-filer. För att förstå detta bättre, överväg den här rullgardinskoden från 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>

    Vad är det för fel på koden? Bootstrap använder som standard klass för att klassificera sina divisioner (DIV). Däremot använder React JSX, som använder camelCase-syntax. Du måste alltså byta ut klassen med className manuellt.

    För att få den koden att fungera på React måste vi ersätta varje ”klass” med ”className”. Den slutliga 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>

    Lyckligtvis har vi två tillvägagångssätt, react-bootstrap och reactstrap, där manuellt ingripande inte behövs.

    React-bootstrap

    React-bootstrap har äkta React-komponenter byggda från grunden. Biblioteket är kompatibelt med Bootstrap-kärnan.

    Följ dessa steg för att komma igång med React-bootstrap:

    • Installera React-bootstrap med detta kommando:
    npm install react-bootstrap bootstrap
    • Navigera till filen src/index.js eller App.js och lägg till den här raden före andra CSS-filer

    importera ’bootstrap/dist/css/bootstrap.min.css’;

    React-bootstrap låter dig importera en specifik komponent istället för hela biblioteket. Om du till exempel behöver importera en knapp på en av dina komponenter kan du importera den enligt följande;

    importera { Button } från ’react-bootstrap’;

    Reactstrap

    Detta är ett React-komponentbibliotek för Bootstrap. Reactstrap förlitar sig på Bootstrap CSS-ramverket för dess stilar och tema. Det här biblioteket importerar rätt Bootstrap-klasser till din React-app, så att du kan ha konsekvent app-stil. Du behöver inte heller lägga till Bootstraps JavaScript-filer för att utlösa funktionalitet.

    Följ dessa steg för att lägga till Reactstrap i din React-app:

    • Installera Reactstrap genom detta kommando:
    npm install reactstrap react react-dom
    • Importera Bootstrap med dessa kommandon:
    npm install --save bootstrap

    importera ’bootstrap/dist/css/bootstrap.min.css’; (lägg till den här raden i din app.js)

    Du kan också använda alternativet CDN-länk för att inkludera Bootstrap i din app. Efter det första steget, gå till rotkatalogen och navigera till filen .public/index.html och lägg till den här raden i taggen

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

    Reactstrap låter dig importera en specifik komponent istället för hela biblioteket. Om du till exempel behöver importera en knapp på en av dina komponenter kan du importera som;

    importera { Button } från ’reactstrap’;

    Slutsats

    Ovan är några metoder du kan använda för att installera Bootstrap i din React-app för att styla dina webbappar. Valet av installationsmetod är en fråga om preferens, eftersom slutmålet är detsamma.

    Genom att kombinera React med Bootstrap slipper du smärtan av att behöva hålla reda på alla CSS-stilar när din app växer. Att styla din app blir enkelt och effektivt eftersom du får mer tid att fokusera på funktionaliteten.

    Du kan utforska några anledningar till att välja React Native för utveckling av mobilappar.