diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 0dd56e38a..673799e86 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -1,6 +1,6 @@
---
id: introducing-jsx
-title: JSX પરિચય
+title: JSX નો પરિચય
permalink: docs/introducing-jsx.html
prev: hello-world.html
next: rendering-elements.html
@@ -9,32 +9,32 @@ next: rendering-elements.html
આ વેરિયેબલ ડેકલેરેશન ધ્યાનમાં લો:
```js
-const element =
Hello, world!
;
+const element = કેમ છો?
;
```
-આ ફની ટેગ સિન્ટેક્સ ન તો string અને HTML છે.
+આ ફની ટેગ સિન્ટેક્સ ન તો string કે HTML છે.
-તેને JSX કહેવામાં આવે છે, અને તે JavaScript માટે સિન્ટેક્સ એક્સ્ટેન્શન છે. UI એ જેવો હોવો જોઈએ તેનું વર્ણન કરવા માટે, અમે તેને React સાથે ઉપયોગ કરવાની ભલામણ કરીએ છીએ. JSX તમને ટેમ્પલેટ ભાષાની યાદ અપાવી શકે છે, પરંતુ તે JavaScript ની સંપૂર્ણ ક્ષમતાઓ સાથે આવે છે.
+તેને JSX કહેવામાં આવે છે, અને તે વિસ્તૃત JavaScript સિન્ટેક્સ છે. UI એ કેવું હોવું જોઈએ તેનું વર્ણન કરવા માટે, અમે તેને React સાથે ઉપયોગ કરવાની ભલામણ કરીએ છીએ. JSX તમને ટેમ્પલેટ ભાષાની યાદ અપાવી શકે છે, પરંતુ તે JavaScript ની સંપૂર્ણ ક્ષમતાઓ સાથે આવે છે.
-JSX React "એલિમેન્ટ્સ" બનાવે છે. અમે તેમને [આગલા વિભાગમાં](/docs/rendering-elements.html) DOMમાં રેન્ડર કરવાનું શીખીશું. નીચે, તમે પ્રારંભ કરવા માટે JSXની બેઝિક જરૂરી બાબતો શોધી શકો છો.
+JSX React "એલિમેન્ટ્સ" બનાવે છે. આપણે તેમને [આગલા વિભાગમાં](/docs/rendering-elements.html) DOMમાં રેન્ડર કરવાનું શીખીશું. આપને પ્રારંભ કરવા માટે JSX ની પ્રાથમિક જરૂરી બાબતો નીચે મુજબ છે
### શા માટે JSX? {#why-jsx}
-React એ હકીકતને સ્વીકારે છે કે લોજિકને રજૂ કરવું મૂળ રીતે અન્ય UI લોજિક સાથે જોડાયેલું છે: events કેવી રીતે હૅન્ડલ થાય છે, state સમય સાથે કેવી રીતે બદલાય છે અને ડિસ્પ્લે માટે ડેટા કેવી રીતે તૈયાર કરવામાં આવે છે.
+React એ હકીકતને સ્વીકારે છે કે લોજિકને રજૂ કરવું મૂળ રીતે અન્ય UI લોજિક સાથે જોડાયેલું છે. જેમ કે, events કેવી રીતે હૅન્ડલ થાય છે, state સમય સાથે કેવી રીતે બદલાય છે અને ડિસ્પ્લે માટે ડેટા કેવી રીતે તૈયાર કરવામાં આવે છે.
-અલગ ફાઇલોમાં માર્કઅપ અને લૉજિકને મૂકીને આર્ટીફિશ્યલ રીતે *ટેક્નોલોજીઓ* ને અલગ કરવાને બદલે, React "કોમ્પોનેન્ટ્સ" સાથે [*કન્સર્નસ* અલગ](https://en.wikipedia.org/wiki/Separation_of_concerns) પાડે છે, જેમાં બંને શામેલ છે. અમે [આગળના ભાગમાં](/docs/components-and-props.html) કોમ્પોનેન્ટ્સ પર પાછા આવીશું, પરંતુ જો તમે JSમાં માર્કઅપ લખવા હજી સુધી કમ્ફર્ટેબલ નથી, [આ વાત](https://www.youtube.com/watch?v=x7cQ3mrcKaY) અન્યથા તમને ખાતરી આપી શકે છે.
+અલગ ફાઇલોમાં માર્કઅપ અને લૉજિકને મૂકીને આર્ટીફિશ્યલ રીતે *ટેક્નોલોજીઓ* ને અલગ કરવાને બદલે, React, ઢીલી રીતે જોડાયેલા એવા "કોમ્પોનેન્ટ્સ" કે જેમાં બંને શામેલ છે એના દ્વારા [*કન્સર્નસ* અલગ](https://en.wikipedia.org/wiki/Separation_of_concerns) પાડે છે. અમે [આગળના ભાગમાં](/docs/components-and-props.html) કોમ્પોનેન્ટ્સ પર પાછા આવીશું, પરંતુ જો તમે JSમાં માર્કઅપ લખવા હજી સુધી કમ્ફર્ટેબલ નથી, તો [આ વાત](https://www.youtube.com/watch?v=x7cQ3mrcKaY) તમને સમજાવી શકે છે.
-JSXનો ઉપયોગ કરીને React [જરૂરી નથી](/docs/react-without-jsx.html), પરંતુ મોટાભાગના લોકોને JavaScript કોડની અંદર UI સાથે કામ કરતી વખતે વિઝ્યુઅલ સહાય તરીકે સહાયરૂપ લાગે છે. તે Reactને વધુ ઉપયોગી એરર અને વોર્નિંગ મેસેજિસ બતાવવામાં પણ મદદ કરે છે.
+JSXનો ઉપયોગ કરવો એ Reactમાં [જરૂરી નથી](/docs/react-without-jsx.html), પરંતુ મોટાભાગના લોકોને JavaScript કોડની અંદર UI સાથે કામ કરતી વખતે વિઝ્યુઅલ સહાય તરીકે સહાયરૂપ લાગે છે. તે Reactને વધુ ઉપયોગી એરર અને વોર્નિંગ સૂચનો બતાવવામાં પણ મદદ કરે છે.
તે સાથે, ચાલો શરૂ કરીએ!
-### એક્સપ્રેશન JSXમાં એમ્બેડ કરો {#embedding-expressions-in-jsx}
+### JSXમાં એક્સપ્રેશન એમ્બેડ કરવું {#embedding-expressions-in-jsx}
-નીચેનાં ઉદાહરણમાં, અમે `name` વેરિયેબલને ડિક્લેર કરીએ છીએ અને પછી તેને JSXની અંદર કર્લી બ્રેસિસમાં લપેટીને તેનો ઉપયોગ કરીએ છીએ:
+નીચેનાં ઉદાહરણમાં, અમે `name` વેરિયેબલને ડિક્લેર કરીએ છીએ અને પછી તેને JSXની અંદર છગડીયા કૌંસમાં લખીને તેનો ઉપયોગ કરીએ છીએ:
```js{1,2}
-const name = 'Josh Perez';
-const element = Hello, {name}
;
+const name = 'ગુણવંત શાહ';
+const element = કેમ છો, {name}
;
ReactDOM.render(
element,
@@ -42,9 +42,9 @@ ReactDOM.render(
);
```
-તમે JSXમાં કર્લી બ્રેસિસની અંદર કોઈપણ વેલિડ [JavaScript એક્સપ્રેશન](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) લખી શકો છો. ઉદાહરણ તરીકે, `2 + 2`, `user.firstName`, અથવા `formatName(user)` એ બધી વેલિડ JavaScript એક્સપ્રેશન છે.
+તમે JSXમાં છગડીયા કૌંસની અંદર કોઈપણ માન્ય [JavaScript એક્સપ્રેશન](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) લખી શકો છો. ઉદાહરણ તરીકે, `2 + 2`, `user.firstName`, અથવા `formatName(user)` એ બધી માન્ય JavaScript એક્સપ્રેશન છે.
-નીચેનાં ઉદાહરણમાં, અમે JavaScript `formatName(user)` ફંકશનનું પરિણામ `` એલિમેન્ટમાં એમ્બેડ કરીએ છીએ.
+નીચેનાં ઉદાહરણમાં, આપણે JavaScript `formatName(user)` ફંકશનનું પરિણામ `` એલિમેન્ટમાં એમ્બેડ કરીશું.
```js{12}
function formatName(user) {
@@ -52,13 +52,13 @@ function formatName(user) {
}
const user = {
- firstName: 'Harper',
- lastName: 'Perez'
+ firstName: 'નયન',
+ lastName: 'શાહ'
};
const element = (
- Hello, {formatName(user)}!
+ કેમ છો, {formatName(user)}!
);
@@ -70,7 +70,7 @@ ReactDOM.render(
[](codepen://introducing-jsx)
-વાંચી શકાય તે માટે અમે મલ્ટિપલ લાઇન્સ પર JSXને વિભાજિત કર્યું. જ્યારે તે આવશ્યક નથી, ત્યારે આ કરવાથી, અમે તેને [ઓટોમેટિક સેમિકોલોન ઇન્સેરશન](https://stackoverflow.com/q/2846283) ના ભૂલોને ટાળવા માટે કૌંસમાં`()` આવરવાની ભલામણ કરીએ છીએ.
+વાંચી શકાય તે માટે અમે બહુવિધ લાઇન્સમાં JSXને વિભાજિત કર્યું છે. તે કરવું આવશ્યક નથી, પરંતુ જો કરો, તો તેને [ઓટોમેટિક સેમિકોલોન ઇન્સેરશન](https://stackoverflow.com/q/2846283) ની ભૂલોને ટાળવા માટે, કૌંસમાં`()` આવરવાની અમે ભલામણ કરીએ છીએ.
### JSX એક એક્સપ્રેશન પણ છે {#jsx-is-an-expression-too}
@@ -81,37 +81,37 @@ ReactDOM.render(
```js{3,5}
function getGreeting(user) {
if (user) {
- return Hello, {formatName(user)}!
;
+ return કેમ છો, {formatName(user)}!
;
}
- return Hello, Stranger.
;
+ return કેમ છો, અપરિચિત.
;
}
```
### JSXમાં અટ્ટ્રીબ્યુટસ સ્પેસિફાય કરવા {#specifying-attributes-with-jsx}
-તમે string લિટરલ્સને અટ્ટ્રીબ્યુટસ તરીકે સ્પેસિફાય કરવા માટે કઓટસનો ઉપયોગ કરી શકો છો:
+તમે string લિટરલ્સને અટ્ટ્રીબ્યુટસ તરીકે સ્પેસિફાય કરવા માટે અવતરણ ચિન્હોનો ઉપયોગ કરી શકો છો:
```js
const element =
;
```
-તમે અટ્ટ્રીબ્યુટમાં JavaScript એક્સપ્રેશનને એમ્બેડ કરવા માટે કર્લી બ્રેસિસનો પણ ઉપયોગ કરી શકો છો:
+તમે અટ્ટ્રીબ્યુટમાં JavaScript એક્સપ્રેશનને એમ્બેડ કરવા માટે છગડીયા કૌંસનો પણ ઉપયોગ કરી શકો છો:
```js
const element = ;
```
-એટ્રિબ્યુટમાં JavaScript એક્સપ્રેશનને એમ્બેડ કરતી વખતે કર્લી બ્રેસિસની આસપાસ કઓટસ મૂકો નહીં. તમારે કઓટસ (string વૅલ્યુ માટે) અથવા કર્લી બ્રેસિસ (એક્સપ્રેશન માટે) નો ઉપયોગ કરવો જોઈએ, પરંતુ બંને સમાન અટ્ટ્રીબ્યુટમાં નહીં.
+એટ્રિબ્યુટમાં JavaScript એક્સપ્રેશનને એમ્બેડ કરતી વખતે છગડીયા કૌંસની આસપાસ અવતરણ ચિન્હો મૂકવું નહીં. તમારે અવતરણ ચિન્હો (string વૅલ્યુ માટે) અથવા છગડીયા કૌંસ (એક્સપ્રેશન માટે) નો ઉપયોગ કરવો જોઈએ, પરંતુ બંને સમાન અટ્ટ્રીબ્યુટમાં નહીં.
>**ચેતવણી:**
>
->JSX, HTML કરતા JavaScriptની નજીક છે, ત્યારબાદ React DOM, HTML એટ્રિબ્યુટ નામોની જગ્યાએ `camelCase` પ્રોપર્ટી નૅમિંગ કન્વેનશનનો ઉપયોગ કરે છે.
+>JSX, HTML કરતા JavaScriptની નજીક છે, જેથી React DOM, HTML એટ્રિબ્યુટ નામોની જગ્યાએ `camelCase` પ્રોપર્ટી નૅમિંગ પ્રણાલીનો ઉપયોગ કરે છે.
>
>ઉદાહરણ તરીકે, `class` JSXમાં બને છે [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className), અને `tabindex` બને છે [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).
### JSXમાં ચિલડ્રન સ્પેસિફાય કરવા {#specifying-children-with-jsx}
-જો ટૅગ ખાલી હોય, તો તમે તેને તરત જ `/>` XML ની જેમ બંધ કરી શકો છો:
+જો ટૅગ ખાલી હોય, તો તમે તેને તરત જ `/>` દ્વારા XML ની જેમ બંધ કરી શકો છો:
```js
const element = ;
@@ -122,8 +122,8 @@ JSX ટૅગ્સમાં ચિલડ્રન શામેલ હોઈ શ
```js
const element = (
-
Hello!
- Good to see you here.
+ કેમ છો?
+ તમને અહીં મળીને આનંદ થયો.
);
```
@@ -138,18 +138,18 @@ const title = response.potentiallyMaliciousInput;
const element = {title}
;
```
-ડિફૉલ્ટ રૂપે, React DOM રેન્ડરિંગ કરતા પહેલા JSXમાં એમ્બેડ કરેલી કોઈપણ વૅલ્યુઝ [છોડી દે](https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) છે. આથી તે સુનિશ્ચિત કરે છે કે તમે એવી કોઈપણ વસ્તુને ઇન્જેક્ટ કરી શકતા નથી જે તમારી એપ્લિકેશનમાં સ્પષ્ટ રીતે લખાઈ નથી. રેન્ડર કરવામાં આવે તે પહેલાં બધું જ stringમાં રૂપાંતરિત થાય છે. આ [XSS (ક્રોસ-સાઇટ-સ્ક્રિપ્ટીંગ)](https://en.wikipedia.org/wiki/Cross-site_scripting) એટેક્સને અટકાવવામાં મદદ કરે છે.
+મૂળભૂત રીતે, React DOM રેન્ડરિંગ કરતા પહેલા JSXમાં એમ્બેડ કરેલી કોઈપણ વૅલ્યુઝ [છોડી દે](https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) છે. આથી તે સુનિશ્ચિત કરે છે કે તમે એવી કોઈપણ વસ્તુને ઇન્જેક્ટ કરી શકતા નથી જે તમારી એપ્લિકેશનમાં સ્પષ્ટ રીતે લખાઈ નથી. રેન્ડર કરવામાં આવે તે પહેલાં બધું જ stringમાં રૂપાંતરિત થાય છે. આ [XSS (ક્રોસ-સાઇટ-સ્ક્રિપ્ટીંગ)](https://en.wikipedia.org/wiki/Cross-site_scripting) એટેક્સને અટકાવવામાં મદદ કરે છે.
### JSX ઓબ્જેક્ટો રજૂ કરે છે {#jsx-represents-objects}
-Babel JSX ને `React.createElement()` કૉલ્સ પર કંપાયલ કરે છે.
+Babel JSX ને `React.createElement()` કૉલ્સ માં કંપાયલ કરે છે.
આ બે ઉદાહરણો સરખા છે:
```js
const element = (
- Hello, world!
+ કેમ છો?
);
```
@@ -158,11 +158,11 @@ const element = (
const element = React.createElement(
'h1',
{className: 'greeting'},
- 'Hello, world!'
+ 'કેમ છો?'
);
```
-બગ-ફ્રી કોડ લખવા માટે `React.createElement()` કેટલાક તપાસ કરે છે પરંતુ આવશ્યક રીતે તે આના જેવી ઑબ્જેક્ટ બનાવે છે:
+બગ-ફ્રી(ક્ષતિ રહિત) કોડ લખવા માટે `React.createElement()` કેટલાક તપાસ કરે છે પરંતુ આવશ્યક રીતે તે આના જેવો ઑબ્જેક્ટ બનાવે છે:
```js
// નોંધ: આ માળખું સરળ છે
@@ -170,15 +170,15 @@ const element = {
type: 'h1',
props: {
className: 'greeting',
- children: 'Hello, world!'
+ children: 'કેમ છો?'
}
};
```
-આ ઑબ્જેક્ટ્સને "React elements" કહેવામાં આવે છે. તમે તેમનો આ રીતે વિચાર કરી શકો છો કે સ્ક્રીન પર તમે જે જોવા માંગો છો તે તેનું વર્ણન છે. React આ ઓબ્જેક્ટો વાંચે છે અને DOM બનાવવા અને તેને અપ તુ ડેટ રાખવા માટે તેનો ઉપયોગ કરે છે.
+આ ઑબ્જેક્ટ્સને "React elements" કહેવામાં આવે છે. તમે તેમનો આ રીતે વિચાર કરી શકો છો કે સ્ક્રીન પર તમે જે જોવા માંગો છો તે તેનું વર્ણન છે. React આ ઓબ્જેક્ટો વાંચે છે અને DOM બનાવવા અને તેને અપ ટુ ડેટ રાખવા માટે તેનો ઉપયોગ કરે છે.
-અમે આગલા વિભાગમાં DOM પર React elements રેન્ડરિંગ શીખીશું.
+અમે આગલા વિભાગમાં DOM પર React elements રેન્ડર કરતા શીખીશું.
>**ટિપ:**
>
->અમે તમારી પસંદગીના એડિટર માટે ["Babel" લેંગ્વેજ ડેફિનશનનો](https://babeljs.io/docs/editors) ઉપયોગ કરવાની ભલામણ કરીએ છીએ જેથી બંને ES6 અને JSX કોડ યોગ્ય રીતે હાઈલાઈટ થાય. આ વેબસાઇટ [ઓશનિક નેક્સ્ટ](https://labs.voronianski.com/oceanic-next-color-scheme/) કલર સ્કિમનો ઉપયોગ કરે છે જે તેની સાથે કોમ્પેટિબલ છે.
+>અમે તમારી પસંદગીના એડિટર માટે ["Babel" લેંગ્વેજ ડેફિનશનનો](https://babeljs.io/docs/editors) ઉપયોગ કરવાની ભલામણ કરીએ છીએ જેથી બંને ES6 અને JSX કોડ યોગ્ય રીતે હાઈલાઈટ થાય. આ વેબસાઇટ [ઓશનિક નેક્સ્ટ](https://labs.voronianski.com/oceanic-next-color-scheme/) કલર સ્કિમનો ઉપયોગ કરે છે જે તેની સાથે અનુરૂપ છે.