4 τρόποι για να εγκαταστήσετε το Bootstrap στο React για να δημιουργήσετε μια πιο λεπτομερή εφαρμογή

από
Tweet
Share
Share
Pin

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

Ωστόσο, το React πρέπει να συνδυαστεί με Cascading Style Sheets (CSS) για να κάνει τις εφαρμογές του πιο ελκυστικές και εμφανίσιμες. Η σύνταξη CSS από την αρχή μπορεί να είναι χρονοβόρα.

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

Τι είναι το Bootstrap;

Το Bootstrap είναι ένα πλαίσιο CSS ανοιχτού κώδικα για ανάπτυξη front-end. Το Bootstrap επιτρέπει στους προγραμματιστές να δημιουργούν ιστοτόπους που να ανταποκρίνονται και να προορίζονται για κινητά μέσω του ολοκληρωμένου συνόλου εργαλείων και προτύπων σχεδίασης που βασίζονται σε JavaScript και CSS.

Το Bootstrap δημιουργήθηκε από το Twitter και συντηρείται επίσης από μια ομάδα μηχανικών της ίδιας εταιρείας. Ο πηγαίος κώδικας του διατηρείται στο GitHub και τα μέλη της κοινότητας μπορούν να συνεισφέρουν και να στέλνουν αναφορές και προτάσεις σφαλμάτων. Το Bootstrap 5.3.0-alpha1 είναι η πιο πρόσφατη έκδοση από τη στιγμή της σύνταξης.

Γιατί να χρησιμοποιήσετε το Bootstrap με το React;

  • Εξοικονομεί χρόνο: Το Bootstrap φροντίζει για τη μορφοποίηση, δίνοντάς σας περισσότερο χρόνο για να εστιάσετε στη λειτουργικότητα. Επομένως, δεν χρειάζεται να ανησυχείτε για ζητήματα όπως η εμφάνιση των φορμών ή των κουμπιών σας, αλλά για τομείς όπως το εάν το κουμπί υποβολής στέλνει δεδομένα στο backend ή στο API σας.
  • Ευκολία χρήσης: Αφού προσθέσετε το Bootstrap στην εφαρμογή React, απλώς πάρτε τα προσχεδιασμένα στοιχεία διεπαφής χρήστη και προσθέστε τα στην εφαρμογή σας.
  • Συνεπής σχεδίαση: Οι περισσότερες εφαρμογές μεγαλώνουν σε μέγεθος με την πάροδο του χρόνου. Η διασφάλιση μιας συνεπούς σχεδίασης του ιστότοπού σας είναι σημαντική εάν θέλετε να προσελκύσετε πιστούς χρήστες. Το Bootstrap έχει ένα σταθερό στυλ που θα δώσει στις σελίδες σας μια ομοιόμορφη εμφάνιση.
  • Τόνοι προτύπων για να διαλέξετε: Το Bootstrap έχει εκατοντάδες πρότυπα που κυμαίνονται από γραμμές πλοήγησης, κουμπιά, φόρμες και καρουζέλ έως αναπτυσσόμενα, για να αναφέρουμε μερικά, για να διαλέξετε.
  • Ευκολία προσαρμογής: Παρόλο που το Bootstrap διαθέτει πρότυπα σχεδίασης, μπορείτε πάντα να προσαρμόσετε το μέγεθος της γραμματοσειράς, το χρώμα και άλλες λειτουργίες ανάλογα με τις ανάγκες σας.
  • Υποστήριξη κοινότητας: Το Bootstrap διαθέτει εκτενή τεκμηρίωση για να ξεκινήσετε. Ωστόσο, μπορείτε ακόμα να συνεισφέρετε στη μεγάλη κοινότητα, προσθέτοντας πάντα νέες δυνατότητες και διατηρώντας αυτό το πλαίσιο CSS.
  • Responsive design: Αφού προσθέσετε το Bootstrap στην εφαρμογή React, είστε βέβαιοι ότι η εφαρμογή web σας θα αποκρίνεται σε όλα τα μεγέθη οθόνης.
  Πώς να διορθώσετε το σφάλμα Resume NVIDIA στο Elementary OS Loki

Πώς να εγκαταστήσετε το Bootstrap στο React

Μια εφαρμογή React δεν παρέχεται με εγκατεστημένο το Bootstrap από προεπιλογή. Αλλά προτού εξερευνήσουμε πώς να προσθέσουμε/εγκαταστήσουμε το Bootstrap στο React, πρέπει να ελέγξουμε μερικά πράγματα.

