4 начина да инсталирате Боотстрап у Реацт да бисте креирали детаљнију апликацију

by
Tweet
Share
Share
Pin

React se ističe kao jedan od najpopularnijih JavaScript okvira i biblioteka, često korišćenih za kreiranje aplikacija sa jednom stranicom i interfejsa prilagođenih korisniku. Njegova prilagodljivost u razvoju korisničkih interfejsa putem komponenti koje se mogu ponovo koristiti, ubrzan razvoj i snažna podrška zajednice doprinose njegovoj širokoj prihvaćenosti.

Međutim, za postizanje vizuelne privlačnosti i profesionalnog izgleda aplikacija, React se mora kombinovati sa CSS-om (Cascading Style Sheets). Ručno pisanje CSS-a može biti dugotrajan i zamoran proces.

Programeri često provode značajno vreme stilizujući aplikacije umesto da se usredsrede na ključne funkcionalnosti React aplikacije. Srećom, alati i okviri kao što je Bootstrap pojednostavljuju integraciju CSS-a u React projekte.

Šta je Bootstrap?

Bootstrap predstavlja CSS okvir otvorenog koda namenjen za razvoj front-end dela aplikacija. On omogućava programerima da kreiraju responzivne veb stranice koje se prilagođavaju različitim uređajima, koristeći obiman skup alata i šablona za dizajn zasnovanih na JavaScriptu i CSS-u.

Bootstrap je originalno razvijen od strane Twittera, a tim inženjera iz iste kompanije ga i dalje održava. Njegov izvorni kod je dostupan na GitHub-u, gde članovi zajednice mogu doprinositi, prijavljivati greške i davati predloge. Najnovija verzija, u trenutku pisanja ovog teksta, je Bootstrap 5.3.0-alpha1.

Zašto koristiti Bootstrap sa Reactom?

  • Ušteda vremena: Bootstrap automatizuje proces formatiranja, oslobađajući programere da se usredsrede na funkcionalnost. Na taj način, ne morate se brinuti o detaljima izgleda, kao što su forme ili dugmad, već o njihovoj osnovnoj funkciji, na primer, da li dugme za slanje prosleđuje podatke API-ju.
  • Jednostavnost korišćenja: Nakon što se Bootstrap integriše u React aplikaciju, lako se mogu preuzeti i upotrebiti unapred dizajnirane komponente korisničkog interfejsa.
  • Dosledan dizajn: Većina aplikacija s vremenom raste. Održavanje doslednog dizajna je ključno za privlačenje i zadržavanje korisnika. Bootstrap nudi dosledan stil koji daje stranicama ujednačen izgled.
  • Veliki broj šablona: Bootstrap nudi stotine šablona, od navigacionih traka, dugmadi i formi, do karusela i padajućih menija.
  • Lakoća prilagođavanja: Iako Bootstrap dolazi sa predefinisanim šablonima, uvek možete prilagoditi veličinu fonta, boju i druge parametre kako bi odgovarali specifičnim potrebama projekta.
  • Podrška zajednice: Bootstrap poseduje obimnu dokumentaciju koja olakšava početak, a pored toga, ima i veliku zajednicu koja kontinuirano doprinosi razvoju i održavanju ovog CSS okvira.
  • Responzivni dizajn: Korišćenjem Bootstrapa u React aplikaciji, možete biti sigurni da će se vaša aplikacija pravilno prikazivati na svim veličinama ekrana.

Kako instalirati Bootstrap u React

React aplikacija ne dolazi sa Bootstrapom unapred instaliranim. Pre nego što istražimo načine kako dodati/instalirati Bootstrap, potrebno je proveriti nekoliko preduslova:

