From f5015c18734dbb752bb5dc47baa09f390012fdc2 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Wed, 9 Oct 2019 15:54:59 +0400
Subject: [PATCH 1/2] Translate JSX in Depth

---
 content/docs/jsx-in-depth.md | 214 +++++++++++++++++------------------
 content/docs/nav.yml         |   2 +-
 2 files changed, 108 insertions(+), 108 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index eb3dc3a5b..598761230 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -1,6 +1,6 @@
 ---
 id: jsx-in-depth
-title: JSX In Depth
+title: Dərindən JSX
 permalink: docs/jsx-in-depth.html
 redirect_from:
   - "docs/jsx-spread.html"
@@ -13,31 +13,31 @@ redirect_from:
   - "docs/jsx-in-depth-ko-KR.html"
 ---
 
-Fundamentally, JSX just provides syntactic sugar for the `React.createElement(component, props, ...children)` function. The JSX code:
+Fundamental olaraq JSX, `React.createElement(component, props, ...children)` funksiyası üçün asan başa düşülə bilən sintaksisdir. Göstərilən JSX kodu:
 
 ```js
 <MyButton color="blue" shadowSize={2}>
-  Click Me
+  Tıkla
 </MyButton>
 ```
 
-compiles into:
+aşağıdakı koda kompilyasiya olunur:
 
 ```js
 React.createElement(
   MyButton,
   {color: 'blue', shadowSize: 2},
-  'Click Me'
+  'Tıkla'
 )
 ```
 
-You can also use the self-closing form of the tag if there are no children. So:
+Əgər uşaqlar yoxdursa, siz təqin özü bağlanan formasından istifadə edə bilərsiniz. Göstərilən kod:
 
 ```js
 <div className="sidebar" />
 ```
 
-compiles into:
+aşağıdakı koda kompilyasiya olunur:
 
 ```js
 React.createElement(
@@ -47,19 +47,19 @@ React.createElement(
 )
 ```
 