Προαπαιτούμενα

  • Ελέγξτε ότι το Node.js είναι εγκατεστημένο: Αυτό το περιβάλλον χρόνου εκτέλεσης JavaScript μεταξύ πλατφορμών επιτρέπει στους προγραμματιστές να εκτελούν JavaScript εκτός ενός προγράμματος περιήγησης ιστού.

    • Χρησιμοποιήστε αυτήν την εντολή για να ελέγξετε εάν το node.js είναι εγκατεστημένο στον υπολογιστή σας:

    node -v

    Εάν είναι εγκατεστημένο το node.js, θα έχετε μια έξοδο παρόμοια με αυτήν στο τερματικό σας.

    Έκδοση κόμβου

    Εάν δεν είναι εγκατεστημένο, μπορείτε να ελέγξετε τις οδηγίες λήψης από τη διεύθυνση https://nodejs.org/en/.

  • Ελέγξτε ότι το React είναι εγκατεστημένο: Θα χρησιμοποιήσετε το React για να δημιουργήσετε λειτουργικότητα ενώ το Bootstrap λαμβάνει τη μορφοποίηση.

    • Χρησιμοποιήστε αυτήν την εντολή για να ελέγξετε εάν το React είναι εγκατεστημένο στον υπολογιστή σας:

    npm list react

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

    Έκδοση React

  • Δημιουργήστε την εφαρμογή React: Μπορείτε να δημιουργήσετε την εφαρμογή React με μη αυτόματο τρόπο, αλλά απαιτεί πολλή δουλειά. Για τους σκοπούς επίδειξής μας, θα χρησιμοποιήσουμε την εντολή create-react-app. Ακολουθήστε αυτά τα βήματα για να δημιουργήσετε την εφαρμογή σας react:
    • Εγκαταστήστε την εφαρμογή react-create-app στον υπολογιστή σας. Χρησιμοποιώντας αυτήν την εντολή 
    npm install -g create-react-app
    • Δημιουργήστε την εφαρμογή React χρησιμοποιώντας αυτήν την εντολή 
    npx create-react-app my-app

    Μπορείτε να αντικαταστήσετε την εφαρμογή μου με οποιοδήποτε όνομα της επιλογής σας. Για την περίπτωσή μας, ονομάσαμε την εφαρμογή μας react-b.

    Μόλις εγκατασταθεί, θα έχετε κάτι παρόμοιο στο τερματικό σας:

    Εκτελέστε αυτές τις εντολές για να ξεκινήσετε

    • cd react-b (χρησιμοποιήστε το όνομα της εφαρμογής σας που επιλέξατε στο προηγούμενο βήμα)
    • npm start (αυτή η εντολή ξεκινά την εφαρμογή React)

    Μπορούμε τώρα να πάμε στα επόμενα βήματα και να προσθέσουμε/εγκαταστήσουμε το Bootstrap στην εφαρμογή μας React:

      Διορθώστε αυτή η εφαρμογή δεν υποστηρίζει το σφάλμα που καθορίζεται στη σύμβαση

    NPM Install Bootstrap Method

    Το Node.js διαθέτει npm (διαχείριση πακέτων κόμβου) εγκατεστημένο από προεπιλογή.

    Μπορείτε να ελέγξετε την έκδοση του npm σας μέσω αυτής της εντολής:

    npm -v

    Εάν είναι εγκατεστημένο το npm, θα λάβετε μια έξοδο όπως 9.2.0

    Τώρα μπορείτε να εγκαταστήσετε το bootstrap χρησιμοποιώντας αυτήν την εντολή:

    npm install bootstrap

    Μόλις τελειώσετε, μεταβείτε στο αρχείο ./src/index.js. Προσθέστε αυτή τη γραμμή στο επάνω μέρος.

    εισαγωγή ‘bootstrap/dist/css/bootstrap.css’;

    Χρήση του Yarn Package Manager

    Σε αντίθεση με το npm, το νήμα δεν εγκαθίσταται από προεπιλογή κατά την εγκατάσταση του node.js.

    Εγκαταστήστε το yard χρησιμοποιώντας αυτήν την εντολή.

    npm install -g yarn

    Αυτή η εντολή θα εγκαταστήσει το νήμα καθολικά, επομένως δεν χρειάζεται πλέον να εγκαθιστάτε το πακέτο κάθε φορά που δημιουργείτε μια εφαρμογή React.

    Εκτελέστε αυτήν την εντολή για να προσθέσετε bootstrap στο React:

    yarn add bootstrap

    Μόλις τελειώσετε, μεταβείτε στο αρχείο ./src/index.js. Προσθέστε αυτή τη γραμμή στο επάνω μέρος.

    εισαγωγή ‘bootstrap/dist/css/bootstrap.css’;

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

    Μέθοδος CDN

    Χρησιμοποιώντας έναν σύνδεσμο Content Delivery Network (CDN), μπορείτε να προσθέσετε Bootstrap στο React. Προσθέτοντας αυτόν τον σύνδεσμο CDN, συμπεριλαμβάνετε τη βιβλιοθήκη Bootstrap στην εφαρμογή React χωρίς να κάνετε λήψη και φιλοξενία των αρχείων στον φάκελο του έργου σας. Ακολουθήστε αυτά τα βήματα.

    • Στον ριζικό φάκελο, μεταβείτε στο αρχείο .public/index.html
    • Στην ετικέτα , προσθέστε αυτήν την ετικέτα 
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    • Πρέπει να προσθέσετε εξαρτήσεις JavaScript στην εφαρμογή σας. Μεταβείτε στο σώμα του αρχείου index.html και προσθέστε αυτήν την ετικέτα λίγο πριν την ετικέτα κλεισίματος :
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

    Το Bootstrap τελικά εγκαθίσταται στην εφαρμογή React.

    Χρήση του πακέτου React Bootstrap

    Οι προσεγγίσεις που έχουμε καλύψει μέχρι τώρα σχεδιάστηκαν αρχικά για αρχεία HTML. Για να το κατανοήσετε καλύτερα, σκεφτείτε αυτόν τον αναπτυσσόμενο κώδικα από το Bootstrap: 

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

    Τι συμβαίνει με τον κωδικό; Το Bootstrap, από προεπιλογή, χρησιμοποιεί κλάση για να ταξινομήσει τις διαιρέσεις του (DIV). Ωστόσο, το React χρησιμοποιεί JSX, το οποίο χρησιμοποιεί σύνταξη camelCase. Επομένως, πρέπει να αντικαταστήσετε την κλάση με το className με μη αυτόματο τρόπο.

    Για να λειτουργήσει αυτός ο κώδικας στο React, πρέπει να αντικαταστήσουμε κάθε “class” με “className”. Ο τελικός κωδικός θα είναι:

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

    Ευτυχώς, έχουμε δύο ακόμη προσεγγίσεις, το react-bootstrap και το reactstrap, όπου δεν χρειάζεται χειροκίνητη παρέμβαση.

    React-bootstrap

    Το React-bootstrap έχει αληθινά στοιχεία React κατασκευασμένα από την αρχή. Η βιβλιοθήκη είναι συμβατή με τον πυρήνα Bootstrap.

    Ακολουθήστε αυτά τα βήματα για να ξεκινήσετε με το React-bootstrap:

    • Εγκαταστήστε το React-bootstrap με αυτήν την εντολή:
    npm install react-bootstrap bootstrap
    • Μεταβείτε στο αρχείο src/index.js ή App.js και προσθέστε αυτήν τη γραμμή πριν από άλλα αρχεία CSS

    εισαγωγή ‘bootstrap/dist/css/bootstrap.min.css’;

    Το React-bootstrap σάς επιτρέπει να εισάγετε ένα συγκεκριμένο στοιχείο αντί για ολόκληρη τη βιβλιοθήκη. Για παράδειγμα, εάν χρειάζεται να εισαγάγετε ένα κουμπί σε ένα από τα στοιχεία σας, μπορείτε να το εισαγάγετε ως εξής.

    εισαγωγή { Button } από το ‘react-bootstrap’;

    Reactstrap

    Αυτή είναι μια βιβλιοθήκη στοιχείων React για το Bootstrap. Το Reactstrap βασίζεται στο πλαίσιο CSS Bootstrap για τα στυλ και το θέμα του. Αυτή η βιβλιοθήκη εισάγει τις σωστές κλάσεις Bootstrap στην εφαρμογή React, επιτρέποντάς σας να έχετε σταθερό στυλ εφαρμογής. Επίσης, δεν χρειάζεται να προσθέσετε αρχεία JavaScript του Bootstrap για να ενεργοποιήσετε τη λειτουργικότητα.

    Ακολουθήστε αυτά τα βήματα για να προσθέσετε το Reactstrap στην εφαρμογή React:

    • Εγκαταστήστε το Reactstrap μέσω αυτής της εντολής:
    npm install reactstrap react react-dom
    • Εισαγάγετε το Bootstrap χρησιμοποιώντας αυτές τις εντολές:
    npm install --save bootstrap

    εισαγωγή ‘bootstrap/dist/css/bootstrap.min.css’; (προσθέστε αυτήν τη γραμμή στο app.js σας)

    Μπορείτε επίσης να χρησιμοποιήσετε την επιλογή σύνδεσης CDN για να συμπεριλάβετε το Bootstrap στην εφαρμογή σας. Μετά το πρώτο βήμα, μεταβείτε στον ριζικό κατάλογο και μεταβείτε στο αρχείο .public/index.html και προσθέστε αυτήν τη γραμμή στην ετικέτα 

    <link

    rel="stylesheet"

    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

  />

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

    εισαγωγή { Button } από το ‘reactstrap’;

    συμπέρασμα

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

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

    Μπορείτε να εξερευνήσετε ορισμένους λόγους για να επιλέξετε το React Native για την ανάπτυξη εφαρμογών για κινητά.