A front-end felület létrehozása kihívást jelenthet, ha még nem ismeri a ReactJS-t. A Bootstrap keretrendszer a sablonjaival együtt megkönnyíti és gyorsabbá teszi.
A Bootstrap tematikus sablonokkal rendelkezik, amelyeket bárki személyre szabhat és ingyenesen közzétehet. Számos sablon közül választhat, mielőtt letölti és felhasználja őket az alkalmazásban.
A sablonok segítségével gyorsan hozhat létre figyelemre méltó frontend felületeket, így több idő marad az összetett funkciókra való összpontosításra. Megtudhatja a Bootstrap sablonokat, ha integrál egyet egy ReactJS alkalmazással.
Hozd létre a React alkalmazásodat
Kezdje ezzel ReactJS alkalmazás létrehozása a gépén lévő mappában. Alternatív megoldásként követheti a hivatalos Reagálási útmutató új alkalmazás létrehozásáról.
Töltse le a Bootstrap sablont
Töltse le az Ön által választott sablont a
Indítsa el a Bootstrap programot témájú webhelyet vagy egy másik, az Ön által preferált webhelyet. Számos webhely ingyenes Bootstrap sablonokkal rendelkezik online.Ehhez az útmutatóhoz töltse le az Ügynökség nevű Bootstrap témát.
A letöltés után bontsa ki a mappafájlt a tartalmának megtekintéséhez. Észre fogja venni, hogy vannak eszközök nevű mappái, CSS, JS és egy index.html nevű fájl.
Adja hozzá a Bootstrap sablont a ReactJS alkalmazáshoz
Ezután másolja a letöltött mappa tartalmát a nevű mappába nyilvános a React alkalmazásban. Észre fogja venni, hogy most két index.html fájlja van. Másolja ki a Bootstrap tartalmát index.html fájlt a React alkalmazásba index.html fájlt.
Bootstrap sablon megjelenítése
Miután hozzáadta a Bootstrap HTML-kódot az alkalmazás index.html fájljához, futtassa az alkalmazást, és ellenőrizze, hogy az integráció sikeres volt-e. Használja a következő parancsot:
npm startLátnia kell a sablont a böngészőjében, amint azt az alábbi kép is mutatja.
Integrálja a Bootstrap témát az alkalmazás összetevőibe
A Bootstrap sablonnak a React alkalmazásba való integrálásához át kell másolnia az index.html HTML szakaszait az egyes összetevőkbe. Az összetevők lehetővé teszik, hogy kódot írjon az alkalmazás különböző részeihez, és újra felhasználja azokat. Ez csökkenti az ismétlődést, és rendszerezi az alkalmazás szerkezetét.
Az index.html fájl most különböző szakaszokat tartalmaz: Navigáció, Névjegy, Kapcsolat és Lábléc. Az src mappában hozzon létre két mappát, összetevőt és oldalt. Oszd fel a részeket az alábbi mappákba:
Az összetevőknek tartalmazniuk kell a következőket:
- Header.jsx: A fejléc címsora.
- Navigation.jsx: A navigációs sáv és lábléc.
Az oldalak mappájában a következők lesznek:
- AboutUs.jsx: Rólunk információ.
- Home.jsx: Szolgáltatások, Portfólió, Ügyfelek és Csapat szakaszok.
- Contacts.jsx: Kapcsolatfelvételi adatok.
Másolja ki az index.html fájlból az egyes szakaszok HTML-kódját, és adja hozzá az egyes összetevőkhöz. A szintaxisnak így kell kinéznie:
import Reagál tól től'reagál'const Fejléc = () => {
Visszatérés (
"árbocszalag">
"tartály">
"árboc-alcím">Üdvözöljük Stúdiónkban!</div>
"masthead-heading text-nagybetűs">
AztÖrülök, hogy találkoztunk
</div>
exportalapértelmezett Fejléc
Ezután módosítsa a HTML szintaxisát az összetevőkben JSX-re. Ennek automatikus végrehajtásához a Vscode szerkesztőben kattintson a gombra Ctrl + Shift + P. Kattintson a HTML to JSX opcióra a felugró ablakban, hogy módosítsa a HTML-t JSX-re.
A JSX a JavaScript szintaktikai kiterjesztése. Lehetővé teszi a HTML és a JavaScript keverékének használatát a kód komponensekbe írásához. Miután az összes részt az összetevőkbe másolta, az index.html fájl csak a stílushivatkozásokat és szkripteket tartalmazza.
Így fog kinézni:
html><htmllang="en">
<fej>
<metakarakterkészlet="utf-8" />
<linkrel="ikon"href="%PUBLIC_URL%/favicon.ico" />
<metanév="nézőablak"tartalom="width=device-width, kezdeti lépték=1" />
<metanév="téma-szín"tartalom="#000000" />
<metanév="leírás"tartalom="Webhely létrehozása a create-react-app segítségével"/>
<linkrel="apple-touch-ikon"href="%PUBLIC_URL%/logo192.png" />
<linkrel="nyilvánvaló"href="%PUBLIC_URL%/manifest.json" />
<cím>React Appcím>
<linkrel="ikon"típus="image/x-icon"href="assets/favicon.ico" />Font Awesome ikonok (ingyenes verzió)
<forgatókönyvsrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"kereszteredet="névtelen">forgatókönyv>Google betűtípusok
<linkhref=" https://fonts.googleapis.com/css? család = Montserrat: 400 700"rel="stíluslap"típus="text/css" />
<linkhref=" https://fonts.googleapis.com/css? család=Roboto+Födém: 400,100,300,700"rel="stíluslap"típus="text/css" />Az alaptéma CSS (beleértve a Bootstrapet is)
<linkhref="%PUBLIC_URL%/css/styles.css"rel="stíluslap" />
fej><test>
<noscript>Az alkalmazás futtatásához engedélyeznie kell a JavaScriptet.noscript><divid="gyökér">div>
Bootstrap mag JS
<forgatókönyvsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">forgatókönyv>JS alaptéma
<forgatókönyvsrc="%PUBLIC_URL%/js/scripts.js">forgatókönyv>* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* * SB űrlapok JS * *
* * Aktiválja űrlapját a következő címen: https://startbootstrap.com/solution/contact-forms * *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
<forgatókönyvsrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">forgatókönyv>
test>
html>
Útvonalak létrehozása az összetevők számára
Most, hogy megvannak a hivatkozások, szkriptek és összetevők az alkalmazásban, útvonalakat kell létrehoznia számukra az App.js fájlban. Az útvonalak dinamikussá teszik az alkalmazás oldalait.
Az oldalak megjelenítéséhez telepítse a react-router-dom-t a következő paranccsal:
npm install react-router-dom Ban,-ben App.js fájlt, importálja a BrowserRouter-t routerként, Routes-t és Route-t a react-router-dom könyvtár. Ezután importálja az összes alkatrészek és Oldalak. A fájlnak így kell kinéznie:
import { BrowserRouter mint Router, Routes, Route } tól től"react-router-dom";
import Navigáció tól től'./components/Navigation';
import itthon tól től'./Pages/Home';
import Ról ről tól től'./Pages/About';
import Kapcsolatba lépni tól től"./Pages/Contact"
import Fejléc tól től"./components/Header";funkcióApp() {
Visszatérés (
"Alkalmazás">
"/" elem={} />
"/ról ről" elem={} />
"/kapcsolatba lépni" elem={} />
</Routes>
</Navigation>
</Router>
</div>
);
}
exportalapértelmezett App;
A böngészőben való navigáció során látnia kell a megjelenített oldalakat a helyi gazdagépen. Hasonló a letöltött sablonhoz, az alábbiak szerint.
Gratulálunk, sikeresen integrálta a Bootstrap témát a React alkalmazásba. Most már saját igényei szerint testreszabhatja az oldalakat.
Miért érdemes a Bootstrap tematikus sablonjait használni?
A Bootstrap sablonok segítenek figyelemre méltó előtér-felületek létrehozásában nagyon rövid időn belül. Sok téma közül lehet választani. Az összes téma a legújabb Bootstrap verzióból származik. MIT licenccel is rendelkeznek, és a legújabb iparági tervek.
Bár számos előnye van, a sablonokra támaszkodva csökken a kreativitás. Gyakran előfordul, hogy egy népszerű témát más webhelyeken használnak az interneten. A sablont azonban egyedi kialakításra szabhatja.
Mostantól integrálhat egy Bootstrap sablont a React alkalmazásba. Kezdje el az építést a Bootstrap sablonokkal, és élvezze a gyönyörű kezelőfelületeket.