-If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
+Hər hansı bir JSX-in JavaScript-ə necə çevrildiyini yoxlamaq üçün [onlayn Babel kompilyatorundan istifadə edə bilərsiniz](babel://jsx-simple-example).
 
-## Specifying The React Element Type {#specifying-the-react-element-type}
+## React Element Tipinin Müəyyənləşdirilməsi {#specifying-the-react-element-type}
 
-The first part of a JSX tag determines the type of the React element.
+JSX təqinin ilk hissəsi React elementinin tipini təyin edir.
 
-Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX `<Foo />` expression, `Foo` must be in scope.
+Böyük hərf ilə yazılan tiplər JSX təqinin React komponentinə istinad etdiyini göstərir. Bu təqlər dəyişənin adından istifadə edərək kompilyasiya olunur. Bu səbəbdən, `<Foo />` JSX ifadəsindən istifadə etdikdə `Foo` dəyişəmi göstərilən scope-da olmalıdır.
 
-### React Must Be in Scope {#react-must-be-in-scope}
+### React Scope-da Olmalıdır {#react-must-be-in-scope}
 
-Since JSX compiles into calls to `React.createElement`, the `React` library must also always be in scope from your JSX code.
+JSX kodu `React.createElement` çağırışlarına kompilyasiya olduğundan `React` hər zaman JSX-in Scope-unda olmalıdır.
 
-For example, both of the imports are necessary in this code, even though `React` and `CustomButton` are not directly referenced from JavaScript:
+JavaScript-in `React` və `CustomButton` dəyişənlərinə birbaşa istinad etməməsinə baxmayaraq, aşağıdakı kodda hər iki idxalın olması vacibdir:
 
 ```js{1,2,5}
 import React from 'react';
@@ -71,18 +71,18 @@ function WarningButton() {
 }
 ```
 
-If you don't use a JavaScript bundler and loaded React from a `<script>` tag, it is already in scope as the `React` global.
+JavaScript paketləmə qurğusundan istifadə etmirinizsə və React-i `<script>` təqi ilə yükləyirsinizsə, React artıq `React` qlobal dəyişəni ilə scope-dadır.
 
-### Using Dot Notation for JSX Type {#using-dot-notation-for-jsx-type}
+### JSX Tipində Nöqtənin İstifadəsi {#using-dot-notation-for-jsx-type}
 
-You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if `MyComponents.DatePicker` is a component, you can use it directly from JSX with:
+JSX-dən React Komponentinə nöqtə ilə istinad etmək mümkündür. Bu sintaksis, bir moduldan bir neçə React komponentini ixrac etdikdə faydalı ola bilər. Məsələn, `MyComponents.DatePicker` komponentini JSX-dən birbaşa çağıra bilərsiniz:
 
 ```js{10}
 import React from 'react';
 
 const MyComponents = {
   DatePicker: function DatePicker(props) {
-    return <div>Imagine a {props.color} datepicker here.</div>;
+    return <div>Burada {props.color} rəngli tarix olduğunu fikirləşin.</div>;
   }
 }
 
@@ -91,49 +91,49 @@ function BlueDatePicker() {
 }
 ```
 
-### User-Defined Components Must Be Capitalized {#user-defined-components-must-be-capitalized}
+### İstifadəçi Tərəfindən Təyin Edilən Komponentlər Böyük Hərf ilə Yazılmalıdır {#user-defined-components-must-be-capitalized}
 
-When an element type starts with a lowercase letter, it refers to a built-in component like `<div>` or `<span>` and results in a string `'div'` or `'span'` passed to `React.createElement`. Types that start with a capital letter like `<Foo />` compile to `React.createElement(Foo)` and correspond to a component defined or imported in your JavaScript file.
+Element tipi kiçik hərf ilə yazıldıqda, `<div>` və ya `<span>` kimi daxili komponentlərə istinad edilir. Nəticədə, `React.createElement` funksiyasına `'div'` və ya `'span'` kimi mətnlər göndərilir. `<Foo />` formasında böyük hərf ilə yazılan tiplər `React.createElement(Foo)` funksiyasına kompilyasiya olunur və JavaScript faylında təyin edilən və ya modula idxal edilən komponentə istinad edilir.
 
-We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
+Biz komponentlərin böyük hərf ilə yazılmasını tövsiyyə edirik. Əgər sizdə kiçik hərf ilə başlayan komponent varsa, bu komponenti böyük hərf ilə yazılmış dəyişənə təyin edib, yeni dəyişəni JSX-də işlədin.
 
-For example, this code will not run as expected:
+Məsələn, aşağıdakı kod istədiyiniz kimi işləməyəcək:
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Wrong! This is a component and should have been capitalized:
+// Yanlışdır! Bu komponent böyük hərf ilə yazılmalıdır:
 function hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
-  return <div>Hello {props.toWhat}</div>;
+  // Düzdür! <div>-in etibarlı HTML təq olduğundan bu təq göstərildiyi formada işlədilə bilər:
+  return <div>Salam {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
+  // Yanlışdır! <hello /> kiçik hərf ilə yazıldığından React bu elementin HTML təq olduğunu fikirləşir:
   return <hello toWhat="World" />;
 }
 ```
 
-To fix this, we will rename `hello` to `Hello` and use `<Hello />` when referring to it:
+Bunu düzəltmək üçün, `hello` funksiyasının adını `Hello`-a dəyişib `<Hello />` JSX çağırışından istifadə edəcəyik:
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Correct! This is a component and should be capitalized:
+// Düzdür! Bu funksiya komponentdir deyə böyük hərf ilə yazılmalıdır:
 function Hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
-  return <div>Hello {props.toWhat}</div>;
+  // Düzdür! <div>-in etibarlı HTML təq olduğundan bu təq göstərildiyi formada işlədilə bilər:
+  return <div>Salam {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Correct! React knows <Hello /> is a component because it's capitalized.
-  return <Hello toWhat="World" />;
+  // Düzdür! <Hello /> böyük hərf ilə yazılıb deyə React bunun komponent olduğunu fikirləşir.
+  return <Hello toWhat="Dünya" />;
 }
 ```
 
-### Choosing the Type at Runtime {#choosing-the-type-at-runtime}
+### Tipin İcmal Zamanı Təyin Edilməsi {#choosing-the-type-at-runtime}
 
-You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:
+React tipinə ifadə təyin etmək mümkün deyil. Əgər ifadəni element tipi kimi göstərmək istəyirsinizsə bu ifadəni böyük hərf ilə yazılmış dəyişənə təyin edin. Bu, adətən prop əsasında fərqli komponent render etdikdə lazım olur:
 
 ```js{10,11}
 import React from 'react';
@@ -145,12 +145,12 @@ const components = {
 };
 
 function Story(props) {
-  // Wrong! JSX type can't be an expression.
+  // Yanlışdır! JSX tipi ifadə ola bilməz.
   return <components[props.storyType] story={props.story} />;
 }
 ```
 
-To fix this, we will assign the type to a capitalized variable first:
+Bunu düzəltmək üçün ifadəni böyük hərf ilə başlayan dəyişənə təyin edəcəyik:
 
 ```js{10-12}
 import React from 'react';
@@ -162,53 +162,53 @@ const components = {
 };
 
 function Story(props) {
-  // Correct! JSX type can be a capitalized variable.
+  // Düzdür! JSX tipi böyük hərf ilə yazılan dəyişən ola bilər.
   const SpecificStory = components[props.storyType];
   return <SpecificStory story={props.story} />;
 }
 ```
 
-## Props in JSX {#props-in-jsx}
+## JSX-də Proplar {#props-in-jsx}
 
-There are several different ways to specify props in JSX.
+JSX-də propları bir neçə formada göstərmək olar.
 
-### JavaScript Expressions as Props {#javascript-expressions-as-props}
+### Proplar kimi JavaScript İfadələri {#javascript-expressions-as-props}
 
-You can pass any JavaScript expression as a prop, by surrounding it with `{}`. For example, in this JSX:
+Propu `{}` ilə əhatə edərək istənilən JavaScript ifadəsini propa göndərmək mümkündür. Məsələn, aşağıdakı JSX-də:
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
 ```
 
-For `MyComponent`, the value of `props.foo` will be `10` because the expression `1 + 2 + 3 + 4` gets evaluated.
+`1 + 2 + 3 + 4` ifadəsinin hesablandığından `MyComponent` komponentində `props.foo`-nun dəyəri `10` olacaq.
 
-`if` statements and `for` loops are not expressions in JavaScript, so they can't be used in JSX directly. Instead, you can put these in the surrounding code. For example:
+`if` ifadələri və `for` tsikllar JavaScript ifadələri deyil. Bu səbəbdən, bu dəyişənləri JSX-də birbaşa istifadə etmək olmaz. Əvəzinə, siz bu blok kodlarını JSX-i əhatə edən kodda yaza bilərsiniz. Məsələn:
 
 ```js{3-7}
 function NumberDescriber(props) {
   let description;
   if (props.number % 2 == 0) {
-    description = <strong>even</strong>;
+    description = <strong>cüt</strong>;
   } else {
-    description = <i>odd</i>;
+    description = <i>tək</i>;
   }
-  return <div>{props.number} is an {description} number</div>;
+  return <div>{props.number} {description} rəqəmdir</div>;
 }
 ```
 
-You can learn more about [conditional rendering](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
+Digər bölmələrdən [şərtli render edilmə](/docs/conditional-rendering.html) və [tsikllar](/docs/lists-and-keys.html) haqqında məlumat ala bilərsiniz.
 
-### String Literals {#string-literals}
+### Mətn Propları {#string-literals}
 
-You can pass a string literal as a prop. These two JSX expressions are equivalent:
+Siz mətnləri prop kimi göndərə bilərsiniz. Aşağıdakı JSX ifadələri əvəz oluna bilər:
 
 ```js
-<MyComponent message="hello world" />
+<MyComponent message="salam dünya" />
 
-<MyComponent message={'hello world'} />
+<MyComponent message={'salam dünya'} />
 ```
 
-When you pass a string literal, its value is HTML-unescaped. So these two JSX expressions are equivalent:
+Mətn göndərdikdə, mətnin dəyəri HTML "escape" olunmur. Aşağıdalı dəyərlər əvəz oluna bilər:
 
 ```js
 <MyComponent message="&lt;3" />
@@ -216,11 +216,11 @@ When you pass a string literal, its value is HTML-unescaped. So these two JSX ex
 <MyComponent message={'<3'} />
 ```
 
-This behavior is usually not relevant. It's only mentioned here for completeness.
+Bu davranışların fərqi vacib deyil. Bu sənəddə göstərilməsinin əsas səbəbi tamamlıq üçündür.
 
-### Props Default to "True" {#props-default-to-true}
+### Propun Dəyəri Göstərilmədikdə "True" Olur {#props-default-to-true}
 
-If you pass no value for a prop, it defaults to `true`. These two JSX expressions are equivalent:
+Propa heç bir dəyər göndərilmədikdə, bu dəyər `true` olur. Aşağıdakı ifadələr əvəz oluna bilər:
 
 ```js
 <MyTextBox autocomplete />
@@ -228,24 +228,24 @@ If you pass no value for a prop, it defaults to `true`. These two JSX expression
 <MyTextBox autocomplete={true} />
 ```
 
-In general, we don't recommend using this because it can be confused with the [ES6 object shorthand](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` which is short for `{foo: foo}` rather than `{foo: true}`. This behavior is just there so that it matches the behavior of HTML.
+Normalda, biz dəyərin bu formada istifadəsini tövsiyyə etmirik. Çünki, bu dəyər [ES6 obyekt qısaltması ilə](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) çaşdırıla bilər. `{foo}` ifadəsi, `{foo: true}` ifadəsinin yox `{foo: foo}` ifadəsinin qısaldılmış formasıdır. Bu davranışın burada olmasının səbəbi HTML davranışı ilə uyğunlaşmasından gəlir.
 
-### Spread Attributes {#spread-attributes}
+### Yayma Atributlar {#spread-attributes}
 
-If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent:
+`props` obyekt kimi olduqda, `...` "yayma" operatorundan istifadə edərək bu obyekti bütünlükdə JSX-ə göndərə bilərsiniz. Aşağıdakı iki komponent əvəz oluna bilər:
 
 ```js{7}
 function App1() {
-  return <Greeting firstName="Ben" lastName="Hector" />;
+  return <Greeting firstName="Elçin" lastName="Məmmədov" />;
 }
 
 function App2() {
-  const props = {firstName: 'Ben', lastName: 'Hector'};
+  const props = {firstName: 'Elçin', lastName: 'Məmmədov'};
   return <Greeting {...props} />;
 }
 ```
 
-You can also pick specific props that your component will consume while passing all other props using the spread operator.
+Siz həmçinin komponentin udduğu propları seçib, digər propları yayma operatoru ilə göndərə bilərsiniz.
 
 ```js{2}
 const Button = props => {
@@ -257,60 +257,60 @@ const Button = props => {
 const App = () => {
   return (
     <div>
-      <Button kind="primary" onClick={() => console.log("clicked!")}>
-        Hello World!
+      <Button kind="primary" onClick={() => console.log("tıklandı!")}>
+        Salam Dünya!
       </Button>
     </div>
   );
 };
 ```
 
-In the example above, the `kind` prop is safely consumed and *is not* passed on to the `<button>` element in the DOM.
-All other props are passed via the `...other` object making this component really flexible. You can see that it passes an `onClick` and `children` props.
+Yuxarıdakı nümunədə `kind` propu udulub DOM-da olan `<button>` elementinə göndərilmir.
+Bütün digər proplar `...other` obyekti ötürülür və komponenti əyilən edir. Gördüyünüz kimi bu komponent `onClick` və `children` proplarını göndərir.
 
-Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or to pass invalid HTML attributes to the DOM. We recommend using this syntax sparingly.  
+Yayma atributlarını faydalı olmasına baxmayaraq, bu operator ilə lazımsız propları komponentlərə göndərmək və ya etibarsız HTML atributlarını DOM-a göndərmək asanlaşır. Bu sintaksisdən az istifadə etməyi tövsiyyə edirik.
 
-## Children in JSX {#children-in-jsx}
+## JSX-də Uşaqlar {#children-in-jsx}
 
-In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: `props.children`. There are several different ways to pass children:
+Açma və Bağlama təqləri olan bütün JSX ifadələrində olan kontent xüsusi prop ilə ötürülür: `props.children`. Uşaqları göndərməyin bir neçə yolu var:
 
-### String Literals {#string-literals-1}
+### Mətnlər ilə {#string-literals-1}
 
-You can put a string between the opening and closing tags and `props.children` will just be that string. This is useful for many of the built-in HTML elements. For example:
+Açma və bağlama təqlərinin arasına mətn təyin etdikdə `props.children` mətn olacaq. Bu, bir çox daxili HTML elementləri üçün faydalıdır. Məsələn:
 
 ```js
-<MyComponent>Hello world!</MyComponent>
+<MyComponent>Salam Dünya!</MyComponent>
 ```
 
-This is valid JSX, and `props.children` in `MyComponent` will simply be the string `"Hello world!"`. HTML is unescaped, so you can generally write JSX just like you would write HTML in this way:
+Bu etibarlı JSX ifadəsidir. `MyComponent`-in `props.children` propu `"Salam Dünya!"` mətni olacaq. HTML-in "escape" olunmadığından, JSX-də kodları HTML-dəki kimi yaza bilərsiniz:
 
 ```html
-<div>This is valid HTML &amp; JSX at the same time.</div>
+<div>Bu kod eyni zamanda etibarlı HTML &amp; JSX-dir.</div>
 ```
 
-JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space. So these all render to the same thing:
+JSX avtomatik olaraq boşluqları sətrin əvvəlindən və axırından silir. Əlavə olaraq, JSX boş sətrləridə silir. Təqlərə bitişik olan yeni sətrlər də silinir. Mətnin ortasında olan yeni sətrlər bir boşluq ilə əvəz olunur. Aşağıdalı bütün ifadələr eyni mətni render edir:
 
 ```js
-<div>Hello World</div>
+<div>Salam Dünya</div>
 
 <div>
-  Hello World
+  Salam Dünya
 </div>
 
 <div>
-  Hello
-  World
+  Salam
+  Dünya
 </div>
 
 <div>
 
-  Hello World
+  Salam Dünya
 </div>
 ```
 
-### JSX Children {#jsx-children}
+### JSX Uşaqları {#jsx-children}
 
-You can provide more JSX elements as the children. This is useful for displaying nested components:
+Siz digər JSX elementlərini də uşaq kimi göndərə bilərsiniz. Bu, iç-içə olan komponentləri göstərmək üçün faydalıdır:
 
 ```js
 <MyContainer>
@@ -319,35 +319,35 @@ You can provide more JSX elements as the children. This is useful for displaying
 </MyContainer>
 ```
 
-You can mix together different types of children, so you can use string literals together with JSX children. This is another way in which JSX is like HTML, so that this is both valid JSX and valid HTML:
+Fərqli tipli uşaqları bir yerdə işlətmək mümkündür. Yəni, siz mətnləri JSX uşaqları ilə birlikdə işlədə bilərsiniz. Bu, JSX-i HTML-ə oxşadan xüsusiyyətlərdən biridir. Aşağıdakı kod etibarlı JSX və HTML-dir:
 
 ```html
 <div>
-  Here is a list:
+  Bu siyahıdır:
   <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
+    <li>Element 1</li>
+    <li>Element 2</li>
   </ul>
 </div>
 ```
 
-A React component can also return an array of elements:
+React komponenti elementlər massivi də qaytara bilər:
 
 ```js
 render() {
-  // No need to wrap list items in an extra element!
+  // Sihayı elementlərini əlavə element ilə əhatə etmək lazım deyil!
   return [
     // Don't forget the keys :)
-    <li key="A">First item</li>,
-    <li key="B">Second item</li>,
-    <li key="C">Third item</li>,
+    <li key="A">Birinci element</li>,
+    <li key="B">İkinci element</li>,
+    <li key="C">Üçüncü element</li>,
   ];
 }
 ```
 
-### JavaScript Expressions as Children {#javascript-expressions-as-children}
+### Uşaqlar kimi JavaScript İfadələri {#javascript-expressions-as-children}
 
-You can pass any JavaScript expression as children, by enclosing it within `{}`. For example, these expressions are equivalent:
+Uşaqları `{}` ilə əhatə edərək, istədiyiniz JavaScript ifadəsini uşaq kimi göndərə bilərsiniz. Məsələn, aşağıdakı ifadələr əvəz olunandır:
 
 ```js
 <MyComponent>foo</MyComponent>
@@ -355,7 +355,7 @@ You can pass any JavaScript expression as children, by enclosing it within `{}`.
 <MyComponent>{'foo'}</MyComponent>
 ```
 
-This is often useful for rendering a list of JSX expressions of arbitrary length. For example, this renders an HTML list:
+Bu, adətən ixtiyari ölçüdə olan JSX ifadələri siyahısını render etmək üçün faydalıdır. Məsələn, aşağıdakı kod HTML siyahısı render edir:
 
 ```js{2,9}
 function Item(props) {
@@ -372,20 +372,20 @@ function TodoList() {
 }
 ```
 
-JavaScript expressions can be mixed with other types of children. This is often useful in lieu of string templates:
+JavaScript ifadələri digər uşaq tipləri ilə birlikdə işlədilə bilər. Bu, mətn şablonlarını əvəz etmək üçün faydalıdır:
 
 ```js{2}
 function Hello(props) {
-  return <div>Hello {props.addressee}!</div>;
+  return <div>Salam {props.addressee}!</div>;
 }
 ```
 
-### Functions as Children {#functions-as-children}
+### Uşaqlar kimi Funksiyalar {#functions-as-children}
 
-Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, `props.children` works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as `props.children`:
+Normally, JSX-ə əlavə edilən JavaScript ifadələr mətnə, React elementinə, və ya bu tiplərin siyahısına hesablanır. Lakin, `props.children` propu başqa hər hansı prop kimi işədildiyindən, istənilən tipli məlumat bu propa göndərilə bilər (yalnız React-in render etmək üçün anladığı tipə yox). Məsələn, xüsusi komponent callback-i `props.children`-dan çağıra bilər:
 
 ```js{4,13}
-// Calls the children callback numTimes to produce a repeated component
+// Uşağ callback-i numTimes qədər çağıraraq təkrarlanan komponent yaradır
 function Repeat(props) {
   let items = [];
   for (let i = 0; i < props.numTimes; i++) {
@@ -397,17 +397,17 @@ function Repeat(props) {
 function ListOfTenThings() {
   return (
     <Repeat numTimes={10}>
-      {(index) => <div key={index}>This is item {index} in the list</div>}
+      {(index) => <div key={index}>Elementin siyahıda yeri: {index}</div>}
     </Repeat>
   );
 }
 ```
 
-Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering. This usage is not common, but it works if you want to stretch what JSX is capable of.
+Xüsusi komponentin uşağına istənilən tipli məlumatı göndərmək olar. Vacib olan, komponentin nəticəsindən yaranan elementi React-in anlamasıdır. Uşaqların bu formada işlədilməsini çox yayılmamasına baxmayaraq bu formada uşaqları işlədə bilərsiniz.
 
-### Booleans, Null, and Undefined Are Ignored {#booleans-null-and-undefined-are-ignored}
+### Booleans, Null, və Undefined Nəzərə Alınmırlar {#booleans-null-and-undefined-are-ignored}
 
-`false`, `null`, `undefined`, and `true` are valid children. They simply don't render. These JSX expressions will all render to the same thing:
+`false`, `null`, `undefined`, və `true` dəyərləri uşaqlar üçün etibarlıdır. Sadəcə olaraq, bu dəyərlər render olunmurlar. Aşağıdakı JSX ifadələri eyni markapı render edəcəklər:
 
 ```js
 <div />
@@ -423,7 +423,7 @@ Children passed to a custom component can be anything, as long as that component
 <div>{true}</div>
 ```
 
-This can be useful to conditionally render React elements. This JSX renders the `<Header />` component only if `showHeader` is `true`:
+Bu, React elementlərini şərti render etmək üçün faydalıdır. Göstərilən JSX, `showHeader` `true` olduqda `<Header />` komponentini render edir:
 
 ```js{2}
 <div>
@@ -432,7 +432,7 @@ This can be useful to conditionally render React elements. This JSX renders the
 </div>
 ```
 
-One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), such as the `0` number, are still rendered by React. For example, this code will not behave as you might expect because `0` will be printed when `props.messages` is an empty array:
+Burada əsas istisna, '0' rəqəmi kimi [bəzi "falsy" dəyərlərin](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) React tərəfindən render edilməsidir. Məsələn, aşağıdakı nümunədə `props.messages` massivi boş olduqda '0' render edilir deyə, istədiyiniz nəticəni ala bilməyəcəksiniz:
 
 ```js{2}
 <div>
@@ -442,7 +442,7 @@ One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/doc
 </div>
 ```
 