Preduslovi

  • Proverite da li je Node.js instaliran: Ovo multiplatformsko okruženje omogućava programerima da pokreću JavaScript izvan veb pregledača.

    • Koristite ovu komandu da proverite da li je Node.js instaliran na vašem računaru:

    node -v

    Ako je Node.js instaliran, dobićete izlaz sličan ovome na vašem terminalu.

    Ako nije instaliran, možete pogledati uputstva za preuzimanje na https://nodejs.org/en/.

  • Proverite da li je React instaliran: React se koristi za kreiranje funkcionalnosti, dok Bootstrap preuzima brigu o formatiranju.

    • Koristite ovu komandu da proverite da li je React instaliran na vašem računaru:

    npm list react

    Ako je React instaliran globalno na vašem računaru, imaćete sličan izlaz na terminalu.

  • Kreirajte svoju React aplikaciju: Aplikaciju možete kreirati ručno, ali taj proces je komplikovaniji. Za potrebe ove demonstracije, koristimo komandu create-react-app. Pratite ove korake:
    • Instalirajte react-create-app na svoj računar koristeći ovu komandu:
    npm install -g create-react-app
    • Kreirajte svoju React aplikaciju koristeći ovu komandu:
    npx create-react-app my-app

    Možete zameniti my-app sa željenim imenom. U ovom primeru, aplikaciju smo nazvali react-b.

    Nakon uspešne instalacije, dobićete sličan izlaz na terminalu:

    Pokrenite ove komande za start:

    • cd react-b (koristite ime vaše aplikacije iz prethodnog koraka)
    • npm start (ova komanda pokreće vašu React aplikaciju)

    Sada možemo preći na naredne korake i dodati/instalirati Bootstrap u React aplikaciju:

    NPM Install Bootstrap metoda

    Node.js standardno dolazi sa instaliranim npm (Node Package Manager).

    Možete proveriti verziju npm koristeći ovu komandu:

    npm -v

    Ako je npm instaliran, dobićete izlaz, na primer, 9.2.0.

    Bootstrap se instalira pomoću ove komande:

    npm install bootstrap

    Kada se instalacija završi, otvorite fajl ./src/index.js i dodajte ovu liniju na vrhu:

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

    Korišćenje Yarn package manager

    Za razliku od npm, Yarn se ne instalira automatski prilikom instalacije Node.js.

    Yarn se instalira pomoću ove komande:

    npm install -g yarn

    Ova komanda instalira Yarn globalno, tako da ga nećete morati ponovo instalirati svaki put kada kreirate React aplikaciju.

    Bootstrap se dodaje u React pomoću ove komande:

    yarn add bootstrap

    Kada završite, otvorite fajl ./src/index.js i dodajte ovu liniju na vrhu:

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

    Uvek je preporučljivo uvesti Bootstrap na samom vrhu ulaznog fajla vaše aplikacije, pre drugih CSS fajlova. To olakšava izmenu stilova Bootstrapa ukoliko želite da prilagodite podrazumevane stilove šablona.

    CDN Metoda

    Korišćenjem linka sa mreže za isporuku sadržaja (CDN), možete dodati Bootstrap u React. Ovim putem uključujete Bootstrap biblioteku bez potrebe za preuzimanjem i hostovanjem datoteka u folderu vašeg projekta. Sledite ove korake:

    • U osnovnom direktorijumu, otvorite datoteku .public/index.html
    • U okviru <head> taga dodajte ovu <link> oznaku:
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    • Potrebno je dodati i JavaScript zavisnosti u aplikaciju. U okviru <body> datoteke index.html dodajte ovaj tag pre završnog <body/> taga:
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

    Time je Bootstrap uspešno instaliran u vašoj React aplikaciji.

    Korišćenje React Bootstrap paketa

    Pristupi koje smo do sada razmatrali su originalno bili dizajnirani za HTML fajlove. Da bi se bolje razumelo ovo, razmotrite sledeći primer koda za padajući meni iz Bootstrapa:

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

    Šta nije u redu sa ovim kodom? Bootstrap standardno koristi class atribut za klasifikaciju div elemenata. Međutim, React koristi JSX sintaksu, koja koristi CamelCase konvenciju. Zbog toga je potrebno ručno zameniti class sa className.

    Da bi gornji kod funkcionisao u Reactu, moramo zameniti svako "class" sa "className". Konačni kod bi izgledao ovako:

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

    Srećom, postoje još dva pristupa, react-bootstrap i reactstrap, gde ručna intervencija nije neophodna.

    React-bootstrap

    react-bootstrap nudi prave React komponente izgrađene od nule. Biblioteka je kompatibilna sa Bootstrap jezgrom.

    Sledite ove korake za početak sa react-bootstrap:

    • Instalirajte react-bootstrap pomoću ove komande:
    npm install react-bootstrap bootstrap
    • Otvorite fajl src/index.js ili App.js i dodajte ovu liniju pre ostalih CSS fajlova:

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

    react-bootstrap omogućava uvoz specifičnih komponenti umesto cele biblioteke. Na primer, ako je potrebno uvesti dugme u jednoj od komponenti, to se može uraditi na sledeći način:

    import { Button } from 'react-bootstrap';

    Reactstrap

    Ovo je biblioteka React komponenti za Bootstrap. reactstrap se oslanja na Bootstrap CSS okvir za svoje stilove i teme. Ova biblioteka uvozi prave Bootstrap klase u vašu React aplikaciju, omogućavajući dosledan stil aplikacije. Takođe, nije neophodno dodavati Bootstrap JavaScript fajlove da bi se aktivirala funkcionalnost.

    Sledite ove korake da dodate reactstrap u vašu React aplikaciju:

    • Instalirajte reactstrap koristeći ovu komandu:
    npm install reactstrap react react-dom
    • Uvezite Bootstrap koristeći sledeće komande:
    npm install --save bootstrap

    import 'bootstrap/dist/css/bootstrap.min.css'; (dodajte ovu liniju u vaš app.js)

    Takođe, možete koristiti i CDN link za uključivanje Bootstrapa. Nakon prvog koraka, idite u osnovni direktorijum, zatim u .public/index.html i dodajte ovu liniju u <head> tag:

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

    reactstrap takođe omogućava uvoz pojedinačnih komponenti umesto cele biblioteke. Na primer, ako je potrebno uvesti dugme, možete to uraditi na sledeći način:

    import { Button } from 'reactstrap';

    Zaključak

    Navedeni su neki od pristupa koje možete koristiti za instalaciju Bootstrapa u vašu React aplikaciju za stilizovanje veb aplikacija. Izbor pristupa je stvar preferencije, jer je krajnji cilj isti.

    Kombinovanje Reacta sa Bootstrapom vas oslobađa od brige oko praćenja svih CSS stilova kako vaša aplikacija raste. Stilizovanje aplikacije postaje jednostavno i efikasno, ostavljajući vam više vremena da se fokusirate na funkcionalnost.

    Možete istražiti neke od razloga zašto odabrati React Native za razvoj mobilnih aplikacija.