Learn React
Describing the UI

Component ທຳອິດຂອງທ່ານ

Components ແມ່ນໜຶ່ງໃນແນວຄິດຫຼັກຂອງ React. ເປັນພື້ນຖານທີ່ທ່ານສ້າງສ່ວນ user interface (UI), ຊື່ງເຮັດໃຫ້ມັນເປັນບ່ອນທີ່ດີທີ່ສຸດໃນການເລີ່ມເດີນທາງດ້ວຍ React ຂອງທ່ານ!

You will learn

  • Component ແມ່ນຫຍັງ
  • Component ມີບົດບາດແນວໃດໃນແອັບພິເຄຊັ່ນ React
  • ວິທີຂຽນ Component React ທຳອິດຂອງທ່ານ

Components: Blocks ການສ້າງ UI

ຢູ່ໃນເວັບ, HTML ໃຫ້ພວກເຮົາສ້າງ document ທີ່ມີໂຄ່ງສ້າງສົມບູນດ້ວຍຊຸດ tags ເຊັ່ນ <h1> ແລະ <li>:

<article>
  <h1>Component ທຳອິດຂອງຂ້ອຍ</h1>
  <ol>
    <li>Components: Blocks ການສ້າງ UI</li>
    <li>ການກຳນົດ Component</li>
    <li>ການໃຊ້ງານ Component</li>
  </ol>
</article>

Markup ທີ່ສະແດງໃນບົດຄວາມນີ້ <article>, ຫົວຂໍ້ <h1>, ແລະ ສາລະບານ (ແບບຫຍໍ້) ເປັນ order list <ol>. Markup ແບບນີ້, ຮ່ວມດ້ວຍ CSS ສຳລັບ style, ແລະ JavaScriopt ສຳລັບ interactivity, ຈະຢູ່ເບື້ອງຫຼັງທຸກໆ sidebar, avatar, modal, dropdown-ທຸກສ່ວນຂອງ UI ທີ່ທ່ານເຫັນໃນໜ້າເວັບ.

React ໃຫ້ທ່ານລວມ markup, CSS, ແລະ JavaScript ເຂົ້າເປັນ custom “components”, UI element ທີ່ໃຊ້ຊໍ້າກັນໄດ້ສຳລັບແອັບຂອງທ່ານ. code ສາລະບານທີ່ທ່ານເຫັນດ້ານເທິງສາມາດປ່ຽນເປັນ component <TableOfContents/> ທ່ານສາມາດສະແດງໄດ້ໃນທຸກ page. ເຖິງຢ່າງໃດກໍ່ຕາມ, ມັນກໍຍັງໃຊ້ tag HTML ຄືເກົ່າເຊັ່ນ <article>, <h1>, ແລະ ອື່ນໆ.

ຄືກັນກັບ tags HTML, ທ່ານສາມາດຂຽນ, ສັ່ງ ແລະ ຈັດຊັ້ນວາງ component ເພື່ອອອກແບບທັງໝົດ page. ຕົວຢ່າງ, ໜ້າເອກະສານທີ່ທ່ານກຳລັງອ່ານຢູ່ນີ້ແມ່ນໄດ້ສ້າງມາຈາກ component React:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

ເມື່ອ project ຂອງທ່ານໃຫຍ່ຂຶ້ນ, ທ່ານຈະສັງເກດເຫັນວ່າຫຼາຍໆ design ຂອງທ່ານສາມາດເຮັດຂຶ້ນໃໝ່ໂດຍໃຊ້ component ທີທ່ານຂຽນໄວ້ແລ້ວມາໃຊ້ຊໍ້າ, ເພື່ອຊ່ວຍເລັ່ງການພັດທະນາຂອງທ່ານ. ສາລະບານຂອງພວກເຮົາດ້ານເທິງສາມາດເພີ່ມໃນໜ້າຈໍໃດກໍໄດ້ດ້ວຍ <TableOfContents />! ທ່ານສາມາດເລີ່ມ project ຂອງທ່ານຢ່າງໄວດ້ວຍ component ນັບພັນທີ່ຖືກແບ່ງປັນໂດຍ React open source community ເຊັ່ນ Chakra UI ແລະ Material UI.