-To fix this, make sure that the expression before `&&` is always boolean:
+Bunu düzəltmək üçün `&&`-dən olan ifadənin bolin olduğundan əmin olun:
 
 ```js{2}
 <div>
@@ -452,10 +452,10 @@ To fix this, make sure that the expression before `&&` is always boolean:
 </div>
 ```
 
-Conversely, if you want a value like `false`, `true`, `null`, or `undefined` to appear in the output, you have to [convert it to a string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) first:
+Əksinə,`false`, `true`, `null`, və ya `undefined` dəyərlərinin nəticədə görunməyini istəyirsinizsə, [bu dəyərləri mətnə çevirməlisiniz](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion):
 
 ```js{2}
 <div>
-  My JavaScript variable is {String(myVariable)}.
+  JavaScript dəyəri: {String(myVariable)}.
 </div>
 ```
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index ce5f2d67d..67cda7530 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -54,7 +54,7 @@
     - id: integrating-with-other-libraries
       title: Digər Kitabxanalar ilə İnteqrasiya
     - id: jsx-in-depth
-      title: JSX Dərindən
+      title: Dərindən JSX
     - id: optimizing-performance
       title: Performansın Optimallaşdırılması
     - id: portals

From d90dfaf4af4c039d253390ab99d1cf16b3c8946d Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <me@gasim.xyz>
Date: Thu, 10 Oct 2019 16:08:15 +0400
Subject: [PATCH 2/2] Fix JSX in Depth after self-review

