ຂຽນ Markup ດ້ວຍ JSX

JSX ແມ່ນ syntax extension ສຳລັບ JavaScript ທີ່ໃຫ້ທ່ານຂຽນ markup ຄ້າຍຄື HTML ພາຍໃນຟາຍ JavaScript. ເຖິງວ່າຈະມີຫຼາຍວິທີໃນການຂຽນ component, ນັກພັດທະນາ React ສ່ວນຫຼາຍມັກຄວາມງ່າຍຂອງ JSX, ແລະ codebase ສ່ວນຫຼາຍກໍໃຊ້ວິທີນີ້.

You will learn

ເປັນຫຍັງ React ຈິ່ງປົນ markup ກັບ logic ການສະແດງຜົນ
JSX ແຕກຕ່າງຈາກ HTML ແນວໃດ
ວິທີການສະແດງຂໍ້ມູນດ້ວຍ JSX

JSX: ການໃສ່ markup ລົງໃນ JavaScript

ເວັບຖືກສ້າງມາຈາກ HTML, CSS ແລະ JavaScript. ໃນເວລາຫຼາຍປີ, ນັກພັດທະນາເວັບໄຊເກັບເນື້ອຫາໄວ້ໃນ HTML, ອອກແບບໃນ CSS ແລະ ສ້າງ logic ໄວ້ໃນ JavaScript ເຊິ່ງມັກຈະຢູ່ຄົນລະຟາຍ! ເນື້ອຫາແມ່ນ markup ພາຍໃນ HTML ໃນຂະນະ logic ຂອງ page ແມ່ນຢູ່ຄົນລະຟາຍໃນ JavaScript:

HTML markup with purple background and a div with two child tags: p and form. — HTML

Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick. — JavaScript

ແຕ່ເວັບໄຊມີການໂຕ້ຕອບຫຼາຍຂຶ້ນ, logic ກໍກຳນົດເນື້ອຫາຫຼາຍຂຶ້ນ. JavaScript ຮັບຜິດຊອບ HTML! ນີ້ຈິງເປັນເຫດຜົນທີ່ ໃນ React, logic ຂອງການສະແດງຜົນ ແລະ markup ຢູ່ຮ່ວມກັນໃນບ່ອນດຽວກັນ-comopnents.

React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram. — `Sidebar.js` component React

React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop. — `Form.js` component React

ຮັກສາ logic ການສະແດງຂອງປຸ່ມ ແລະ markup ໄວ້ນຳກັນເຮັດໃຫ້ໝັ້ນໃຈໄດ້ວ່າປຸ່ມທັງສອງຈະ sync ກັນ ໃນທຸກການແກ້ໄຂ. ໃນທາງກົງກັນຂ້າມ, ລາຍລະອຽດທີ່ບໍ່ກ່ຽວຂ້ອງ, ເຊັ່ນ markup ຂອງປຸ່ມກົດ ແລະ markup ຂອງ sidebar, ແມ່ນຖືກແຍກກັນ, ເຮັດໃຫ້ປອດໄພໄດ້ກວ່າການປ່ຽນຢ່າງໃດຢ່າງໜຶ່ງດ້ວຍຕົວເອງ.

ແຕ່ລະ component React ແມ່ນຟັງຊັ່ນ JavaScript ທີ່ອາດປະກອບມີບາງ markup ທີ່ React ສະແດງໃນບາວເຊີ. Component React ໃຊ້ syntax extension ເອີ້ນວ່າ JSX ເພື່ອນຳສະເໜີ markup ນັ້ນ. JSX ແມ່ນຄ້າຍຄືກັບ HTML ຫຼາຍ, ແຕ່ມັນເຂັ້ມງວດກວ່າໜ້ອຍໜຶ່ງ ແລະ ສາມາດສະແດງຂໍ້ມູນທີ່ເປັນ dynamic. ວິທີທີ່ດີທີ່ສຸດໃນການທຳຄວາມເຂົ້າໃຈສິ່ງນີ້ຄືການແປງ markup HTML ມາເປັນ markup JSX.

