Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Η δημιουργία διεπαφής διεπαφής διεπαφής μπορεί να είναι δύσκολη αν είστε νέοι στο ReactJS. Το πλαίσιο Bootstrap, μαζί με τα πρότυπά του, το καθιστά ευκολότερο και ταχύτερο.

Το Bootstrap έχει θεματικά πρότυπα που ο καθένας μπορεί να προσαρμόσει και να δημοσιεύσει δωρεάν. Μπορείτε να επιλέξετε από πολλά πρότυπα πριν τα κατεβάσετε και τα χρησιμοποιήσετε στην εφαρμογή σας.

Τα πρότυπα σάς βοηθούν να δημιουργείτε γρήγορα αξιόλογες διεπαφές διεπαφής, αφήνοντας περισσότερο χρόνο για να εστιάσετε σε πολύπλοκες λειτουργίες. Μπορείτε να μάθετε για τα πρότυπα Bootstrap ενσωματώνοντας ένα σε μια εφαρμογή ReactJS.

Δημιουργήστε την εφαρμογή React σας

Ξεκινήστε από δημιουργία μιας εφαρμογής ReactJS σε ένα φάκελο στο μηχάνημά σας. Εναλλακτικά, μπορείτε να ακολουθήσετε τον επίσημο Οδηγός αντίδρασης για τη δημιουργία μιας νέας εφαρμογής.

instagram viewer

Κατεβάστε ένα πρότυπο Bootstrap

Κατεβάστε ένα πρότυπο της επιλογής σας από το Ξεκινήστε το Bootstrap θεματικές ιστοσελίδες ή άλλη της προτίμησής σας. Υπάρχουν πολλοί ιστότοποι με δωρεάν πρότυπα Bootstrap στο διαδίκτυο.

Για αυτόν τον οδηγό, κατεβάστε το θέμα Bootstrap με το όνομα Agency.

Μετά τη λήψη, αποσυμπιέστε το αρχείο φακέλου για να δείτε τα περιεχόμενά του. Θα παρατηρήσετε ότι έχετε φακέλους με το όνομα assets, CSS, JS και ένα αρχείο με το όνομα index.html.

Προσθήκη προτύπου Bootstrap στην εφαρμογή ReactJS

Στη συνέχεια, αντιγράψτε τα περιεχόμενα του ληφθέντος φακέλου στον φάκελο με το όνομα δημόσιο στην εφαρμογή React σας. Θα παρατηρήσετε ότι τώρα έχετε δύο αρχεία index.html. Αντιγράψτε τα περιεχόμενα του Bootstrap index.html αρχείο στην εφαρμογή React index.html αρχείο.

Εμφάνιση προτύπου Bootstrap

Αφού προσθέσετε το Bootstrap HTML στο index.html της εφαρμογής, εκτελέστε την εφαρμογή για να δείτε εάν η ενσωμάτωση ήταν επιτυχής. Χρησιμοποιήστε την ακόλουθη εντολή:

npm έναρξη

Θα πρέπει να δείτε το πρότυπο στο πρόγραμμα περιήγησής σας, όπως δείχνει η παρακάτω εικόνα.

Ενσωματώστε το θέμα Bootstrap στα στοιχεία της εφαρμογής

Για να ενσωματώσετε το πρότυπο Bootstrap στην εφαρμογή React, πρέπει να αντιγράψετε τις ενότητες HTML από το index.html σε κάθε στοιχείο. Τα στοιχεία σάς επιτρέπουν να γράφετε κώδικα για διαφορετικά μέρη της εφαρμογής και να τα χρησιμοποιείτε ξανά. Αυτό μειώνει την επανάληψη και οργανώνει επίσης τη δομή της Εφαρμογής σας.

Το αρχείο index.html έχει πλέον διαφορετικές ενότητες Πλοήγηση, Σχετικά με εμάς, Επικοινωνία και Υποσέλιδο. Στον φάκελο src, δημιουργήστε δύο φακέλους, στοιχεία και σελίδες. Διαχωρίστε τις ενότητες στους φακέλους που φαίνονται παρακάτω:

