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 f494b0ab1e9..73e5a2a462e 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -1,66 +1,66 @@ --- -title: Add React to an Existing Project +title: ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪ್ರಾಜೆಕ್ಟ್ ಗೆ ರಿಯಾಕ್ಟ್ ಅನ್ನು ಸೇರಿಸಿ --- -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. +ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಯೋಜನೆಗೆ ಕೆಲವು ಸಂವಾದಾತ್ಮಕತೆಯನ್ನು ಸೇರಿಸಲು ನೀವು ಬಯಸಿದರೆ, ನೀವು ಅದನ್ನು ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಪುನಃ ಬರೆಯಬೇಕಾಗಿಲ್ಲ. ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಸ್ಟಾಕ್‌ಗೆ ರಿಯಾಕ್ಟ್ ಅನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ರಿಯಾಕ್ಟ್ ಕೊಂಪೊನೆಂಟ್ಗಳನ್ನು ಎಲ್ಲಿಯಾದರೂ ರೆಂಡರ್ ಮಾಡಿ. -**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/) ಅನ್ನು ಸ್ಥಾಪಿಸಬೇಕಾಗಿದೆ.** ನೀವು ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ ಅಥವಾ ಸರಳ HTML ನೊಂದಿಗೆ [try react](/learn/installation#try-react) ಮಾಡಬಹುದು, ವಾಸ್ತವಿಕವಾಗಿ ನೀವು ಅಭಿವೃದ್ಧಿಗಾಗಿ ಬಳಸಲು ಬಯಸುವ ಹೆಚ್ಚಿನ JavaScript ಟೂಲಿಂಗ್‌ಗೆ Node.js ಅಗತ್ಯವಿದೆ -## Using React for an entire subroute of your existing website {/*using-react-for-an-entire-subroute-of-your-existing-website*/} +## ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ವೆಬ್‌ಸೈಟ್‌ನ ಸಂಪೂರ್ಣ ಸಬ್‌ರೂಟ್‌ಗಾಗಿ ರಿಯಾಕ್ಟ್ ಅನ್ನು ಬಳಸುವುದು {/* 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' ನಲ್ಲಿ ನೀವು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಇನ್ನೊಂದು ಸರ್ವರ್ ತಂತ್ರಜ್ಞಾನದೊಂದಿಗೆ (like Rails) ನಿರ್ಮಿಸಿದ್ದೀರಿ ಎಂದು ಹೇಳೋಣ ಮತ್ತು ನೀವು `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. [ರಿಯಾಕ್ಟ್ ಆಧಾರಿತ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ](/learn/start-a-new-react-project) ಒಂದನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ **ಅಪ್ಲಿಕೇಶನ್‌ನ ರಿಯಾಕ್ಟ್ ಭಾಗವನ್ನು ನಿರ್ಮಿಸಿ** +2. **`/some-app` ಅನ್ನು _base path_ ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ** ನಿಮ್ಮ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ ಕಾನ್ಫಿಗರೇಶನ್‌ನಲ್ಲಿ (ಹೇಗೆ ಇಲ್ಲಿದೆ: [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. **ನಿಮ್ಮ ಸರ್ವರ್ ಅಥವಾ ಪ್ರಾಕ್ಸಿಯನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ** ಇದರಿಂದ `/some-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. +ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ರಿಯಾಕ್ಟ್ ಭಾಗವು ಆ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ [ಉತ್ತಮ ಅಭ್ಯಾಸಗಳಿಂದ ಪ್ರಯೋಜನ](/learn/start-a-new-react-project#can-i-use-react-without-a-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. +ಅನೇಕ ರಿಯಾಕ್ಟ್-ಆಧಾರಿತ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಫೂಲ್‍-ಸ್ಟಾಕ್ ಆಗಿರುತ್ತವೆ ಮತ್ತು ಸರ್ವರ್‌ನ ಪ್ರಯೋಜನವನ್ನು ಪಡೆಯಲು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ನೀವು ಸರ್ವರ್‌ನಲ್ಲಿ JavaScript ಅನ್ನು ಚಲಾಯಿಸಲು ಸಾಧ್ಯವಾಗದಿದ್ದರೂ ಅಥವಾ ಬಯಸದಿದ್ದರೂ ಸಹ ನೀವು ಅದೇ ವಿಧಾನವನ್ನು ಬಳಸಬಹುದು. ಆ ಸಂದರ್ಭದಲ್ಲಿ, Next.js ಗಾಗಿ HTML/CSS/JS ರಫ್ತು ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) ಅನ್ನು ಒದಗಿಸಿ, Gatsby ಗಾಗಿ ಡೀಫಾಲ್ಟ್) ಬದಲಿಗೆ `/some-app/` ನಲ್ಲಿ. -## Using React for a part of your existing page {/*using-react-for-a-part-of-your-existing-page*/} +## ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪುಟದ ಒಂದು ಭಾಗಕ್ಕಾಗಿ ರಿಯಾಕ್ಟ್ ಅನ್ನು ಬಳಸುವುದು {/* 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! +ನೀವು ಇನ್ನೊಂದು ತಂತ್ರಜ್ಞಾನದೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪುಟವನ್ನು ಹೊಂದಿರುವಿರಿ ಎಂದು ಹೇಳೋಣ (ರೈಲ್ಸ್‌ನಂತಹ ಸರ್ವರ್ ಅಥವಾ ಬ್ಯಾಕ್‌ಬೋನ್‌ನಂತಹ ಕ್ಲೈಂಟ್), ಮತ್ತು ಆ ಪುಟದಲ್ಲಿ ಎಲ್ಲೋ ಸಂವಾದಾತ್ಮಕ ಪ್ರತಿಕ್ರಿಯೆ ಕೊಂಪೊನೆಂಟ್ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಲು ನೀವು ಬಯಸುತ್ತೀರಿ. ರಿಯಾಕ್ಟ್ ಅನ್ನು ಸಂಯೋಜಿಸಲು ಇದು ಸಾಮಾನ್ಯ ಮಾರ್ಗವಾಗಿದೆ - ವಾಸ್ತವವಾಗಿ, ಹೆಚ್ಚಿನ ರಿಯಾಕ್ಟ್ ಬಳಕೆಯು ಹಲವು ವರ್ಷಗಳಿಂದ ಮೆಟಾವನ್ನು ಹೇಗೆ ನೋಡಿದೆ! -You can do this in two steps: +ನೀವು ಇದನ್ನು ಎರಡು ಹಂತಗಳಲ್ಲಿ ಮಾಡಬಹುದು: -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. **ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಸರವನ್ನು ಸೆಟಪ್ ಮಾಡಿ** ಅದು ನಿಮಗೆ [JSX ಸಿಂಟ್ಯಾಕ್ಸ್](/Learn/writing-markup-with-jsx), ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಮಾಡ್ಯೂಲ್‌ಗಳಾಗಿ ವಿಭಜಿಸಿ[`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) ಸಿಂಟ್ಯಾಕ್ಸ್, ಮತ್ತು [npm](https://www.npmjs.com/) ಪ್ಯಾಕೇಜ್ ರಿಜಿಸ್ಟ್ರಿಯಿಂದ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಬಳಸಿ (ಉದಾಹರಣೆಗೆ, ರಿಯಾಕ್ಟ್). +2. **ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು** ನೀವು ಪುಟದಲ್ಲಿ ನೋಡಲು ಬಯಸುವಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಿ. -The exact approach depends on your existing page setup, so let's walk through some details. +ನಿಖರವಾದ ವಿಧಾನವು ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪುಟದ ಸೆಟಪ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ, ಆದ್ದರಿಂದ ನಾವು ಕೆಲವು ವಿವರಗಳ ಮೂಲಕ ನಡೆಯೋಣ. -### Step 1: Set up a modular JavaScript environment {/*step-1-set-up-a-modular-javascript-environment*/} +### Step 1: Set up a 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: +ಮಾಡ್ಯುಲರ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಸರವು ನಿಮ್ಮ ಎಲ್ಲಾ ಕೋಡ್ ಅನ್ನು ಒಂದೇ ಫೈಲ್‌ನಲ್ಲಿ ಬರೆಯುವುದಕ್ಕೆ ವಿರುದ್ಧವಾಗಿ ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ಗಳಲ್ಲಿ ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಕೊಂಪೊನೆಂಟ್ಗಳನ್ನು ಬರೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. [npm](https://www.npmjs.com/) ರಿಜಿಸ್ಟ್ರಿಯಲ್ಲಿ ಇತರ ಡೆವಲಪರ್‌ಗಳು ಪ್ರಕಟಿಸಿದ ಎಲ್ಲಾ ಅದ್ಭುತ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಬಳಸಲು ಸಹ ಇದು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ--ರಿಯಾಕ್ಟ್ ಸೇರಿದಂತೆ! ನೀವು ಇದನ್ನು ಹೇಗೆ ಮಾಡುತ್ತೀರಿ ಎಂಬುದು ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಸೆಟಪ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ: -* **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` ಹೇಳಿಕೆಗಳನ್ನು ಬಳಸುವ ಫೈಲ್‌ಗಳಾಗಿ ವಿಭಜಿಸಿದ್ದರೆ,** ನೀವು ಈಗಾಗಲೇ ಹೊಂದಿರುವ ಸೆಟಪ್ ಅನ್ನು ಬಳಸಲು ಪ್ರಯತ್ನಿಸಿ. ನಿಮ್ಮ JS ಕೋಡ್‌ನಲ್ಲಿ `
` ಬರೆಯುವುದು ಸಿಂಟ್ಯಾಕ್ಸ್ ಎರರ್ವನ್ನು ಉಂಟುಮಾಡುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ. ಇದು ಸಿಂಟ್ಯಾಕ್ಸ್ ಎರರ್ವನ್ನು ಉಂಟುಮಾಡಿದರೆ, ನೀವು [Babel ನೊಂದಿಗೆ ನಿಮ್ಮ JavaScript ಕೋಡ್ ಅನ್ನು ರೂಪಾಂತರಿಸಬೇಕಾಗಬಹುದು](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. +- **ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ JavaScript ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಕಂಪೈಲ್ ಮಾಡಲು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಸೆಟಪ್ ಅನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ**, ಅದನ್ನು [Vite](https://vitejs.dev/) ನೊಂದಿಗೆ ಸೆಟಪ್ ಮಾಡಿ. Vite ಸಮುದಾಯವು ರೈಲ್ಸ್, ಜಾಂಗೊ ಮತ್ತು ಲಾರಾವೆಲ್ ಸೇರಿದಂತೆ [ಬ್ಯಾಕೆಂಡ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಅನೇಕ ಏಕೀಕರಣಗಳನ್ನು](https://github.com/vitejs/awesome-vite#integrations-with-backends) ನಿರ್ವಹಿಸುತ್ತದೆ. ನಿಮ್ಮ ಬ್ಯಾಕೆಂಡ್ ಫ್ರೇಮ್‌ವರ್ಕ್ ಪಟ್ಟಿ ಮಾಡದಿದ್ದರೆ, ನಿಮ್ಮ ಬ್ಯಾಕೆಂಡ್‌ನೊಂದಿಗೆ ವೈಟ್ ಬಿಲ್ಡ್‌ಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಸಂಯೋಜಿಸಲು [ಈ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಅನುಸರಿಸಿ](https://vitejs.dev/guide/backend-integration.html). -To check whether your setup works, run this command in your project folder: +ನಿಮ್ಮ ಸೆಟಪ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಈ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ: - -npm install react react-dom - +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`): +ನಂತರ ನಿಮ್ಮ ಮುಖ್ಯ JavaScript ಫೈಲ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಕೋಡ್‌ನ ಈ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಿ (ಇದನ್ನು `index.js` ಅಥವಾ `main.js` ಎಂದು ಕರೆಯಬಹುದು): ```html index.html hidden - My app + + My app + @@ -68,7 +68,7 @@ Then add these lines of code at the top of your main JavaScript file (it might b ``` ```js src/index.js active -import { createRoot } from 'react-dom/client'; +import {createRoot} from 'react-dom/client'; // Clear the existing HTML content document.body.innerHTML = '
'; @@ -80,20 +80,20 @@ root.render(

Hello, world

); -If the entire content of your page was replaced by a "Hello, world!", everything worked! Keep reading. +ನಿಮ್ಮ ಪುಟದ ಸಂಪೂರ್ಣ ವಿಷಯವನ್ನು "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/). +ಮೊದಲ ಬಾರಿಗೆ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಯೋಜನೆಗೆ ಮಾಡ್ಯುಲರ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಸರವನ್ನು ಸಂಯೋಜಿಸುವುದು ಬೆದರಿಸುವಂತೆ ಮಾಡಬಹುದು, ಆದರೆ ಇದು ಯೋಗ್ಯವಾಗಿದೆ! ನೀವು ಸಿಲುಕಿಕೊಂಡರೆ, ನಮ್ಮ [ಸಮುದಾಯ ಸಂಪನ್ಮೂಲಗಳು](/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*/} +### Step 2: ಪುಟದಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ ರಿಯಾಕ್ಟ್ ಕೊಂಪೊನೆಂಟ್ಗಳನ್ನು ಸಲ್ಲಿಸಿ {/* step-2-render-react-components-anywhere-on-the-page */} -In the previous step, you put this code at the top of your main file: +ಹಿಂದಿನ ಹಂತದಲ್ಲಿ, ನೀವು ಈ ಕೋಡ್ ಅನ್ನು ನಿಮ್ಮ ಮುಖ್ಯ ಫೈಲ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಇರಿಸಿದ್ದೀರಿ: ```js -import { createRoot } from 'react-dom/client'; +import {createRoot} from 'react-dom/client'; // Clear the existing HTML content document.body.innerHTML = '
'; @@ -103,11 +103,11 @@ 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. +ಈ ಕೋಡ್ ಅನ್ನು ಅಳಿಸಿ. -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: +ಬದಲಾಗಿ, ನಿಮ್ಮ HTML ನಲ್ಲಿನ ನಿರ್ದಿಷ್ಟ ಸ್ಥಳಗಳಲ್ಲಿ ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಕೊಂಪೊನೆಂಟ್ಗಳನ್ನು ನಿರೂಪಿಸಲು ನೀವು ಬಹುಶಃ ಬಯಸುತ್ತೀರಿ. ನಿಮ್ಮ HTML ಪುಟವನ್ನು ತೆರೆಯಿರಿ (ಅಥವಾ ಅದನ್ನು ಉತ್ಪಾದಿಸುವ ಸರ್ವರ್ ಟೆಂಪ್ಲೇಟ್‌ಗಳು) ಮತ್ತು ಯಾವುದಾದರೂ ಒಂದು ಅನನ್ಯ [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) ಆಟ್ರಿಬ್ಯೊಟ್ವನ್ನು ಸೇರಿಸಿ ಟ್ಯಾಗ್, ಉದಾಹರಣೆಗೆ: ```html @@ -115,14 +115,16 @@ Instead, you probably want to render your React components in specific places in ``` -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 ಅಂಶವನ್ನು [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) ಜೊತೆಗೆ ಹುಡುಕಲು ಮತ್ತು ಅದನ್ನು [`createRoot`](/reference/react-dom/client/createRoot) ಗೆ ರವಾನಿಸಲು ಅನುಮತಿಸುತ್ತದೆ ಇದರಿಂದ ನೀವು ನಿಮ್ಮ ಸ್ವಂತ ರಿಯಾಕ್ಟ್ ಕೊಂಪೊನೆಂಟ್ವನ್ನು ಒಳಗೆ ಸಲ್ಲಿಸಬಹುದು: ```html index.html - My app + + My app +

This paragraph is a part of HTML.

@@ -132,7 +134,7 @@ This lets you find that HTML element with [`document.getElementById`](https://de ``` ```js src/index.js active -import { createRoot } from 'react-dom/client'; +import {createRoot} from 'react-dom/client'; function NavigationBar() { // TODO: Actually implement a navigation bar @@ -146,10 +148,10 @@ root.render(); -Notice how the original HTML content from `index.html` is preserved, but your own `NavigationBar` React component now appears inside the `