Note

JSX ແລະ React ເປັນສອງຢ່າງທີ່ແຍກກັນ. ສ່ວນຫຼາຍມັນໃຊ້ຮ່ວມກັນ, ແຕ່ທ່ານ ສາມາດ ໃຊ້ແຍກສ່ວນ ຂອງກັນ ແລະ ກັນ. JSX ແມ່ນ syntax extension, ໃນຂະນະ React ແມ່ນ JavaScript library.

ການແປງ HTML ເປັນ JSX

ສົມມຸດວ່າທ່ານມີ HTML ບາງສ່ວນ (ຖືກຕ້ອງຄົບຖ້ວນ):

<h1>Todos ຂອງ Hedy Lamarr</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
>
<ul>
    <li>ປະດິດສັນຍານໄຟຈາລະຈອນໃໝ່
    <li>ຊ້ອມສາກຮູບເງົາ
    <li>ປັບປຸງເຕັກໂນໂລຊີ spectrum
</ul>

ແລະ ທ່ານຕ້ອງການເອົາໄປໃສ່ໃນ component ຂອງທ່ານ:

export default function TodoList() {
  return (
    // ???
  )
}

ຖ້າທ່ານ copy ແລະ paste ຕາມທີ່ເປັນຢູ່, ມັນຈະບໍ່ເຮັດວຽກ:

Fork

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Todos ຂອງ Hedy Lamarr</h1>
    <img 
      src="https://i.imgur.com/yXOvdOSs.jpg" 
      alt="Hedy Lamarr" 
      class="photo"
    >
    <ul>
      <li>ປະດິດສັນຍານໄຟຈາລະຈອນໃໝ່
      <li>ຊ້ອມສາກຮູບເງົາ
      <li>ປັບປຸງເຕັກໂນໂລຊີ spectrum
    </ul>

ນີ້ເປັນເພາະວ່າ JSX ເຂັ້ມງວດກວ່າ ແລະ ມີກົດຫຼາຍກວ່າ HTML! ຖ້າທ່ານອ່ານຂໍ້ຄວາມສະແດງຄວາມຜິດພາດດ້ານເທິງ, ຂໍ້ຄວາມດັ່ງກ່າວຈະແນະນຳໃຫ້ທ່ານແກ້ໄຂ markup, ຫຼື ທ່ານສາມາດປະຕິບັດຕາມຄຳແນະນຳດ້ານລຸ່ມນີ້.

Note

ໂດຍສ່ວນຫຼາຍ, ຂໍ້ຄວາມສະແດງຂໍ້ຜິດພາດເທິງໜ້າຈໍຂອງ React ຈະຊ່ວຍໃຫ້ທ່ານຮູ້ວ່າບັນຫາຢູ່ຈຸດໃດ. ອ່ານໃຫ້ຈົບຖ້າທ່ານຕິດບັນຫາ!

ກົດຂອງ JSX

1. Return ໜຶ່ງ root element

ເພື່ອ return ຫຼາຍ element ຈາກ component, ໃຫ້ລວມມັນໄວ້ໃນ parent tag ດຽວ

ຕົວຢ່າງ, ທ່ານສາມາດໃຊ້ <div>:

<div>
  <h1>Todos ຂອງ Hedy Lamarr</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

ຖ້າທ່ານບໍ່ຕ້ອງການເພີ່ມ <div> ອີກໃນ markup ຂອງທ່ານ, ທ່ານສາມາດຂຽນ <> ແລະ </> ແທນ:

<>
  <h1>Todos ຂອງ Hedy Lamarr</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

tag ເປົ່າວ່າງນີ້ເອີ້ນວ່າ Fragment. Fragment ຊ່ວຍໃຫ້ທ່ານລວມສິ່ງຕ່າງໆໂດຍບໍ່ສະແດງຫຍັງໃນ browser tree ຂອງ HTML.

Deep Dive

ເປັນຫຍັງຫຼາຍ tags JSX ເຖິງຕ້ອງການລວມ?