---
 content/docs/jsx-in-depth.md | 60 ++++++++++++++++++------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 598761230..d2b229449 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -31,7 +31,7 @@ React.createElement(
 )
 ```
 
-Əgər uşaqlar yoxdursa, siz təqin özü bağlanan formasından istifadə edə bilərsiniz. Göstərilən kod:
+Əgər uşaqlar yoxdursa, təqin özü bağlanan formasından istifadə etmək mümkündür. Göstərilən kod:
 
 ```js
 <div className="sidebar" />
@@ -47,19 +47,19 @@ React.createElement(
 )
 ```
 
-Hər hansı bir JSX-in JavaScript-ə necə çevrildiyini yoxlamaq üçün [onlayn Babel kompilyatorundan istifadə edə bilərsiniz](babel://jsx-simple-example).
+Hər hansı bir JSX-in JavaScript-ə necə çevrildiyini yoxlamaq üçün [onlayn Babel kompilyatorundan](babel://jsx-simple-example) istifadə edə bilərsiniz.
 
 ## React Element Tipinin Müəyyənləşdirilməsi {#specifying-the-react-element-type}
 
 JSX təqinin ilk hissəsi React elementinin tipini təyin edir.
 
-Böyük hərf ilə yazılan tiplər JSX təqinin React komponentinə istinad etdiyini göstərir. Bu təqlər dəyişənin adından istifadə edərək kompilyasiya olunur. Bu səbəbdən, `<Foo />` JSX ifadəsindən istifadə etdikdə `Foo` dəyişəmi göstərilən scope-da olmalıdır.
+Böyük hərf ilə yazılan tiplər JSX təqinin React komponentinə istinad etdiyini göstərir. Bu təqlər dəyişənin adından istifadə edərək kompilyasiya olunur. Bu səbəbdən `<Foo />` JSX ifadəsindən istifadə etdikdə `Foo` dəyişəni göstərilən scope-da olmalıdır.
 
 ### React Scope-da Olmalıdır {#react-must-be-in-scope}
 
-JSX kodu `React.createElement` çağırışlarına kompilyasiya olduğundan `React` hər zaman JSX-in Scope-unda olmalıdır.
+JSX kodu `React.createElement` çağırışlarına kompilyasiya olduğundan `React` hər zaman JSX-in scope-unda olmalıdır.
 
-JavaScript-in `React` və `CustomButton` dəyişənlərinə birbaşa istinad etməməsinə baxmayaraq, aşağıdakı kodda hər iki idxalın olması vacibdir:
+JavaScript-in `React` və `CustomButton` dəyişənlərinə birbaşa istinad etmədiyinə baxmayaraq, aşağıdakı kodda hər iki idxalın olması vacibdir:
 
 ```js{1,2,5}
 import React from 'react';
