From 1ab0095d0e62462a91e71097bd071b600cc822d0 Mon Sep 17 00:00:00 2001 From: Saleumsack KEOBOUALAY Date: Thu, 11 May 2023 23:38:44 +0700 Subject: [PATCH] Add translation for /content/learn/your-first-component.md --- src/content/learn/your-first-component.md | 147 +++++++++++----------- 1 file changed, 74 insertions(+), 73 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 343823aa4..9282474f9 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -1,41 +1,41 @@ --- -title: Your First Component +title: Component ທຳອິດຂອງທ່ານ --- -*Components* are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey! +*Components* ແມ່ນໜຶ່ງໃນແນວຄິດຫຼັກຂອງ React. ເປັນພື້ນຖານທີ່ທ່ານສ້າງສ່ວນ user interface (UI), ຊື່ງເຮັດໃຫ້ມັນເປັນບ່ອນທີ່ດີທີ່ສຸດໃນການເລີ່ມເດີນທາງດ້ວຍ React ຂອງທ່ານ! -* What a component is -* What role components play in a React application -* How to write your first React component +* Component ແມ່ນຫຍັງ +* Component ມີບົດບາດແນວໃດໃນແອັບພິເຄຊັ່ນ React +* ວິທີຂຽນ Component React ທຳອິດຂອງທ່ານ -## Components: UI building blocks {/*components-ui-building-blocks*/} +## Components: Blocks ການສ້າງ UI {/*components-ui-building-blocks*/} -On the Web, HTML lets us create rich structured documents with its built-in set of tags like `