ກຳນົດ component

ຕາມປົກະຕິເມື່ອສ້າງ web pages, ນັກພັດທະນາເວັບຈະ markup ເນື້ອຫາຂອງຕົນແລ້ວເພີ່ມ interaction ໂດຍການຕົບແຕ່ງດ້ວຍບາງ JavaScript. ສິ່ງນີ້ເຮັດວຽກໄດ້ດີເມື່ອ interaction ເປັນຫຍັງທີ່ມີກະໄດ້ໃນເວັບ. ປັດຈຸບັນເປັນທີ່ຕ້ອງການສຳລັບຫຼາຍເວັບໄຊ ແລະ ທຸກໆແອັບ. React ໃຫ້ຄວາມສຳຄັນກັບ interaction ເປັນອັນດັບທຳອິດໃນຂະນະທີ່ຍັງໃຊ້ເຕັກໂນໂລຊີເດີມ: Component React ແມ່ນຟັ່ງຊັ່ນ JavaScript ທີ່ທ່ານສາມາດ ຕົບແຕ່ງມັນດ້ວຍ markup ນີ້ຄືຮູບລັກສະນະທີ່ສະແດງ (ທ່ານສາມາດແກ້ໄຂຕົວຢ່າງດ້ານລຸ່ມນີ້):

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}

ແລະ ນີ້ແມ່ນວິທີການສ້າງ Component:

ຂັ້ນຕອນທີ 1: Export Component

prefix export default ແມ່ນ ມາດຕະຖານ syntax JavaScript (ບໍ່ສະເພາະແຕ່ React). ຊ່ວຍໃຫ້ທ່ານ mark ຟັງຊັ່ນຫຼັກໃນຟາຍເພື່ອໃຫ້ທ່ານສາມາດ import ຈາກຟາຍອື່ນໄດ້ໃນພາຍຫຼັງ. (ສຳລັບການ import ເພີ່ມເຕີມໃນ ການ Import ແລະ Export Components!)

ຂັ້ນຕອນທີ 2: ກຳນົດ function

ດ້ວຍ function Profile() { } ທ່ານສ້າງຟັງຊັ່ນ JavaScript ດ້ວຍຊື່ Profile.

Pitfall

Component React ແມ່ນຟັງຊັ່ນ JavaScript ທຳມະດາ, ແຕ່ ຊື່ຂອງມັນຕ້ອງຂຶ້ນຕົ້ນດ້ວຍໂຕອັກສອນໃຫຍ່ ຖ້າບໍ່ດັ່ງນັ້ນມັນຈະບໍ່ເຮັດວຽກ!

ຂັ້ນຕອນທີ 3: ເພີ່ມ markup

Component return ແທັກ <img /> ດ້ວຍ attribute src ແລະ alt. <img /> ຖືກຂຽນຄືກັບ HTML, ແຕ່ອັນທີ່ຈິງແລ້ວມັນຄື JavaScript! Syntax ເຫຼົ່ານີ້ເອີ້ນວ່າ JSX, ແລະ ມັນໃຫ້ທ່ານສາມາດ embed markup ໃນ JavaScript ໄດ້.

ສາມາດຂຽນ return statement ທັງໝົດໄດ້ໃນໜຶ່ງແຖວ, ເຊັ່ນດຽວກັບ component ນີ້:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

ແຕ່ຖ້າ markup ຂອງທ່ານບໍ່ໄດ້ຢູ່ໃນແຖວດຽວກັບ keyword return, ທ່ານສາມາດລວມມັນດ້ວຍຄູ່ຂອງວົງເລັບ:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

Pitfall

ຖ້າບໍ່ມີວົງເລັບ, code ໃດໆທີ່ຢູ່ຫຼັງ return ມັນຈະບໍ່ມີຜົນຫຍັງ!

ການນຳໃຊ້ component

ເມື່ອທ່ານສ້າງ component Profile ຂອງທ່ານແລ້ວ, ທ່ານສາມາດຊ້ອນ component ນັ້ນໄວ້ໃນ component ອື່ນໆໄດ້. ຕົວຢ່າງ, ທ່ານສາມາດ export component Gallery ທີ່ໃຊ້ component Profile ຫຼາຍອັນ:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>ນັກວິທະຍາສາດທີ່ນ່າປະຫຼາດໃຈ</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