@@ -71,11 +71,11 @@ function WarningButton() {
 }
 ```
 
-JavaScript paketləmə qurğusundan istifadə etmirinizsə və React-i `<script>` təqi ilə yükləyirsinizsə, React artıq `React` qlobal dəyişəni ilə scope-dadır.
+JavaScript paketləmə qurğusundan istifadə etmir və React-i `<script>` təqi ilə yükləyirsinizsə, React artıq `React` qlobal dəyişəni ilə scope-dadır.
 
 ### JSX Tipində Nöqtənin İstifadəsi {#using-dot-notation-for-jsx-type}
 
-JSX-dən React Komponentinə nöqtə ilə istinad etmək mümkündür. Bu sintaksis, bir moduldan bir neçə React komponentini ixrac etdikdə faydalı ola bilər. Məsələn, `MyComponents.DatePicker` komponentini JSX-dən birbaşa çağıra bilərsiniz:
+JSX-dən React Komponentinə nöqtə ilə istinad etmək mümkündür. Bu sintaksis bir moduldan bir neçə React komponentini ixrac etdikdə faydalı ola bilər. Məsələn, `MyComponents.DatePicker` komponentini JSX-dən birbaşa çağıra bilərsiniz:
 
 ```js{10}
 import React from 'react';
@@ -93,9 +93,9 @@ function BlueDatePicker() {
 
 ### İstifadəçi Tərəfindən Təyin Edilən Komponentlər Böyük Hərf ilə Yazılmalıdır {#user-defined-components-must-be-capitalized}
 
-Element tipi kiçik hərf ilə yazıldıqda, `<div>` və ya `<span>` kimi daxili komponentlərə istinad edilir. Nəticədə, `React.createElement` funksiyasına `'div'` və ya `'span'` kimi mətnlər göndərilir. `<Foo />` formasında böyük hərf ilə yazılan tiplər `React.createElement(Foo)` funksiyasına kompilyasiya olunur və JavaScript faylında təyin edilən və ya modula idxal edilən komponentə istinad edilir.
+Element tipi kiçik hərf ilə yazıldıqda `<div>` və ya `<span>` kimi daxili komponentlərə istinad edilir. Nəticədə, `React.createElement` funksiyasına `'div'` və ya `'span'` kimi mətnlər göndərilir. `<Foo />` formasında böyük hərf ilə yazılan tiplər `React.createElement(Foo)` funksiyasına kompilyasiya olunur və JavaScript faylında təyin edilən və ya modula idxal edilən komponentə istinad edilir.
 
-Biz komponentlərin böyük hərf ilə yazılmasını tövsiyyə edirik. Əgər sizdə kiçik hərf ilə başlayan komponent varsa, bu komponenti böyük hərf ilə yazılmış dəyişənə təyin edib, yeni dəyişəni JSX-də işlədin.
+Biz komponentlərin böyük hərf ilə yazılmasını tövsiyyə edirik. Əgər sizdə kiçik hərf ilə başlayan komponent varsa, bu komponenti böyük hərf ilə yazılmış dəyişənə təyin edib yeni dəyişəni JSX-də işlədin.
 
 Məsələn, aşağıdakı kod istədiyiniz kimi işləməyəcək:
 
@@ -133,7 +133,7 @@ function HelloWorld() {
 
 ### Tipin İcmal Zamanı Təyin Edilməsi {#choosing-the-type-at-runtime}
 
-React tipinə ifadə təyin etmək mümkün deyil. Əgər ifadəni element tipi kimi göstərmək istəyirsinizsə bu ifadəni böyük hərf ilə yazılmış dəyişənə təyin edin. Bu, adətən prop əsasında fərqli komponent render etdikdə lazım olur:
+React tipinə ifadə təyin etmək mümkün deyil. Əgər ifadəni element tipi kimi göstərmək istəyirsinizsə, bu ifadəni böyük hərf ilə yazılmış dəyişənə təyin edin. Bu, adətən prop əsasında fərqli komponent render etdikdə lazım olur:
 
 ```js{10,11}
 import React from 'react';
@@ -182,7 +182,7 @@ Propu `{}` ilə əhatə edərək istənilən JavaScript ifadəsini propa göndə
 
 `1 + 2 + 3 + 4` ifadəsinin hesablandığından `MyComponent` komponentində `props.foo`-nun dəyəri `10` olacaq.
 
-`if` ifadələri və `for` tsikllar JavaScript ifadələri deyil. Bu səbəbdən, bu dəyişənləri JSX-də birbaşa istifadə etmək olmaz. Əvəzinə, siz bu blok kodlarını JSX-i əhatə edən kodda yaza bilərsiniz. Məsələn:
+`if` ifadələri və `for` tsikllar JavaScript ifadələri deyil. Bu səbəbdən, bu dəyişənləri JSX-də birbaşa istifadə etmək olmaz. Əvəzinə, bu blok kodlarını JSX-i əhatə edən kodda yaza bilərsiniz. Məsələn:
 
 ```js{3-7}
 function NumberDescriber(props) {
@@ -196,11 +196,11 @@ function NumberDescriber(props) {
 }
 ```
 
-Digər bölmələrdən [şərtli render edilmə](/docs/conditional-rendering.html) və [tsikllar](/docs/lists-and-keys.html) haqqında məlumat ala bilərsiniz.
+Digər bölmələrdə [şərtli render edilmə](/docs/conditional-rendering.html) və [tsikllar](/docs/lists-and-keys.html) haqqında məlumat ala bilərsiniz.
 
 ### Mətn Propları {#string-literals}
 
-Siz mətnləri prop kimi göndərə bilərsiniz. Aşağıdakı JSX ifadələri əvəz oluna bilər:
+Mətnləri prop kimi göndərmək mümkündür. Aşağıdakı JSX ifadələri əvəz oluna bilər:
 
 ```js
 <MyComponent message="salam dünya" />
@@ -220,7 +220,7 @@ Bu davranışların fərqi vacib deyil. Bu sənəddə göstərilməsinin əsas s
 
 ### Propun Dəyəri Göstərilmədikdə "True" Olur {#props-default-to-true}
 
-Propa heç bir dəyər göndərilmədikdə, bu dəyər `true` olur. Aşağıdakı ifadələr əvəz oluna bilər:
+Propa heç bir dəyər göndərilmədikdə bu dəyər `true` olur. Aşağıdakı ifadələr əvəz oluna bilər:
 
 ```js
 <MyTextBox autocomplete />
@@ -232,7 +232,7 @@ Normalda, biz dəyərin bu formada istifadəsini tövsiyyə etmirik. Çünki, bu
 
 ### Yayma Atributlar {#spread-attributes}
 
-`props` obyekt kimi olduqda, `...` "yayma" operatorundan istifadə edərək bu obyekti bütünlükdə JSX-ə göndərə bilərsiniz. Aşağıdakı iki komponent əvəz oluna bilər:
+`props` obyekt formasında olduqda `...` "yayma" operatorundan istifadə edərək bu obyekti bütünlükdə JSX-ə göndərə bilərsiniz. Aşağıdakı iki komponent əvəz oluna bilər:
 
 ```js{7}
 function App1() {
@@ -245,7 +245,7 @@ function App2() {
 }
 ```
 
-Siz həmçinin komponentin udduğu propları seçib, digər propları yayma operatoru ilə göndərə bilərsiniz.
+Siz həmçinin komponentin udduğu propları seçib digər propları yayma operatoru ilə göndərə bilərsiniz.
 
 ```js{2}
 const Button = props => {
@@ -266,13 +266,13 @@ const App = () => {
 ```
 
 Yuxarıdakı nümunədə `kind` propu udulub DOM-da olan `<button>` elementinə göndərilmir.
-Bütün digər proplar `...other` obyekti ötürülür və komponenti əyilən edir. Gördüyünüz kimi bu komponent `onClick` və `children` proplarını göndərir.
+Bütün digər proplara `...other` obyekti ötürülərək komponenti əyilən edir. Gördüyünüz kimi bu komponent `onClick` və `children` proplarını göndərir.
 
 Yayma atributlarını faydalı olmasına baxmayaraq, bu operator ilə lazımsız propları komponentlərə göndərmək və ya etibarsız HTML atributlarını DOM-a göndərmək asanlaşır. Bu sintaksisdən az istifadə etməyi tövsiyyə edirik.
 
 ## JSX-də Uşaqlar {#children-in-jsx}
 
-Açma və Bağlama təqləri olan bütün JSX ifadələrində olan kontent xüsusi prop ilə ötürülür: `props.children`. Uşaqları göndərməyin bir neçə yolu var:
+Açma və bağlama təqləri olan bütün JSX ifadələrində olan kontent xüsusi prop ilə ötürülür: `props.children`. Uşaqları göndərməyin bir neçə yolu var:
 
 ### Mətnlər ilə {#string-literals-1}
 
@@ -282,13 +282,13 @@ Açma və bağlama təqlərinin arasına mətn təyin etdikdə `props.children`
 <MyComponent>Salam Dünya!</MyComponent>
 ```
 
-Bu etibarlı JSX ifadəsidir. `MyComponent`-in `props.children` propu `"Salam Dünya!"` mətni olacaq. HTML-in "escape" olunmadığından, JSX-də kodları HTML-dəki kimi yaza bilərsiniz:
+Bu, etibarlı JSX ifadəsidir. `MyComponent`-in `props.children` propu `"Salam Dünya!"` mətni olacaq. HTML-in "escape" olunmadığından JSX kodunu HTML-dəki kimi yaza bilərsiniz:
 
 ```html
 <div>Bu kod eyni zamanda etibarlı HTML &amp; JSX-dir.</div>
 ```
 
-JSX avtomatik olaraq boşluqları sətrin əvvəlindən və axırından silir. Əlavə olaraq, JSX boş sətrləridə silir. Təqlərə bitişik olan yeni sətrlər də silinir. Mətnin ortasında olan yeni sətrlər bir boşluq ilə əvəz olunur. Aşağıdalı bütün ifadələr eyni mətni render edir:
+JSX avtomatik olaraq boşluqları sətrin əvvəlindən və axırından silir. Əlavə olaraq, JSX boş sətrləri də silir. Təqlərə bitişik olan yeni sətrlər də silinir. Mətnin ortasında olan yeni sətrlər bir boşluq ilə əvəz olunur. Aşağıdakı bütün ifadələr eyni mətni render edir:
 
 ```js
 <div>Salam Dünya</div>
@@ -319,7 +319,7 @@ Siz digər JSX elementlərini də uşaq kimi göndərə bilərsiniz. Bu, iç-iç
 </MyContainer>
 ```
 
-Fərqli tipli uşaqları bir yerdə işlətmək mümkündür. Yəni, siz mətnləri JSX uşaqları ilə birlikdə işlədə bilərsiniz. Bu, JSX-i HTML-ə oxşadan xüsusiyyətlərdən biridir. Aşağıdakı kod etibarlı JSX və HTML-dir:
+Fərqli tipli uşaqları bir yerdə işlətmək mümkündür. Yəni, mətnləri JSX uşaqları ilə birlikdə işlədə bilərsiniz. Bu, JSX-i HTML-ə oxşadan xüsusiyyətlərdən biridir. Aşağıdakı kod həm etibarlı JSX, həm də etibarlı HTML-dir:
 
 ```html
 <div>
@@ -331,13 +331,13 @@ Fərqli tipli uşaqları bir yerdə işlətmək mümkündür. Yəni, siz mətnl
 </div>
 ```
 
-React komponenti elementlər massivi də qaytara bilər:
+React komponenti elementlər massivi də qaytara bilir:
 
 ```js
 render() {
   // Sihayı elementlərini əlavə element ilə əhatə etmək lazım deyil!
   return [
-    // Don't forget the keys :)
+    // Açarları yaddan çıxarmayın :)
     <li key="A">Birinci element</li>,
     <li key="B">İkinci element</li>,
     <li key="C">Üçüncü element</li>,
@@ -347,7 +347,7 @@ render() {
 
 ### Uşaqlar kimi JavaScript İfadələri {#javascript-expressions-as-children}
 
-Uşaqları `{}` ilə əhatə edərək, istədiyiniz JavaScript ifadəsini uşaq kimi göndərə bilərsiniz. Məsələn, aşağıdakı ifadələr əvəz olunandır:
+Uşaqları `{}` ilə əhatə edərək istədiyiniz JavaScript ifadəsini uşaq kimi göndərə bilərsiniz. Məsələn, aşağıdakı ifadələr əvəz olunandır:
 
 ```js
 <MyComponent>foo</MyComponent>
@@ -382,10 +382,10 @@ function Hello(props) {
 
 ### Uşaqlar kimi Funksiyalar {#functions-as-children}
 
-Normally, JSX-ə əlavə edilən JavaScript ifadələr mətnə, React elementinə, və ya bu tiplərin siyahısına hesablanır. Lakin, `props.children` propu başqa hər hansı prop kimi işədildiyindən, istənilən tipli məlumat bu propa göndərilə bilər (yalnız React-in render etmək üçün anladığı tipə yox). Məsələn, xüsusi komponent callback-i `props.children`-dan çağıra bilər:
+Normally, JSX-ə əlavə edilən JavaScript ifadələr mətnə, React elementinə, və ya bu tiplərin siyahısına hesablanır. Lakin, `props.children` propu başqa hər hansı prop kimi işədildiyindən, bu propa istənilən tipli məlumat göndərilə bilər (yalnız React-in render etmək üçün anladığı tipə yox). Məsələn, xüsusi komponent callback-i `props.children`-dan çağıra bilər:
 
 ```js{4,13}
-// Uşağ callback-i numTimes qədər çağıraraq təkrarlanan komponent yaradır
+// Uşaq callback-i numTimes qədər çağıraraq təkrarlanan komponent yaradır
 function Repeat(props) {
   let items = [];
   for (let i = 0; i < props.numTimes; i++) {
@@ -403,7 +403,7 @@ function ListOfTenThings() {
 }
 ```
 
-Xüsusi komponentin uşağına istənilən tipli məlumatı göndərmək olar. Vacib olan, komponentin nəticəsindən yaranan elementi React-in anlamasıdır. Uşaqların bu formada işlədilməsini çox yayılmamasına baxmayaraq bu formada uşaqları işlədə bilərsiniz.
+Xüsusi komponentin uşağına istənilən tipli məlumatı göndərmək olar. Vacib olan, React-in komponentin nəticəsindən yaranan elementi anlamasıdır. Uşaqların bu formada işlədilməsinin çox yayılmadığına baxmayaraq bu formada uşaqları işlədə bilərsiniz.
 
 ### Booleans, Null, və Undefined Nəzərə Alınmırlar {#booleans-null-and-undefined-are-ignored}
 
@@ -423,7 +423,7 @@ Xüsusi komponentin uşağına istənilən tipli məlumatı göndərmək olar. V
 <div>{true}</div>
 ```
 
-Bu, React elementlərini şərti render etmək üçün faydalıdır. Göstərilən JSX, `showHeader` `true` olduqda `<Header />` komponentini render edir:
+Bu, React elementlərini şərti render etmək üçün faydalıdır. Göstərilən JSX `showHeader` dəyişəni `true` olduqda `<Header />` komponentini render edir:
 
 ```js{2}
 <div>
@@ -432,7 +432,7 @@ Bu, React elementlərini şərti render etmək üçün faydalıdır. Göstəril
 </div>
 ```
 
-Burada əsas istisna, '0' rəqəmi kimi [bəzi "falsy" dəyərlərin](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) React tərəfindən render edilməsidir. Məsələn, aşağıdakı nümunədə `props.messages` massivi boş olduqda '0' render edilir deyə, istədiyiniz nəticəni ala bilməyəcəksiniz:
+Burada əsas istisna '0' rəqəmi kimi [bəzi "falsy" dəyərlərinin](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) React tərəfindən render edilməsidir. Məsələn, aşağıdakı nümunədə `props.messages` massivi boş olduqda '0' render edildiyi üçün istədiyiniz nəticəni ala bilməyəcəksiniz:
 
 ```js{2}
 <div>
@@ -442,7 +442,7 @@ Burada əsas istisna, '0' rəqəmi kimi [bəzi "falsy" dəyərlərin](https://de
 </div>
 ```
 
-Bunu düzəltmək üçün `&&`-dən olan ifadənin bolin olduğundan əmin olun:
+Bunu düzəltmək üçün `&&`-dən öncə olan ifadənin bolin olduğundan əmin olun:
 
 ```js{2}
 <div>