` and `
  • `: +ຢູ່ໃນເວັບ, HTML ໃຫ້ພວກເຮົາສ້າງ document ທີ່ມີໂຄ່ງສ້າງສົມບູນດ້ວຍຊຸດ tags ເຊັ່ນ `

    ` ແລະ `
  • `: ```html
    -

    My First Component

    +

    Component ທຳອິດຂອງຂ້ອຍ

      -
    1. Components: UI Building Blocks
      2. -
    2. Defining a Component
      3. -
    3. Using a Component
      4. +
    4. Components: Blocks ການສ້າງ UI
      5. +
    5. ການກຳນົດ Component
      6. +
    6. ການໃຊ້ງານ Component
    ``` -This markup represents this article `
    `, its heading `

    `, and an (abbreviated) table of contents as an ordered list `
      `. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web. +Markup ທີ່ສະແດງໃນບົດຄວາມນີ້ `
      `, ຫົວຂໍ້ `

      `, ແລະ ສາລະບານ (ແບບຫຍໍ້) ເປັນ order list `
        `. Markup ແບບນີ້, ຮ່ວມດ້ວຍ CSS ສຳລັບ style, ແລະ JavaScriopt ສຳລັບ interactivity, ຈະຢູ່ເບື້ອງຫຼັງທຸກໆ sidebar, avatar, modal, dropdown-ທຸກສ່ວນຂອງ UI ທີ່ທ່ານເຫັນໃນໜ້າເວັບ. -React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a `` component you could render on every page. Under the hood, it still uses the same HTML tags like `
        `, `

        `, etc. +React ໃຫ້ທ່ານລວມ markup, CSS, ແລະ JavaScript ເຂົ້າເປັນ custom "components", **UI element ທີ່ໃຊ້ຊໍ້າກັນໄດ້ສຳລັບແອັບຂອງທ່ານ.** code ສາລະບານທີ່ທ່ານເຫັນດ້ານເທິງສາມາດປ່ຽນເປັນ component `` ທ່ານສາມາດສະແດງໄດ້ໃນທຸກ page. ເຖິງຢ່າງໃດກໍ່ຕາມ, ມັນກໍຍັງໃຊ້ tag HTML ຄືເກົ່າເຊັ່ນ `
        `, `

        `, ແລະ ອື່ນໆ. -Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components: +ຄືກັນກັບ tags HTML, ທ່ານສາມາດຂຽນ, ສັ່ງ ແລະ ຈັດຊັ້ນວາງ component ເພື່ອອອກແບບທັງໝົດ page. ຕົວຢ່າງ, ໜ້າເອກະສານທີ່ທ່ານກຳລັງອ່ານຢູ່ນີ້ແມ່ນໄດ້ສ້າງມາຈາກ component React: ```js @@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w ``` -As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ``! You can even jumpstart your project with the thousands of components shared by the React open source community like [Chakra UI](https://chakra-ui.com/) and [Material UI.](https://material-ui.com/) +ເມື່ອ project ຂອງທ່ານໃຫຍ່ຂຶ້ນ, ທ່ານຈະສັງເກດເຫັນວ່າຫຼາຍໆ design ຂອງທ່ານສາມາດເຮັດຂຶ້ນໃໝ່ໂດຍໃຊ້ component ທີທ່ານຂຽນໄວ້ແລ້ວມາໃຊ້ຊໍ້າ, ເພື່ອຊ່ວຍເລັ່ງການພັດທະນາຂອງທ່ານ. ສາລະບານຂອງພວກເຮົາດ້ານເທິງສາມາດເພີ່ມໃນໜ້າຈໍໃດກໍໄດ້ດ້ວຍ ``! ທ່ານສາມາດເລີ່ມ project ຂອງທ່ານຢ່າງໄວດ້ວຍ component ນັບພັນທີ່ຖືກແບ່ງປັນໂດຍ React open source community ເຊັ່ນ [Chakra UI](https://chakra-ui.com/) ແລະ [Material UI.](https://material-ui.com/) -## Defining a component {/*defining-a-component*/} +## ກຳນົດ component {/*defining-a-component*/} -Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: **a React component is a JavaScript function that you can _sprinkle with markup_.** Here's what that looks like (you can edit the example below): +ຕາມປົກະຕິເມື່ອສ້າງ web pages, ນັກພັດທະນາເວັບຈະ markup ເນື້ອຫາຂອງຕົນແລ້ວເພີ່ມ interaction ໂດຍການຕົບແຕ່ງດ້ວຍບາງ JavaScript. ສິ່ງນີ້ເຮັດວຽກໄດ້ດີເມື່ອ interaction ເປັນຫຍັງທີ່ມີກະໄດ້ໃນເວັບ. ປັດຈຸບັນເປັນທີ່ຕ້ອງການສຳລັບຫຼາຍເວັບໄຊ ແລະ ທຸກໆແອັບ. React ໃຫ້ຄວາມສຳຄັນກັບ interaction ເປັນອັນດັບທຳອິດໃນຂະນະທີ່ຍັງໃຊ້ເຕັກໂນໂລຊີເດີມ: **Component React ແມ່ນຟັ່ງຊັ່ນ JavaScript ທີ່ທ່ານສາມາດ _ຕົບແຕ່ງມັນດ້ວຍ markup_** ນີ້ຄືຮູບລັກສະນະທີ່ສະແດງ (ທ່ານສາມາດແກ້ໄຂຕົວຢ່າງດ້ານລຸ່ມນີ້): @@ -76,33 +76,33 @@ img { height: 200px; } -And here's how to build a component: +ແລະ ນີ້ແມ່ນວິທີການສ້າງ Component: -### Step 1: Export the component {/*step-1-export-the-component*/} +### ຂັ້ນຕອນທີ 1: Export Component {/*step-1-export-the-component*/} -The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!) +prefix `export default` ແມ່ນ [ມາດຕະຖານ syntax JavaScript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (ບໍ່ສະເພາະແຕ່ React). ຊ່ວຍໃຫ້ທ່ານ mark ຟັງຊັ່ນຫຼັກໃນຟາຍເພື່ອໃຫ້ທ່ານສາມາດ import ຈາກຟາຍອື່ນໄດ້ໃນພາຍຫຼັງ. (ສຳລັບການ import ເພີ່ມເຕີມໃນ [ການ Import ແລະ Export Components](/learn/importing-and-exporting-components)!) -### Step 2: Define the function {/*step-2-define-the-function*/} +### ຂັ້ນຕອນທີ 2: ກຳນົດ function {/*step-2-define-the-function*/} -With `function Profile() { }` you define a JavaScript function with the name `Profile`. +ດ້ວຍ `function Profile() { }` ທ່ານສ້າງຟັງຊັ່ນ JavaScript ດ້ວຍຊື່ `Profile`. -React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work! +Component React ແມ່ນຟັງຊັ່ນ JavaScript ທຳມະດາ, ແຕ່ **ຊື່ຂອງມັນຕ້ອງຂຶ້ນຕົ້ນດ້ວຍໂຕອັກສອນໃຫຍ່** ຖ້າບໍ່ດັ່ງນັ້ນມັນຈະບໍ່ເຮັດວຽກ! -### Step 3: Add markup {/*step-3-add-markup*/} +### ຂັ້ນຕອນທີ 3: ເພີ່ມ markup {/*step-3-add-markup*/} -The component returns an `` tag with `src` and `alt` attributes. `` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript. +Component return ແທັກ `` ດ້ວຍ attribute `src` ແລະ `alt`. `` ຖືກຂຽນຄືກັບ HTML, ແຕ່ອັນທີ່ຈິງແລ້ວມັນຄື JavaScript! Syntax ເຫຼົ່ານີ້ເອີ້ນວ່າ [JSX](/learn/writing-markup-with-jsx), ແລະ ມັນໃຫ້ທ່ານສາມາດ embed markup ໃນ JavaScript ໄດ້. -Return statements can be written all on one line, as in this component: +ສາມາດຂຽນ return statement ທັງໝົດໄດ້ໃນໜຶ່ງແຖວ, ເຊັ່ນດຽວກັບ component ນີ້: ```js return Katherine Johnson; ``` -But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses: +ແຕ່ຖ້າ markup ຂອງທ່ານບໍ່ໄດ້ຢູ່ໃນແຖວດຽວກັບ keyword `return`, ທ່ານສາມາດລວມມັນດ້ວຍຄູ່ຂອງວົງເລັບ: ```js return ( @@ -114,13 +114,13 @@ return ( -Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! +ຖ້າບໍ່ມີວົງເລັບ, code ໃດໆທີ່ຢູ່ຫຼັງ `return` [ມັນຈະບໍ່ມີຜົນຫຍັງ](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! -## Using a component {/*using-a-component*/} +## ການນຳໃຊ້ component {/*using-a-component*/} -Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components: +ເມື່ອທ່ານສ້າງ component `Profile` ຂອງທ່ານແລ້ວ, ທ່ານສາມາດຊ້ອນ component ນັ້ນໄວ້ໃນ component ອື່ນໆໄດ້. ຕົວຢ່າງ, ທ່ານສາມາດ export component `Gallery` ທີ່ໃຊ້ component `Profile` ຫຼາຍອັນ: @@ -137,7 +137,7 @@ function Profile() { export default function Gallery() { return (
        -

        Amazing scientists

        +

        ນັກວິທະຍາສາດທີ່ນ່າປະຫຼາດໃຈ

        @@ -152,37 +152,37 @@ img { margin: 0 10px 10px 0; height: 90px; } -### What the browser sees {/*what-the-browser-sees*/} +### ສິ່ງທີ່ browser ເຫັນ {/*what-the-browser-sees*/} -Notice the difference in casing: +ສັງເກດຄວາມແຕກຕ່າງຂອງກໍລະນີ: -* `
        ` is lowercase, so React knows we refer to an HTML tag. -* `` starts with a capital `P`, so React knows that we want to use our component called `Profile`. +* `
        ` ແມ່ນໂຕອັນສອນນ້ອຍ, ສະນັ້ນ React ຮູ້ວ່າໝາຍເຖິງແທັກ HTML. +* `` ເລີ່ມຕົ້ນດ້ວຍໂຕອັກສອນໃຫຍ່ `P`, ສະນັ້ນ React ຮູ້ວ່າພວກເຮົາຕ້ອງການໃຊ້ component ຂອງພວກເຮົາທີ່ຊື່ວ່າ `Profile`. -And `Profile` contains even more HTML: ``. In the end, this is what the browser sees: +ແລະ `Profile` ມີ HTML ຫຼາຍຂຶ້ນ: ``. ທ້າຍສຸດ, ນີ້ແມ່ນສິ່ງທີ browser ເຫັນ: ```html
        -

        Amazing scientists

        +

        ນັກວິທະຍາສາດທີ່ນ່າປະຫຼາດໃຈ

        Katherine Johnson Katherine Johnson Katherine Johnson
        ``` -### Nesting and organizing components {/*nesting-and-organizing-components*/} +### ການຊ້ອນ ແລະ ຈັດວາງ components {/*nesting-and-organizing-components*/} -Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components) +Components ແມ່ນຟັງຊັ່ນ JavaScript ທຳມະດາ, ສະນັ້ນທ່ານສາມາດຮັກສາຫຼາຍ component ໃນຟາຍດຽວໄດ້. ວິທີນີ້ສະດວກເມື່ອ component ມີຂະໜາດນ້ອຍ ຫຼື ກ່ຽວພັນກັນຫຼາຍ. ຖ້າຟາຍນີ້ມີຈຳນວນຫຼາຍ, ທ່ານສາມາດຍ້າຍ `Profile` ແຍກໄປເປັນອີກຟາຍໄດ້ຕະຫຼອດເວລາ. ທ່ານຈະໄດ້ຮຽນວິທີດຳເນີນການນີ້ໄວໆໃນ [ໜ້າກ່ຽວກັບ imports.](/learn/importing-and-exporting-components) -Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like. +ເພາະວ່າ component `Profile` ແມ່ນສະແດງໃນ `Gallery`-ເຖິງວ່າຫຼາຍຄັ້ງ!-ພວກເຮົາສາມາດເວົ້າໄດ້ວ່າ `Gallery` ແມ່ນ **parent component,** ສະແດງແຕ່ລະ `Profile` ເປັນ "child". ນີ້ເປັນສ່ວນໜຶ່ງຂອງຄວາມມະຫັດສະຈັນຂອງ React: ທ່ານສາມາດປະກາດ component ຄັ້ງໜຶ່ງ, ແລະ ສາມາດໃຊ້ມັນໃນຫຼາຍໆບ່ອນ ແລະ ຫຼາຍຄັ້ງຕາມທີ່ທ່ານຕ້ອງການ. -Components can render other components, but **you must never nest their definitions:** +Component ສາມາດສະແດງ component ອື່ນ, ແຕ່ **ທ່ານຕ້ອງບໍ່ຊ້ອນຄວາມໝາຍຂອງມັນ:** ```js {2-5} export default function Gallery() { - // 🔴 Never define a component inside another component! + // 🔴 ຢ່າປະກາດ component ໃນ component ອື່ນ! function Profile() { // ... } @@ -190,47 +190,47 @@ export default function Gallery() { } ``` -The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level: +ຊຸດ snippet ດ້ານເທິງແມ່ນ [ຊ້າຫຼາຍ ແລະ ເຮັດໃຫ້ເກີດບັນຫາ](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) ແທນທີ, ກຳນົດທຸກໆ component ໃນດ້ານເທິງສຸດຂອງຊັ້ນ: ```js {5-8} export default function Gallery() { // ... } -// ✅ Declare components at the top level +// ✅ ປະກາດ component ຢູ່ຊັ້ນເທິງສຸດ function Profile() { // ... } ``` -When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions. +ເມື່ອ Component ລູກຕ້ອງການບາງຂໍ້ມູນຈາກແມ່, [ສົ່ງຜ່ານໂດຍ props](/learn/passing-props-to-a-component) ແທນທີ່ຈະຊ້ອນຄວາມໝາຍມັນ. -#### Components all the way down {/*components-all-the-way-down*/} +#### Components ທັງໝົດລົງໄປ {/*components-all-the-way-down*/} -Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components. +ແອັບພິເຄຊັ່ນ React ຂອງທ່ານເລີ່ມຕົ້ນດ້ວຍ "root" component. ສ່ວນຫຼາຍ, ມັນຖືກສ້າງໂດຍອັດຕະໂນມັດຕອນທ່ານສ້າງ project ໃໝ່. ຕົວຢ່າງ, ຖ້າທ່ານເຫັນ [CodeSandbox](https://codesandbox.io/) ຫຼື [ສ້າງແອັບ React](https://create-react-app.dev/), root component ຖືກປະກາດໃນ `src/App.js`. ຖ້າທ່ານໃຊ້ framework, [Next.js](https://nextjs.org/), root component ຖືກປະກາດໃນ `pages/index.js`. ໃນຕົວຢ່າງນີ້, ທ່ານໄດ້ export root component. -Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once. +ແອັບ React ສ່ວນຫຼາຍໃຊ້ compent ທັງໝົດລົງໄປ. ນີ້ໝາຍຄວາມວ່າທ່ານບໍ່ພຽງຈະໃຊ້ຊີ້ນສ່ວນ component ທີ່ສາມາດນຳໃຊ້ໄດ້ໃໝ່ເຊັ່ນ ປຸ່ມກົດ ເທົ່ານັ້ນ, ແຕ່ສຳລັບຊີ້ນສ່ວນທີ່ໃຫຍ່ຂຶ້ນເຊັ່ນ sidebars, list ແລະ ໃນທີ່ສຸດ, ໝົດ page! Component ເປັນວິທີທີ່ສະດວກໃນການຈັດລະບຽບ code UI ແລະ markup, ເຖິງວ່າບາງ component ແມ່ນໃຊ້ໄດ້ພຽງເທື່ອດຽວ. -[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads. +[React-based frameworks](/learn/start-a-new-react-project) ກ້າວໄປອີກຂັ້ນ. ແທນທີ່ຈະໃຊ້ຟາຍ HTML ເປົ່າ ແລະ ປ່ອຍໃຫ້ React "ເຂົ້າຄວບຄຸມ" ຈັດການ page ດ້ວຍ JavaScript, ມັນ *ຍັງ* ສ້າງ HTML ໂດຍອັດຕະໂນມັດຈາກ Component React. ສິ່ງນີ້ເຮັດໃຫ້ແອັບຂອງທ່ານສະແດງບາງເນື້ອຫາກ່ອນທີ່ code JavaScript ຈະໂຫຼດ. -Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need. +ເຖິງວ່າ, ຫຼາຍເວັບໄຊຈະໃຊ້ React ເພື່ອ [ເພີ່ມ interactivity ໃສ່ HTML pages ທີ່ມີຢູ່ແລ້ວ.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) ພວກເຂົາມີຫຼາຍ root components ແທນທີ່ຈະມີພຽງອັນດຽວສຳລັບໝົດ page. ທ່ານສາມາດໃຊ້ຫຼາຍ ຫຼື ໜ້ອຍຕາມທີ່ທ່ານຕ້ອງການ. -You've just gotten your first taste of React! Let's recap some key points. +ທ່ານຫາກໍໄດ້ລອງລົດຊາດ React ເປັນເທື່ອທຳອິດ! ເຮົາມາສະຫຼຸບປະເດັນສຳຄັນກັນ. -* React lets you create components, **reusable UI elements for your app.** -* In a React app, every piece of UI is a component. -* React components are regular JavaScript functions except: +* React ຊ່ວຍໃຫ້ທ່ານສ້າງ components, **UI elements ທີ່ໃຊ້ຊໍ້າກັນໄດ້ສຳລັບແອັບຂອງທ່ານ.** +* ໃນ React app, ທຸກໆສ່ວນຂອງ UI ແມ່ນ component. +* Component React ແມ່ນຟັງຊັ່ນ JavaScript ທຳມະດາ ຍົກເວັ້ນ: - 1. Their names always begin with a capital letter. - 2. They return JSX markup. + 1. ຊື່ຂອງມັນຕ້ອງເລີ່ມຕົ້ນດ້ວຍໂຕອັກສອນໂຕໃຫຍ່. + 2. ມັນ return JSX markup. @@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points. -#### Export the component {/*export-the-component*/} +#### ການ Export component {/*export-the-component*/} -This sandbox doesn't work because the root component is not exported: +Sanbox ນີ້ບໍ່ເຮັດວຽກຍ້ອນວ່າ root component ບໍ່ຖືກ export: @@ -261,11 +261,11 @@ img { height: 181px; } -Try to fix it yourself before looking at the solution! +ລອງແກ້ໄຂດ້ວຍໂຕທ່ານເອງກ່ອນໄປເບິ່ງຄຳຕອບ! -Add `export default` before the function definition like so: +ເພີ່ມ `export default` ກ່ອນຈຸດປະສົງຂອງຟັງຊັ່ນດັ່ງນີ້: @@ -290,9 +290,9 @@ You might be wondering why writing `export` alone is not enough to fix this exam -#### Fix the return statement {/*fix-the-return-statement*/} +#### ແກ້ return statement {/*fix-the-return-statement*/} -Something isn't right about this `return` statement. Can you fix it? +ມີບາງຢ່າງບໍ່ຖືກຕ້ອງກ່ຽວກັບ `return` statement. ທ່ານແກ້ໄດ້ບໍ່? @@ -318,7 +318,7 @@ img { height: 180px; } -You can fix this component by moving the return statement to one line like so: +ທ່ານສາມາດແປງ component ນີ້ໂດຍການຍ້າຍ return statement ເປັນໜຶ່ງແຖວດັ່ງນີ້: @@ -334,7 +334,7 @@ img { height: 180px; } -Or by wrapping the returned JSX markup in parentheses that open right after `return`: +ຫຼຶ ໂດຍການລວມ return JSX markup ໃນວົງເລັບທີ່ເປີດຫຼັງຈາກ `return`: @@ -357,9 +357,9 @@ img { height: 180px; } -#### Spot the mistake {/*spot-the-mistake*/} +#### ລະບຸຄວາມຜິດພາດ {/*spot-the-mistake*/} -Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!) +ມີບາງຢ່າງຜິດປົກະຕິກັບວິທີການປະກາດ ແລະ ໃຊ້ component `Profile`. ທ່ານເຫັນຂໍ້ຜິດພາດ ຫຼື ບໍ່? (ພະຍາຍາມຈື່ວິທີທີ່ React ແຍກ component ຈາກແທັກ HTML ທຳມະດາ!) @@ -376,7 +376,7 @@ function profile() { export default function Gallery() { return (
        -

        Amazing scientists

        +

        ນັກວິທະຍາສາດທີ່ນ່າປະຫຼາດໃຈ

        @@ -393,9 +393,10 @@ img { margin: 0 10px 10px 0; height: 90px; } +ຊື່ Component React ຕ້ອງຂຶ້ນຕົ້ນດ້ວຍໂຕອັກສອນໂຕໃຫຍ່. React component names must start with a capital letter. -Change `function profile()` to `function Profile()`, and then change every `` to ``: +ປ່ຽນ `function profile()` ເປັນ `function Profile()`, ແລະ ຈາກນັ້ນປ່ຽນທຸກໆ `` ເປັນ ``: @@ -412,7 +413,7 @@ function Profile() { export default function Gallery() { return (
        -

        Amazing scientists

        +

        ນັກວິທະຍາສາດທີ່ນ່າປະຫຼາດໃຈ

        @@ -429,14 +430,14 @@ img { margin: 0 10px 10px 0; } -#### Your own component {/*your-own-component*/} +#### Component ຂອງທ່ານ {/*your-own-component*/} -Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `

        Good job!

        `. Don't forget to export it! +ຂຽນ component ຈາກເລີ່ມຕົ້ນ. ທ່ານສາມາດຕັ້ງຊື່ທີ່ຖືກຕ້ອງ ແລະ return markup ໃດກໍ່ໄດ້. ຖ້າທ່ານຄິດບໍ່ອອກ, ທ່ານສາມາດຂຽນ component `Congratulations` ທີ່ສະແດງ `

        ເກັ່ງຫຼາຍ!

        `. ຢ່າລືມ export ມັນນຳ! ```js -// Write your component below! +// ຂຽນ component ຂອງທ່ານດ້ານລຸ່ມ! ``` @@ -449,7 +450,7 @@ Write a component from scratch. You can give it any valid name and return any ma ```js export default function Congratulations() { return ( -

        Good job!

        +

        ເກັ່ງຫຼາຍ!

        ); } ```