ສິ່ງທີ່ browser ເຫັນ

ສັງເກດຄວາມແຕກຕ່າງຂອງກໍລະນີ:

  • <section> ແມ່ນໂຕອັນສອນນ້ອຍ, ສະນັ້ນ React ຮູ້ວ່າໝາຍເຖິງແທັກ HTML.
  • <Profile /> ເລີ່ມຕົ້ນດ້ວຍໂຕອັກສອນໃຫຍ່ P, ສະນັ້ນ React ຮູ້ວ່າພວກເຮົາຕ້ອງການໃຊ້ component ຂອງພວກເຮົາທີ່ຊື່ວ່າ Profile.

ແລະ Profile ມີ HTML ຫຼາຍຂຶ້ນ: <img />. ທ້າຍສຸດ, ນີ້ແມ່ນສິ່ງທີ browser ເຫັນ:

<section>
  <h1>ນັກວິທະຍາສາດທີ່ນ່າປະຫຼາດໃຈ</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

ການຊ້ອນ ແລະ ຈັດວາງ components

Components ແມ່ນຟັງຊັ່ນ JavaScript ທຳມະດາ, ສະນັ້ນທ່ານສາມາດຮັກສາຫຼາຍ component ໃນຟາຍດຽວໄດ້. ວິທີນີ້ສະດວກເມື່ອ component ມີຂະໜາດນ້ອຍ ຫຼື ກ່ຽວພັນກັນຫຼາຍ. ຖ້າຟາຍນີ້ມີຈຳນວນຫຼາຍ, ທ່ານສາມາດຍ້າຍ Profile ແຍກໄປເປັນອີກຟາຍໄດ້ຕະຫຼອດເວລາ. ທ່ານຈະໄດ້ຮຽນວິທີດຳເນີນການນີ້ໄວໆໃນ ໜ້າກ່ຽວກັບ imports.

ເພາະວ່າ component Profile ແມ່ນສະແດງໃນ Gallery-ເຖິງວ່າຫຼາຍຄັ້ງ!-ພວກເຮົາສາມາດເວົ້າໄດ້ວ່າ Gallery ແມ່ນ parent component, ສະແດງແຕ່ລະ Profile ເປັນ “child”. ນີ້ເປັນສ່ວນໜຶ່ງຂອງຄວາມມະຫັດສະຈັນຂອງ React: ທ່ານສາມາດປະກາດ component ຄັ້ງໜຶ່ງ, ແລະ ສາມາດໃຊ້ມັນໃນຫຼາຍໆບ່ອນ ແລະ ຫຼາຍຄັ້ງຕາມທີ່ທ່ານຕ້ອງການ.

Pitfall

Component ສາມາດສະແດງ component ອື່ນ, ແຕ່ ທ່ານຕ້ອງບໍ່ຊ້ອນຄວາມໝາຍຂອງມັນ:

export default function Gallery() {
  // 🔴 ຢ່າປະກາດ component ໃນ component ອື່ນ!
  function Profile() {
    // ...
  }
  // ...
}

ຊຸດ snippet ດ້ານເທິງແມ່ນ ຊ້າຫຼາຍ ແລະ ເຮັດໃຫ້ເກີດບັນຫາ ແທນທີ, ກຳນົດທຸກໆ component ໃນດ້ານເທິງສຸດຂອງຊັ້ນ:

export default function Gallery() {
  // ...
}

// ✅ ປະກາດ component ຢູ່ຊັ້ນເທິງສຸດ
function Profile() {
  // ...
}

ເມື່ອ Component ລູກຕ້ອງການບາງຂໍ້ມູນຈາກແມ່, ສົ່ງຜ່ານໂດຍ props ແທນທີ່ຈະຊ້ອນຄວາມໝາຍມັນ.

Deep Dive

Components ທັງໝົດລົງໄປ

