הוספת React לאתר אינטרנט

השתמש בכמה שפחות או בכמה שיותר React לפי צרכיך.

React הונדסה מההתחלה לאימוץ הדרגתי, ואנו יכולים להשתמש בכמה שפחות או בכמה שיותר React שאנו צריכים. יתכן שנרצה להוסיף כמה “נצנוצים של אינטראקטיביות” לדף קיים. קומפוננטות React הן דרך מעולה לעשות זאת.

הרוב המוחץ של אתרי האינטרנט הם לא, ולא צריכים להיות, יישומי דף-יחיד. בעזרת כמה שורות קוד וללא כלי בנייה, נסה את React בחלק קטן של אתר האינטרנט שלך. תוכל להגדיל בהדרגה את הנוכחות של React, או לשמור אותה מוגבלת לכמה יישומונים דינמיים בלבד.

הוסף את ריאקט בדקה
אופציונאלי: נסה את ריאקט עם JSX (no bundler necessary!)

הוסף את ריאקט בדקה

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

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

אופציונאלי: הורד את הדוגמה המלאה (2KB zipped)

שלב ראשון: הוסף קונטיינר DOM לקובץ ה-HTML

ראשית, פתח את עמוד ה-HTML שתרצה לערוך. הוסף תגית <div> ריקה על מנת לסמן את המקום בו אתה רוצה להציג משהו עם React. לדוגמה:

<!-- ... HTML קיים ... -->

<div id="like_button_container"></div>
<!-- ... HTML קיים ... -->

הבאנו ל-<div> זה id ייחודי כמאפיין HTML. זה יאפשר לנו למצוא אותו מקוד ה-JavaScript מאוחר יותר ולהציג קומפוננטת React בתוכו.

טיפ

ניתן להציב “קונטיינר” <div> באופן זה בכל מקום בתוך תגית ה-<body>. יכולים להיות לך מספר בלתי מוגבל של קונטיינרים של DOM בעמוד אחד לפי צרכייך. הם בדרך כלל ריקים — React תחליף כל תוכן קיים בתוך קונטיינר DOM.

שלב שני: הוסף את תגיות הסקריפט

לאחר מכן, הוסף שלוש תגיות <script> לדף ה-HTML ממש לפני תגית ה-</body> הסוגרת:

  <!-- ... HTML אחר ... -->

  <!-- טעינת ריאקט. -->
  <!-- שים לב: כשמעלים לאוויר, מחליפים את "development.js" עם "production.min.js". -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <!-- טעינת קומפוננטת ה-React שלנו. -->
  <script src="like_button.js"></script>
</body>

שתי התגיות הראשונות טוענות את React. השלישית תטען את קוד הקומפוננטה שלך.

שלב שלישי: יצירת קומפוננטת React

צור קובץ בשם like_button.js בצמוד לדף ה-HTML שלך.

פתח את הקוד ההתחלתי הזה והדבק אותו בקובץ שיצרת.

טיפ

קוד זה מגדיר קומפוננטת React שנקראת LikeButton. אל תדאג אם אתה לא מבין את זה עדיין — אנו נכסה את היסודות של React מאוחר יותר במדריך המעשי ובמדריך הקונספטים העיקריים. בינתיים, בוא רק נדאג שזה יוצג על המסך!

אחרי הקוד ההתחלתי, הוסף שתי שורות לתחתית הקובץ like_button.js:

// ... the starter code you pasted ...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

שתי שורות אלו מוצאות את תגית ה-<div> שהוספנו לדף ה-HTML בשלב הראשון, ואז מציגות את קומפוננטת כפתור ה-”לייק” בתוכו.

זהו זה!

אין שלב רביעי. הרגע הוספת את קומפוננטת ה-React הראשונה לאתר האינטרנט שלך!

ראה את הפרקים הבאים על מנת ללמוד עוד טיפים על שילוב React.

ראה את קוד הדוגמה המלא

הורד את הדוגמה המלאה (2KB zipped)

טיפ: שימוש חוזר בקומפוננטה

לעיתים קרובות, נרצה להציג קומפוננטות React בכמה מקומות בדף ה-HTML. הנה דוגמה שמציגה את כפתור ה-”לייק” שלוש פעמים ומעבירה אליו מידע:

