Reviewed and corrected translation to make more sense.

Author: ytrkptl

src/content/learn/add-react-to-an-existing-project.md

@@ -10,7 +10,7 @@ title: હાલના પ્રોજેક્ટમાં React ઉમેર
 
 <Note>
 
-**લોકલી ડેવલપમેન્ટ માટે તમારે [Node.js](https://nodejs.org/en/) ઇન્સ્ટોલ કરવાની જરૂર છે.** જો કે તમે ઓનલાઇન અથવા તો સાધારણ HTML પેજ પર [React નો પ્રયાસ કરી શકો છો](/learn/installation#try-react), વાસ્તવિક રીતે મોટાભાગના જાવાસ્ક્રિપ્ટ સાધનો જેનો તમે ડેવલપમેન્ટ માટે ઉપયોગ કરવા માંગો છો તે Node.js ની જરૂરિયાત ધરાવશે.
+**લોકલ ડેવલપમેન્ટ માટે તમારે [Node.js](https://nodejs.org/en/) ઇન્સ્ટોલ કરવાની જરૂર છે.** જો કે તમે ઓનલાઇન અથવા તો સાધારણ HTML પેજ પર [React નો પ્રયાસ કરી શકો છો](/learn/installation#try-react), વાસ્તવિક રીતે મોટાભાગના જાવાસ્ક્રિપ્ટ સાધનો જેનો તમે ડેવલપમેન્ટ માટે ઉપયોગ કરવા માંગો છો તે Node.js ની જરૂરિયાત ધરાવે છે.
 
 </Note>
 
@@ -19,8 +19,8 @@ title: હાલના પ્રોજેક્ટમાં React ઉમેર
 ધારો કે તમારી પાસે `example.com` પર એક વેબ એપ્લિકેશન છે જે બીજી સર્વર ટેક્નોલોજીથી (જેમ કે Rails થી) બનેલું છે, અને તમે `example.com/some-app/` થી શરૂ થતા તમામ રૂટ્સને સંપૂર્ણપણે React માં અમલ કરવા માંગો છો.
 
 તેને સેટઅપ કરવા માટે અમે અહીં ભલામણ કરીએ છીએ:
-1. **React-આધારિત ફ્રેમવર્કનો ઉપયોગ કરીને તમારી એપ્લિકેશનનો React ભાગ બનાવો**(/learn/start-a-new-react-project).
-2. **તમારા ફ્રેમવર્કના કન્ફિગરેશનમાં `/some-app` ને base path તરીકે સ્પષ્ટ કરો** (અહીં કેવી રીતે કરવું તે છે: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
+1. [`React-આધારિત ફ્રેમવર્કનો`](/learn/start-a-new-react-project) ઉપયોગ કરીને **તમારી એપ્લિકેશનનો React ભાગ બનાવો**.
+2. **તમારા ફ્રેમવર્કના કન્ફિગરેશનમાં `/some-app` ને base path તરીકે સ્પષ્ટ કરો** (આ રીતે: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
 3. **તમારા સર્વર અથવા પ્રોક્સીને એવી રીતે ગોઠવો** કે જેથી કરીને `/some-app/` હેઠળની તમામ વિનંતીઓ (requests) તમારી React એપ્લિકેશન દ્વારા હેન્ડલ કરવામાં આવે.
 
 આવી ગોઠવણી સુનિશ્ચિત કરે છે કે તમારી એપ્લિકેશનનો React ભાગ તે ફ્રેમવર્કમાં રહેલી [શ્રેષ્ઠ પદ્ધતિઓનો લાભ મેળવી શકે](/learn/creating-a-react-app#full-stack-frameworks).
@@ -33,7 +33,7 @@ title: હાલના પ્રોજેક્ટમાં React ઉમેર
 
 તમે આ બે સ્ટેપમાં કરી શકો છો:
 
-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/) પેકેજ રજિસ્ટ્રીમાંથી પેકેજો (ઉદાહરણ તરીકે, React) નો ઉપયોગ કરવા દે.
+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/) પેકેજ રજિસ્ટ્રીમાંથી પેકેજો (ઉદાહરણ તરીકે, React) નો ઉપયોગ કરવા દે.
 2. **તમારા React કમ્પોનેન્ટ્સને રેન્ડર કરો** એ પેજમાં કે જ્યાં તમે તેમને જોવા માંગો છો.
 
 ચોક્કસ અભિગમ તમારા હાલના પેજ સેટઅપ પર આધાર રાખે છે, તો ચાલો અમુક વિગતો જોઈએ.
@@ -42,17 +42,17 @@ title: હાલના પ્રોજેક્ટમાં React ઉમેર
 
 મોડ્યુલર જાવાસ્ક્રિપ્ટ એન્વાયર્નમેન્ટ તમને તમારા React કમ્પોનેન્ટ્સને એક જ ફાઇલમાં બધો કોડ લખવાને બદલે વ્યક્તિગત ફાઇલોમાં લખવા દે છે. તે તમને [`npm`](https://www.npmjs.com) રજિસ્ટ્રી પર અન્ય ડેવલપર્સ દ્વારા પ્રકાશિત અદ્ભુત પેકેજોનો ઉપયોગ કરવાની મંજૂરી પણ આપે છે -- જેમાં React નો પણ સમાવેશ થાય છે! તમે આ કેવી રીતે કરશો તે તમારા હાલના સેટઅપ પર આધારિત છે:
 
-* **જો તમારી એપ્લિકેશન `import` સ્ટેટમેન્ટનો ઉપયોગ કરનારી ફાઇલોમાં પહેલેથી જ વિભાજિત છે,** તો તમારી પાસે જે સેટઅપ છે તેનો જ ઉપયોગ કરવાનો પ્રયાસ કરો. તપાસો કે તમારા JS કોડમાં `<div />` લખવાથી સિન્ટેક્સ એરર આવે છે કે નહીં. જો તે સિન્ટેક્સ એરરનું કારણ બને છે, તો તમારે JSX નો ઉપયોગ કરવા માટે [`Babel સાથે તમારા જાવાસ્ક્રિપ્ટ કોડને ટ્રાન્સફોર્મ કરવાની`](https://babeljs.io/setup) અને [`Babel React preset`](https://babeljs.io/docs/babel-preset-react) સક્ષમ કરવાની જરૂર પડી શકે છે.
+* **જો તમારી એપ્લિકેશન `import` સ્ટેટમેન્ટનો ઉપયોગ કરનારી ફાઇલોમાં પહેલેથી જ વિભાજિત છે,** તો તમારી પાસે જે સેટઅપ છે તેનો જ ઉપયોગ કરવાનો પ્રયાસ કરો. તપાસો કે તમારા JS કોડમાં `<div />` લખવાથી સિન્ટેક્સ એરર આવે છે કે નહીં. જો તે સિન્ટેક્સ એરરનું કારણ બને છે, તો તમારે JSX નો ઉપયોગ કરવા માટે [`Babel દ્વારા તમારા જાવાસ્ક્રિપ્ટ કોડને ટ્રાન્સફોર્મ કરવાની`](https://babeljs.io/setup) અને [`Babel React preset`](https://babeljs.io/docs/babel-preset-react) સક્ષમ કરવાની જરૂર પડી શકે છે.
 
-* **જો તમારી એપ્લિકેશન પાસે જાવાસ્ક્રિપ્ટ મોડ્યુલો કમ્પાઇલ કરવા માટે હાલનું સેટઅપ નથી,** તો તેને [`Vite`](https://github.com/vitejs/awesome-vite#integrations-with-backends) દ્વારા સેટઅપ કરો. Vite સમુદાય Rails, Django, અને Laravel સહિત બેકએન્ડ ફ્રેમવર્ક સાથે [`ઘણા ઇન્ટિગ્રેશન જાળવે છે`](https://github.com/vitejs/awesome-vite#integrations-with-backends). જો તમારું બેકએન્ડ ફ્રેમવર્ક લિસ્ટમાં નથી, તો તમારા બેકએન્ડ સાથે Vite બિલ્ડ્સને જાતે ઇન્ટિગ્રેટ કરવા માટે [`આ માર્ગદર્શિકાને અનુસરો`](https://vite.dev/guide/backend-integration.html).
+* **જો તમારી એપ્લિકેશન પાસે જાવાસ્ક્રિપ્ટ મોડ્યુલો કમ્પાઇલ કરવા માટે હાલનું સેટઅપ નથી,** તો તેને [`Vite`](https://github.com/vitejs/awesome-vite#integrations-with-backends) દ્વારા સેટઅપ કરો. Vite સમુદાય Rails, Django, અને Laravel સહિત [`બેકએન્ડ ફ્રેમવર્ક સાથે ઘણા ઇન્ટિગ્રેશન જાળવે છે`](https://github.com/vitejs/awesome-vite#integrations-with-backends). જો તમારું બેકએન્ડ ફ્રેમવર્ક લિસ્ટમાં નથી, તો તમારા બેકએન્ડ સાથે Vite બિલ્ડ્સને જાતે ઇન્ટિગ્રેટ કરવા માટે [`આ માર્ગદર્શિકાને અનુસરો`](https://vite.dev/guide/backend-integration.html).
 
 તમારું સેટઅપ કામ કરે છે કે નહીં તે તપાસવા માટે, તમારા પ્રોજેક્ટ ફોલ્ડરમાં આ આદેશ (command) ચલાવો:
 
 <TerminalBlock>
 npm install react react-dom
 </TerminalBlock>
 
-પછી તમારી મુખ્ય જાવાસ્ક્રિપ્ટ ફાઇલની ટોચ પર કોડની આ લાઈનો ઉમેરો (તેને `index.js` અથવા `main.js` કહી શકાય):
+પછી તમારી મુખ્ય જાવાસ્ક્રિપ્ટ ફાઇલની ટોચ પર કોડની આ લાઈનો ઉમેરો (તે `index.js` અથવા `main.js` કહેવાતી હશે):
 
 <Sandpack>
 
@@ -80,7 +80,7 @@ root.render(<h1>Hello, world</h1>);
 
 </Sandpack>
 
-જો તમારા પેજની સમગ્ર સામગ્રી "Hello, world!" દ્વારા બદલાયેલ , તો બધું કામ કરી ગયું! આગળ વાંચતા રહો.
+જો તમારા પેજની સમગ્ર સામગ્રી "Hello, world!" દ્વારા બદલાઈ ગઈ છે, તો બધું કામ કરી ગયું! આગળ વાંચતા રહો.
 
 <Note>
 હાલના પ્રોજેક્ટમાં પ્રથમ વખત મોડ્યુલર જાવાસ્ક્રિપ્ટ એન્વાયર્નમેન્ટને એકીકૃત કરવું ભયજનક (intimidating) લાગી શકે છે પરંતુ તે યોગ્ય છે! જો તમે અટવાઈ જાઓ, તો અમારા [`સમુદાય સંસાધનો`](/community) અથવા [`Vite Chat`](https://chat.vite.dev/) અજમાવી જુઓ.
@@ -101,19 +101,19 @@ document.body.innerHTML = '<div id="app"></div>';
 const root = createRoot(document.getElementById('app'));
 root.render(<h1>Hello, world</h1>);
 ```
-અલબત્ત, તમે વાસ્તવમાં હાલની HTML સામગ્રીને સાફ (clear) કરવા માંગતા નથી!
+અલબત્ત, તમે વાસ્તવમાં હાલની HTML સામગ્રીને સાફ (clear) કરવા માંગશો નહીં!
 
 આ કોડ કાઢી નાખો.
 
-તેના બદલે, તમે કદાચ તમારા React કમ્પોનેન્ટ્સને તમારા HTML માં ચોક્કસ જગ્યાએ રેન્ડર કરવા માંગશો. તમારું HTML પેજ ખોલો (અથવા સર્વર ટેમ્પલેટ્સ જે તેને જનરેટ કરે છે) અને કોઈપણ ટેગમાં એક યુનિક [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) એટ્રિબ્યુટ ઉમેરો, ઉદાહરણ તરીકે:
+તેના બદલે, તમે કદાચ તમારા React કમ્પોનેન્ટ્સને તમારા HTML માં ચોક્કસ જગ્યાઓએ રેન્ડર કરવા માંગશો. તમારું HTML પેજ ખોલો (અથવા સર્વર ટેમ્પલેટ્સ જે તેને જનરેટ કરે છે) અને કોઈપણ ટેગમાં એક યુનિક [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) એટ્રિબ્યુટ ઉમેરો, ઉદાહરણ તરીકે:
 
 ```html
 <!-- ... somewhere in your html ... -->
 <nav id="navigation"></nav>
 <!-- ... more html ... -->
 ```
 
-આ તમને [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) દ્વારા  તે HTML એલીમેન્ટને  શોધવા દે છે અને તેને [`createRoot`](/reference/react-dom/client/createRoot) માં પાસ કરવા દે છે જેથી તમે અંદર તમારો પોતાનો React કમ્પોનેન્ટ રેન્ડર કરી શકો:
+આ તમને [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) દ્વારા તે HTML એલીમેન્ટને શોધવા દેશે અને તેને [`createRoot`](/reference/react-dom/client/createRoot) માં પાસ કરવા દેશે જેથી તમે અંદર તમારો પોતાનો React કમ્પોનેન્ટ રેન્ડર કરી શકો:
 
 <Sandpack>
 
@@ -144,9 +144,9 @@ root.render(<NavigationBar />);
 
 </Sandpack>
 
-નોંધ કરો કે `index.html` માંથી મૂળ HTML સામગ્રી કેવી રીતે સચવાય છે, પરંતુ તમારો પોતાનો `NavigationBar` React કમ્પોનેન્ટ હવે તમારા HTML માં `<nav id="navigation">` ની અંદર દેખાય છે. હાલના HTML પેજ ની અંદર React કમ્પોનેન્ટ્સને રેન્ડર કરવા વિશે વધુ જાણવા માટે [`createRoot ઉપયોગ દસ્તાવેજીકરણ`](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) વાંચો.
+નોંધ કરો કે `index.html` માંથી મૂળ HTML સામગ્રી કેવી રીતે સચવાયેલ છે, પરંતુ તમારો પોતાનો `NavigationBar` React કમ્પોનેન્ટ હવે તમારા HTML માં `<nav id="navigation">` ની અંદર દેખાય છે. હાલના HTML પેજ ની અંદર React કમ્પોનેન્ટ્સને રેન્ડર કરવા વિશે વધુ જાણવા માટે [`createRoot ઉપયોગ દસ્તાવેજીકરણ`](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) વાંચો.
 
-જ્યારે તમે હાલના પ્રોજેક્ટમાં React અપનાવો છો, ત્યારે નાના ઇન્ટરેક્ટિવ કમ્પોનેન્ટ્સ (જેમ કે બટનો) થી પ્રારંભ કરવું સામાન્ય છે, અને પછી ધીમે ધીમે ઊંચે ચડવું (moving upwards) જ્યાં સુધી આખરે તમારું આખું પેજ React થી બનેલું હોય. જો તમે ક્યારેય તે બિંદુએ પહોંચો છો, તો અમે React નો સૌથી વધુ લાભ મેળવવા માટે તરત જ [React ફ્રેમવર્ક](/learn/start-a-new-react-project) પર સ્થાનાંતરિત થવાની ભલામણ કરીએ છીએ.
+જ્યારે તમે હાલના પ્રોજેક્ટમાં React અપનાવો, ત્યારે નાના ઇન્ટરેક્ટિવ કમ્પોનેન્ટ્સ (જેમ કે બટનો) થી પ્રારંભ કરવું સામાન્ય છે, અને પછી ધીમે ધીમે ઊંચે ચડવું (moving upwards) જ્યાં સુધી આખરે તમારું આખું પેજ React થી બનેલું હોય. જો તમે ક્યારેય તે બિંદુએ પહોંચો છો, તો અમે React નો સૌથી વધુ લાભ મેળવવા માટે તરત જ [React ફ્રેમવર્ક](/learn/start-a-new-react-project) પર સ્થાનાંતરિત થવાની ભલામણ કરીએ છીએ.
 
 ## હાલની નેટિવ મોબાઇલ એપ્લિકેશનમાં React Native નો ઉપયોગ કરવો {/*using-react-native-in-an-existing-native-mobile-app*/}