Home-theater-designers
Ustvarjanje sprednjega vmesnika je lahko izziv, če ste novinec v ReactJS. Ogrodje Bootstrap skupaj s predlogami omogoča lažje in hitrejše delo.
Bootstrap ima tematske predloge, ki jih lahko vsak prilagodi in objavi brezplačno. Izbirate lahko med številnimi predlogami, preden jih prenesete in uporabite v svoji aplikaciji.
Predloge vam pomagajo hitro ustvariti izjemne čelne vmesnike, pri čemer ostane več časa za osredotočanje na kompleksne funkcije. O predlogah Bootstrap se lahko naučite tako, da eno integrirate z aplikacijo ReactJS.
Ustvarite svojo aplikacijo React
Začni z ustvarjanje aplikacije ReactJS v mapi na vašem računalniku. Lahko pa sledite uradniku Vodnik React pri ustvarjanju nove aplikacije.
Prenesite predlogo Bootstrap
Prenesite predlogo po vaši izbiri iz Zaženite Bootstrap spletno mesto s temami ali drugo po vaši želji. Na spletu je več spletnih mest z brezplačnimi predlogami Bootstrap.
Za ta vodnik prenesite temo Bootstrap z imenom Agency.
Ko jo prenesete, razpakirajte datoteko mape, da si ogledate njeno vsebino. Opazili boste, da imate mape z imenom sredstvi, CSS, JS in datoteko z imenom index.html.
Dodajte predlogo Bootstrap v aplikacijo ReactJS
Nato kopirajte vsebino prenesene mape v mapo z imenom javnosti v vaši aplikaciji React. Opazili boste, da imate zdaj dve datoteki index.html. Kopirajte vsebino Bootstrapa index.html datoteko v aplikacijo React index.html mapa.
Prikaži predlogo Bootstrap
Po dodajanju Bootstrap HTML v index.html aplikacije zaženite aplikacijo in preverite, ali je bila integracija uspešna. Uporabite naslednji ukaz:
npm startV brskalniku bi morali videti predlogo, kot prikazuje naslednja slika.
Integrirajte temo Bootstrap v komponente aplikacije
Če želite integrirati predlogo Bootstrap v aplikacijo React, morate kopirati razdelke HTML iz index.html v vsako komponento. Komponente vam omogočajo pisanje kode za različne dele aplikacije in njihovo ponovno uporabo. To zmanjša ponavljanje in tudi organizira strukturo vaše aplikacije.
Datoteka index.html ima zdaj različne razdelke Navigacija, O nas, Kontakt in Noga. V mapi src ustvarite dve mapi, komponente in strani. Razdelite razdelke v spodaj prikazane mape:
kako očistiti ventilator ps4
Sestavine morajo vsebovati naslednje:
- Header.jsx: razdelek kolofona.
- Navigation.jsx: Navigacijska vrstica in noga.
Mapa strani bo imela naslednje:
- AboutUs.jsx: Informacije o nas.
- Home.jsx: razdelki Storitve, Portfelj, Stranke in Ekipa.
- Contacts.jsx: Kontaktni podatki.
Kopirajte HTML vsakega razdelka iz datoteke index.html in ga dodajte vsaki komponenti. Sintaksa bi morala izgledati takole:
import React from 'react'
const Header = () => {
return (
<div>
<header className="masthead">
<div className="container">
<div className="masthead-subheading">Welcome To Our Studio!</div>
<div className="masthead-heading text-uppercase">
It's Nice To Meet You
</div>
<a className="btn btn-primary btn-xl text-uppercase" href="#services">
Tell Me More
</a>
</div>
</header>
</div>
);
};
export default Header
Nato spremenite sintakso HTML v komponentah v JSX. Če želite to narediti samodejno, kliknite urejevalnik Vscode Ctrl + Shift + P. V oknu, ki se odpre, kliknite možnost HTML v JSX, da spremenite HTML v JSX.
kako lahko prenesem videoposnetek z youtuba na svoj iphone
JSX je sintaksna razširitev JavaScripta. Omogoča vam uporabo mešanice HTML in JavaScript za pisanje kode v komponentah. Ko kopirate vse razdelke v komponente, ostane datoteka index.html samo s povezavami in skripti za oblikovanje.
Izgledalo bo takole:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="%PUBLIC_URL%/css/styles.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="%PUBLIC_URL%/js/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>
Ustvarite poti za komponente
Zdaj, ko imate v aplikaciji povezave, skripte in komponente, morate ustvariti poti zanje v datoteki App.js. Poti bodo upodobile strani v aplikaciji, da bo dinamična.
Za upodabljanje strani namestite react-router-dom z naslednjim ukazom:
npm install react-router-dom V App.js uvozite BrowserRouter kot Router, Routes in Route iz knjižnica react-router-dom . Nato uvozite vse komponente in Strani . Datoteka bi morala izgledati takole:
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from './components/Navigation';
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact'
import Header from "./components/Header";
function App() {
return (
<div className="App">
<Header />
<Home />
<About />
<Contact/>
<Router>
<Navigation>
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/about" element={<About />} />
<Route exact path="/contact" element={<Contact />} />
</Routes>
</Navigation>
</Router>
</div>
);
}
export default App;
Med brskanjem po brskalniku bi morali videti upodobljene strani na lokalnem gostitelju. Podobno predlogi, ki ste jo prenesli, kot je prikazano spodaj.
Čestitamo, uspešno ste integrirali temo Bootstrap v svojo aplikacijo React. Zdaj lahko prilagodite strani po svojih željah.
Zakaj uporabljati Bootstrapove tematske predloge?
Predloge Bootstrap pomagajo ustvariti izjemne sprednje vmesnike v zelo kratkem času. Na izbiro je veliko tem. Vse teme so najnovejše različice Bootstrapa. Imajo tudi licence MIT in so najnovejše zasnove v industriji.
Čeprav je prednosti veliko, zanašanje na predloge zmanjšuje ustvarjalnost. Na spletu je običajno najti eno priljubljeno temo, ki se uporablja na drugih spletnih mestih. Vendar pa lahko predlogo prilagodite edinstvenemu dizajnu.
Zdaj lahko integrirate predlogo Bootstrap s svojo aplikacijo React. Začnite graditi s predlogami Bootstrap in uživajte v čudovitih sprednjih vmesnikih.