ראה את קוד הדוגמה המלא

הורד את הדוגמה המלאה (2KB zipped)

הערה

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

טיפ: צמצם JavaScript בפרודקשן

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

אם צמצמת כבר את הסקריפטים של האפליקציה שלך, האתר שלך יהיה מוכן לפרודקשן במידה ואתה מוודא שה-HTML שהעלת טוען את גרסאות React המסתיימות עם production.min.js:

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

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

אופציונאלי: נסה את React עם JSX

בדוגמאות הקודמות, הסתמכנו רק על פיצ’רים שנתמכים באופן טבעי על ידי דפדפנים. זאת הסיבה שהשתמשנו בקריאה לפונקציית JavaScript על מנת לומר ל-React מה להציג:

const e = React.createElement;

// הצג כפתור "לייק"
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

לעומת זאת, ריאקט מציע אפשרות להשתמש ב-JSX במקום:

// "הצג כפתור "לייק
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

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

תוכל להתנסות עם JSX באמצעות ממיר אונליין זה.

נסה את JSX במהירות

הדרך הכי מהירה לנסות את JSX בפרויקט שלך היא להוסיף את תגית ה-<script>הזו לעמוד שלך:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

עכשיו תוכל להשתמש ב-JSX בתוך כל תגית <script> על ידי הוספת מאפיין type="text/babel". הנה דוגמה של דף HTML עם JSX שתוכל להוריד ולהתנסות עמה.

גישה זו היא טובה ללמידה וליצירת הדגמות פשוטות. לעומת זאת, היא עושה את אתרך איטי והיא אינה מתאימה לפרודקשן. כשאתה מוכן להתקדם, הסר את תגית ה-<script> החדשה ואת מאפייני type="text/babel" שהוספת. במקום זאת, בפרק הבא נכין קדם-מעבד JSX שימיר את כל תגיות ה-<script> שלך באופן אוטומטי.

הוספת JSX לפרויקט

הוספת JSX לפרוייקט אינה דורשת כלים מורכבים כמו באנדלר או שרת פיתוח. בעיקרון, הוספת JSX הוא תהליך דומה להוספת קדם-מעבד CSS. הדרישה היחידה היא ש-Node.js יהיה מותקן על מחשבך.

גש אל תיקיית הפרויקט שלך בשורת הפקודה, והדבק את שתי הפקודות הבאות:

שלב ראשון: הרץ את npm init -y (אם הוא נכשל, הנה פיתרון)
שלב שני: הרץ את npm install babel-cli@6 babel-preset-react-app@3

טיפ

אנו משתמשים ב-npm כאן על מנת להתקין את קדם-מעבד ה-JSX. לא יהיה תצטרך אותו לדברים נוספים. גם React וגם קוד האפליקציה שלך יכולים להישאר בתגיות <script> ללא שינויים.

מזל טוב! הוספת הרגע JSX מוכן לפורדקשן לפרויקט שלך.

הרצת קדם-מעבד JSX

צור תיקייה שנקראת src והרץ את הפקודה הבאה בשורת הפקודה:

npx babel --watch src --out-dir . --presets react-app/prod

הערה

npx אינה טעות כתיב — זה מריץ חבילות שבא עם npm 5.2+.

אם מופיעה לך הודעת השגיאה “You have mistakenly installed the babel package”, יתכן שפספסת את הצעד הקודם. בצע זאת באותה התיקייה, ואז נסה שוב.

אל תחכה שהתהליך יסתיים — פקודה זאת מתחילה צופה אוטומטי ל-JSX.

אם עכשיו תיצור קובץ שנקרא src/like_button.js עם קוד ה-JSX הבסיסי הזה, הצופה יצור קובץ like_button.js מעובד עם קוד ה-JavaScript שמתאים לדפדפן. כשאתה עורך את קוד המקור עם JSX, שינוי הצורה ירוץ שוב באופן אוטומטי.

כבונוס, זה נותן לך להשתמש בקוד JavaScript מודרני כגון מחלקות בלי לדאוג לגבי שבירת גרסאות דפדפן קודמות. הכלי שהשתמשנו בו הרגע נקרא Babel, ותוכל ללמוד עוד לגביו מהדוקומנטציה שלו.

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

Is this page useful?ערוך עמוד זה