קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

יצירת ממשק חזיתי יכולה להיות מאתגרת אם אתה חדש ב-ReactJS. המסגרת של Bootstrap, לצד התבניות שלה, הופכת את זה לקלה ומהירה יותר.

ל- Bootstrap יש תבניות נושא שכל אחד יכול להתאים ולפרסם בחינם. אתה יכול לבחור מתוך תבניות רבות לפני ההורדה והשימוש בהן באפליקציה שלך.

תבניות עוזרות לך ליצור במהירות ממשקי חזית מדהימים, ומשאירות יותר זמן להתמקד בתכונות מורכבות. אתה יכול ללמוד על תבניות Bootstrap על ידי שילוב אחת עם אפליקציית ReactJS.

צור את אפליקציית React שלך

התחל על ידי יצירת אפליקציית ReactJS בתיקייה במחשב שלך. לחלופין, אתה יכול לעקוב אחר הרשמי מדריך תגובה על יצירת אפליקציה חדשה.

הורד תבנית Bootstrap

הורד תבנית לבחירתך מה- התחל את Bootstrap אתר ערכות נושא או אחר המועדף עליך. ישנם מספר אתרים עם תבניות Bootstrap בחינם באינטרנט.

למדריך זה, הורד את ערכת הנושא Bootstrap בשם Agency.

לאחר ההורדה, פתח את קובץ התיקיה כדי לראות את תוכנו. תבחין שיש לך תיקיות בשם assets, CSS, JS וקובץ בשם index.html.

instagram viewer

הוסף תבנית 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 והוסף אותו לכל רכיב. התחביר אמור להיראות כך:

יְבוּא לְהָגִיב מ'לְהָגִיב'
const כותרת = () => {
לַחֲזוֹר (




"רֹאשׁ הָתוֹרֶן">
"מְכוֹלָה">
"כותרת משנה">ברוכים הבאים לסטודיו שלנו!</div>









"כותרת כותרת כותרת טקסט-אותיות גדולות">
 זהנעים להכיר
 </div>



"btn btn-primary 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="he">


<רֹאשׁ>
<מטאערכת תווים="utf-8" />
<קישורrel="סמל"href="%PUBLIC_URL%/favicon.ico" />
<מטאשֵׁם="נקודת מבט"תוֹכֶן="width=device-width, initial-scale=1" />
<מטאשֵׁם="צבע-נושא"תוֹכֶן="#000000" />
<מטאשֵׁם="תיאור"תוֹכֶן="אתר אינטרנט נוצר באמצעות create-react-app"/>
<קישורrel="תפוח-מגע-סמל"href="%PUBLIC_URL%/logo192.png" />
<קישורrel="לְהַפְגִין"href="%PUBLIC_URL%/manifest.json" />
<כותרת>אפליקציית תגובהכותרת>
<קישורrel="סמל"סוּג="תמונה/אייקון x"href="assets/favicon.ico" />


 אייקוני גופן Awesome (גרסה חינמית)
<תַסרִיטsrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"מקור צולב="בעילום שם">תַסרִיט>


 גופנים של גוגל
<קישורhref=" https://fonts.googleapis.com/css? משפחה=מונסראט: 400,700 אינץ'rel="גיליון סגנונות"סוּג="טקסט/css" />
<קישורhref=" https://fonts.googleapis.com/css? family=Roboto+Slab: 400,100,300,700 אינץ'rel="גיליון סגנונות"סוּג="טקסט/css" />


 נושא הליבה CSS (כולל Bootstrap)
<קישורhref="%PUBLIC_URL%/css/styles.css"rel="גיליון סגנונות" />
רֹאשׁ>


<גוּף>
<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 כנתב, מסלולים ומסלול מה- ספריית react-router-dom. לאחר מכן ייבא את כל רכיבים ו דפים. הקובץ אמור להיראות כך:

יְבוּא { BrowserRouter כפי ש נתב, מסלולים, מסלול } מ"react-router-dom";
יְבוּא ניווט מ'./components/Navigation';
יְבוּא בית מ'./Pages/Home';
יְבוּא על אודות מ'./Pages/About';
יְבוּא איש קשר מ'./Pages/Contact'
יְבוּא כּוֹתֶרֶת מ"./components/Header";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (


"אפליקציה">










"/" element={} />
"/על אודות" element={} />
"/איש קשר" element={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


יְצוּאבְּרִירַת מֶחדָל אפליקציה;

אתה אמור לראות את הדפים המעובדים במארח המקומי כשאתה מנווט בדפדפן. בדומה לתבנית שהורדת, כפי שמוצג להלן.

מזל טוב, שילבת בהצלחה ערכת נושא Bootstrap באפליקציית React שלך. כעת תוכל להתאים אישית את הדפים לפי העדפתך.

למה להשתמש בתבניות הנושא של Bootstrap?

תבניות Bootstrap עוזרות ליצור ממשקים חזיתיים יוצאי דופן תוך זמן קצר מאוד. יש הרבה נושאים לבחירה. כל ערכות הנושא הן של גרסת Bootstrap העדכנית ביותר. הם גם מגיעים עם רישיונות MIT והם העיצובים העדכניים ביותר בתעשייה.

בעוד היתרונות רבים, הסתמכות על תבניות מפחיתה את היצירתיות. מקובל למצוא נושא פופולרי אחד בשימוש באתרים אחרים באינטרנט. עם זאת, אתה יכול להתאים אישית תבנית לעיצוב ייחודי.

עכשיו אתה יכול לשלב תבנית Bootstrap עם אפליקציית React שלך. התחל לבנות עם תבניות Bootstrap ותיהנה ממשקים חזיתיים יפים.