From e4843df6c43e4a21226a7f41c361611d3a7be6ab Mon Sep 17 00:00:00 2001 From: Saleumsack KEOBOUALAY Date: Fri, 5 May 2023 23:12:52 +0700 Subject: [PATCH] Add translation for /content/learn/add-react-to-an-existing-project.md --- .../learn/add-react-to-an-existing-project.md | 82 +++++++++---------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index 03f491211..b6180dfe7 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -1,59 +1,59 @@ --- -title: Add React to an Existing Project +title: ເພີ່ມ React ໃສ່ Project ທີ່ມີຢູ່ແລ້ວ --- -If you want to add some interactivity to your existing project, you don't have to rewrite it in React. Add React to your existing stack, and render interactive React components anywhere. +ຖ້າທ່ານຕ້ອງການເພີ່ມ interactivity ໃສ່ໃນ project ທີ່ທ່ານມີຢູ່ແລ້ວ, ທ່ານບໍ່ຈຳເປັນຕ້ອງເລີ່ມຂຽນໃໝ່ຈາກ React. ເພີ່ມ React ໃສ່ໃນ stack ປັດຈຸບັນຂອງທ່ານ ແລະ render interactive React component ໃນທຸກບ່ອນ. -**You need to install [Node.js](https://nodejs.org/en/) for local development.** Although you can [try React](/learn/installation#try-react) online or with a simple HTML page, realistically most JavaScript tooling you'll want to use for development requires Node.js. +**ທ່ານຕ້ອງໄດ້ລົງ [Node.js](https://nodejs.org/en/) ສຳລັບ local development.** ເຖິງວ່າທ່ານຈະສາມາດ [ລອງ React](/learn/installation#try-react) ອອນໄລ ຫຼື ຂຽນດ້ວຍ HTML page ງ່າຍໆ, JavaScript tooling ທີ່ແທດເໝາະທີ່ສຸດທີ່ທ່ານຕ້ອງການໃຊ້ສຳລັບພັດທະນາຕ້ອງໃຊ້ Node.js. -## Using React for an entire subroute of your existing website {/*using-react-for-an-entire-subroute-of-your-existing-website*/} +## ການນຳໃຊ້ React ສຳລັບ subroute ທັງໝົດຂອງເວັບໄຊທີ່ທ່ານມີຢູ່ແລ້ວ {/*using-react-for-an-entire-subroute-of-your-existing-website*/} -Let's say you have an existing web app at `example.com` built with another server technology (like Rails), and you want to implement all routes starting with `example.com/some-app/` fully with React. +ສົມມຸດວ່າທ່ານມີເວັບແອັບທີ່ມີຢູ່ແລ້ວທີ່ `example.com` ສ້າງໂດຍ server technology ອື່ນ (ເຊັ່ນ Rails), ແລະ ທ່ານຕ້ອງການ implement routes ທັງໝົດທີ່ຂຶ້ນຕົ້ນດ້ວຍ `example.com/some-app` ຢ່າງເຕັມທີດ້ວຍ React. -Here's how we recommend to set it up: +ນີ້ແມ່ນວິທີການທີ່ເຮົາແນະນຳໃນການຕັ້ງຄ່າ: -1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project). -2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). -3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app. +1. **ສ້າງສ່ວນ React ຂອງແອັບທ່ານ** ໂດຍໃຊ້ໜຶ່ງໃນ [React-based frameworks](/learn/start-a-new-react-project). +2. **ກຳນົດ `/some-app` ເປັນ *base path*** ໃນການຕັ້ງຄ່າ framework ຂອງທ່ານ (ນີ້ແມ່ນວິທີການ: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). +3. **ຕັ້ງຄ່າ server ຂອງທ່ານ ຫຼື proxy** ເພື່ອໃຫ້ request ທັງໝົດພາຍໃຕ້ `/some-app/` ນັ້ນ handle ໂດຍ React app ຂອງທ່ານ. -This ensures the React part of your app can [benefit from the best practices](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) baked into those frameworks. +ນີ້ເຮັດໃຫ້ໝັ້ນໃຈໄດ້ວ່າສ່ວນຂອງ React ຂອງແອັບທ່ານ [ຮັບຜົນປະໂຫຍດຈາກ best practices ທີ່ສຸດ](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) ທີ່ຢູ່ໃນ framework ເຫຼົ່ານັ້ນ. -Many React-based frameworks are full-stack and let your React app take advantage of the server. However, you can use the same approach even if you can't or don't want to run JavaScript on the server. In that case, serve the HTML/CSS/JS export ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) for Next.js, default for Gatsby) at `/some-app/` instead. +Framework ທີ່ໃຊ້ React ຈຳນວນຫຼາຍເປັນ full-stack ແລະ ເຮັດໃຫ້ React app ຂອງທ່ານໃຊ້ປະໂຫຍດຈາກ server. ເຖິງຢ່າງໃດກໍຕາມ, ທ່ານສາມາດໃຊ້ວິທີການດຽວກັນໄດ້ບໍ່ວ່າທ່ານຈະບໍ່ສາມາດ ຫຼື ບໍ່ຕ້ອງການທີ່ຈະແລ່ນ JavaScript ເທິງ server. ໃນກໍລະນີນີ້, serve HTML/CSS/JS export([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) ສຳລັບ Next.js, ຄ່າເລີ່ມຕົ້ນສຳລັບ Gatsby) ທີ່ `/some-app` ແທນ. -## Using React for a part of your existing page {/*using-react-for-a-part-of-your-existing-page*/} +## ການໃຊ້ React ສຳລັບສ່ວນໜຶ່ງຂອງໜ້າທີ່ມີຢູ່ແລ້ວ {/*using-react-for-a-part-of-your-existing-page*/} -Let's say you have an existing page built with another technology (either a server one like Rails, or a client one like Backbone), and you want to render interactive React components somewhere on that page. That's a common way to integrate React--in fact, it's how most React usage looked at Meta for many years! +ສົມມຸດວ່າທ່ານມີ page ທີ່ສ້າງໂດຍເຕັກໂນໂລຊີອື່ນຢູ່ແລ້ວ (ບໍ່ວ່າຈະເປັນ server ເຊັ່ນ Rails, ຫຼື client ຢ່າງ Backbone), ແລະ ທ່ານຕ້ອງການ render interactive React components ບ່ອນໃດໜຶ່ງຂອງ page. ມັນເປັນວິທີທົ່ວໄປໃນການ integrate React--ໃນຄວາມເປັນຈິງ, ມັນເປັນວິທີທີ່ React ຖືກໃຊ້ຢູ່ Meta ມາຫຼາຍປີແລ້ວ! -You can do this in two steps: +ທ່ານສາມາດເຮັດໃນ 2 ຂັ້ນຕອນ: -1. **Set up a JavaScript environment** that lets you use the [JSX syntax](/learn/writing-markup-with-jsx), split your code into modules with the [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) syntax, and use packages (for example, React) from the [npm](https://www.npmjs.com/) package registry. -2. **Render your React components** where you want to see them on the page. +1. **ຕັ້ງຄ່າ JavaScript environment** ທີ່ເຮັດໃຫ້ທ່ານສາມາດໃຊ້ [JSX syntax](/learn/writing-markup-with-jsx), ແຍະ code ຂອງທ່ານເປັນ module ດ້ວຍ [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) syntax, ແລະ ໃຊ້ packages (ຍົກຕົວຢ່າງ, React) ຈາກ [npm](https://www.npmjs.com/) package registry. +2. **Render React components ຂອງທ່ານ** ບ່ອນທີ່ທ່ານຕ້ອງການເຫັນມັນເທິງ page. -The exact approach depends on your existing page setup, so let's walk through some details. +ວິທີການທີ່ແນ່ນອນແມ່ນຂຶ້ນກັບການຕັ້ງຄ່າຂອງ page ທີ່ທ່ານມີຢູ່ແລ້ວ, ສະນັ້ນເຮົາມາເບິ່ງລາຍລະອຽດກັນ. -### Step 1: Set up a modular JavaScript environment {/*step-1-set-up-a-modular-javascript-environment*/} +### ຂັ້ນຕອນທີ 1: ຕັ້ງຄ່າ modular JavaScript environment {/*step-1-set-up-a-modular-javascript-environment*/} -A modular JavaScript environment lets you write your React components in individual files, as opposed to writing all of your code in a single file. It also lets you use all the wonderful packages published by other developers on the [npm](https://www.npmjs.com/) registry--including React itself! How you do this depends on your existing setup: + JavaScript environment ແບບແຍກສ່ວນ ຊ່ວຍໃຫ້ທ່ານສາມາດຂຽນ React components ຂອງທ່ານໃນແຕ່ລະຟາຍ, ແທນທີ່ຈະຂຽນ code ທັງໝົດຂອງທ່ານໄວ້ໃນຟາຍດຽວ. ນອກຈາກນີ້ຍັງໃຫ້ທ່ານໃຊ້ package ທີ່ຄັກທັງໝົດເຜີຍແຜ່ໂດຍນັກພັດທະນາອື່ນໃນ [npm](https://www.npmjs.com/) registry--ລວມທັງໂຕ React ເອງ! ວິທີເຮັດວຽກຂຶ້ນກັບການຕັ້ງຄ່າທີ່ມີຢູ່ແລ້ວຂອງທ່ານ: -* **If your app is already split into files that use `import` statements,** try to use the setup you already have. Check whether writing `
` in your JS code causes a syntax error. If it causes a syntax error, you might need to [transform your JavaScript code with Babel](https://babeljs.io/setup), and enable the [Babel React preset](https://babeljs.io/docs/babel-preset-react) to use JSX. +* **ຖ້າແອັບຂອງທ່ານແມ່ນໄດ້ແຍກເປັນແຕ່ລະຟາຍຢູ່ແລ້ວ ໃຊ້`import` statements,** ລອງໃຊ້ການຕັ້ງຄ່າທີ່ທ່ານມີຢູ່ແລ້ວ. ກວດສອບວ່າການຂຽນ `
` ໃນ JS code ຂອງທ່ານກໍ່ໃຫ້ເກີດບັນຫາທາງ syntax ຫຼື ບໍ່?. ຖ້າມັນເກີດບັນຫາໂດຍ syntax, ທ່ານອາດຈະຕ້ອງການ [ປ່ຽນ JavaScript code ຂອງທ່ານ ດ້ວຍ Babel](https://babeljs.io/setup), ແລະ ເປີດ [Babel React preset](https://babeljs.io/docs/babel-preset-react) ເພື່ດໃຊ້ JSX. -* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vitejs.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vitejs.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend. +* **ຖ້າແອັບຂອງທ່ານບໍ່ມີການຕັ້ງຄ່າທີ່ມີຢູ່ແລ້ວສຳລັບ compile JavaScript module,,** ຕັ້ງຄ່າດ້ວຍ[Vite](https://vitejs.devl). Vite community ເບິ່ງແຍງ [ການ integrations ກັບ backend frameworks ຢ່າງຫຼວງຫຼາຍ](https://github.com/vitejs/awesome-vite#integrations-with-backends), ລວມໄປເຖິງ Rails, Django, ແລະ Laravel. ຖ້າວ່າ backend framework ຂອງທ່ານບໍ່ມີໃນລາຍການ, [ປະຕິບັດຕາມຄູ່ມືນີ້](https://vitejs.dev/guide/backend-integration.html) ເພື່ດintegrate Vite builds ກັບກັບ backend ຂອງທ່ານດ້ວຍຕົນເອງ. -To check whether your setup works, run this command in your project folder: +ເພື່ອກວດວ່າການຕັ້ງຄ່າຂອງທ່ານເຮັດວຽກໄດ້, ແລ່ນ command ນີ້ໃນ project folder ຂອງທ່ານ: npm install react react-dom -Then add these lines of code at the top of your main JavaScript file (it might be called `index.js` or `main.js`): +ຫຼັງຈາກນັ້ນເພີ່ມ code ແຖວນີ້ໃນທາງເທິງສຸດຂອງຟາຍ JavaScript ຫຼັກຂອງທ່ານ (ມັນອາດຈະເອີ້ນວ່າ `index.js` ຫຼື `main.js`): @@ -70,52 +70,52 @@ Then add these lines of code at the top of your main JavaScript file (it might b ```js index.js active import { createRoot } from 'react-dom/client'; -// Clear the existing HTML content +// Clear ເນື້ອຫາ HTML ທີ່ມີຢູ່ແລ້ວ document.body.innerHTML = '
'; -// Render your React component instead +// Render React component ຂອງທ່ານແທນ const root = createRoot(document.getElementById('app')); root.render(

Hello, world

); ``` -If the entire content of your page was replaced by a "Hello, world!", everything worked! Keep reading. +ຫາກເນື້ອຫາທັງໝົດຂອງ page ທ່ານຖືກແທນທີໂດຍ "Hello, world!", ທຸກຢ່ງມັນເຮັດວຽກໄດ້! ອ່ານຕໍ່. -Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vitejs.dev/). +Integrating a modular JavaScript environment ເຂົ້າໃນ project ທີ່ມີຢູ່ແລ້ວໃນຄັ້ງທຳອິດອາດເຮັດໃຫ້ຮູ້ສຶກຢ້ານ ແຕ່ກະຄຸ້ມຄ່າ! ຫາກທ່ານຕິດບັນຫາ, ລອງໃຊ້ [community resources](/community) ຫຼຶ [Vite Chat](https://chat.vitejs.dev/). -### Step 2: Render React components anywhere on the page {/*step-2-render-react-components-anywhere-on-the-page*/} +### ຂັ້ນຕອນທີ 2: Render React components ໃນທຸກບ່ອນຂອງ page {/*step-2-render-react-components-anywhere-on-the-page*/} -In the previous step, you put this code at the top of your main file: +ໃນຂັ້ນຕອນກ່ອນໜ້ານີ້, ທ່ານໄດ້ໃສ່ code ນີ້ຢູ່ທາງເທິງຂອງຟາຍຫຼັກຂອງທ່ານ: ```js import { createRoot } from 'react-dom/client'; -// Clear the existing HTML content +// Clear ເນື້ອຫາ HTML ທີ່ມີຢູ່ແລ້ວ document.body.innerHTML = '
'; -// Render your React component instead +// Render React component ຂອງທ່ານແທນ const root = createRoot(document.getElementById('app')); root.render(