Τα εξαρτήματα πρέπει να περιλαμβάνουν τα ακόλουθα:

  • Header.jsx: Η ενότητα masthead.
  • Navigation.jsx: Η γραμμή πλοήγησης και το υποσέλιδο.

Ο φάκελος των σελίδων θα έχει τα εξής:

  • AboutUs.jsx: Πληροφορίες σχετικά με εμάς.
  • Home.jsx: Ενότητες Υπηρεσιών, Χαρτοφυλακίου, Πελάτες και Ομάδας.
  • Contacts.jsx: Στοιχεία επικοινωνίας.

Αντιγράψτε το HTML κάθε ενότητας από το αρχείο index.html και προσθέστε το σε κάθε στοιχείο. Η σύνταξη θα πρέπει να μοιάζει με αυτό:

εισαγωγή Αντιδρώ από'αντιδρώ'
συνθ Κεφαλίδα = () => {
ΕΠΙΣΤΡΟΦΗ (




"κορυφή ιστού">
"δοχείο">
"ιστότοπος-υποτίτλος">Καλώς ήρθατε στο στούντιο μας!</div>









"Κείμενο-κεφαλίδα-κείμενο-κεφαλαία">
 ΤοΧαίρομαι που σε γνωρίζω
 </div>



"btn btn-κύριο btn-xl κείμενο-κεφαλαία" href="#Υπηρεσίες">
 Πες μου κι άλλα
 </a>
 </div>
 </header>
 </div>
 );
};


εξαγωγήΠροκαθορισμένο Επί κεφαλής

Στη συνέχεια, αλλάξτε τη σύνταξη του HTML στα στοιχεία σε JSX. Για να το κάνετε αυτό αυτόματα στον επεξεργαστή Vscode κάντε κλικ Ctrl + Shift + P. Κάντε κλικ στην επιλογή HTML σε JSX στο παράθυρο που εμφανίζεται, για να αλλάξετε το HTML σε JSX.

Το JSX είναι μια επέκταση σύνταξης στο JavaScript. Σας επιτρέπει να χρησιμοποιήσετε ένα μείγμα HTML και JavaScript για να γράψετε κώδικα σε στοιχεία. Μόλις αντιγράψετε όλες τις ενότητες στα στοιχεία, το αρχείο index.html παραμένει μόνο με τους συνδέσμους στυλ και τα σενάρια.

Θα μοιάζει έτσι:

html>
<htmllang="en">


<κεφάλι>
<μετασύνολο χαρακτήρων="utf-8" />
<Σύνδεσμοςσχετ="εικόνισμα"href="%PUBLIC_URL%/favicon.ico" />
<μεταόνομα="Θύρα προβολής"περιεχόμενο="width=device-width, αρχική κλίμακα=1" />
<μεταόνομα="θέμα-χρώμα"περιεχόμενο="#000000" />
<μεταόνομα="περιγραφή"περιεχόμενο="Ιστότοπος που δημιουργήθηκε με χρήση δημιουργίας-react-app"/>
<Σύνδεσμοςσχετ="apple-touch-icon"href="%PUBLIC_URL%/logo192.png" />
<Σύνδεσμοςσχετ="δηλωτικό"href="%PUBLIC_URL%/manifest.json" />
<τίτλος>React Appτίτλος>
<Σύνδεσμοςσχετ="εικόνισμα"τύπος="εικόνα/εικονίδιο x"href="assets/favicon.ico" />


 Font Awesome εικονίδια (δωρεάν έκδοση)
<γραφήsrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"διασταυρούμενης καταγωγής="Ανώνυμος">γραφή>


 Γραμματοσειρές Google
<Σύνδεσμοςhref=" https://fonts.googleapis.com/css? οικογένεια = Μονσεράτ: 400.700"σχετ="φύλλο στυλ"τύπος="κείμενο/css" />
<Σύνδεσμοςhref=" https://fonts.googleapis.com/css? οικογένεια=Roboto+Slab: 400.100.300.700"σχετ="φύλλο στυλ"τύπος="κείμενο/css" />


 CSS βασικού θέματος (περιλαμβάνει Bootstrap)
