A React az egyik legnépszerűbb JavaScript-keretrendszer és -könyvtár egyoldalas alkalmazások és felhasználói felületek készítésére. Népszerűségét a felhasználói felületek újrafelhasználható komponenseinek felhasználásával való rugalmassága, a fejlesztés gyorsasága és a támogató közösség magyarázza.
A Reactot azonban kombinálni kell a Cascading Style Sheets-szel (CSS) annak érdekében, hogy alkalmazásai látványosabbá és bemutathatóbbá váljanak. A CSS nulláról való írása időigényes lehet.
A fejlesztők sok időt tölthetnek a stílusalkotással a React alkalmazás kulcsfontosságú funkciói helyett. A jó hír az, hogy az olyan eszközök és keretrendszerek, mint a Bootstrap, megkönnyítik a CSS hozzáadását a React alkalmazáshoz.
Tartalomjegyzék
Mi az a Bootstrap?
A Bootstrap egy nyílt forráskódú CSS-keretrendszer a front-end fejlesztéshez. A Bootstrap lehetővé teszi a fejlesztők számára, hogy reszponzív és mobil-első webhelyeket hozzanak létre a JavaScript- és CSS-alapú tervezési eszközök és sablonok átfogó készletével.
A Bootstrap-ot a Twitter hozta létre, és ugyanannak a cégnek a mérnökeiből álló csapat tartja karban. Forráskódját a GitHubon tartják karban, és a közösség tagjai hozzájárulhatnak és hibajelentéseket és javaslatokat küldhetnek. A Bootstrap 5.3.0-alpha1 a legfrissebb verzió az írás idején.
Miért használja a Bootstrapet a React-tal?
- Időt takarít meg: A Bootstrap gondoskodik a formázásról, így több ideje marad a funkcionalitásra összpontosítani. Így nem olyan problémák miatt kell aggódnia, mint például az űrlapok vagy gombok megjelenése, hanem olyan területek miatt, mint például, hogy a küldés gomb adatokat küld-e a háttérrendszernek vagy az API-nak.
- Könnyű használat: Miután hozzáadta a Bootstrap programot a React alkalmazáshoz, egyszerűen vegye elő az előre megtervezett felhasználói felület összetevőit, és adja hozzá őket az alkalmazáshoz.
- Következetes kialakítás: A legtöbb alkalmazás mérete idővel nő. A webhely egységes kialakításának biztosítása fontos, ha hűséges felhasználókat szeretne vonzani. A Bootstrap egységes stílussal rendelkezik, amely egységes megjelenést kölcsönöz oldalainak.
- Rengeteg sablon közül választhat: A Bootstrap több száz sablont kínál a navigációs sávoktól, gomboktól, űrlapoktól és körhintáktól a legördülő menükig, hogy néhányat említsünk, amelyek közül választhat.
- Könnyű testreszabhatóság: Annak ellenére, hogy a Bootstrap rendelkezik tervezősablonokkal, mindig testreszabhatja a betűméretet, a színt és az egyéb funkciókat igényeinek megfelelően.
- Közösségi támogatás: A Bootstrap kiterjedt dokumentációval rendelkezik a kezdéshez. Azonban továbbra is támaszkodhat a nagy közösségre, mindig új funkciókat ad hozzá, és fenntartja ezt a CSS-keretrendszert.
- Reszponzív kialakítás: Miután hozzáadta a Bootstrapet a React alkalmazáshoz, biztos lehet benne, hogy webalkalmazása minden képernyőméreten érzékeny lesz.
A Bootstrap telepítése a Reactban
A React alkalmazáshoz alapértelmezés szerint nincs telepítve a Bootstrap. Mielőtt azonban megvizsgálnánk, hogyan adjuk hozzá/telepítsük a Bootstrap-ot a Reactban, ellenőriznünk kell néhány dolgot;
Előfeltételek
Ezzel a paranccsal ellenőrizze, hogy a node.js telepítve van-e a számítógépére:
node -v
Ha a node.js telepítve van, akkor a terminálon ehhez hasonló kimenet lesz.
Node verzió
Ha nincs telepítve, a letöltési utasításokat a https://nodejs.org/en/ címen tekintheti meg.
Ezzel a paranccsal ellenőrizze, hogy a React telepítve van-e a számítógépére:
npm list react
Ha a React globálisan telepítve van a gépén, akkor valami ilyesmi lesz a terminálján.
React Version
- Telepítse a react-create-appot a gépére. Ennek a parancsnak a használatával
npm install -g create-react-app
- Ezzel a paranccsal hozza létre a React alkalmazást
npx create-react-app my-app
Az én alkalmazásomat tetszőleges névre cserélheti. A mi esetünkben az alkalmazásunkat react-b-nek neveztük el.
A telepítés után valami hasonló lesz a terminálon:
A kezdéshez futtassa ezeket a parancsokat
- cd react-b (használja az előző lépésben kiválasztott alkalmazás nevét)
- npm start (ez a parancs elindítja a React alkalmazást)
Most léphetünk a következő lépésekre, és hozzáadhatjuk/telepíthetjük a Bootstrap-ot a React alkalmazásunkhoz:
NPM telepítési rendszerindítási módszer
A Node.js alapértelmezés szerint telepítve van az npm-mel (csomópont-csomagkezelő).
Az npm verzióját ezzel a paranccsal ellenőrizheti:
npm -v
Ha az npm telepítve van, akkor egy kimenetet kap, például a 9.2.0-t
Most már telepítheti a bootstrap-et ezzel a paranccsal:
npm install bootstrap
Ha elkészült, lépjen a ./src/index.js fájlba. Adja hozzá ezt a sort a tetejére.
import ‘bootstrap/dist/css/bootstrap.css’;
A fonalcsomagkezelő használata
Az npm-mel ellentétben a fonal alapértelmezés szerint nem kerül telepítésre a node.js telepítésekor.
Telepítse a yardot ezzel a paranccsal;
npm install -g yarn
Ez a parancs globálisan telepíti a fonalat, így többé nem kell minden alkalommal telepítenie a csomagot, amikor egy React alkalmazást hoz létre.
Futtassa ezt a parancsot a bootstrap hozzáadásához a Reacthoz:
yarn add bootstrap
Ha elkészült, lépjen a ./src/index.js fájlba. Adja hozzá ezt a sort a tetejére.
import ‘bootstrap/dist/css/bootstrap.css’;
Mindig importálja a Bootstrap elemet az alkalmazás belépési fájljának tetején a többi CSS-fájl elé. Ez megkönnyíti a Bootstrap bejegyzések módosítását, ha módosítania kell a sablonok alapértelmezett értékeit a React alkalmazás létrehozásakor.
CDN módszer
Egy CDN (Content Delivery Network) hivatkozás segítségével hozzáadhatja a Bootstrapet a Reacthez. A CDN-hivatkozás hozzáadásával hozzáadja a Bootstrap könyvtárat a React alkalmazáshoz anélkül, hogy letöltené és tárolná a projektmappában lévő fájlokat. Kovesd ezeket a lepeseket.
- A gyökérmappában keresse meg a .public/index.html fájlt
- Adja hozzá ezt a címkét a címkéhez
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- JavaScript-függőségeket kell hozzáadnia az alkalmazáshoz. Lépjen az index.html fájl törzsébe, és adja hozzá ezt a címkét közvetlenül a záró címke elé:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
A Bootstrap végül telepítve van a React alkalmazásban.
A React Bootstrap Package használata
Az általunk eddig ismertetett megközelítések eredetileg HTML-fájlokhoz készültek. Ennek jobb megértéséhez vegye figyelembe ezt a Bootstrap legördülő kódját:
<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>
Mi a baj a kóddal? A Bootstrap alapértelmezés szerint az osztályt használja az osztályok (DIV-ek) osztályozására. A React azonban JSX-et használ, amely a camelCase szintaxist használja. Így az osztályt manuálisan kell helyettesítenie az osztálynévvel.
Ahhoz, hogy ez a kód működjön a Reacton, minden „osztályt” le kell cserélnünk „className”-re. A végső kód a következő lesz:
<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>
Szerencsére van még két megközelítésünk, a react-bootstrap és a reactstrap, ahol nincs szükség kézi beavatkozásra.
React-bootstrap
A React-bootstrap valódi React összetevőket tartalmaz, amelyeket a semmiből építenek. A könyvtár kompatibilis a Bootstrap maggal.
Kövesse az alábbi lépéseket a React-bootstrap használatának megkezdéséhez:
- Telepítse a React-bootstrap programot ezzel a paranccsal:
npm install react-bootstrap bootstrap
- Keresse meg az src/index.js vagy App.js fájlt, és adja hozzá ezt a sort a többi CSS-fájl elé
import ‘bootstrap/dist/css/bootstrap.min.css’;
A React-bootstrap lehetővé teszi egy adott összetevő importálását a teljes könyvtár helyett. Például, ha importálnia kell egy gombot az egyik összetevőjéhez, az alábbiak szerint importálhatja azt;
import { Button } from ‘react-bootstrap’;
Reactstrap
Ez egy React komponens könyvtár a Bootstrap számára. A Reactstrap a Bootstrap CSS keretrendszerre támaszkodik stílusai és témái tekintetében. Ez a könyvtár a megfelelő Bootstrap osztályokat importálja a React alkalmazásba, lehetővé téve az alkalmazás egységes stílusát. Ezenkívül nem kell hozzáadnia a Bootstrap JavaScript fájljait a funkciók aktiválásához.
Kövesse az alábbi lépéseket a Reactstrap hozzáadásához a React alkalmazáshoz:
- Telepítse a Reactstrap-et ezzel a paranccsal:
npm install reactstrap react react-dom
- A Bootstrap importálása a következő parancsokkal:
npm install --save bootstrap
import ‘bootstrap/dist/css/bootstrap.min.css’; (adja hozzá ezt a sort az app.js-hez)
Használhatja a CDN-hivatkozási lehetőséget is, hogy a Bootstrap-et beépítse az alkalmazásba. Az első lépés után lépjen a gyökérkönyvtárba, keresse meg a .public/index.html fájlt, és adja hozzá ezt a sort a
címkéhez<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
A Reactstrap lehetővé teszi egy adott komponens importálását a teljes könyvtár helyett. Például, ha importálnia kell egy gombot az egyik összetevőjéhez, akkor importálhatja a következőként;
import { Button } from ‘reactstrap’;
Következtetés
A fentiekben bemutatunk néhány módszert, amellyel telepítheti a Bootstrap-et a React alkalmazásba, hogy stílusossá tegye webes alkalmazásait. A telepítési mód megválasztása preferencia kérdése, mivel a végcél ugyanaz.
A React és a Bootstrap kombinálása megkíméli Önt attól a fájdalomtól, hogy minden CSS-stílust nyomon kell követnie, ahogy az alkalmazás növekszik. Az alkalmazás stílusának kialakítása egyszerűbbé és hatékonyabbá válik, ahogy több ideje marad a funkciókra összpontosítani.
Megvizsgálhat néhány okot, amiért a React Native-ot válassza mobilalkalmazás-fejlesztéshez.