ແອັບພິເຄຊັ່ນ React ຂອງທ່ານເລີ່ມຕົ້ນດ້ວຍ “root” component. ສ່ວນຫຼາຍ, ມັນຖືກສ້າງໂດຍອັດຕະໂນມັດຕອນທ່ານສ້າງ project ໃໝ່. ຕົວຢ່າງ, ຖ້າທ່ານເຫັນ CodeSandbox ຫຼື ສ້າງແອັບ React, root component ຖືກປະກາດໃນ src/App.js. ຖ້າທ່ານໃຊ້ framework, Next.js, root component ຖືກປະກາດໃນ pages/index.js. ໃນຕົວຢ່າງນີ້, ທ່ານໄດ້ export root component.

ແອັບ React ສ່ວນຫຼາຍໃຊ້ compent ທັງໝົດລົງໄປ. ນີ້ໝາຍຄວາມວ່າທ່ານບໍ່ພຽງຈະໃຊ້ຊີ້ນສ່ວນ component ທີ່ສາມາດນຳໃຊ້ໄດ້ໃໝ່ເຊັ່ນ ປຸ່ມກົດ ເທົ່ານັ້ນ, ແຕ່ສຳລັບຊີ້ນສ່ວນທີ່ໃຫຍ່ຂຶ້ນເຊັ່ນ sidebars, list ແລະ ໃນທີ່ສຸດ, ໝົດ page! Component ເປັນວິທີທີ່ສະດວກໃນການຈັດລະບຽບ code UI ແລະ markup, ເຖິງວ່າບາງ component ແມ່ນໃຊ້ໄດ້ພຽງເທື່ອດຽວ.

React-based frameworks ກ້າວໄປອີກຂັ້ນ. ແທນທີ່ຈະໃຊ້ຟາຍ HTML ເປົ່າ ແລະ ປ່ອຍໃຫ້ React “ເຂົ້າຄວບຄຸມ” ຈັດການ page ດ້ວຍ JavaScript, ມັນ ຍັງ ສ້າງ HTML ໂດຍອັດຕະໂນມັດຈາກ Component React. ສິ່ງນີ້ເຮັດໃຫ້ແອັບຂອງທ່ານສະແດງບາງເນື້ອຫາກ່ອນທີ່ code JavaScript ຈະໂຫຼດ.

ເຖິງວ່າ, ຫຼາຍເວັບໄຊຈະໃຊ້ React ເພື່ອ ເພີ່ມ interactivity ໃສ່ HTML pages ທີ່ມີຢູ່ແລ້ວ. ພວກເຂົາມີຫຼາຍ root components ແທນທີ່ຈະມີພຽງອັນດຽວສຳລັບໝົດ page. ທ່ານສາມາດໃຊ້ຫຼາຍ ຫຼື ໜ້ອຍຕາມທີ່ທ່ານຕ້ອງການ.

Recap

ທ່ານຫາກໍໄດ້ລອງລົດຊາດ React ເປັນເທື່ອທຳອິດ! ເຮົາມາສະຫຼຸບປະເດັນສຳຄັນກັນ.

  • React ຊ່ວຍໃຫ້ທ່ານສ້າງ components, UI elements ທີ່ໃຊ້ຊໍ້າກັນໄດ້ສຳລັບແອັບຂອງທ່ານ.

  • ໃນ React app, ທຸກໆສ່ວນຂອງ UI ແມ່ນ component.

  • Component React ແມ່ນຟັງຊັ່ນ JavaScript ທຳມະດາ ຍົກເວັ້ນ:

    1. ຊື່ຂອງມັນຕ້ອງເລີ່ມຕົ້ນດ້ວຍໂຕອັກສອນໂຕໃຫຍ່.
    2. ມັນ return JSX markup.

Try out some challenges

Challenge 1 of 4:
ການ Export component

Sanbox ນີ້ບໍ່ເຮັດວຽກຍ້ອນວ່າ root component ບໍ່ຖືກ export:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Aklilu Lemma"
    />
  );
}

ລອງແກ້ໄຂດ້ວຍໂຕທ່ານເອງກ່ອນໄປເບິ່ງຄຳຕອບ!

PreviousDescribing the UINextImporting and Exporting Components

How do you like these docs?