JSX ຄ້າຍຄື HTML, ແຕ່ເບື້ອງຫຼັງແມ່ນຈະຖືກປ່ຽນມາເປັນ object JavaScript ທຳມະດາ. ທ່ານບໍ່ສາມາດ return 2 object ຈາກຟັງຊັ່ນໂດຍບໍ່ລວມມັນຢູ່ array. ນີ້ອະທິບາຍວ່າເປັນຫຍັງທ່ານຈິງບໍ່ສາມາດ return 2 tag JSX ໂດຍບໍ່ລວມມັນເປັນ tag ອື່ນ ຫຼື Fragment.

2. ປິດ tags ທັງໝົດ

JSX ກຳນົດໃຫ້ tag ຕ້ອງປິດເທົ່ານັ້ນ: tag ທີ່ປິດດ້ວຍຕົວເອງເຊັ່ນ <img> ຕ້ອງເປັນ <img />, ແລະ ລວມ tag ເຊັ່ນ <li>ໝາກກ້ຽງ ຕ້ອງຖືກຂຽນແບບນີ້ <li>ໝາກກ້ຽງ</li>.

ນີ້ແມ່ນວິທີປິດ ຮູບ ແລະ list items ຂອງ Hedy Lamarr:

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />
  <ul>
    <li>ປະດິດສັນຍານໄຟຈາລະຈອນໃໝ່</li>
    <li>ຊ້ອມສາກຮູບເງົາ</li>
    <li>ປັບປຸງເຕັກໂນໂລຊີ spectrum</li>
  </ul>
</>

3. camelCase ເກືອບ ທຸກຢ່າງ!

JSX ປ່ຽນເປັນ JavaScript ແລະ attribute ທີ່ຂຽນດ້ວຍ JavScript ກາຍເປັນ key ຂອງ object JavaScript. ໃນ component ຂອງທ່ານ, ທ່ານຢາກຈະອ່ານ attribute ເຫຼົ່ານັ້ນເປັນຕົວແປຢູ່ສະເໝີ. ແຕ່ JavaScript ມີຂໍ້ຈຳກັດສຳລັບຊື່ຕົວແປ. ຕົວຢ່າງ, ຊື່ມັນບໍ່ສາມາດປະກອບມີເຄື່ອງໝາຍຂີດຕໍ່ ຫຼື ຊື່ທີສະຫງວນໄວ້ ເຊັ່ນ class.

ນີ້ແມ່ນເຫດຜົນວ່າເປັນຫຍັງ, ໃນ React, ຫຼາຍ attribute HTML ແລະ SVG ຖືກຂຽນເປັນແບບ camelCase. ຕົວຢ່າງ, ແທນທີ່ stroke-width ທ່ານໃຊ້ strokeWidth. ນັບແຕ່ class ຖືກສະຫງວນ, ໃນ React ທ່ານຂຽນ className ແທນ, ຊື່ຫຼັງຈາກ DOM property ທີ່ກ່ຽວຂ້ອງ:

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

ທ່ານສາມາດ ຄົ້ນຫາ attribute ເຫຼົ່ານີ້ໃນ list ຂອງ DOM component props. ຖ້າທ່ານເຂົ້າໃຈອັນໃດອັນໜຶ່ງຜິດ, ບໍ່ຕ້ອງຢ້ານ-React ຈະສະແດງຂໍ້ຄວາມພ້ອມກັບສິ່ງທີ່ຈະເປັນໄປໄດ້ໃນ browser console.

Pitfall

ສຳລັບເຫດຜົນທາງປະຫວັດສາດ, aria-* ແລະ data-* attribute ແມ່ນຖືກຂຽນໃນ HTML ດ້ວຍເຄື່ອງໝາຍຂີດຕໍ່.

Pro-tip: ໃຊ້ JSX Converter