Hello, world

); ``` -Of course, you don't actually want to clear the existing HTML content! +ແນ່ນອນ, ທ່ານບໍ່ຈຳເປັນຕ້ອງເຄຍເນື້ອຫາໃນຟາຍ HTML ທີ່ມີຢູ່ແລ້ວ! -Delete this code. +ລຶບ code ນີ້. -Instead, you probably want to render your React components in specific places in your HTML. Open your HTML page (or the server templates that generate it) and add a unique [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) attribute to any tag, for example: +ທ່ານອາດຈະຕ້ອງການ render React component ຂອງທ່ານຢູ່ບ່ອນສະເພາະໃນ HTML ຂອງທ່ານ. ເປັນ HTML page (ຫຼື server template ທີ່ generate ມັນ) ແລະ ເພີ່ມ attribute [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) ສະເພາະໃຫ້ກັບ tag ໃດໆ, ຕົວຢ່າງ: ```html - + - + ``` -This lets you find that HTML element with [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) and pass it to [`createRoot`](/reference/react-dom/client/createRoot) so that you can render your own React component inside: +ສິ່ງນີ້ຊ່ວຍໃຫ້ທ່ານຄົ້ນຫາ HTML element ດ້ວຍ [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) ແລະ ສົ່ງຕໍ່ໄປຍັງ [`createRoot`](/reference/react-dom/client/createRoot) ເພື່ອໃຫ້ທ່ານສາມາດ render React component ຂອງທ່ານເອງພາຍໃນ: @@ -146,10 +146,10 @@ root.render(); -Notice how the original HTML content from `index.html` is preserved, but your own `NavigationBar` React component now appears inside the `