<Σύνδεσμοςhref="%PUBLIC_URL%/css/styles.css"σχετ="φύλλο στυλ" />
κεφάλι>


<σώμα>
<noscript>Πρέπει να ενεργοποιήσετε τη JavaScript για να εκτελέσετε αυτήν την εφαρμογή.noscript>


<divταυτότητα="ρίζα">div>


 Bootstrap core JS
<γραφήsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">γραφή>


 Βασικό θέμα JS
<γραφήsrc="%PUBLIC_URL%/js/scripts.js">γραφή>


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


 * * SB Forms JS * *


 * * Ενεργοποιήστε τη φόρμα σας στο https://startbootstrap.com/solution/contact-forms * *


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


<γραφήsrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">γραφή>
σώμα>
html>

Δημιουργία Διαδρομών για Στοιχεία

Τώρα που έχετε τους συνδέσμους, τα σενάρια και τα στοιχεία στην εφαρμογή, πρέπει να δημιουργήσετε διαδρομές για αυτά στο αρχείο App.js. Οι διαδρομές θα αποδώσουν τις σελίδες στην εφαρμογή για να την κάνουν δυναμική.

Για απόδοση των σελίδων, εγκαταστήστε το react-router-dom με την ακόλουθη εντολή:

npm εγκατάσταση react-router-dom

Στο App.js αρχείο, εισαγάγετε το BrowserRouter ως Router, Routes και Route από το βιβλιοθήκη react-router-dom. Στη συνέχεια εισάγετε όλα τα συστατικά και Σελίδες. Το αρχείο θα πρέπει να μοιάζει με αυτό:

εισαγωγή { BrowserRouter όπως και Router, Routes, Route } από"react-router-dom";
εισαγωγή Πλοήγηση από"./components/Πλοήγηση";
εισαγωγή Σπίτι από"./Σελίδες/Αρχική σελίδα";
εισαγωγή Σχετικά με από"./Σελίδες/Σχετικά με";
εισαγωγή Επικοινωνία από"./Σελίδες/Επαφή"
εισαγωγή Επί κεφαλής από"./components/Header";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (


"Εφαρμογή">










"/" στοιχείο ={} />
"/σχετικά με" στοιχείο ={} />
"/Επικοινωνία" στοιχείο ={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


εξαγωγήΠροκαθορισμένο Εφαρμογή?

Θα πρέπει να βλέπετε τις σελίδες που έχουν αποδοθεί στον τοπικό κεντρικό υπολογιστή όταν πλοηγείστε στο πρόγραμμα περιήγησης. Παρόμοιο με το πρότυπο που κατεβάσατε, όπως φαίνεται παρακάτω.

Συγχαρητήρια, έχετε ενσωματώσει με επιτυχία ένα θέμα Bootstrap στην εφαρμογή React σας. Τώρα μπορείτε να προσαρμόσετε τις σελίδες σύμφωνα με τις προτιμήσεις σας.

Γιατί να χρησιμοποιήσετε τα θεματικά πρότυπα του Bootstrap;

Τα πρότυπα εκκίνησης βοηθούν στη δημιουργία αξιοσημείωτων διεπαφών front-end μέσα σε πολύ σύντομο χρονικό διάστημα. Υπάρχουν πολλά θέματα για να διαλέξετε. Όλα τα θέματα είναι της τελευταίας έκδοσης Bootstrap. Έρχονται επίσης με άδειες MIT και είναι τα τελευταία σχέδια του κλάδου.

Ενώ τα πλεονεκτήματα είναι πολλά, το να βασίζεσαι σε πρότυπα μειώνει τη δημιουργικότητα. Είναι σύνηθες να βρείτε ένα δημοφιλές θέμα που χρησιμοποιείται σε άλλους ιστότοπους στο διαδίκτυο. Ωστόσο, μπορείτε να προσαρμόσετε ένα πρότυπο σε ένα μοναδικό σχέδιο.

Τώρα μπορείτε να ενσωματώσετε ένα πρότυπο Bootstrap με την εφαρμογή React. Ξεκινήστε τη δημιουργία με πρότυπα Bootstrap και απολαύστε όμορφες διεπαφές στο μπροστινό μέρος.