ການແປງ attribute ທັງໝົດໃນ markup ທີ່ມີຢູ່ອາດເປັນເລື່ອງທີ່ນ່າເບື່ອ! ພວກເຮົາແນະນຳໃຊ້ converter ເພື່ອແປງ HTML ແລະ SVG ທີ່ມີຢູ່ແລ້ວຂອງທ່ານເປັນ JSX. Converters ແມ່ນມີປະໂຫຍດຫຼາຍໃນທາງປະຕິບັດ, ແຕ່ກໍຍັງຄຸ້ມຄ່າທີ່ຈະທຳຄວາມເຂົ້າໃຈກັບສິ່ງທີ່ເກີດຂຶ້ນ ເພື່ອໃຫ້ທ່ານສາມາດຂຽນ JSX ດ້ວຍຕົນເອງຢ່າງສະບາຍໃຈ.

ນີ້ແມ່ນຜົນລັບສຸດທ້າຍຂອງທ່ານ:

Fork

export default function TodoList() {
  return (
    <>
      <h1>Todos ຂອງ Hedy Lamarr</h1>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="Hedy Lamarr" 
        className="photo" 
      />
      <ul>
        <li>ປະດິດສັນຍານໄຟຈາລະຈອນໃໝ່</li>
        <li>ຊ້ອມສາກຮູບເງົາ</li>
        <li>ປັບປຸງເຕັກໂນໂລຊີ spectrum</li>
      </ul>
    </>
  );
}

Recap

ຕອນນີ້ທ່ານຮູ້ແລ້ວວ່າເປັນຫຍັງຈື່ງມີ JSX ແລະ ວິທີການໃຊ້ມັນໃນ component:

Logic ການສະແດງຜົນກຸ່ມ component ພ້ອມກັບ markup ເພາະວ່າມັນກ່ຽວຂ້ອງກັນ.
JSX ຄ້າຍກັບ HTML, ແຕ່ມີຄວາມແຕກຕ່າງກັນໜ້ອຍໜຶ່ງ. ທ່ານສາມາດໃຊ້ converter ຖ້າທ່ານຕ້ອງການ.
ຂໍ້ຄວາມສະແດງຂໍ້ຜິດພາດສ່ວນຫຼາຍຈະແນະນຳທ່ານໄປໃນທາງທີ່ຖືກຕ້ອງເພື່ອແກ້ໄຂ markup ຂອງທ່ານ.

Try out some challenges

Challenge 1 of 1:
ແປງບາງ HTML ເປັນ JSX

HTML ນີ້ຖືກ paste ເປັນ component, ແຕ່ບໍ່ແມ່ນ JSX ທີ່ຖືກຕ້ອງ. ແກ້ມັນ:

Fork

export default function Bio() {
  return (
    <div class="intro">
      <h1>ຍິນດີຕ້ອນຮັບສູ່ເວັບໄຊຂອງຂ້ອຍ</h1>
    </div>
    <p class="summary">
      ທ່ານສາມາດຄົ້ນຫາຄວາມຄິດຂ້ອຍໄດ້ບ່ອນນີ້
      <br><br>
      <b>ແລະ <i>ຮູບ</b></i> ຂອງນັກວິທະຍາສາດ!
    </p>
  );
}

ບໍ່ວ່າຈະເຮັດດ້ວຍຕົນເອງ ຫຼື ໃຊ້ converter ແມ່ນຂຶ້ນກັບໂຕທ່ານ!

PreviousImporting and Exporting Components NextJavaScript in JSX with Curly Braces

ຂຽນ Markup ດ້ວຍ JSX

You will learn

JSX: ການໃສ່ markup ລົງໃນ JavaScript

Note

ການແປງ HTML ເປັນ JSX

Note

ກົດຂອງ JSX

1. Return ໜຶ່ງ root element

Deep Dive

ເປັນຫຍັງຫຼາຍ tags JSX ເຖິງຕ້ອງການລວມ?

2. ປິດ tags ທັງໝົດ

3. camelCase ເກືອບ ທຸກຢ່າງ!

Pitfall

Pro-tip: ໃຊ້ JSX Converter

Recap

Try out some challenges

Challenge 1 of 1: ແປງບາງ HTML ເປັນ JSX

Challenge 1 of 1:
ແປງບາງ HTML ເປັນ JSX