JSX

אַ הקדמה צו JSX

אויב איר האָט ימפּלאַמענאַד אַ וועב אַפּ מיט די פריימווערק "React.js", איר קען האָבן באמערקט אַז די סינטאַקס פֿאַר שרייבן React.js קאַמפּאָונאַנץ קוקט אַ ביסל אַנדערש ווי דיין אנדערע Javascript קאָד. כאָטש מערסטנס די זעלבע, ריאַקט קאַמפּאָונאַנץ זענען דיסקרייבד דורך ספּעציעל בראַקאַץ, די לינקס און רעכט ווינקל בראַקאַץ. זיי קוק פּונקט ווי סינטאַקס פֿאַר קסמל, די "עקסטענסיבלע מאַרקאַפּ שפּראַך". אין React.js, דעם סינטאַקס איז סימילאַרלי גערופֿן "JSX", וואָס מיטל "Javascript XML".

דער הויפּט ציל פון דעם סינטאַקס איז צו פאַרפּאָשעטערן שרייבן React קאָד. דזשווקסנומקס קאָד קענען ניט זיין ינטערפּראַטאַד דורך דזשוומס, דעריבער עס מוזן זיין צונויפגעשטעלט צו פאַקטיש דזשאַוואַסקריפּט קאָד איידער באַניץ - אַ אַרבעט טיפּיקלי דורכגעקאָכט דורך באַנדאַלערז אַזאַ ווי באַבעל אָדער וועבפּאַקק.

דער רעאַקט קאָד וואָס איר מיסטאָמע קיינמאָל געשריבן

דעם יפעקטיוולי מיטל אַז עס איז זייער מסתּמא אַז איר האָט קיינמאָל געשריבן אַזאַ "אמת" React.js קאַמפּאָונאַנץ וואָס זענען דזשענערייטאַד פֿון דיין JSX קאָד. אָבער טאָן ניט זאָרג, דאָס איז גרינג צו טאָן אָן פיל כאַסאַל. אין פאַקט, איר קענט אפילו שרייַבן אַ גאַנץ React וועב אַפּלאַקיישאַן אָן JSX. די פאלגענדע קאָד סניפּאַט ווייַזן ווי אַ באמת React.js קאָמפּאָנענט מיט בלויז דזשאַוואַסקריפּט קוקט ווי.

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

איר קענט אפילו פּרובירן דאָס אין דיין בלעטערער אָן ינסטאָלינג ווייכווארג! מעגילע אַראָפּ צו די סוף פון דעם בלאַט צו נוצן דעם לינק אין דעם אַדדענדום.

צו פאַרפּאָשעטערן דיין קאָד ניצן JSX

ווי איר קענען זען, די הויפּט מייַלע פון די JSX סינטאַקס איז צו מאַכן דיין וי-פֿאַרבונדענע קאָד סימפּלער צו שרייַבן און גרינגער צו ויסטיילן פון אנדערע פּאַרץ פון דיין אַפּלאַקיישאַן, ווייַל די קסמל-ווי סינטאַקס גיט אַ קלאָר אָנווייַז פון די פעלד פעלד.

אן אנדער גרויס שטריך פון JSX איז אַז עס נאָר ווערט אַן אויסדרוק נאָך די זאַמלונג שריט. איר קענט דעריבער נוצן עס אין אויב-אַנדערש-סטייטמאַנץ אָדער אפילו קראָם די רעזולטאַט אין אַ בייַטעוודיק. און ווייַל React.js קאַמפּאָונאַנץ קענען אַנטהאַלטן אויסדרוקן ווי קינדער זיך, איר קענט שרייַבן אַ זייער קאָמפּליצירט וי קאָד!

א פעליקייַט אַרייַנפיר פֿאַר יעדער JSX- טעקע

איר קען האָבן באמערקט אַז יעדער JSX טעקע אין פאַרשידן טוטאָריאַלז, גוידעס און מיסטאָמע אפילו דיין אייגענע קאָד האט די פעליקייַט אַרייַנפיר פֿון די React ביבליאָטעק, כאָטש איר קען קיינמאָל רופן דעם ימפּאָרטיד בייַטעוודיק. די סיבה הינטער עס איז אַז נאָך די זאַמלונג שריט, יעדער JSX- אויסדרוק ווערט אַ "React.createElement" רופן, ווי איר ווע געזען אין די קאָד בייַשפּיל פריער. דערפֿאַר, עס איז נויטיק צו האָבן די "רעאַקט" וועריייטיד פֿון די פעליקייַט אַרייַנפיר אין די פאַרנעם פון יעדער טעקע.

קוקט ווי HTML, אָבער איז נישט

איין שליסל באַגרענעצונג ווען קאָדירונג אין JSX סינטאַקס איז די נאָוטיישאַן פון די נאָמען פון דיין קאָמפּאָנענט. כּדי דער באַנדלער זאָל ריכטיק ידענטיפיצירן דיין קאַמפּאָונאַנץ, זיי מוזן זיין יינציק פֿון די סטאַנדאַרט HTML טאַגס, ווייַל דער סינטאַקס קוקט די זעלבע.

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

עס איז דעריבער אַ פאָדערונג צו קאָד JSX עלעמענטן שטענדיק אין זאַץ קייסינג, וואָס מיטל אַז דער ערשטער בריוו דאַרף זיין גרויס.

די טיפּעסקריפּט וואַריאַנט

איר קען האָבן באמערקט אַז פילע פּראַדזשעקס אויך נוצן TSX ווי טעקע סאַפיקס פֿאַר זייער React.js קאָמפּאָנענט טעקעס. דאָס איז בלויז אַן פאַרלענגערונג פון דער אָריגינעל JSX צו זיין קאַמפּאַטאַבאַל מיט טיפּסקריפּט. מיט TSX טעקעס איר קענען שרייַבן טיפּסקריפּט קאָד צוזאַמען מיט JSX- נאָוטיישאַן קאַמפּאָונאַנץ.

נאָר דער אָנהייב

דער אַרטיקל האט אַ פּשוט הקדמה צו JSX פֿאַר קאָדירונג פון React קאַמפּאָונאַנץ. דער הויפּט מייַלע איז אַ זייער קאַנסייס סינטאַקס וואָס פילז נאַטירלעך אין אַ וועב סוויווע. איר קענט שרייבן זייער קאָמפּאָסיטאַבלע עלעמענטן מיט זייער קליין קאָד, וואָס איז קיין צווייפל אַ וויכטיק פאַקטאָר אין דער איצטיקער באַרימט און פאָלקס שטאַט פון רעאַקט. אויב איר זענט טשיקאַווע, עס זענען פיל מער און ויסגעצייכנט דיטיילד גוידעס פון די רעאַקט מאַנשאַפֿט אויף זייער פּלאַץ, די פֿאַרבינדונגען זענען אין די אַדדענדום אין די סוף פון דעם בלאַט.