Connect with us

קטגוריות

Javascript

המדריך העברי המלא ל-React: בואו תכירו את JSX

אם אתם לא יודעים מה זה קלאסים ב-Javascript ואיך משתמשים בהם, כתבתי מאמר במיוחד בשבילכם לחצו כאן.

במאמר זה אנחנו נכיר את תחביר ה-JSX (או JavaScript XML) התחביר שבו אנחנו נרשום ב-React, אני אסביר מה זה JSX, נכיר את התחביר, נראה דוגמאות ואפילו נכתוב ב-JSX, מוכנים ללכלך את הידיים קצת?

יאללה מתחילים.

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

מה זה בכלל JSX?

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

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

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

דמיינו אלמנט div ב-HTML, רובכם כתבתם את התגית הזאת מאות אם לא אלפי פעמים, אני יכול להגיד לכם שהדמיון שלכם לא יהיה רחוק מאלמנט div ב-JSX:

class HelloCodehub extends React.Component {
  render() {
    return (
      <div className="wee-wee">Hello Codehub</h1>
    );
  }
}

לקומפוננטה HelloCodehub יש פונקצייה בשם render שנראה שהיא מחזירה HTML, אבל זה למעשה אלמנט ב-JSX, זוכרים שציינתי למעלה שתחביר ה-JSX צריך לעבור תהליך שיהפוך אותו לתחביר Javascript תקני לפני שנוכל להציג אותו בדפדפן? בואו נראה איך תחביר ה-JSX של HelloCodehub נראה אחרי התהליך:

class HelloCodehub extends React.Component {
  render() {
    return (
      React.createElement(
        'div',
        {className: 'wee-wee'},
        'Hello Codehub'
      )
    );
  }

תהליך הטרנספילציה שהקוד JSX שלנו עובר על ידי כלים כמו Babel, ממיר את התגיות ה-JSX שלנו לקריאות לפונקציית React.createElement.

אחרי שאנחנו מצהירים על קומפוננטה ב-React (כפי שעשינו עם קומפוננטת HelloCodehub למעלה), אנחנו יכולים להשתמש בה היכן שאנחנו רוצים בפרויקט שלנו ובכל שימוש בקומפוננטה אנחנו יוצרים מופע (instance) של אותה קומפוננטה.

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

לדוגמא, אם נרצה להשתמש בקומפוננטה HelloCodehub בקומפוננטה אחרת, אנחנו יכולים לכתוב משהו כזה:

import React, { Component } from "react";
import HelloCodehub from './HelloCodehub';

class App extends React.Component {
  render() {
    return <HelloCodehub />
  }
}

כעת, פתחו את הקובץ App.js בתוך תקיית ה-src בפרויקט שיצרנו במאמר הקודם, ותחליפו את התוכן שלו בקוד הבא:

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="codehub">ברוך הבא למדריך העברי המלא ל-React</div>
    );
  }
}

export default App;

נראה שפונקציית ה-render שלנו מחזירה רק HTML אז בואו נכניס גם את Javascript לתמונה, בואו נגדיר משתנה שיכיל את הטקסט ״ברוכים הבאים למדריך העברי המלא ל-React״ ונשתמש בו בתוך אלמנט ב-JSX בעזרת סוגריים מסולסלות (או מסולסליים):

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    const codehub = "ברוך הבא למדריך העברי המלא ל-React";
    return <div className="codehub">{codehub}</div>;
  }
}

export default App;

הפעילו את הפרויקט על ידי הפקודה npm start (על ידי שורת הפקודה) בתוך תקיית הפרויקט, אחרי זמן קצר יפתח לכם הדפדפן (אם לא נפתח אחרי זמן קצר, גשו לכתובת http://localhost:3000) ויוצג לכם ״ברוכים הבאים למדריך העברי המלא ל-React״.

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

בטח שמתם לב ל-className שהוא נראה כמו attribute שרובכם כבר כתבתם ב-HTML, בריאקט, className הוא בעצם ה-class הסטנדרטי של שפת ה-HTML, אנחנו לא יכולים להשתמש במילה class ב-JSX בגלל שבשפת Javascript המילה class היא מילה שמורה, אז אנחנו רושמים className, יש עוד כמה הבדלים קטנים שתוכלו לראות בקישור הבא:

לרשימת ה-attributes המלאה שנתמכת על ידי React לחץ כאן.

תרגיל:

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

  • צרו קובץ חדש בשם Codehub.js (בתקיית src)
  • כתבו קומפוננטת class חדשה
  • הקומפוננטה תחזיר אלמנט H1 שיכיל את השם שלכם
  • בקובץ App.js תבצעו import לקומפוננטת Codehub
  • השתמשו בקומפוננטת Codehub בתוך קומפוננטת App לפני הטקסט ״ברוך הבא למדריך העברי המלא ל-React״

בתגובות אני אצרף איך אמורה להיראות הקומפוננטה App הסופית. בהצלחה!.

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

עוד ב Javascript

Meni Edri היי אני מני, מתכנת מנוסה ומאוד אוהב קוד ואת עולם התכנות, הקמתי את CodeHub על מנת שתיהיה לי פינה שבה אוכל לכתוב, ללמד וללמוד, מקווה שתימצאו את הבלוג הזה שימושי.
קריאה מהנה.

מאמרים פופולריים

נושאים פופולריים

חזרה למעלה