From 90fa54985fd1165bfa5d56b86c27253c96957b9c Mon Sep 17 00:00:00 2001
From: Ediiik <eduard.poracky@gmail.com>
Date: Sat, 20 Jan 2018 23:29:21 +0100
Subject: [PATCH 001/118] Fix typo

---
 content/docs/static-type-checking.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
index 3436c4c43..910dab5ac 100644
--- a/content/docs/static-type-checking.md
+++ b/content/docs/static-type-checking.md
@@ -2,7 +2,7 @@
 id: static-type-checking
 title: Static Type Checking
 permalink: docs/static-type-checking.html
-prev: typechecking-with-prototypes.html
+prev: typechecking-with-proptypes.html
 next: refs-and-the-dom.html
 ---
 

From 984abd2539119819608590ef68042ee404b56276 Mon Sep 17 00:00:00 2001
From: Edouard Alvard <essential@withedouard.com>
Date: Mon, 9 Jul 2018 16:34:33 +0200
Subject: [PATCH 002/118] Fix typo

---
 content/tutorial/tutorial.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 9a0523248..f09dda71c 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -215,7 +215,7 @@ Congratulations! You've just "passed a prop" from a parent Board component to a
 
 ### Making an Interactive Component
 
-Let's fill the Square component with an "X" when we click it. 
+Let's fill the Square component with an "X" when we click it.
 First, change the button tag that is returned from the Square component's `render()` function to this:
 
 ```javascript{4}
@@ -605,7 +605,7 @@ We have changed `this.props` to `props` both times it appears.
 
 We now need to fix an obvious defect in our tic-tac-toe game: the "O"s cannot be marked on the board.
 
-We'll set the the first move to be "X" by default. We can set this default by modifying the initial state in our Board constructor:
+We'll set the first move to be "X" by default. We can set this default by modifying the initial state in our Board constructor:
 
 ```javascript{6}
 class Board extends React.Component {
@@ -1003,7 +1003,7 @@ In JavaScript, arrays have a [`map()` method](https://developer.mozilla.org/en-U
 ```js
 const numbers = [1, 2, 3];
 const doubled = numbers.map(x => x * 2); // [2, 4, 6]
-``` 
+```
 
 Using the `map` method, we can map our history of moves to React elements representing buttons on the screen, and display a list of buttons to "jump" to past moves.
 

From a8e5cc424f7d798b101584fa55bdb406ff213856 Mon Sep 17 00:00:00 2001
From: Leigh Halliday <leighhalliday@gmail.com>
Date: Thu, 25 Oct 2018 12:59:31 -0400
Subject: [PATCH 003/118] Fixing a small grammer mistake on the code-splitting
 page

---
 content/docs/code-splitting.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 132fa99a4..091ea3dd8 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -117,7 +117,7 @@ parse the dynamic import syntax but is not transforming it. For that you will ne
 >
 > `React.lazy` and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we still recommend [React Loadable](https://github.com/thejameskyle/react-loadable). It has a nice [guide for bundle splitting with server-side rendering](https://github.com/thejameskyle/react-loadable#------------server-side-rendering).
 
-The `React.lazy` function lets you render an dynamic import as a regular component.
+The `React.lazy` function lets you render a dynamic import as a regular component.
 
 **Before:**
 

From a531a0f89d7d8f227db17cf4c68276f8a16ef5be Mon Sep 17 00:00:00 2001
From: Tushar Khatiwada <khatiwadatushar@outlook.com>
Date: Fri, 26 Oct 2018 15:31:58 +0545
Subject: [PATCH 004/118] Small typo fix

---
 content/docs/hooks-faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index c57e200c0..cfd11da01 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -109,7 +109,7 @@ There are a few more heuristics, and they might change over time as we fine-tune
 
 ### How do lifecycle methods correspond to Hooks?
 
-* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing it is expensive, you can pass a function to `useState`.
+* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing is expensive, you can pass a function to `useState`.
 
 * `getDerivedStateFromProps`: Schedule an update [while rendering](#how-do-i-implement-getderivedstatefromprops) instead.
 

From 451a96c311f145aea332d17585e5ec2425332474 Mon Sep 17 00:00:00 2001
From: Misha Moroshko <michael.moroshko@gmail.com>
Date: Fri, 26 Oct 2018 16:18:29 -0700
Subject: [PATCH 005/118] Tip => Note

"Tip" usually contains an action for you to perform.
"Note" is more appropriate here since it's just an FYI.
---
 content/docs/hooks-faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index ca01054c1..89c0da712 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -396,7 +396,7 @@ In large component trees, an alternative we recommend is to pass down a `dispatc
 const TodosDispatch = React.createContext(null);
 
 function TodosApp() {
-  // Tip: `dispatch` won't change between re-renders
+  // Note: `dispatch` won't change between re-renders
   const [todos, dispatch] = useReducer(todosReducer);
 
   return (

From 7fd8a8dfd8b5ef639fac7f30cd4a014ae5e9dd43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9liton=20Nordt?= <hnordt@hnordt.com>
Date: Sun, 28 Oct 2018 16:40:21 -0300
Subject: [PATCH 006/118] Fix typo in Hooks FAQ

---
 content/docs/hooks-faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index ca01054c1..395a33baf 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -407,7 +407,7 @@ function TodosApp() {
 }
 ```
 
-Any child in the tree inside `TodosApp` can read use the `dispatch` function to pass actions up to `TodosApp`:
+Any child in the tree inside `TodosApp` can use the `dispatch` function to pass actions up to `TodosApp`:
 
 ```js{2,3}
 function DeepChild(props) {

From 9e9647c8a196b598477fa45357cd6a9ece6e482c Mon Sep 17 00:00:00 2001
From: Narin Luangrath <narin.luangrath@gmail.com>
Date: Fri, 11 Jan 2019 11:03:04 -0800
Subject: [PATCH 007/118] Fix typo in profiler-readme

`aso` -> `also`
---
 content/blog/2018-09-10-introducing-the-react-profiler.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/blog/2018-09-10-introducing-the-react-profiler.md b/content/blog/2018-09-10-introducing-the-react-profiler.md
index d73131fcb..47211d370 100644
--- a/content/blog/2018-09-10-introducing-the-react-profiler.md
+++ b/content/blog/2018-09-10-introducing-the-react-profiler.md
@@ -140,7 +140,7 @@ It also shows that each time it rendered, it was the most "expensive" component
 
 To view this chart, either double-click on a component _or_ select a component and click on the blue bar chart icon in the right detail pane.
 You can return to the previous chart by clicking the "x" button in the right detail pane.
-You can aso double click on a particular bar to view more information about that commit.
+You can also double click on a particular bar to view more information about that commit.
 
 ![How to view all renders for a specific component](../images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif)
 

From b3d150358829e057fb6045aac73c238f883283b9 Mon Sep 17 00:00:00 2001
From: natusaspire <natusaspire@gmail.com>
Date: Sun, 13 Jan 2019 00:30:23 +0200
Subject: [PATCH 008/118] fix typo in blog post

---
 content/blog/2018-06-07-you-probably-dont-need-derived-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md
index 6e71ef838..9d3337c86 100644
--- a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md
+++ b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md
@@ -213,7 +213,7 @@ To recap, when designing a component, it is important to decide whether its data
 Instead of trying to **"mirror" a prop value in state**, make the component **controlled**, and consolidate the two diverging values in the state of some parent component. For example, rather than a child accepting a "committed" `props.value` and tracking a "draft" `state.value`, have the parent manage both `state.draftValue` and `state.committedValue` and control the child's value directly. This makes the data flow more explicit and predictable.
 
 For **uncontrolled** components, if you're trying to reset state when a particular prop (usually an ID) changes, you have a few options:
-* **Recomendation: To reset _all internal state_, use the `key` attribute.**
+* **Recommendation: To reset _all internal state_, use the `key` attribute.**
 * Alternative 1: To reset _only certain state fields_, watch for changes in a special property (e.g. `props.userID`).
 * Alternative 2: You can also consider fall back to an imperative instance method using refs.
 

From d8a83092174f4d7a4b6e4cf68fdd7bae54a0cb73 Mon Sep 17 00:00:00 2001
From: Prashant Andani <prashant.andani@ymedialabs.com>
Date: Wed, 16 Jan 2019 21:18:03 +0530
Subject: [PATCH 009/118] Typo fix

---
 content/blog/2013-06-27-community-roundup-3.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/blog/2013-06-27-community-roundup-3.md b/content/blog/2013-06-27-community-roundup-3.md
index 69041ea09..2d297f20f 100644
--- a/content/blog/2013-06-27-community-roundup-3.md
+++ b/content/blog/2013-06-27-community-roundup-3.md
@@ -49,7 +49,7 @@ The highlight of this week is that an interaction-heavy app has been ported to R
 
 [Joel Burget](http://joelburget.com/) wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.
 
-> The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.
+> The problem here is that we're trying to manipulate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.
 >
 > What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).
 >

From dfaa41deabada361a0f93c7f58a50931a8a33fd5 Mon Sep 17 00:00:00 2001
From: evolveris <corneliastn@gmail.com>
Date: Sat, 19 Jan 2019 11:43:17 +0000
Subject: [PATCH 010/118] Fix typo

---
 content/docs/strict-mode.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md
index 09b3b9e5d..889490b5e 100644
--- a/content/docs/strict-mode.md
+++ b/content/docs/strict-mode.md
@@ -57,7 +57,7 @@ React used to support `findDOMNode` to search the tree for a DOM node given a cl
 
 `findDOMNode` can also be used on class components but this was breaking abstraction levels by allowing a parent to demand that certain children was rendered. It creates a refactoring hazard where you can't change the implementation details of a component because a parent might be reaching into its DOM node. `findDOMNode` only returns the first child, but with the use of Fragments, it is possible for a component to render multiple DOM nodes. `findDOMNode` is a one time read API. It only gave you an answer when you asked for it. If a child component renders a different node, there is no way to handle this change. Therefore `findDOMNode` only worked if components always return a single DOM node that never changes.
 
-You can instead make this explicit by pass a ref to your custom component and pass that along to the DOM using [ref forwarding](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
+You can instead make this explicit by passing a ref to your custom component and pass that along to the DOM using [ref forwarding](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
 
 You can also add a wrapper DOM node in your component and attach a ref directly to it.
 

From 573da866666f33d43b8617e5fd94d56de4eb0fd1 Mon Sep 17 00:00:00 2001
From: Prashant Andani <prashant.andani@ymedialabs.com>
Date: Wed, 6 Feb 2019 22:46:24 +0530
Subject: [PATCH 011/118] Add https for javascript.info

---
 content/docs/getting-started.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md
index 8ad77b1ac..86e15c843 100644
--- a/content/docs/getting-started.md
+++ b/content/docs/getting-started.md
@@ -79,7 +79,7 @@ We recommend going through [this JavaScript overview](https://developer.mozilla.
 
 >Tip
 >
->Whenever you get confused by something in JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](http://javascript.info/) are great websites to check. There are also [community support forums](/community/support.html) where you can ask for help.
+>Whenever you get confused by something in JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](https://javascript.info/) are great websites to check. There are also [community support forums](/community/support.html) where you can ask for help.
 
 ### Practical Tutorial
 

From 4aa208e59dcd2322188c746c50c983ece65d8ad5 Mon Sep 17 00:00:00 2001
From: "adeel.imran" <adeel.imran@venturedive.com>
Date: Thu, 7 Feb 2019 11:42:13 +0500
Subject: [PATCH 012/118] updated grammer

---
 content/docs/hooks-reference.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index 6a8d8a664..752f53ef7 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -199,7 +199,7 @@ function reducer(state, action) {
   }
 }
 
-function Counter({initialCount}) {
+function Counter({initialState}) {
   const [state, dispatch] = useReducer(reducer, initialState);
   return (
     <>

From 7e4ac52af4dc93b1d1b46cb39ead62b450e94b98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?=
 <m.goleb@gmail.com>
Date: Thu, 7 Feb 2019 14:41:33 +0100
Subject: [PATCH 013/118] HTTPS-ify most insecure URLs in content/docs (& one
 in Acknowledgments)

This is a followup to #1157
---
 content/docs/accessibility.md                 | 38 +++++++++----------
 content/docs/add-react-to-a-website.md        |  4 +-
 content/docs/addons-perf.md                   |  4 +-
 content/docs/addons-shallow-renderer.md       |  2 +-
 content/docs/addons-test-utils.md             |  4 +-
 content/docs/addons-update.md                 |  4 +-
 content/docs/code-splitting.md                |  2 +-
 content/docs/codebase-overview.md             |  4 +-
 content/docs/create-a-new-react-app.md        |  6 +--
 content/docs/design-principles.md             |  6 +--
 content/docs/faq-functions.md                 |  2 +-
 content/docs/faq-state.md                     |  2 +-
 content/docs/getting-started.md               |  4 +-
 content/docs/handling-events.md               |  2 +-
 content/docs/higher-order-components.md       |  6 +--
 content/docs/how-to-contribute.md             |  4 +-
 .../docs/integrating-with-other-libraries.md  | 22 +++++------
 content/docs/introducing-jsx.md               |  6 +--
 content/docs/reconciliation.md                |  2 +-
 content/docs/reference-dom-elements.md        |  2 +-
 content/docs/reference-glossary.md            |  2 +-
 content/docs/reference-test-renderer.md       |  4 +-
 content/docs/state-and-lifecycle.md           | 14 +++----
 content/docs/static-type-checking.md          |  2 +-
 content/docs/thinking-in-react.md             |  6 +--
 content/docs/uncontrolled-components.md       |  2 +-
 src/pages/acknowledgements.html.js            |  8 ++--
 27 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index d387921ca..451ea2cc8 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -19,8 +19,8 @@ The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) pr
 The following WCAG checklists provide an overview:
 
 - [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
-- [WCAG checklist from WebAIM](http://webaim.org/standards/wcag/checklist)
-- [Checklist from The A11Y Project](http://a11yproject.com/checklist.html)
+- [WCAG checklist from WebAIM](https://webaim.org/standards/wcag/checklist)
+- [Checklist from The A11Y Project](https://a11yproject.com/checklist.html)
 
 ### WAI-ARIA
 
@@ -114,7 +114,7 @@ Every HTML form control, such as `<input>` and `<textarea>`, needs to be labeled
 The following resources show us how to do this:
 
 - [The W3C shows us how to label elements](https://www.w3.org/WAI/tutorials/forms/labels/)
-- [WebAIM shows us how to label elements](http://webaim.org/techniques/forms/controls)
+- [WebAIM shows us how to label elements](https://webaim.org/techniques/forms/controls)
 - [The Paciello Group explains accessible names](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
 
 Although these standard HTML practices can be directly used in React, note that the `for` attribute is written as `htmlFor` in JSX:
@@ -129,13 +129,13 @@ Although these standard HTML practices can be directly used in React, note that
 Error situations need to be understood by all users. The following link shows us how to expose error texts to screen readers as well:
 
 - [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
-- [WebAIM looks at form validation](http://webaim.org/techniques/formvalidation/)
+- [WebAIM looks at form validation](https://webaim.org/techniques/formvalidation/)
 
 ## Focus Control
 
 Ensure that your web application can be fully operated with the keyboard only:
 
-- [WebAIM talks about keyboard accessibility](http://webaim.org/techniques/keyboard/)
+- [WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
 
 ### Keyboard focus and focus outline
 
@@ -152,13 +152,13 @@ Provide a mechanism to allow users to skip past navigation sections in your appl
 Skiplinks or Skip Navigation Links are hidden navigation links that only become visible when keyboard users interact with the page. They are very easy to implement with
 internal page anchors and some styling:
 
-- [WebAIM - Skip Navigation Links](http://webaim.org/techniques/skipnav/)
+- [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
 
 Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarcate page regions as assistive technology allow the user to quickly navigate to these sections.
 
 Read more about the use of these elements to enhance accessibility here:
 
-- [Accessible Landmarks](http://www.scottohara.me/blog/2018/03/03/landmarks.html)
+- [Accessible Landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
 
 ### Programmatically managing focus
 
@@ -387,7 +387,7 @@ These are toolboxes filled with HTML attributes that are fully supported in JSX
 Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:
 
 - [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
-- [Heydon Pickering - ARIA Examples](http://heydonworks.com/practical_aria_examples/)
+- [Heydon Pickering - ARIA Examples](https://heydonworks.com/practical_aria_examples/)
 - [Inclusive Components](https://inclusive-components.design/)
 
 ## Other Points for Consideration
@@ -396,7 +396,7 @@ Each type of widget has a specific design pattern and is expected to function in
 
 Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:
 
-- [WebAIM - Document Language](http://webaim.org/techniques/screenreader/#language)
+- [WebAIM - Document Language](https://webaim.org/techniques/screenreader/#language)
 
 ### Setting the document title
 
@@ -412,15 +412,15 @@ Ensure that all readable text on your website has sufficient color contrast to r
 
 - [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 - [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
-- [A11yProject - What is Color Contrast](http://a11yproject.com/posts/what-is-color-contrast/)
+- [A11yProject - What is Color Contrast](https://a11yproject.com/posts/what-is-color-contrast/)
 
-It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](http://jxnblk.com/colorable/).
+It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](https://jxnblk.com/colorable/).
 
 Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.
 
 If you want to extend your contrast testing abilities you can use these tools:
 
-- [WebAIM - Color Contrast Checker](http://webaim.org/resources/contrastchecker/)
+- [WebAIM - Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
 - [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)
 
 ## Development and Testing Tools
@@ -471,7 +471,7 @@ You can also use the [react-axe](https://github.com/dylanb/react-axe) module to
 
 #### WebAIM WAVE
 
-The [Web Accessibility Evaluation Tool](http://wave.webaim.org/extension/) is another accessibility browser extension.
+The [Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) is another accessibility browser extension.
 
 #### Accessibility inspectors and the Accessibility Tree
 
@@ -498,7 +498,7 @@ Please note that browser / screen reader combinations matter. It is recommended
 
 Refer to the following guides on how to best use NVDA:
 
-- [WebAIM - Using NVDA to Evaluate Web Accessibility](http://webaim.org/articles/nvda/)
+- [WebAIM - Using NVDA to Evaluate Web Accessibility](https://webaim.org/articles/nvda/)
 - [Deque - NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
 
 #### VoiceOver in Safari
@@ -507,26 +507,26 @@ VoiceOver is an integrated screen reader on Apple devices.
 
 Refer to the following guides on how activate and use VoiceOver:
 
-- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](http://webaim.org/articles/voiceover/)
+- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)
 - [Deque - VoiceOver for OS X Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
 - [Deque - VoiceOver for iOS Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
 
 #### JAWS in Internet Explorer
 
-[Job Access With Speech](http://www.freedomscientific.com/Products/Blindness/JAWS) or JAWS, is a prolifically used screen reader on Windows.
+[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/) or JAWS, is a prolifically used screen reader on Windows.
 
 Refer to the following guides on how to best use JAWS:
 
-- [WebAIM - Using JAWS to Evaluate Web Accessibility](http://webaim.org/articles/jaws/)
+- [WebAIM - Using JAWS to Evaluate Web Accessibility](https://webaim.org/articles/jaws/)
 - [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
 
 ### Other Screen Readers
 
 #### ChromeVox in Google Chrome
 
-[ChromeVox](http://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
+[ChromeVox](https://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
 
 Refer to the following guides on how best to use ChromeVox:
 
 - [Google Chromebook Help - Use the Built-in Screen Reader](https://support.google.com/chromebook/answer/7031755?hl=en)
-- [ChromeVox Classic Keyboard Shortcuts Reference](http://www.chromevox.com/keyboard_shortcuts.html)
+- [ChromeVox Classic Keyboard Shortcuts Reference](https://www.chromevox.com/keyboard_shortcuts.html)
diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md
index 886c77601..ad1953812 100644
--- a/content/docs/add-react-to-a-website.md
+++ b/content/docs/add-react-to-a-website.md
@@ -149,7 +149,7 @@ return (
 
 These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries.
 
-You can play with JSX using [this online converter](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).
+You can play with JSX using [this online converter](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).
 
 ### Quickly Try JSX
 
@@ -197,6 +197,6 @@ Don't wait for it to finish -- this command starts an automated watcher for JSX.
 
 If you now create a file called `src/like_button.js` with this **[JSX starter code](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, the watcher will create a preprocessed `like_button.js` with the plain JavaScript code suitable for the browser. When you edit the source file with JSX, the transform will re-run automatically.
 
-As a bonus, this also lets you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from [its documentation](http://babeljs.io/docs/en/babel-cli/).
+As a bonus, this also lets you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from [its documentation](https://babeljs.io/docs/en/babel-cli/).
 
 If you notice that you're getting comfortable with build tools and want them to do more for you, [the next section](/docs/create-a-new-react-app.html) describes some of the most popular and approachable toolchains. If not -- those script tags will do just fine!
diff --git a/content/docs/addons-perf.md b/content/docs/addons-perf.md
index 5b47c4ccb..7445dc53d 100644
--- a/content/docs/addons-perf.md
+++ b/content/docs/addons-perf.md
@@ -27,8 +27,8 @@ In addition to giving you an overview of your app's overall performance, `Perf`
 See these articles for an introduction to React performance tooling:
 
  - ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)
- - ["Performance Engineering with React"](http://benchling.engineering/performance-engineering-with-react/)
- - ["A Deep Dive into React Perf Debugging"](http://benchling.engineering/deep-dive-react-perf-debugging/) 
+ - ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react/)
+ - ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/deep-dive-react-perf-debugging/) 
 
 ### Development vs. Production Builds
 
diff --git a/content/docs/addons-shallow-renderer.md b/content/docs/addons-shallow-renderer.md
index 6d3e5dfa0..609595209 100644
--- a/content/docs/addons-shallow-renderer.md
+++ b/content/docs/addons-shallow-renderer.md
@@ -51,7 +51,7 @@ Shallow testing currently has some limitations, namely not supporting refs.
 
 > Note:
 >
-> We also recommend checking out Enzyme's [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality.
+> We also recommend checking out Enzyme's [Shallow Rendering API](https://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality.
 
 ## Reference
 
diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md
index 12606b5a7..6d8d158e6 100644
--- a/content/docs/addons-test-utils.md
+++ b/content/docs/addons-test-utils.md
@@ -15,13 +15,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
 
 ## Overview
 
-`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content).
+`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](https://jestjs.io/docs/tutorial-react).
 
 > Note:
 >
 > We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do.
 >
-> Alternatively, Airbnb has released a testing utility called [Enzyme](http://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
+> Alternatively, Airbnb has released a testing utility called [Enzyme](https://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
 
  - [`act()`](#act)
  - [`mockComponent()`](#mockcomponent)
diff --git a/content/docs/addons-update.md b/content/docs/addons-update.md
index 316dfb2e4..560064734 100644
--- a/content/docs/addons-update.md
+++ b/content/docs/addons-update.md
@@ -21,7 +21,7 @@ var update = require('react-addons-update'); // ES5 with npm
 
 React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method to significantly speed up your app.
 
-Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](http://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
+Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](https://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
 
 ### The Main Idea
 
@@ -67,7 +67,7 @@ const newData = update(myData, {
 });
 ```
 
-While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](http://docs.mongodb.org/manual/core/crud-introduction/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
+While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](https://docs.mongodb.com/manual/crud/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
 
 The `$`-prefixed keys are called *commands*. The data structure they are "mutating" is called the *target*.
 
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index d779273f5..0d95ca28e 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -108,7 +108,7 @@ out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
 If you're setting up Webpack yourself, you'll probably want to read Webpack's
 [guide on code splitting](https://webpack.js.org/guides/code-splitting/). Your Webpack config should look vaguely [like this](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269).
 
-When using [Babel](http://babeljs.io/), you'll need to make sure that Babel can
+When using [Babel](https://babeljs.io/), you'll need to make sure that Babel can
 parse the dynamic import syntax but is not transforming it. For that you will need [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import).
 
 ## `React.lazy`
diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md
index 07b07aa78..24b1fd810 100644
--- a/content/docs/codebase-overview.md
+++ b/content/docs/codebase-overview.md
@@ -155,7 +155,7 @@ There are multiple injection points in the codebase. In the future, we intend to
 
 ### Multiple Packages
 
-React is a [monorepo](http://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place.
+React is a [monorepo](https://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place.
 
 ### React Core
 
@@ -171,7 +171,7 @@ The code for React core is located in [`packages/react`](https://github.com/face
 
 ### Renderers
 
-React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](http://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals.
+React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](https://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals.
 
 **Renderers manage how a React tree turns into the underlying platform calls.**
 
diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md
index 4d692f76f..b86880d3e 100644
--- a/content/docs/create-a-new-react-app.md
+++ b/content/docs/create-a-new-react-app.md
@@ -37,7 +37,7 @@ The React team primarily recommends these solutions:
 
 ### Create React App
 
-[Create React App](http://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
+[Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
 
 It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 and npm >= 5.2 on your machine. To create a project, run:
 
@@ -51,7 +51,7 @@ npm start
 >
 >`npx` on the first line is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
 
-Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](http://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
+Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](https://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
 
 When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
 
@@ -87,7 +87,7 @@ A JavaScript build toolchain typically consists of:
 
 * A **bundler**, such as [webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/). It lets you write modular code and bundle it together into small packages to optimize load time.
 
-* A **compiler** such as [Babel](http://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
+* A **compiler** such as [Babel](https://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
 
 If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality.
 
diff --git a/content/docs/design-principles.md b/content/docs/design-principles.md
index bad88b001..e664001e4 100644
--- a/content/docs/design-principles.md
+++ b/content/docs/design-principles.md
@@ -24,7 +24,7 @@ For example, it should be possible to introduce some local state into a componen
 
 There is nothing "bad" about using state or lifecycle methods in components. Like any powerful feature, they should be used in moderation, but we have no intention to remove them. On the contrary, we think they are integral parts of what makes React useful. We might enable [more functional patterns](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State) in the future, but both local state and lifecycle methods will be a part of that model.
 
-Components are often described as "just functions" but in our view they need to be more than that to be useful. In React, components describe any composable behavior, and this includes rendering, lifecycle, and state. Some external libraries like [Relay](http://facebook.github.io/relay/) augment components with other responsibilities such as describing data dependencies. It is possible that those ideas might make it back into React too in some form.
+Components are often described as "just functions" but in our view they need to be more than that to be useful. In React, components describe any composable behavior, and this includes rendering, lifecycle, and state. Some external libraries like [Relay](https://facebook.github.io/relay/) augment components with other responsibilities such as describing data dependencies. It is possible that those ideas might make it back into React too in some form.
 
 ### Common Abstraction
 
@@ -126,7 +126,7 @@ We do, however, provide some global configuration on the build level. For exampl
 
 ### Beyond the DOM
 
-We see the value of React in the way it allows us to write components that have fewer bugs and compose together well. DOM is the original rendering target for React but [React Native](http://facebook.github.io/react-native/) is just as important both to Facebook and the community.
+We see the value of React in the way it allows us to write components that have fewer bugs and compose together well. DOM is the original rendering target for React but [React Native](https://facebook.github.io/react-native/) is just as important both to Facebook and the community.
 
 Being renderer-agnostic is an important design constraint of React. It adds some overhead in the internal representations. On the other hand, any improvements to the core translate across platforms.
 
@@ -148,7 +148,7 @@ Optimizing for search is also important because of our reliance on [codemods](ht
 
 [JSX](/docs/introducing-jsx.html) plays a similar role. While it is not required with React, we use it extensively at Facebook both for aesthetic and pragmatic reasons.
 
-In our codebase, JSX provides an unambiguous hint to the tools that they are dealing with a React element tree. This makes it possible to add build-time optimizations such as [hoisting constant elements](http://babeljs.io/docs/plugins/transform-react-constant-elements/), safely lint and codemod internal component usage, and [include JSX source location](https://github.com/facebook/react/pull/6771) into the warnings.
+In our codebase, JSX provides an unambiguous hint to the tools that they are dealing with a React element tree. This makes it possible to add build-time optimizations such as [hoisting constant elements](https://babeljs.io/docs/en/babel-plugin-transform-react-constant-elements/), safely lint and codemod internal component usage, and [include JSX source location](https://github.com/facebook/react/pull/6771) into the warnings.
 
 ### Dogfooding
 
diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md
index 337bc1feb..037158533 100644
--- a/content/docs/faq-functions.md
+++ b/content/docs/faq-functions.md
@@ -108,7 +108,7 @@ Binding methods helps ensure that the second snippet works the same way as the f
 
 With React, typically you only need to bind the methods you *pass* to other components. For example, `<button onClick={this.handleClick}>` passes `this.handleClick` so you want to bind it. However, it is unnecessary to bind the `render` method or the lifecycle methods: we don't pass them to other components.
 
-[This post by Yehuda Katz](http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) explains what binding is, and how functions work in JavaScript, in detail.
+[This post by Yehuda Katz](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) explains what binding is, and how functions work in JavaScript, in detail.
 
 ### Why is my function being called every time the component renders?
 
diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md
index 81b677a76..99e8e9fca 100644
--- a/content/docs/faq-state.md
+++ b/content/docs/faq-state.md
@@ -16,7 +16,7 @@ category: FAQ
 
 Here are some good resources for further reading on when to use `props` vs `state`:
 * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
-* [ReactJS: Props vs. State](http://lucybain.com/blog/2016/react-state-vs-pros/)
+* [ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/)
 
 ### Why is `setState` giving me the wrong value?
 
diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md
index 8ad77b1ac..fd204bca1 100644
--- a/content/docs/getting-started.md
+++ b/content/docs/getting-started.md
@@ -69,7 +69,7 @@ If you feel that the React documentation goes at a faster pace than you're comfo
 
 ### React for Designers
 
-If you're coming from a design background, [these resources](http://reactfordesigners.com/) are a great place to get started.
+If you're coming from a design background, [these resources](https://reactfordesigners.com/) are a great place to get started.
 
 ### JavaScript Resources
 
@@ -79,7 +79,7 @@ We recommend going through [this JavaScript overview](https://developer.mozilla.
 
 >Tip
 >
->Whenever you get confused by something in JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](http://javascript.info/) are great websites to check. There are also [community support forums](/community/support.html) where you can ask for help.
+>Whenever you get confused by something in JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](https://javascript.info/) are great websites to check. There are also [community support forums](/community/support.html) where you can ask for help.
 
 ### Practical Tutorial
 
diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md
index 1f93772ce..1925380fa 100644
--- a/content/docs/handling-events.md
+++ b/content/docs/handling-events.md
@@ -91,7 +91,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/xEmzGg?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
 
 You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called.
 
diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md
index 451e28850..f6b8b5b63 100644
--- a/content/docs/higher-order-components.md
+++ b/content/docs/higher-order-components.md
@@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);
 
 Whereas a component transforms props into UI, a higher-order component transforms a component into another component.
 
-HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
+HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](https://facebook.github.io/relay/docs/en/fragment-container.html).
 
 In this document, we'll discuss why higher-order components are useful, and how to write your own.
 
@@ -293,7 +293,7 @@ const EnhancedComponent = enhance(WrappedComponent)
 
 (This same property also allows `connect` and other enhancer-style HOCs to be used as decorators, an experimental JavaScript proposal.)
 
-The `compose` utility function is provided by many third-party libraries including lodash (as [`lodash.flowRight`](https://lodash.com/docs/#flowRight)), [Redux](http://redux.js.org/docs/api/compose.html), and [Ramda](http://ramdajs.com/docs/#compose).
+The `compose` utility function is provided by many third-party libraries including lodash (as [`lodash.flowRight`](https://lodash.com/docs/#flowRight)), [Redux](https://redux.js.org/api/compose), and [Ramda](https://ramdajs.com/docs/#compose).
 
 ## Convention: Wrap the Display Name for Easy Debugging
 
@@ -396,4 +396,4 @@ import MyComponent, { someFunction } from './MyComponent.js';
 
 While the convention for higher-order components is to pass through all props to the wrapped component, this does not work for refs. That's because `ref` is not really a prop — like `key`, it's handled specially by React. If you add a ref to an element whose component is the result of a HOC, the ref refers to an instance of the outermost container component, not the wrapped component.
 
-The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).
\ No newline at end of file
+The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).
diff --git a/content/docs/how-to-contribute.md b/content/docs/how-to-contribute.md
index ff5fd988d..64e4c7edb 100644
--- a/content/docs/how-to-contribute.md
+++ b/content/docs/how-to-contribute.md
@@ -27,7 +27,7 @@ If you send a pull request, please do it against the `master` branch. We maintai
 
 ### Semantic Versioning
 
-React follows [semantic versioning](http://semver.org/). We release patch versions for bugfixes, minor versions for new features, and major versions for any breaking changes. When we make breaking changes, we also introduce deprecation warnings in a minor version so that our users learn about the upcoming changes and migrate their code in advance.
+React follows [semantic versioning](https://semver.org/). We release patch versions for bugfixes, minor versions for new features, and major versions for any breaking changes. When we make breaking changes, we also introduce deprecation warnings in a minor version so that our users learn about the upcoming changes and migrate their code in advance.
 
 We tag every pull request with a label marking whether the change should go in the next [patch](https://github.com/facebook/react/pulls?q=is:open+is:pr+label:semver-patch), [minor](https://github.com/facebook/react/pulls?q=is:open+is:pr+label:semver-minor), or a [major](https://github.com/facebook/react/pulls?q=is:open+is:pr+label:semver-major) version. We release new patch versions every few weeks, minor versions every few months, and major versions one or two times a year.
 
@@ -52,7 +52,7 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 * IRC: [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
 * Discussion forum: [discuss.reactjs.org](https://discuss.reactjs.org/)
 
-There is also [an active community of React users on the Discord chat platform](http://www.reactiflux.com/) in case you need help with React.
+There is also [an active community of React users on the Discord chat platform](https://www.reactiflux.com/) in case you need help with React.
 
 ### Proposing a Change
 
diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md
index 626a35afe..d0d55f39a 100644
--- a/content/docs/integrating-with-other-libraries.md
+++ b/content/docs/integrating-with-other-libraries.md
@@ -4,7 +4,7 @@ title: Integrating with Other Libraries
 permalink: docs/integrating-with-other-libraries.html
 ---
 
-React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](http://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code.
+React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](https://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code.
 
 ## Integrating with DOM Manipulation Plugins
 
@@ -100,7 +100,7 @@ componentWillUnmount() {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/qmqeQx?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010)
 
 Note that React assigns no special meaning to the `this.el` field. It only works because we have previously assigned this field from a `ref` in the `render()` method:
 
@@ -131,7 +131,7 @@ handleChange(e) {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/bWgbeE?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/bWgbeE?editors=0010)
 
 Finally, there is one more thing left to do. In React, props can change over time. For example, the `<Chosen>` component can get different children if parent component's state changes. This means that at integration points it is important that we manually update the DOM in response to prop updates, since we no longer let React manage the DOM for us.
 
@@ -186,7 +186,7 @@ class Chosen extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/xdgKOz?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/xdgKOz?editors=0010)
 
 ## Integrating with Other View Libraries
 
@@ -247,13 +247,13 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/RVKbvW?editors=1010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/RVKbvW?editors=1010)
 
 You can have as many such isolated components as you like, and use `ReactDOM.render()` to render them to different DOM containers. Gradually, as you convert more of your app to React, you will be able to combine them into larger components, and move some of the `ReactDOM.render()` calls up the hierarchy.
 
 ### Embedding React in a Backbone View
 
-[Backbone](http://backbonejs.org/) views typically use HTML strings, or string-producing template functions, to create the content for their DOM elements. This process, too, can be replaced with rendering a React component.
+[Backbone](https://backbonejs.org/) views typically use HTML strings, or string-producing template functions, to create the content for their DOM elements. This process, too, can be replaced with rendering a React component.
 
 Below, we will create a Backbone view called `ParagraphView`. It will override Backbone's `render()` function to render a React `<Paragraph>` component into the DOM element provided by Backbone (`this.el`). Here, too, we are using [`ReactDOM.render()`](/docs/react-dom.html#render):
 
@@ -275,7 +275,7 @@ const ParagraphView = Backbone.View.extend({
 });
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/gWgOYL?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/gWgOYL?editors=0010)
 
 It is important that we also call `ReactDOM.unmountComponentAtNode()` in the `remove` method so that React unregisters event handlers and other resources associated with the component tree when it is detached.
 
@@ -283,11 +283,11 @@ When a component is removed *from within* a React tree, the cleanup is performed
 
 ## Integrating with Model Layers
 
-While it is generally recommended to use unidirectional data flow such as [React state](/docs/lifting-state-up.html), [Flux](http://facebook.github.io/flux/), or [Redux](http://redux.js.org/), React components can use a model layer from other frameworks and libraries.
+While it is generally recommended to use unidirectional data flow such as [React state](/docs/lifting-state-up.html), [Flux](https://facebook.github.io/flux/), or [Redux](https://redux.js.org/), React components can use a model layer from other frameworks and libraries.
 
 ### Using Backbone Models in React Components
 
-The simplest way to consume [Backbone](http://backbonejs.org/) models and collections from a React component is to listen to the various change events and manually force an update.
+The simplest way to consume [Backbone](https://backbonejs.org/) models and collections from a React component is to listen to the various change events and manually force an update.
 
 Components responsible for rendering models would listen to `'change'` events, while components responsible for rendering collections would listen for `'add'` and `'remove'` events. In both cases, call [`this.forceUpdate()`](/docs/react-component.html#forceupdate) to rerender the component with the new data.
 
@@ -347,7 +347,7 @@ class List extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/GmrREm?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/GmrREm?editors=0010)
 
 ### Extracting Data from Backbone Models
 
@@ -434,6 +434,6 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/PmWwwa?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/PmWwwa?editors=0010)
 
 This technique is not limited to Backbone. You can use React with any model library by subscribing to its changes in the lifecycle methods and, optionally, copying the data into the local React state.
diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index edc5c868c..7cab7c619 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -70,7 +70,7 @@ ReactDOM.render(
 
 [](codepen://introducing-jsx)
 
-We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283).
+We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](https://stackoverflow.com/q/2846283).
 
 ### JSX is an Expression Too
 
@@ -138,7 +138,7 @@ const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;
 ```
 
-By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
+By default, React DOM [escapes](https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
 
 ### JSX Represents Objects
 
@@ -181,4 +181,4 @@ We will explore rendering React elements to the DOM in the next section.
 
 >**Tip:**
 >
->We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
+>We recommend using the ["Babel" language definition](https://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md
index 4a45aefcc..2b31094c5 100644
--- a/content/docs/reconciliation.md
+++ b/content/docs/reconciliation.md
@@ -10,7 +10,7 @@ React provides a declarative API so that you don't have to worry about exactly w
 
 When you use React, at a single point in time you can think of the `render()` function as creating a tree of React elements. On the next state or props update, that `render()` function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree.
 
-There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the [state of the art algorithms](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) have a complexity in the order of O(n<sup>3</sup>) where n is the number of elements in the tree.
+There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the [state of the art algorithms](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) have a complexity in the order of O(n<sup>3</sup>) where n is the number of elements in the tree.
 
 If we used this in React, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions:
 
diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md
index ef1b73555..7bf5b0748 100644
--- a/content/docs/reference-dom-elements.md
+++ b/content/docs/reference-dom-elements.md
@@ -90,7 +90,7 @@ function ComponentWithTransition() {
 }
 ```
 
-Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
+Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](https://www.andismith.com/blogs/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
 
 React will automatically append a "px" suffix to certain numeric inline style properties. If you want to use units other than "px", specify the value as a string with the desired unit. For example:
 
diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md
index f31a43c45..9df77a8c9 100644
--- a/content/docs/reference-glossary.md
+++ b/content/docs/reference-glossary.md
@@ -27,7 +27,7 @@ Bundlers take JavaScript and CSS code written as separate modules (often hundred
 
 ## Package Managers
 
-Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](http://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry.
+Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry.
 
 ## CDN
 
diff --git a/content/docs/reference-test-renderer.md b/content/docs/reference-test-renderer.md
index 92f5246cb..65e4a70b6 100644
--- a/content/docs/reference-test-renderer.md
+++ b/content/docs/reference-test-renderer.md
@@ -38,7 +38,7 @@ console.log(testRenderer.toJSON());
 //   children: [ 'Facebook' ] }
 ```
 
-You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: [Learn more about it](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
+You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: [Learn more about it](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
 
 You can also traverse the output to find specific nodes and make assertions about them.
 
@@ -110,7 +110,7 @@ Create a `TestRenderer` instance with the passed React element. It doesn't use t
 testRenderer.toJSON()
 ```
 
-Return an object representing the rendered tree. This tree only contains the platform-specific nodes like `<div>` or `<View>` and their props, but doesn't contain any user-written components. This is handy for [snapshot testing](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
+Return an object representing the rendered tree. This tree only contains the platform-specific nodes like `<div>` or `<View>` and their props, but doesn't contain any user-written components. This is handy for [snapshot testing](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
 
 ### `testRenderer.toTree()`
 
diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index c58efae61..c37171fd5 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -29,7 +29,7 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
 In this section, we will learn how to make the `Clock` component truly reusable and encapsulated. It will set up its own timer and update itself every second.
 
@@ -55,7 +55,7 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
 However, it misses a crucial requirement: the fact that the `Clock` sets up a timer and updates the UI every second should be an implementation detail of the `Clock`.
 
@@ -101,7 +101,7 @@ class Clock extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRGpo?editors=0010)
 
 `Clock` is now defined as a class rather than a function.
 
@@ -193,7 +193,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
 Next, we'll make the `Clock` set up its own timer and update itself every second.
 
@@ -302,7 +302,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010)
 
 Now the clock ticks every second.
 
@@ -437,7 +437,7 @@ function FormattedDate(props) {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010)
 
 This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.
 
@@ -462,7 +462,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/vXdGmd?editors=0010)
 
 Each `Clock` sets up its own timer and updates independently.
 
diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
index b05a4b1a9..d1d49006e 100644
--- a/content/docs/static-type-checking.md
+++ b/content/docs/static-type-checking.md
@@ -324,4 +324,4 @@ JetBrains develops and maintains several tools specifically for the React commun
 
 ## Other Languages
 
-Note there are other statically typed languages that compile to JavaScript and are thus React compatible. For example, [F#/Fable](http://fable.io) with [elmish-react](https://elmish.github.io/react). Check out their respective sites for more information, and feel free to add more statically typed languages that work with React to this page!
+Note there are other statically typed languages that compile to JavaScript and are thus React compatible. For example, [F#/Fable](https://fable.io/) with [elmish-react](https://elmish.github.io/react). Check out their respective sites for more information, and feel free to add more statically typed languages that work with React to this page!
diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md
index 53caa2b20..8b4fa091c 100644
--- a/content/docs/thinking-in-react.md
+++ b/content/docs/thinking-in-react.md
@@ -61,7 +61,7 @@ Now that we've identified the components in our mock, let's arrange them into a
 
 ## Step 2: Build A Static Version in React
 
-<p data-height="600" data-theme-id="0" data-slug-hash="BwWzwm" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/BwWzwm">Thinking In React: Step 2</a> on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="600" data-theme-id="0" data-slug-hash="BwWzwm" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/BwWzwm">Thinking In React: Step 2</a> on <a href="https://codepen.io">CodePen</a>.</p>
 <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
 
 Now that you have your component hierarchy, it's time to implement your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.
@@ -106,7 +106,7 @@ So finally, our state is:
 
 ## Step 4: Identify Where Your State Should Live
 
-<p data-height="600" data-theme-id="0" data-slug-hash="qPrNQZ" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/qPrNQZ">Thinking In React: Step 4</a> on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="600" data-theme-id="0" data-slug-hash="qPrNQZ" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/qPrNQZ">Thinking In React: Step 4</a> on <a href="https://codepen.io">CodePen</a>.</p>
 
 OK, so we've identified what the minimal set of app state is. Next, we need to identify which component mutates, or *owns*, this state.
 
@@ -131,7 +131,7 @@ You can start seeing how your application will behave: set `filterText` to `"bal
 
 ## Step 5: Add Inverse Data Flow
 
-<p data-height="600" data-theme-id="0" data-slug-hash="LzWZvb" data-default-tab="js,result" data-user="rohan10" data-embed-version="2" data-pen-title="Thinking In React: Step 5" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/LzWZvb">Thinking In React: Step 5</a> on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="600" data-theme-id="0" data-slug-hash="LzWZvb" data-default-tab="js,result" data-user="rohan10" data-embed-version="2" data-pen-title="Thinking In React: Step 5" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/LzWZvb">Thinking In React: Step 5</a> on <a href="https://codepen.io">CodePen</a>.</p>
 
 So far, we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.
 
diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md
index fc904417e..be683fb8c 100644
--- a/content/docs/uncontrolled-components.md
+++ b/content/docs/uncontrolled-components.md
@@ -41,7 +41,7 @@ class NameForm extends React.Component {
 
 Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
 
-If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
+If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
 
 ### Default Values
 
diff --git a/src/pages/acknowledgements.html.js b/src/pages/acknowledgements.html.js
index 90103b03b..513aea22f 100644
--- a/src/pages/acknowledgements.html.js
+++ b/src/pages/acknowledgements.html.js
@@ -54,10 +54,10 @@ const Acknowlegements = ({data, location}) => (
               </li>
               <li>
                 <a href="https://christopheraue.net/">Christopher Aue</a> for
-                letting us use the <a href="http://reactjs.com/">reactjs.com</a>{' '}
-                domain name and the{' '}
-                <a href="https://twitter.com/reactjs">@reactjs</a> username on
-                Twitter.
+                letting us use the{' '}
+                <a href="https://reactjs.com/">reactjs.com</a> domain name and
+                the <a href="https://twitter.com/reactjs">@reactjs</a> username
+                on Twitter.
               </li>
               <li>
                 <a href="https://github.com/ProjectMoon">ProjectMoon</a> for

From c3530ff366e41a0fd93358260226d76c4fad176c Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Thu, 7 Feb 2019 18:30:13 -0800
Subject: [PATCH 014/118] Add actual instructions for translations.

---
 README.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c66322a03..e19398017 100644
--- a/README.md
+++ b/README.md
@@ -57,9 +57,7 @@ The documentation is divided into several sections with a different tone and pur
 
 ## Translation
 
-If you are interesting in translating `reactjs.org`, please join the Crowdin.
-
-* [Crowdin - React](https://crowdin.com/project/react)
+If you are interesting in translating `reactjs.org`, please see the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg).
 
 ## Troubleshooting
 

From dfef0ccc3239ab28b50db29fb277237e6285fcf4 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 16:35:28 +0400
Subject: [PATCH 015/118] Translate homepage marketing items

---
 content/home/marketing/component-based.md           | 6 +++---
 content/home/marketing/declarative.md               | 6 +++---
 content/home/marketing/learn-once-write-anywhere.md | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md
index aeb3c4de2..463966cc5 100644
--- a/content/home/marketing/component-based.md
+++ b/content/home/marketing/component-based.md
@@ -1,8 +1,8 @@
 ---
-title: Component-Based
+title: Komponent Əsasında
 order: 1
 ---
 
-Build encapsulated components that manage their own state, then compose them to make complex UIs.
+Öz halını idarə edən inkapsulasiyalı komponentlər düzəldib, sonra komponentləri tərtib edərək kompleks UI yaradın.
 
-Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
+Komponent məntiqi şablon əvəzinə JavaScriptdə yazıldığından, siz asanlıqla zəngin məlumatları öz applikasiyanıza göndərərək vəziyyəti DOMdan kənarda saxlaya bilərsiniz.
diff --git a/content/home/marketing/declarative.md b/content/home/marketing/declarative.md
index c3b651902..8eaaad9b9 100644
--- a/content/home/marketing/declarative.md
+++ b/content/home/marketing/declarative.md
@@ -1,8 +1,8 @@
 ---
-title: Declarative
+title: Deklarativ
 order: 0
 ---
 
-React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
+React interaktiv UI yaranmasını çox asanlaşdırır. Applikasiyanızın hər bir halı üçün sadə görünüşlər yaradın. Məlumatlar dəyişən zaman React düzgün komponentləri səmərəli şəkildə dəyişir və render edir.
 
-Declarative views make your code more predictable and easier to debug.
+Deklarativ görünüşlər sizini kodunuzu daha proqnozlaşdırıla bilən və asan dibuq olunan edir.
diff --git a/content/home/marketing/learn-once-write-anywhere.md b/content/home/marketing/learn-once-write-anywhere.md
index 009edf5bc..002591b97 100644
--- a/content/home/marketing/learn-once-write-anywhere.md
+++ b/content/home/marketing/learn-once-write-anywhere.md
@@ -1,8 +1,8 @@
 ---
-title: Learn Once, Write Anywhere
+title: Bir dəfə öyrən, Hər yerdə yaz
 order: 2
 ---
 
-We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
+Biz, sizin qalan texnologiya stekiniz haqqında heç bir təxmin etmirik. Bu səbədən siz mövcud kodunuzu yenidən yazmadan, yeni xüsusiyyətləri Reactdə yaza bilərsiniz.
 
-React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
+React həmçinin Node ilə serverdə render edə və mobil applikasiyaları [React Native](https://facebook.github.io/react-native/) ilə dəstəkləyə bilər.

From 2a8c4a53b31f96236f5350d669d133de79b7053a Mon Sep 17 00:00:00 2001
From: Deniz Susman <susmandeniz@gmail.com>
Date: Fri, 8 Feb 2019 16:24:23 +0300
Subject: [PATCH 016/118] Typo fix in blog content (#1651)

"Recommendation" instead of "Recomendation".
---
 content/blog/2018-06-07-you-probably-dont-need-derived-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md
index 7709054b8..6949be3ec 100644
--- a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md
+++ b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md
@@ -213,7 +213,7 @@ To recap, when designing a component, it is important to decide whether its data
 Instead of trying to **"mirror" a prop value in state**, make the component **controlled**, and consolidate the two diverging values in the state of some parent component. For example, rather than a child accepting a "committed" `props.value` and tracking a "draft" `state.value`, have the parent manage both `state.draftValue` and `state.committedValue` and control the child's value directly. This makes the data flow more explicit and predictable.
 
 For **uncontrolled** components, if you're trying to reset state when a particular prop (usually an ID) changes, you have a few options:
-* **Recomendation: To reset _all internal state_, use the `key` attribute.**
+* **Recommendation: To reset _all internal state_, use the `key` attribute.**
 * Alternative 1: To reset _only certain state fields_, watch for changes in a special property (e.g. `props.userID`).
 * Alternative 2: You can also consider fall back to an imperative instance method using refs.
 

From cd6231f07e2cba2d2d4adfcf156cd1ebfa6991cb Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 18:22:59 +0400
Subject: [PATCH 017/118] Translate homepage example descriptions

---
 content/home/examples/a-component-using-external-plugins.md | 4 ++--
 content/home/examples/a-simple-component.md                 | 6 +++---
 content/home/examples/a-stateful-component.md               | 4 ++--
 content/home/examples/an-application.md                     | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/home/examples/a-component-using-external-plugins.md b/content/home/examples/a-component-using-external-plugins.md
index a8c35bbd6..fcf73922e 100644
--- a/content/home/examples/a-component-using-external-plugins.md
+++ b/content/home/examples/a-component-using-external-plugins.md
@@ -1,7 +1,7 @@
 ---
-title: A Component Using External Plugins
+title: Xarici Pluginlər ilə Komponent
 order: 3
 domid: markdown-example
 ---
 
-React is flexible and provides hooks that allow you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
+React sizə digər kitabxana və freymvorklara inteqrasiya etmək üçün metodlar ilə təmin edir. Bu nümunədə **remarkable** xarici Markdown kitabxanası işlənərək `<textarea>` elementinin dəyəri markdown-a real zamanda çevrilir.
diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md
index d791856d4..71ba38bc0 100644
--- a/content/home/examples/a-simple-component.md
+++ b/content/home/examples/a-simple-component.md
@@ -1,9 +1,9 @@
 ---
-title: A Simple Component
+title: Sadə Komponent
 order: 0
 domid: hello-example
 ---
 
-React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
+React komponenti daxil olan məlumatları qəbul edib nəyi göstəriləcəyini qaytaran, `render()` funskiyasını tətbiq edir. Bu nümunədə XML-ə oxşayan sintaksis - JSX işlənilir. Daxil olunan məlumat `this.props` ilə `render` funskiyasından oxuna bilər.
 
-**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.
+**JSX məcburi deyil və React işlətmək üçün tələb olunmur.** JSX kompilyasiyasından yaradılan Javascript kodunu görmək üçün [Babel REPL](babel://es5-syntax-example) sınayın.
diff --git a/content/home/examples/a-stateful-component.md b/content/home/examples/a-stateful-component.md
index a68ab0a51..139178974 100644
--- a/content/home/examples/a-stateful-component.md
+++ b/content/home/examples/a-stateful-component.md
@@ -1,7 +1,7 @@
 ---
-title: A Stateful Component
+title: Vəziyyətli Komponent
 order: 1
 domid: timer-example
 ---
 
-In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.
+Daxil olunan məlumatdan (`this.props` ilə oxunur) əlavə, komponent daxili vəziyyət məlumatlarını saxlaya bilər (`this.state` ilə  oxunur). Komponent vəziyyətində dəyişikliklər olduqda, render olunmuş nişan `render()` funskiyasının çağrılmağı ilə yenilənir.
diff --git a/content/home/examples/an-application.md b/content/home/examples/an-application.md
index 227d0621b..0b37ae930 100644
--- a/content/home/examples/an-application.md
+++ b/content/home/examples/an-application.md
@@ -1,7 +1,7 @@
 ---
-title: An Application
+title: Bir Applikasiya
 order: 2
 domid: todos-example
 ---
 
-Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.
+Gəlin `props` və `state` işlədərək kiçik bir Todo applikasiya yaradaq. Bu nümunədə `state` ilə cari elementlərin siyayısını, həmçinin istifadəçinin daxil etdiyi mətni izləyir. Hadisə işləyicilərinin sətirdaxili olmağına baxmayaraq, bu işləyicilər toplanır və hadisə deleqasiyası tərəfindən tətbiq edilir.

From 1d093398de64b87142e2d0fa060608b798790547 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 18:28:53 +0400
Subject: [PATCH 018/118] Translate hero and buttons

---
 src/pages/index.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index bc2d732fd..4b8325761 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -51,7 +51,7 @@ class Home extends Component {
     return (
       <Layout location={location}>
         <TitleAndMetaTags
-          title="React &ndash; A JavaScript library for building user interfaces"
+          title="React &ndash; UI yaratmaq üçün Javascript Kitabxanası"
           ogUrl={createOgUrl('index.html')}
         />
         <div css={{width: '100%'}}>
@@ -134,7 +134,7 @@ class Home extends Component {
                         fontSize: 30,
                       },
                     }}>
-                    A JavaScript library for building user interfaces
+                    UI yaratmaq üçün Javascript Kitabxanası
                   </p>
                   <Flex
                     valign="center"
@@ -149,12 +149,12 @@ class Home extends Component {
                       <ButtonLink
                         to="/docs/getting-started.html"
                         type="primary">
-                        Get Started
+                        Başlamaq
                       </ButtonLink>
                     </CtaItem>
                     <CtaItem>
                       <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                        Take the Tutorial
+                        Dərsiliyi Götür
                       </ButtonLink>
                     </CtaItem>
                   </Flex>
@@ -286,12 +286,12 @@ class Home extends Component {
               <Flex valign="center">
                 <CtaItem>
                   <ButtonLink to="/docs/getting-started.html" type="primary">
-                    Get Started
+                    Başlamaq
                   </ButtonLink>
                 </CtaItem>
                 <CtaItem>
                   <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Take the Tutorial
+                    Dərsiliyi Götür
                   </ButtonLink>
                 </CtaItem>
               </Flex>

From 7476509e2c255cd0e689bfaec6d72532653839fc Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 18:36:40 +0400
Subject: [PATCH 019/118] Translate Header

---
 src/components/LayoutHeader/DocSearch.js | 4 ++--
 src/components/LayoutHeader/Header.js    | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index b31505917..29c2016fc 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -104,8 +104,8 @@ class DocSearch extends Component<{}, State> {
           }}
           id="algolia-doc-search"
           type="search"
-          placeholder="Search docs"
-          aria-label="Search docs"
+          placeholder="Sənədlərdə axtar"
+          aria-label="Sənədlərdə axtar"
         />
       </form>
     ) : null;
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 55743a7c1..fa88bb800 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -115,22 +115,22 @@ const Header = ({location}: {location: Location}) => (
           }}>
           <HeaderLink
             isActive={location.pathname.includes('/docs/')}
-            title="Docs"
+            title="Sənədlər"
             to="/docs/getting-started.html"
           />
           <HeaderLink
             isActive={location.pathname.includes('/tutorial/')}
-            title="Tutorial"
+            title="Dərslik"
             to="/tutorial/tutorial.html"
           />
           <HeaderLink
             isActive={location.pathname.includes('/community/')}
-            title="Community"
+            title="Cəmiyyət"
             to="/community/support.html"
           />
           <HeaderLink
             isActive={location.pathname.includes('/blog')}
-            title="Blog"
+            title="Bloq"
             to="/blog/"
           />
         </nav>

From 611b1773a9f9a37f05630b4c36c566e473afd9c5 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 18:38:42 +0400
Subject: [PATCH 020/118] Translate footer headers

---
 src/components/LayoutFooter/Footer.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index bca76aac6..378d47dbb 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -60,7 +60,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             },
           }}>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Docs</MetaTitle>
+            <MetaTitle onDark={true}>Sənədlər</MetaTitle>
             {sectionListDocs.map(section => {
               const defaultItem = section.items[0];
               return (
@@ -73,7 +73,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             })}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Channels</MetaTitle>
+            <MetaTitle onDark={true}>Kanallar</MetaTitle>
             <ExternalFooterLink
               href="https://github.com/facebook/react"
               target="_blank"
@@ -118,7 +118,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             </ExternalFooterLink>
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Community</MetaTitle>
+            <MetaTitle onDark={true}>Cəmiyyət</MetaTitle>
             {sectionListCommunity.map(section => (
               <FooterLink
                 to={`/community/${section.items[0].id}.html`}
@@ -128,12 +128,10 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             ))}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>More</MetaTitle>
-            <FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
-            <FooterLink to="/blog/">Blog</FooterLink>
-            <FooterLink to="/acknowledgements.html">
-              Acknowledgements
-            </FooterLink>
+            <MetaTitle onDark={true}>Əlavə</MetaTitle>
+            <FooterLink to="/tutorial/tutorial.html">Dərslik</FooterLink>
+            <FooterLink to="/blog/">Bloq</FooterLink>
+            <FooterLink to="/acknowledgements.html">Təşəkkürlər</FooterLink>
             <ExternalFooterLink
               href="https://facebook.github.io/react-native/"
               target="_blank"

From 7a0f3f4364111abd3aa07a9fd096fa85365b7ce6 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 19:36:57 +0400
Subject: [PATCH 021/118] Translate preface of the tutorial

---
 content/tutorial/tutorial.md | 42 ++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 0191348f0..82b322923 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -1,6 +1,6 @@
 ---
 id: tutorial
-title: "Tutorial: Intro to React"
+title: "Dəsrlik: React-a Giriş"
 layout: tutorial
 sectionid: tutorial
 permalink: tutorial/tutorial.html
@@ -12,42 +12,42 @@ redirect_from:
   - "docs/tutorial-zh-CN.html"
 ---
 
-This tutorial doesn't assume any existing React knowledge.
+Bu dərslik heç bir mövcud React biliyini təxmin etmir.
 
-## Before We Start the Tutorial {#before-we-start-the-tutorial}
+## Dərsliyi Başlamazdan Əvvəl {#before-we-start-the-tutorial}
 
-We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React.
+Bu dərslikdə biz kiçik bir oyun yazacağıq. **Siz oyun yazmadığınızdan bunu ötürmək istəyə bilərsiniz -- amma buna bir şans verin.** Bu dərslikdə öyrənəcəyiniz metodlar React applikasiyaları yazmaq üçün əsasdır və bu metodları mənimsəmək sizə Reactı dərindən başa düşməyə kömək edəcək.
 
->Tip
+>İpucu
 >
->This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](/docs/hello-world.html). You might find this tutorial and the guide complementary to each other.
+>Bu dərslik **praktika ilə oyrənməyə** üstünlük verənlər üçün nəzərdə tutulmuşdur. Əgər siz konsepsiyaları sıfırdan öyrənməyə üstünlük verirsinizsə, bizim [pillə-pillə təlimatımatımızı](/docs/hello-world.html) nəzərdən keçirin. Bu dərslik və göstərilən təlimat bir birini tamamlaya bilər.
 
-The tutorial is divided into several sections:
+Bu dərslik bir neçə bölməyə bölünmüşdür:
 
-* [Setup for the Tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial.
-* [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state.
-* [Completing the Game](#completing-the-game) will teach you **the most common techniques** in React development.
-* [Adding Time Travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React.
+* [Dərslik üçün Plan](#setup-for-the-tutorial) bu dərsliyi izləmək üçün **başlanğıc nöqtəsidir.**
+* [İcmal](#overview) React-in **əsaslarını** öyrədəcək: komponentlər, parametrlər (props), and vəziyyət (state).
+* [Oyunu Tamamlamaq](#completing-the-game) React təkminləşdirilməsi üçün **ən çox işlənən metodları** öyrədəcək.
+* [Vaxt Səyahətinin Əlavəsi](#adding-time-travel) React-in unikal gücləri haqqında **dərin məlumatlar** verəcək.
 
-You don't have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can -- even if it's one or two sections.
+Bu dərslikdən dəyər almaq üçün, bütün bölmələri birdəfəyə tamamlamaq vacib deyil. Çalışın mümkün qədər çox bölmədən keçəsiniz -- hətta bir və ya iki bölmədə olsa.
 
-It's fine to copy and paste code as you're following along the tutorial, but we recommend to type it by hand. This will help you develop a muscle memory and a stronger understanding.
+Dərslikdə irəliləyərkən kodları copy-paste etmək normaldır amma biz kodları əl ilə yazmağınızı tövsiyyə edirik. Bu sizə əzələ yaddaşı yaratmağa və daha güclü anlayışa kömək edəcək.
 
-### What Are We Building? {#what-are-we-building}
+### Biz nə düzəldirik? {#what-are-we-building}
 
-In this tutorial, we'll show how to build an interactive tic-tac-toe game with React.
+Bu dərslikdə, biz sizə React ilə interaktiv "X O oyunu" düzəltməyi göstərəcəyik.
 
-You can see what we'll be building here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. If the code doesn't make sense to you, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax.
+Bizim düzəltdiyimizə buradan baxa bilərsiniz: **[Son Nəticə](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Əgər kod sizə aydın deyilsə və ya sintaksis sizə məchuldursa, narahat olmayın! Bu dərsliyin məqsədi sizə React və onun sintaksisini anlamağa kömək etməkdir.
 
-We recommend that you check out the tic-tac-toe game before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and is updated as the game progresses.
+Dərsliyi başlamamışdan qabaq oyuna baxmağınızı tövsiyyə edirik. Bu oyunun diqqət edəcəyiniz xüsusiyyətlərindən biri oyun taxtasının sağında çıxan nömrələnmiş siyahıdır. Bu siyahı oyunda baş vermiş bütün hərəkətlərin tarixçəsidir və bu siyahı oyun davam etdikcə yenilənir.
 
-You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
+Oyun ilə tanış olduqdan sonra oyun səhifəsini bağlaya bilərsiniz. Biz bu dərslikdə sadə bir şablon ilə başlayacağıq. Sonraki addım sizi oyunu yazmağa başlamağa hazır etməkdir.
 
-### Prerequisites {#prerequisites}
+### Ön şərtlər {#prerequisites}
 
-We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes.
+Biz sizin HTML və Javascript ilə tanışlığınızı təxmin edirik amma siz başqa proqramlaşdırma dilindən gəlirsinizsə belə davam edə bilərsiniz. Biz sizin proqramlaşdırma konsepsiyaları ilə (funskiyalar, objectlər, massivlər, və daha az dərəcədə, klasslar) tanışlığınızı təxmin edirik.
 
-If you need to review JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6 -- a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to.
+Əgər sizə Javascriptə baxmaq lazımdırsa, biz [bu təlimatı](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) oxumağınızı tövsiyyə edirik. Qeyd edirikki, biz həmçinin bəzi ES6 (Javascriptin yeni versiyası) xüsusiyyətlərindən istifadə edirik. Bu dərslikdə, biz [arrow funskiyaları](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classlar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) operatorlarından istifadə edirik. Siz [Babel REPL](babel://es5-syntax-example) istifadə edərək ES6 kodunun nəyə kompilyasiya olunduğunu görə bilərsiniz.
 
 ## Setup for the Tutorial {#setup-for-the-tutorial}
 

From 51b453e9bee570b392a093a1af7b35cf86df6001 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 19:50:55 +0400
Subject: [PATCH 022/118] Translate tutorial navbar and retranslate time travel
 text

---
 content/tutorial/nav.yml     | 54 ++++++++++++++++++------------------
 content/tutorial/tutorial.md |  2 +-
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml
index 8d498ab14..40915465a 100644
--- a/content/tutorial/nav.yml
+++ b/content/tutorial/nav.yml
@@ -1,111 +1,111 @@
-- title: Tutorial
+- title: Dərslik
   items:
     - id: before-we-start-the-tutorial
-      title: Before We Start the Tutorial
+      title: Dərsliyi Başlamazdan Əvvəl
       href: /tutorial/tutorial.html#before-we-start-the-tutorial
       forceInternal: true
       subitems:
         - id: what-are-we-building
-          title: What Are We Building?
+          title: Biz nə Düzəldirik?
           href: /tutorial/tutorial.html#what-are-we-building
           forceInternal: true
         - id: prerequisites
-          title: Prerequisites
+          title: Ön Şərtlər
           href: /tutorial/tutorial.html#prerequisites
           forceInternal: true
     - id: setup-for-the-tutorial
-      title: Setup for the Tutorial
+      title: Dərslik üçün Plan
       href: /tutorial/tutorial.html#setup-for-the-tutorial
       forceInternal: true
       subitems:
         - id: setup-option-1-write-code-in-the-browser
-          title: "Option 1: Write Code in the Browser"
+          title: "Plan 1: Brauzerdə Kodu Yaz"
           href: /tutorial/tutorial.html#setup-option-1-write-code-in-the-browser
           forceInternal: true
         - id: setup-option-2-local-development-environment
-          title: "Option 2: Local Development Environment"
+          title: "Plan 2: Lokal Təkminləşmə Mühiti"
           href: /tutorial/tutorial.html#setup-option-2-local-development-environment
           forceInternal: true
         - id: help-im-stuck
-          title: Help, I'm Stuck!
+          title: Kömək, Mən İlişmişəm!
           href: /tutorial/tutorial.html#help-im-stuck
           forceInternal: true
     - id: overview
-      title: Overview
+      title: İcmal
       href: /tutorial/tutorial.html#overview
       forceInternal: true
       subitems:
         - id: what-is-react
-          title: What Is React?
+          title: React Nədir?
           href: /tutorial/tutorial.html#what-is-react
           forceInternal: true
         - id: inspecting-the-starter-code
-          title: Inspecting the Starter Code
+          title: Başlanğıc Kodunun Yoxlanması
           href: /tutorial/tutorial.html#inspecting-the-starter-code
           forceInternal: true
         - id: passing-data-through-props
-          title: Passing Data Through Props
+          title: Məlumatın Parametrlər ilə Ötürülməsi
           href: /tutorial/tutorial.html#passing-data-through-props
           forceInternal: true
         - id: making-an-interactive-component
-          title: Making an Interactive Component
+          title: İnteraktiv Komponentin Yaradılması
           href: /tutorial/tutorial.html#making-an-interactive-component
           forceInternal: true
         - id: developer-tools
-          title: Developer Tools
+          title: Developer Alətləri
           href: /tutorial/tutorial.html#developer-tools
           forceInternal: true
     - id: completing-the-game
-      title: Completing the Game
+      title: Oyunu Tamamlamaq
       href: /tutorial/tutorial.html#completing-the-game
       forceInternal: true
       subitems:
         - id: lifting-state-up
-          title: Lifting State Up
+          title: Vəziyyəti Qaldır
           href: /tutorial/tutorial.html#lifting-state-up
           forceInternal: true
         - id: why-immutability-is-important
-          title: Why Immutability Is Important
+          title: Dəyişməzlik Niyə Vacibdir
           href: /tutorial/tutorial.html#why-immutability-is-important
           forceInternal: true
         - id: function-components
-          title: Function Components
+          title: Funskional Komponentlər
           href: /tutorial/tutorial.html#function-components
           forceInternal: true
         - id: taking-turns
-          title: Taking Turns
+          title: Sıranı Gözlə
           href: /tutorial/tutorial.html#taking-turns
           forceInternal: true
         - id: declaring-a-winner
-          title: Declaring a Winner
+          title: Qalibi Bəyan Et
           href: /tutorial/tutorial.html#declaring-a-winner
           forceInternal: true
     - id: adding-time-travel
-      title: Adding Time Travel
+      title: Zaman Səyahətinin Əlavəsi
       href: /tutorial/tutorial.html#adding-time-travel
       forceInternal: true
       subitems:
         - id: storing-a-history-of-moves
-          title: Storing a History of Moves
+          title: Hərəkətlərin Tarixcəsini Yadda Saxla
           href: /tutorial/tutorial.html#storing-a-history-of-moves
           forceInternal: true
         - id: lifting-state-up-again
-          title: Lifting State Up, Again
+          title: Vəziyyəti Yenidən Qaldır
           href: /tutorial/tutorial.html#lifting-state-up-again
           forceInternal: true
         - id: showing-the-past-moves
-          title: Showing the Past Moves
+          title: Keçmiş Hərəkətləri Göstər
           href: /tutorial/tutorial.html#showing-the-past-moves
           forceInternal: true
         - id: picking-a-key
-          title: Picking a Key
+          title: Açar Seç
           href: /tutorial/tutorial.html#picking-a-key
           forceInternal: true
         - id: implementing-time-travel
-          title: Implementing Time Travel
+          title: Zaman Səyahətini Tətbiq Et
           href: /tutorial/tutorial.html#implementing-time-travel
           forceInternal: true
         - id: wrapping-up
-          title: Wrapping Up
+          title: Yekunlaşdır
           href: /tutorial/tutorial.html#wrapping-up
           forceInternal: true
diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 82b322923..371e8e41d 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -27,7 +27,7 @@ Bu dərslik bir neçə bölməyə bölünmüşdür:
 * [Dərslik üçün Plan](#setup-for-the-tutorial) bu dərsliyi izləmək üçün **başlanğıc nöqtəsidir.**
 * [İcmal](#overview) React-in **əsaslarını** öyrədəcək: komponentlər, parametrlər (props), and vəziyyət (state).
 * [Oyunu Tamamlamaq](#completing-the-game) React təkminləşdirilməsi üçün **ən çox işlənən metodları** öyrədəcək.
-* [Vaxt Səyahətinin Əlavəsi](#adding-time-travel) React-in unikal gücləri haqqında **dərin məlumatlar** verəcək.
+* [Zaman Səyahətinin Əlavəsi](#adding-time-travel) React-in unikal gücləri haqqında **dərin məlumatlar** verəcək.
 
 Bu dərslikdən dəyər almaq üçün, bütün bölmələri birdəfəyə tamamlamaq vacib deyil. Çalışın mümkün qədər çox bölmədən keçəsiniz -- hətta bir və ya iki bölmədə olsa.
 

From d7eb692e7a5107966991bebb28e3da774bb1eb87 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 19:59:42 +0400
Subject: [PATCH 023/118] Translate sample source code texts

---
 .../a-component-using-external-plugins.js     | 16 +++++++-------
 content/home/examples/a-simple-component.js   | 12 ++++-------
 content/home/examples/a-stateful-component.js | 15 ++++---------
 content/home/examples/an-application.js       | 21 +++++++------------
 4 files changed, 22 insertions(+), 42 deletions(-)

diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index 09868cfbb..cc557f27e 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/content/home/examples/a-component-using-external-plugins.js
@@ -2,31 +2,29 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = { value: 'Hello, **world**!' };
+    this.state = {value: 'Salan, **dünya**!'};
   }
 
   handleChange(e) {
-    this.setState({ value: e.target.value });
+    this.setState({value: e.target.value});
   }
 
   getRawMarkup() {
     const md = new Remarkable();
-    return { __html: md.render(this.state.value) };
+    return {__html: md.render(this.state.value)};
   }
 
   render() {
     return (
       <div className="MarkdownEditor">
-        <h3>Input</h3>
-        <label htmlFor="markdown-content">
-          Enter some markdown
-        </label>
+        <h3>Daxiletmə</h3>
+        <label htmlFor="markdown-content">Markdown daxil edin</label>
         <textarea
           id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />
-        <h3>Output</h3>
+        <h3>Nəticə</h3>
         <div
           className="content"
           dangerouslySetInnerHTML={this.getRawMarkup()}
@@ -38,5 +36,5 @@ class MarkdownEditor extends React.Component {
 
 ReactDOM.render(
   <MarkdownEditor />,
-  document.getElementById('markdown-example')
+  document.getElementById('markdown-example'),
 );
diff --git a/content/home/examples/a-simple-component.js b/content/home/examples/a-simple-component.js
index 90c31b960..93692efaf 100644
--- a/content/home/examples/a-simple-component.js
+++ b/content/home/examples/a-simple-component.js
@@ -1,14 +1,10 @@
 class HelloMessage extends React.Component {
   render() {
-    return (
-      <div>
-        Hello {this.props.name}
-      </div>
-    );
+    return <div>Salam {this.props.name}</div>;
   }
 }
 
 ReactDOM.render(
-  <HelloMessage name="Taylor" />,
-  document.getElementById('hello-example')
-);
\ No newline at end of file
+  <HelloMessage name="Fuad" />,
+  document.getElementById('hello-example'),
+);
diff --git a/content/home/examples/a-stateful-component.js b/content/home/examples/a-stateful-component.js
index 25d5a9145..2e2ab4198 100644
--- a/content/home/examples/a-stateful-component.js
+++ b/content/home/examples/a-stateful-component.js
@@ -1,12 +1,12 @@
 class Timer extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { seconds: 0 };
+    this.state = {seconds: 0};
   }
 
   tick() {
     this.setState(state => ({
-      seconds: state.seconds + 1
+      seconds: state.seconds + 1,
     }));
   }
 
@@ -19,15 +19,8 @@ class Timer extends React.Component {
   }
 
   render() {
-    return (
-      <div>
-        Seconds: {this.state.seconds}
-      </div>
-    );
+    return <div>{this.state.seconds} saniyə</div>;
   }
 }
 
-ReactDOM.render(
-  <Timer />,
-  document.getElementById('timer-example')
-);
\ No newline at end of file
+ReactDOM.render(<Timer />, document.getElementById('timer-example'));
diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 43f777dc2..53ec8f66b 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -1,7 +1,7 @@
 class TodoApp extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { items: [], text: '' };
+    this.state = {items: [], text: ''};
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
@@ -12,24 +12,20 @@ class TodoApp extends React.Component {
         <h3>TODO</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
-          <label htmlFor="new-todo">
-            What needs to be done?
-          </label>
+          <label htmlFor="new-todo">Nə etmək lazımdır?</label>
           <input
             id="new-todo"
             onChange={this.handleChange}
             value={this.state.text}
           />
-          <button>
-            Add #{this.state.items.length + 1}
-          </button>
+          <button>Əlavə Et #{this.state.items.length + 1}</button>
         </form>
       </div>
     );
   }
 
   handleChange(e) {
-    this.setState({ text: e.target.value });
+    this.setState({text: e.target.value});
   }
 
   handleSubmit(e) {
@@ -39,11 +35,11 @@ class TodoApp extends React.Component {
     }
     const newItem = {
       text: this.state.text,
-      id: Date.now()
+      id: Date.now(),
     };
     this.setState(state => ({
       items: state.items.concat(newItem),
-      text: ''
+      text: '',
     }));
   }
 }
@@ -60,7 +56,4 @@ class TodoList extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <TodoApp />,
-  document.getElementById('todos-example')
-);
+ReactDOM.render(<TodoApp />, document.getElementById('todos-example'));

From 6dd888d2cd50f404f03845773b0294b266294f30 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 20:03:40 +0400
Subject: [PATCH 024/118] Translate code editor texts

---
 src/components/CodeEditor/CodeEditor.js   | 12 ++++++------
 src/components/CodeExample/CodeExample.js |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 6e42fff7e..f6f176264 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -56,12 +56,12 @@ class CodeEditor extends Component {
     if (showBabelErrorMessage) {
       errorMessage = (
         <span>
-          Babel could not be loaded.
+          Babel yüklənə bilmədi
           <br />
           <br />
-          This can be caused by an ad blocker. If you're using one, consider
-          adding reactjs.org to the whitelist so the live code examples will
-          work.
+          Bu ad bloker işlətməkdən ola bilər. Əgər siz ad blocker
+          işlədirsinizsə, canlı kod nümunələrini görmək üçün reactjs.org
+          domenini ağ siyahıya atınş
         </span>
       );
     } else if (error != null) {
@@ -99,7 +99,7 @@ class CodeEditor extends Component {
                 color: colors.white,
               }}>
               <MetaTitle onDark={true}>
-                Live JSX Editor
+                Canlı JSX Redaktoru
                 <label
                   css={{
                     fontSize: 14,
@@ -200,7 +200,7 @@ class CodeEditor extends Component {
                   padding: '0 10px',
                   backgroundColor: colors.divider,
                 }}>
-                <MetaTitle>Result</MetaTitle>
+                <MetaTitle>Nəticə</MetaTitle>
               </div>
               <div
                 id={containerNodeID}
diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
index bc5d6ed10..3f53ce7b1 100644
--- a/src/components/CodeExample/CodeExample.js
+++ b/src/components/CodeExample/CodeExample.js
@@ -61,7 +61,7 @@ class CodeExample extends Component {
         {loaded ? (
           <CodeEditor code={code} containerNodeID={containerNodeID} />
         ) : (
-          <h4>Loading code example...</h4>
+          <h4>Nümunə yüklənir...</h4>
         )}
       </div>
     );

From 579fe8274bcdea5fb97280674429257fc76e5118 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 20:35:59 +0400
Subject: [PATCH 025/118] Translate Setup for the Tutorial

---
 content/tutorial/nav.yml     |  6 ++---
 content/tutorial/tutorial.md | 52 ++++++++++++++++++------------------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml
index 40915465a..2fe1c1968 100644
--- a/content/tutorial/nav.yml
+++ b/content/tutorial/nav.yml
@@ -14,16 +14,16 @@
           href: /tutorial/tutorial.html#prerequisites
           forceInternal: true
     - id: setup-for-the-tutorial
-      title: Dərslik üçün Plan
+      title: Dərslik üçün Qurulma
       href: /tutorial/tutorial.html#setup-for-the-tutorial
       forceInternal: true
       subitems:
         - id: setup-option-1-write-code-in-the-browser
-          title: "Plan 1: Brauzerdə Kodu Yaz"
+          title: "Seçim 1: Brauzerdə Kodu Yaz"
           href: /tutorial/tutorial.html#setup-option-1-write-code-in-the-browser
           forceInternal: true
         - id: setup-option-2-local-development-environment
-          title: "Plan 2: Lokal Təkminləşmə Mühiti"
+          title: "Seçim 2: Lokal Təkminləşmə Mühiti"
           href: /tutorial/tutorial.html#setup-option-2-local-development-environment
           forceInternal: true
         - id: help-im-stuck
diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 371e8e41d..a3c590b2a 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -16,7 +16,7 @@ Bu dərslik heç bir mövcud React biliyini təxmin etmir.
 
 ## Dərsliyi Başlamazdan Əvvəl {#before-we-start-the-tutorial}
 
-Bu dərslikdə biz kiçik bir oyun yazacağıq. **Siz oyun yazmadığınızdan bunu ötürmək istəyə bilərsiniz -- amma buna bir şans verin.** Bu dərslikdə öyrənəcəyiniz metodlar React applikasiyaları yazmaq üçün əsasdır və bu metodları mənimsəmək sizə Reactı dərindən başa düşməyə kömək edəcək.
+Bu dərslikdə biz kiçik bir oyun yazacağıq. **Siz oyun yazmadığınızdan bunu ötürmək istəyə bilərsiniz -- amma buna bir şans verin.** Bu dərslikdə öyrənəcəyiniz metodlar React applikasiyaları yazmaq üçün əsasdır və bu metodları mənimsəmək sizə React-i dərindən başa düşməyə kömək edəcək.
 
 >İpucu
 >
@@ -24,7 +24,7 @@ Bu dərslikdə biz kiçik bir oyun yazacağıq. **Siz oyun yazmadığınızdan b
 
 Bu dərslik bir neçə bölməyə bölünmüşdür:
 
-* [Dərslik üçün Plan](#setup-for-the-tutorial) bu dərsliyi izləmək üçün **başlanğıc nöqtəsidir.**
+* [Dərslik üçün Qurulma](#setup-for-the-tutorial) bu dərsliyi izləmək üçün **başlanğıc nöqtəsidir.**
 * [İcmal](#overview) React-in **əsaslarını** öyrədəcək: komponentlər, parametrlər (props), and vəziyyət (state).
 * [Oyunu Tamamlamaq](#completing-the-game) React təkminləşdirilməsi üçün **ən çox işlənən metodları** öyrədəcək.
 * [Zaman Səyahətinin Əlavəsi](#adding-time-travel) React-in unikal gücləri haqqında **dərin məlumatlar** verəcək.
@@ -49,60 +49,60 @@ Biz sizin HTML və Javascript ilə tanışlığınızı təxmin edirik amma siz
 
 Əgər sizə Javascriptə baxmaq lazımdırsa, biz [bu təlimatı](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) oxumağınızı tövsiyyə edirik. Qeyd edirikki, biz həmçinin bəzi ES6 (Javascriptin yeni versiyası) xüsusiyyətlərindən istifadə edirik. Bu dərslikdə, biz [arrow funskiyaları](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classlar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) operatorlarından istifadə edirik. Siz [Babel REPL](babel://es5-syntax-example) istifadə edərək ES6 kodunun nəyə kompilyasiya olunduğunu görə bilərsiniz.
 
-## Setup for the Tutorial {#setup-for-the-tutorial}
+## Dərslik üçün Qurulma {#setup-for-the-tutorial}
 
-There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer.
+Bu dərsliyi iki yol ilə tamamlamaq olar: siz kodu brauzerdə yaza və ya kompyuterinizdə lokal təkminləşmə mühiti yarada bilərsiniz.
 
-### Setup Option 1: Write Code in the Browser {#setup-option-1-write-code-in-the-browser}
+### Seçim 1: Brauzerdə Kodu Yaz {#setup-option-1-write-code-in-the-browser}
 
-This is the quickest way to get started!
+Bu başlamaq üçün ən tez yoldur!
 
-First, open this **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** in a new tab. The new tab should display an empty tic-tac-toe game board and React code. We will be editing the React code in this tutorial.
+İlk olaraq, bu **[Başlama Kodunu](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** yeni təbdə açın. Yeni təb sizə boş "X O oyun" taxtası və React kodu göstərəcək. Biz bu dərslikdə React kodu üstündə işləyəcəyik.
 
-You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React.
+Siz indi ikinci opsiyanından ötüb, [İcmal](#overview) bölməsinə keçə bilərsiniz.
 
-### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment}
+### Seçim 2: Lokal Təkminləşmə Mühiti {#setup-option-2-local-development-environment}
 
-This is completely optional and not required for this tutorial!
+Bu tam istəyə bağlı və bu dərslik üçün məcburi deyil!
 
 <br>
 
 <details>
 
-<summary><b>Optional: Instructions for following along locally using your preferred text editor</b></summary>
+<summary><b>Məcburi Deyil: Üstünlük verdiyiniz kod redaktoru ilə lokal qurulmasının təlimatları</b></summary>
 
-This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow:
+Bu qurulma daha çox vaxt tələb edir amma sizə bu dərsliyi seçdiyiniz redaktor ilə tamamlamağa icazə verir. İzləmək üçün addımlar:
 
-1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed.
-2. Follow the [installation instructions for Create React App](/docs/create-a-new-react-app.html#create-react-app) to make a new project.
+1. Əmin olunki [Node.js](https://nodejs.org/en/) son versiyası qurulub.
+2. Yeni layihə yaratmaq üçün [Create React App qurulma təlimatlarını](/docs/create-a-new-react-app.html#create-react-app) izləyin.
 
 ```bash
 npx create-react-app my-app
 ```
 
-3. Delete all files in the `src/` folder of the new project 
+3. Yeni layihənin `src/` direktoriyasından bütün faylları silin.
 
-> Note: **don't delete the entire `src` folder, just the original source files inside it.**.  We'll replace the default source files with examples for this project in the next step.
+> Qeyd: **bütün `src` direktoriyasını yox, yalnız daxilindəki faylları silin.**. Biz standart faylları bu layihədəki nümunələr ilə əvəz edəcəyik.
 
 ```bash
 cd my-app
 cd src
 
-# If you're using a Mac or Linux:
+# Əgər Mac və ya Linux işlədirsinizsə:
 rm -f *
 
-# Or, if you're on Windows:
+# Əgər Windows işlədirsinizsə:
 del *
 
-# Then, switch back to the project folder
+# Layihə direktoriyasına geri qayıdın:
 cd ..
 ```
 
-4. Add a file named `index.css` in the `src/` folder with [this CSS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100).
+4. `index.css` adlı faylı `src/` direktoriyasına [bu CSS kodu](https://codepen.io/gaearon/pen/oWWQNa?editors=0100) ilə əlavə edin.
 
-5. Add a file named `index.js` in the `src/` folder with [this JS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010).
+5. `index.js` adlı faylı `src/` directoriyasına [bu JS kodu](https://codepen.io/gaearon/pen/oWWQNa?editors=0010) ilə əlavə edin.
 
-6. Add these three lines to the top of `index.js` in the `src/` folder:
+6. `src/` directoriyasında olan `index.js` faylının ən yuxarısınz aşağıdalı üç sətri əlavə edin:
 
 ```js
 import React from 'react';
@@ -110,15 +110,15 @@ import ReactDOM from 'react-dom';
 import './index.css';
 ```
 
-Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field.
+İndi, əgər siz layihə direktoriyasından `npm start` icra etsəniz və brauzerdə `http://localhost:3000` səhifəni açsanız, boş "X O oyunu" taxtası.
 
-We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor.
+Editorunuz üçün sintaks seçilməsini konfiqurasiya etmək üçün [bu təlimatları](https://babeljs.io/docs/editors/) izləməniz tövsiyyə olunur.
 
 </details>
 
-### Help, I'm Stuck! {#help-im-stuck}
+### Kömək, Mən İlişmişəm!
 
-If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out.
+Əgər ilişmisinizsə, [cəmiyyətimizin dəstək resurslarını](/community/support.html) nəzərdən keçirin. Xüsusisən, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) kömək almaq üçün ən tez yoldur. Əgər siz cavab almırsınızsa və ya siz yenədə ilişmisinizsə, xahiş olunur bizə İssue göndərin və biz sizə kömək etməyə cəhd edəcəyik.
 
 ## Overview {#overview}
 

From 44be256e779f4ba970aa2c174ed831df5ab1f66f Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 21:03:05 +0400
Subject: [PATCH 026/118] Finish FAQ Ajax

---
 content/docs/faq-ajax.md | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/content/docs/faq-ajax.md b/content/docs/faq-ajax.md
index 102e1c07e..dc2f344ae 100644
--- a/content/docs/faq-ajax.md
+++ b/content/docs/faq-ajax.md
@@ -1,30 +1,30 @@
 ---
 id: faq-ajax
-title: AJAX and APIs
+title: AJAX və API-lar
 permalink: docs/faq-ajax.html
 layout: docs
 category: FAQ
 ---
 
-### How can I make an AJAX call? {#how-can-i-make-an-ajax-call}
+### AJAX çağırış nə cür edə bilərəm? {#how-can-i-make-an-ajax-call}
 
-You can use any AJAX library you like with React. Some popular ones are [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), and the browser built-in [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
+React ilə istədiyiniz Ajax kitabxanasını işlədə bilərsiniz. Populyar kitabxanalar: [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), və brauzerə qurulmuş [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
 
-### Where in the component lifecycle should I make an AJAX call? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call}
+### Komponent yaşama tsiklinin harasında Ajax çağırışları etməliyəm? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call}
 
-You should populate data with AJAX calls in the [`componentDidMount`](/docs/react-component.html#mounting) lifecycle method. This is so you can use `setState` to update your component when the data is retrieved.
+Ajax çağırışdan gələn bütün məlumatları [`componentDidMount`](/docs/react-component.html#mounting) yaşama tsikli funskiyasından tətbiq etməlisiniz. Bunun səbəbi, məlumat alındıqda `setState` ilə komponenti yeniləməkdən imkanının olmasıdır.
 
-### Example: Using AJAX results to set local state {#example-using-ajax-results-to-set-local-state}
+### Nümunə: AJAX nəticələrinin lokal veziyyətə yazılması {#example-using-ajax-results-to-set-local-state}
 
-The component below demonstrates how to make an AJAX call in `componentDidMount` to populate local component state. 
+Aşağıdakı komponent `componentDidMount`dan Ajax çağırış edib lokal komponent vəziyyətinin doldurulmasını göstərir. 
 
-The example API returns a JSON object like this:
+Nümunə API belə bir JSON obyekt göndərir:
 
 ```
 {
   "items": [
-    { "id": 1, "name": "Apples",  "price": "$2" },
-    { "id": 2, "name": "Peaches", "price": "$5" }
+    { "id": 1, "name": "Almalar",  "price": "2 AZN" },
+    { "id": 2, "name": "Şəftəlilər", "price": "5 AZN" }
   ] 
 }
 ```
@@ -50,9 +50,9 @@ class MyComponent extends React.Component {
             items: result.items
           });
         },
-        // Note: it's important to handle errors here
-        // instead of a catch() block so that we don't swallow
-        // exceptions from actual bugs in components.
+        // Qeyd: komponentlərdə olan aktual xətaları udmamaq üçün
+        // AJAX xetəlarını `catch()` blokunda tutmaq əvəzinə burda
+        // tutmaq daha vacibdir.
         (error) => {
           this.setState({
             isLoaded: true,
@@ -65,9 +65,9 @@ class MyComponent extends React.Component {
   render() {
     const { error, isLoaded, items } = this.state;
     if (error) {
-      return <div>Error: {error.message}</div>;
+      return <div>Xəta: {error.message}</div>;
     } else if (!isLoaded) {
-      return <div>Loading...</div>;
+      return <div>Yüklənir...</div>;
     } else {
       return (
         <ul>

From d319e17e201207fa9f2bc5110ba6f51ef49a9af6 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 21:21:23 +0400
Subject: [PATCH 027/118] Translate documentation navigation

---
 content/docs/nav.yml | 126 +++++++++++++++++++++----------------------
 1 file changed, 63 insertions(+), 63 deletions(-)

diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 4d4a7571f..6d392b6a9 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -1,41 +1,41 @@
-- title: Installation
+- title: Qurulma
   items:
     - id: getting-started
-      title: Getting Started
+      title: Başlamaq
     - id: add-react-to-a-website
-      title: Add React to a Website
+      title: Səhifəyə React Əlavə Et
     - id: create-a-new-react-app
-      title: Create a New React App
+      title: Yeni React Applikasiyası Yarat
     - id: cdn-links
-      title: CDN Links
-- title: Main Concepts
+      title: CDN Linləri
+- title: Əsas Konsepsiyalar
   isOrdered: true
   items:
     - id: hello-world
-      title: Hello World
+      title: Salam Dünya
     - id: introducing-jsx
-      title: Introducing JSX
+      title: JSX-ə Giriş
     - id: rendering-elements
-      title: Rendering Elements
+      title: Elementlərin Render Edilməsi
     - id: components-and-props
-      title: Components and Props
+      title: Komponent və Parametrlər
     - id: state-and-lifecycle
-      title: State and Lifecycle
+      title: Vəziyyət və Yaşama Tsikli
     - id: handling-events
-      title: Handling Events
+      title: Hadisələrin İşlədilməsi
     - id: conditional-rendering
-      title: Conditional Rendering
+      title: Şərti Render Edilmə
     - id: lists-and-keys
-      title: Lists and Keys
+      title: Siyahılar və Açarlar
     - id: forms
-      title: Forms
+      title: Anketlər
     - id: lifting-state-up
-      title: Lifting State Up
+      title: Vəziyyətin Qaldırılması
     - id: composition-vs-inheritance
-      title: Composition vs Inheritance
+      title: Kompozisiya vs Vasislik
     - id: thinking-in-react
-      title: Thinking In React
-- title: Advanced Guides
+      title: React ilə Düşünmək
+- title: Genişləndirilmiş Təlimatlar
   items:
     - id: accessibility
       title: Accessibility
@@ -44,42 +44,42 @@
     - id: context
       title: Context
     - id: error-boundaries
-      title: Error Boundaries
+      title: Xəta Sərhədləri
     - id: forwarding-refs
-      title: Forwarding Refs
+      title: Reflərin Yönləndirilməsi
     - id: fragments
-      title: Fragments
+      title: Fragmentlər
     - id: higher-order-components
-      title: Higher-Order Components
+      title: Yüksək Dərəcəli Komponentlər
     - id: integrating-with-other-libraries
-      title: Integrating with Other Libraries
+      title: Digər Kitabxanalar ilə İnteqrasiya
     - id: jsx-in-depth
-      title: JSX In Depth
+      title: JSX Derindən
     - id: optimizing-performance
-      title: Optimizing Performance
+      title: Performansın Optimallaşdırılması
     - id: portals
-      title: Portals
+      title: Portallar
     - id: react-without-es6
-      title: React Without ES6
+      title: ES6-sız React
     - id: react-without-jsx
-      title: React Without JSX
+      title: JSX-siz React
     - id: reconciliation
-      title: Reconciliation
+      title: Rekonsiliasiya
     - id: refs-and-the-dom
-      title: Refs and the DOM
+      title: Refs və DOM
     - id: render-props
-      title: Render Props
+      title: Render Etmə Parametrləri
     - id: static-type-checking
-      title: Static Type Checking
+      title: Static Tip Yoxlamaladı
     - id: strict-mode
-      title: Strict Mode
+      title: Ciddi Rejim
     - id: typechecking-with-proptypes
-      title: Typechecking With PropTypes
+      title: PropType-lar ilə Tip Yoxlamaları
     - id: uncontrolled-components
-      title: Uncontrolled Components
+      title: Kontrolsuz Kopmonentlər
     - id: web-components
-      title: Web Components
-- title: API Reference
+      title: Veb Komponents
+- title: API Arayışı
   items:
     - id: react-api
       title: React
@@ -95,59 +95,59 @@
     - id: events
       title: SyntheticEvent
     - id: test-utils
-      title: Test Utilities
+      title: Test Vasitələri
     - id: shallow-renderer
-      title: Shallow Renderer
+      title: Dayaz Render Etmə
     - id: test-renderer
       title: Test Renderer
     - id: javascript-environment-requirements
-      title: JS Environment Requirements
+      title: JS Mühit Tələbləri
     - id: glossary
-      title: Glossary
-- title: Hooks (New)
+      title: Lüğət
+- title: Hooklar (Yeni)
   isOrdered: true
   items:
       - id: hooks-intro
-        title: Introducing Hooks
+        title: Hooklara Giriş
       - id: hooks-overview
-        title: Hooks at a Glance
+        title: Hooklar Bir Baxışda
       - id: hooks-state
-        title: Using the State Hook
+        title: State Hookun İşlənməsi
       - id: hooks-effect
-        title: Using the Effect Hook
+        title: Effect Hookun İşlənməsi
       - id: hooks-rules
-        title: Rules of Hooks
+        title: Hookların Qaydaları
       - id: hooks-custom
-        title: Building Your Own Hooks
+        title: Öz Hooklarınızın Yaranması
       - id: hooks-reference
-        title: Hooks API Reference
+        title: Hookların API Arayışı
       - id: hooks-faq
         title: Hooks FAQ
-- title: Contributing
+- title: İştirak Etmək
   items:
   - id: how-to-contribute
-    title: How to Contribute
+    title: Necə İştirak Etmək
   - id: codebase-overview
-    title: Codebase Overview
+    title: Kodun İcmalı
   - id: implementation-notes
-    title: Implementation Notes
+    title: Tətbiqetmə Qeydləri
   - id: design-principles
-    title: Design Principles
+    title: Dizayn Əsasları
 - title: FAQ
   items:
     - id: faq-ajax
-      title: AJAX and APIs
+      title: AJAX və APIs
     - id: faq-build
-      title: Babel, JSX, and Build Steps
+      title: Babel, JSX, və Qurulma Addımları
     - id: faq-functions
-      title: Passing Functions to Components
+      title: Komponentlərə Funskiyaların Göndərilməsi
     - id: faq-state
-      title: Component State
+      title: Komponent Vəziyyəti
     - id: faq-styling
-      title: Styling and CSS
+      title: Stil və CSS
     - id: faq-structure
-      title: File Structure
+      title: Fayl Strukturu
     - id: faq-versioning
-      title: Versioning Policy
+      title: Versiya Qaydaları
     - id: faq-internals
-      title: Virtual DOM and Internals
+      title: Virtual DOM və React-in Daxili

From 75e630224dcfb995ef60643eb96f10522c43038e Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 21:23:31 +0400
Subject: [PATCH 028/118] Set HTML lang to Azerbaijani

---
 src/html.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/html.js b/src/html.js
index e0e2757e8..1d2431968 100644
--- a/src/html.js
+++ b/src/html.js
@@ -7,7 +7,7 @@ const JS_NPM_URLS = [
 export default class HTML extends React.Component {
   render() {
     return (
-      <html lang="en" {...this.props.htmlAttributes}>
+      <html lang="az" {...this.props.htmlAttributes}>
         <head>
           {JS_NPM_URLS.map(url => (
             <link key={url} rel="preload" href={url} as="script" />

From 7120aef603b4dfc1ffc9a0b1714c16216b7c99b7 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 21:30:44 +0400
Subject: [PATCH 029/118] More navigation translations

---
 content/docs/nav.yml | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 6d392b6a9..cd81f6a68 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -7,7 +7,7 @@
     - id: create-a-new-react-app
       title: Yeni React Applikasiyası Yarat
     - id: cdn-links
-      title: CDN Linləri
+      title: CDN Linkləri
 - title: Əsas Konsepsiyalar
   isOrdered: true
   items:
@@ -32,29 +32,29 @@
     - id: lifting-state-up
       title: Vəziyyətin Qaldırılması
     - id: composition-vs-inheritance
-      title: Kompozisiya vs Vasislik
+      title: Kompozisiya vs Varislik
     - id: thinking-in-react
       title: React ilə Düşünmək
 - title: Genişləndirilmiş Təlimatlar
   items:
     - id: accessibility
-      title: Accessibility
+      title: İmkanlılıq
     - id: code-splitting
-      title: Code-Splitting
+      title: Kod Parçalanması
     - id: context
-      title: Context
+      title: Kontext
     - id: error-boundaries
       title: Xəta Sərhədləri
     - id: forwarding-refs
-      title: Reflərin Yönləndirilməsi
+      title: Ref-lərin Yönləndirilməsi
     - id: fragments
-      title: Fragmentlər
+      title: Fraqmentlər
     - id: higher-order-components
       title: Yüksək Dərəcəli Komponentlər
     - id: integrating-with-other-libraries
       title: Digər Kitabxanalar ilə İnteqrasiya
     - id: jsx-in-depth
-      title: JSX Derindən
+      title: JSX Dərindən
     - id: optimizing-performance
       title: Performansın Optimallaşdırılması
     - id: portals
@@ -66,17 +66,17 @@
     - id: reconciliation
       title: Rekonsiliasiya
     - id: refs-and-the-dom
-      title: Refs və DOM
+      title: Ref-lər və DOM
     - id: render-props
       title: Render Etmə Parametrləri
     - id: static-type-checking
-      title: Static Tip Yoxlamaladı
+      title: Static Tip Yoxlaması
     - id: strict-mode
       title: Ciddi Rejim
     - id: typechecking-with-proptypes
       title: PropType-lar ilə Tip Yoxlamaları
     - id: uncontrolled-components
-      title: Kontrolsuz Kopmonentlər
+      title: Kontrolsuz Komponentlər
     - id: web-components
       title: Veb Komponents
 - title: API Arayışı
@@ -91,7 +91,7 @@
     - id: react-dom-server
       title: ReactDOMServer
     - id: dom-elements
-      title: DOM Elements
+      title: DOM Elementləri
     - id: events
       title: SyntheticEvent
     - id: test-utils
@@ -112,17 +112,17 @@
       - id: hooks-overview
         title: Hooklar Bir Baxışda
       - id: hooks-state
-        title: State Hookun İşlənməsi
+        title: State Hookunun İşlənməsi
       - id: hooks-effect
-        title: Effect Hookun İşlənməsi
+        title: Effect Hookunun İşlənməsi
       - id: hooks-rules
         title: Hookların Qaydaları
       - id: hooks-custom
-        title: Öz Hooklarınızın Yaranması
+        title: Öz Hooklarınızın Yaradılması
       - id: hooks-reference
         title: Hookların API Arayışı
       - id: hooks-faq
-        title: Hooks FAQ
+        title: Hooklar FAQ
 - title: İştirak Etmək
   items:
   - id: how-to-contribute
@@ -144,7 +144,7 @@
     - id: faq-state
       title: Komponent Vəziyyəti
     - id: faq-styling
-      title: Stil və CSS
+      title: Stilləmə və CSS
     - id: faq-structure
       title: Fayl Strukturu
     - id: faq-versioning

From e8fda61d4c7377a73ddd15f3f36f66f3ccb31654 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Fri, 8 Feb 2019 22:05:29 +0400
Subject: [PATCH 030/118] Translate what's react? section

---
 content/tutorial/tutorial.md | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index a3c590b2a..6e704facb 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -1,6 +1,6 @@
 ---
 id: tutorial
-title: "Dəsrlik: React-a Giriş"
+title: "Dəsrlik: React-ə Giriş"
 layout: tutorial
 sectionid: tutorial
 permalink: tutorial/tutorial.html
@@ -120,22 +120,22 @@ Editorunuz üçün sintaks seçilməsini konfiqurasiya etmək üçün [bu təlim
 
 Əgər ilişmisinizsə, [cəmiyyətimizin dəstək resurslarını](/community/support.html) nəzərdən keçirin. Xüsusisən, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) kömək almaq üçün ən tez yoldur. Əgər siz cavab almırsınızsa və ya siz yenədə ilişmisinizsə, xahiş olunur bizə İssue göndərin və biz sizə kömək etməyə cəhd edəcəyik.
 
-## Overview {#overview}
+## İcmal {#overview}
 
-Now that you're set up, let's get an overview of React!
+İndi sizdə hər şey qurulub deyə gəlin of React haqqında məlumat alaq!
 
-### What Is React? {#what-is-react}
+### React Nədir? {#what-is-react}
 
-React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components".
+React UI yaratmaq üçen deklarativ, səmərəli, və elastik Javascript kitabxanasıdır. Bu kitabxana sizə "komponent" adlanan balaca və sərbəst kod hissələrinin birləşməsi ilə kompleks UI yaratmağa icazə verir.
 
-React has a few different kinds of components, but we'll start with `React.Component` subclasses:
+React-də bir neçə növ komponent var amma gelin `React.Component` subklassından yaranan komponentlər ilə başlayaq:
 
 ```javascript
 class ShoppingList extends React.Component {
   render() {
     return (
       <div className="shopping-list">
-        <h1>Shopping List for {this.props.name}</h1>
+        <h1>{this.props.name} üçün alış-veriş siyahısı</h1>
         <ul>
           <li>Instagram</li>
           <li>WhatsApp</li>
@@ -146,14 +146,14 @@ class ShoppingList extends React.Component {
   }
 }
 
-// Example usage: <ShoppingList name="Mark" />
+// İşlətmə nümunəsi: <ShoppingList name="Rufat" />
 ```
 
-We'll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components.
+Biz bu maraqlı XML-a oxşar təqlərdən sonra danışacağıq. Biz komponentlərdən istifadə edərək React-ə ekranda nə görmək istədiyimizi deyiril. Məlumat dəyişəndə React səmərəli şəkildə komponentləri yeniləyir və yenidən render edir.
 
-Here, ShoppingList is a **React component class**, or **React component type**. A component takes in parameters, called `props` (short for "properties"), and returns a hierarchy of views to display via the `render` method.
+Yuxarıdakı nümunədə, ShoppingList bir **React komponent klassı** və ya **React komponent növüdür**. Komponent `props` ("properties" sözünün qısa yazılışı) adında parametrlər qəbul edir və görünüş üçün iyerarxiyalı formada `render` funskiyasından qaytarır.
 
-The `render` method returns a *description* of what you want to see on the screen. React takes the description and displays the result. In particular, `render` returns a **React element**, which is a lightweight description of what to render. Most React developers use a special syntax called "JSX" which makes these structures easier to write. The `<div />` syntax is transformed at build time to `React.createElement('div')`. The example above is equivalent to:
+`render` funskiyası nə görmək istədiyinizin *məzmununu* qaytarır. React bu məzmun əsasında nəticəni göstərirş. Xesusi ilə, `render` **React elementi** (nə render edilməyinin yüngül məzmunu) qaytarır. Əksər React proqramçıları "JSX" adında xüsusi sintaksis işlədir. Bu sintaksik belə iyerarxiyalı strukturların yazılışını asalaşdırır. `<div />` sintaksisi qurulma zamanı `React.createElement('div')`-ə çevrilir. Yuxarıdalı nümunənin JSX-siz aşağıdakı formada yazılır:
 
 ```javascript
 return React.createElement('div', {className: 'shopping-list'},
@@ -162,13 +162,13 @@ return React.createElement('div', {className: 'shopping-list'},
 );
 ```
 
-[See full expanded version.](babel://tutorial-expanded-version)
+[Genişləndirilmiş versiyanı izləyin.](babel://tutorial-expanded-version)
 
-If you're curious, `createElement()` is described in more detail in the [API reference](/docs/react-api.html#createelement), but we won't be using it in this tutorial. Instead, we will keep using JSX.
+Əgər sizə maraqlıdırsa, `createElement()` [API arayışında](/docs/react-api.html#createelement) daha detallı izah edilir. Biz bu dərslikdə `createElement()` əvəzinə JSX-dən istifadə etməyə davam edəcəyik.
 
-JSX comes with the full power of JavaScript. You can put *any* JavaScript expressions within braces inside JSX. Each React element is a JavaScript object that you can store in a variable or pass around in your program.
+JSX, Javascriptin bütün gücü ilə gəlir. Siz *hər hansı* Javascript ifadəsini JSX-də fiqur mötərizənin içərisindən çağıra bilərsiniz. Hər React elementi bir sadə Javascript obyekti obyektidir. Siz bu obyekti dəyişənə təyin edə bilər və ya applikasiyanızda funskiyalara və s. göndərə bilərsiniz.
 
-The `ShoppingList` component above only renders built-in DOM components like `<div />` and `<li />`. But you can compose and render custom React components too. For example, we can now refer to the whole shopping list by writing `<ShoppingList />`. Each React component is encapsulated and can operate independently; this allows you to build complex UIs from simple components.
+Yuxarıdalı nümunədə, `ShoppingList` komponenti yalnız hazır qurulmuş DOM komponentlərini (`<div />` və `<li />`) render edir. Amma siz başqa xüsusi komponentləri belə biləşdirə bilərsiniz. Məsələn, siz yuxarıdakı alqı satqı listini `<ShoppingList />` kimi işlədə bilərsiniz. Hər React komponenti inkapsulasiya olunub deyə siz bu komponentləri bir birindən asılı olmayacaq şəkildə istifadə edə bilərsiniz. Bu xüsusiyyət sade komponentlərdən komplex UI-lar yaratmağa icazə verir.
 
 ## Inspecting the Starter Code {#inspecting-the-starter-code}
 

From 741dc3b5f1b83b793b725edec2b1ef88c9181c44 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 8 Feb 2019 20:16:30 +0000
Subject: [PATCH 031/118] Just throw

---
 content/docs/hooks-reference.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index 90091d8d1..7a3a0dde8 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -246,9 +246,7 @@ function reducer(state, action) {
     case 'reset':
       return init(action.payload);
     default:
-      // A reducer must always return a valid state.
-      // Alternatively you can throw an error if an invalid action is dispatched.
-      return state;
+      throw new Error();
   }
 }
 

From e3cf542e75018ff7f0104ab7a4df9dc2b8d43bef Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 8 Feb 2019 20:37:28 +0000
Subject: [PATCH 032/118] Fix line numbers

---
 content/docs/hooks-reference.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index 7a3a0dde8..dac51b17a 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -232,7 +232,7 @@ You can also create the initial state lazily. To do this, you can pass an `init`
 
 It lets you extract the logic for calculating the initial state outside the reducer. This is also handy for resetting the state later in response to an action:
 
-```js{1-3,11-12,21,26}
+```js{1-3,11-12,19,24}
 function init(initialCount) {
   return {count: initialCount};
 }

From c12ed3dcb1083cb778223a505e658b0ff8199f34 Mon Sep 17 00:00:00 2001
From: Haqverdi Behbudov <haqverdib@gmail.com>
Date: Sat, 9 Feb 2019 01:37:30 +0400
Subject: [PATCH 033/118] hello world page translated

hello world page translated
---
 content/docs/hello-world.md | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md
index 2fff80254..6d7312b3f 100644
--- a/content/docs/hello-world.md
+++ b/content/docs/hello-world.md
@@ -6,7 +6,7 @@ prev: cdn-links.html
 next: introducing-jsx.html
 ---
 
-The smallest React example looks like this:
+Ən qısa React nümunəsi belə görsənir:
 
 ```js
 ReactDOM.render(
@@ -15,36 +15,34 @@ ReactDOM.render(
 );
 ```
 
-It displays a heading saying "Hello, world!" on the page.
+Bu, səhifədə "Hello world!" başlığını yazır.
 
 [](codepen://hello-world)
 
-Click the link above to open an online editor. Feel free to make some changes, and see how they affect the output. Most pages in this guide will have editable examples like this one.
+Online dəyişmək üçün yuxarıda qeyd olunan linkə keçid edə bilərsiniz. Dəyişiklik etməkdən çəkinməyin, və nəticənin necə olacağına baxın. Bu təlimatda bir çox səhifədə buna bənzər nümunələr görəcəksiniz.
 
 
-## How to Read This Guide {#how-to-read-this-guide}
+## Təlimatı necə oxumaq lazımdır {#how-to-read-this-guide}
 
-In this guide, we will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.
+Təlimatda, React-ın əsas fundamental blokları haqqında bəhs edəcəyik: element və komponent. Onları yaxşı mənimsədikdən sonra, kiçik təkrar istifadə oluna bilən bloklardan kompleks tətbiqlər yarada biləcəksiniz.
 
->Tip
+>Məsləhət
 >
->This guide is designed for people who prefer **learning concepts step by step**. If you prefer to learn by doing, check out our [practical tutorial](/tutorial/tutorial.html). You might find this guide and the tutorial complementary to each other.
+>Təlimat **addım-addım öyrənməyi** tərcih edən insanlar üçün nəzərdə tutulub. Əgər siz praktika edərək öyrənməyi tərcih edirsinizsə, [praktiki təlimat](/tutorial/tutorial.html) nəzər yetirin. Bu təlimatlar bir-birini tamamlayır.
 
-This is the first chapter in a step-by-step guide about main React concepts. You can find a list of all its chapters in the navigation sidebar. If you're reading this from a mobile device, you can access the navigation by pressing the button in the bottom right corner of your screen.
+Bu, React-ın əsas konseptlərini addım-addım öyrən təlimatının birinci hissədir. Sağdakı siyahıda təlimatın bütün hissələri ilə tanış ola bilərsiniz. Siz bunu mobildən oxuyursunuzsa sağ yuxarıda olan düymədən istifadə edərək siyahını görə bilərsiniz.
 
-Every chapter in this guide builds on the knowledge introduced in earlier chapters. **You can learn most of React by reading the “Main Concepts” guide chapters in the order they appear in the sidebar.** For example, [“Introducing JSX”](/docs/introducing-jsx.html) is the next chapter after this one.
+Təlimatda hər bir hissə öncə olan hissədən öyrəndiyimiz biliklərə əsaslanır. **Siyahıdan “Əsas Konseptlər” bölməsini seçib oxuyaraq React haqqında daha çox öyrənə bilərsiniz.** Misal üçün [“JSX-ə giriş”](/docs/introducing-jsx.html) bundan sonrakı hissədir.
 
-## Knowledge Level Assumptions {#knowledge-level-assumptions}
+## Bilik səviyyəsi təyini {#knowledge-level-assumptions}
 
-React is a JavaScript library, and so we'll assume you have a basic understanding of the JavaScript language. **If you don't feel very confident, we recommend [going through a JavaScript tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) to check your knowledge level** and enable you to follow along this guide without getting lost. It might take you between 30 minutes and an hour, but as a result you won't have to feel like you're learning both React and JavaScript at the same time.
+React bir Javascript kitabxanısıdır, və sizin Javascript programlaşdırma dilinin əsaslarını bildiyinizi güman edirik. **Əgər siz bu sahədə biliklərinizə o qədərdə güvənmirsinizsə [JavaScript təlimatını](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) məsləhət görürük.** Bu 30 dəq. və ya 1 saat çəkə bilər, lakin nəticədə siz həm React-ı həm Javascript-i eyni vaxtda paralel olaraq öyrənmək məcburiyyətində qalmayacaqsınız.
 
->Note
+>Qeyd
 >
->This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven't worked with JavaScript in the last few years, [these three points](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) should get you most of the way.
+>Təlimatda zaman zaman Javascript-in yeni sintaksisindən istifadə olunur. Javascript-lə son illər işləməmisinizsə, [üç əsas nöqtə](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) bunu mütləq nəzərdən keçirməlisiniz
 
+## Gəlin başlayaq! {#lets-get-started}
 
-## Let's Get Started! {#lets-get-started}
-
-Keep scrolling down, and you'll find the link to the [next chapter of this guide](/docs/introducing-jsx.html) right before the website footer.
-
+Aşağı skrol etməyə davam edin, [təlimatın növbəti hissəsi](/docs/introducing-jsx.html) linkini görəcəksiniz.
 

From 8f8903abe1b3c1a92fc2723afa4c76a7848a82f0 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Sat, 9 Feb 2019 02:23:34 +0400
Subject: [PATCH 034/118] Fix hello translation typo

---
 content/home/examples/a-component-using-external-plugins.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index cc557f27e..1ea692d9f 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/content/home/examples/a-component-using-external-plugins.js
@@ -2,7 +2,7 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = {value: 'Salan, **dünya**!'};
+    this.state = {value: 'Salam, **dünya**!'};
   }
 
   handleChange(e) {

From 615d1f41f820e132f68c6558f2395f2ef60e99f0 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Sat, 9 Feb 2019 18:29:00 +0400
Subject: [PATCH 035/118] Translate Overview section and change revert props
 translation

---
 content/tutorial/nav.yml     |   6 +-
 content/tutorial/tutorial.md | 105 ++++++++++++++++++-----------------
 2 files changed, 56 insertions(+), 55 deletions(-)

diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml
index 2fe1c1968..309178d6a 100644
--- a/content/tutorial/nav.yml
+++ b/content/tutorial/nav.yml
@@ -44,7 +44,7 @@
           href: /tutorial/tutorial.html#inspecting-the-starter-code
           forceInternal: true
         - id: passing-data-through-props
-          title: Məlumatın Parametrlər ilə Ötürülməsi
+          title: Məlumatın Proplar ilə Ötürülməsi
           href: /tutorial/tutorial.html#passing-data-through-props
           forceInternal: true
         - id: making-an-interactive-component
@@ -61,7 +61,7 @@
       forceInternal: true
       subitems:
         - id: lifting-state-up
-          title: Vəziyyəti Qaldır
+          title: State-i Qaldır
           href: /tutorial/tutorial.html#lifting-state-up
           forceInternal: true
         - id: why-immutability-is-important
@@ -90,7 +90,7 @@
           href: /tutorial/tutorial.html#storing-a-history-of-moves
           forceInternal: true
         - id: lifting-state-up-again
-          title: Vəziyyəti Yenidən Qaldır
+          title: State-i Yenidən Qaldır
           href: /tutorial/tutorial.html#lifting-state-up-again
           forceInternal: true
         - id: showing-the-past-moves
diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 6e704facb..18dca48a0 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -18,36 +18,36 @@ Bu dərslik heç bir mövcud React biliyini təxmin etmir.
 
 Bu dərslikdə biz kiçik bir oyun yazacağıq. **Siz oyun yazmadığınızdan bunu ötürmək istəyə bilərsiniz -- amma buna bir şans verin.** Bu dərslikdə öyrənəcəyiniz metodlar React applikasiyaları yazmaq üçün əsasdır və bu metodları mənimsəmək sizə React-i dərindən başa düşməyə kömək edəcək.
 
->İpucu
+>Məsləhət
 >
->Bu dərslik **praktika ilə oyrənməyə** üstünlük verənlər üçün nəzərdə tutulmuşdur. Əgər siz konsepsiyaları sıfırdan öyrənməyə üstünlük verirsinizsə, bizim [pillə-pillə təlimatımatımızı](/docs/hello-world.html) nəzərdən keçirin. Bu dərslik və göstərilən təlimat bir birini tamamlaya bilər.
+>Bu dərslik **praktika ilə öyrənməyə** üstünlük verənlər üçün nəzərdə tutulmuşdur. Əgər siz konsepsiyaları sıfırdan öyrənməyə üstünlük verirsinizsə, bizim [pillə-pillə təlimatımızı](/docs/hello-world.html) nəzərdən keçirin. Bu dərslik və göstərilən təlimat bir-birini tamamlaya bilər.
 
 Bu dərslik bir neçə bölməyə bölünmüşdür:
 
 * [Dərslik üçün Qurulma](#setup-for-the-tutorial) bu dərsliyi izləmək üçün **başlanğıc nöqtəsidir.**
-* [İcmal](#overview) React-in **əsaslarını** öyrədəcək: komponentlər, parametrlər (props), and vəziyyət (state).
-* [Oyunu Tamamlamaq](#completing-the-game) React təkminləşdirilməsi üçün **ən çox işlənən metodları** öyrədəcək.
+* [İcmal](#overview) React-in **əsaslarını** öyrədəcək: komponentlər, proplar, və state.
+* [Oyunu Tamamlamaq](#completing-the-game) React təkmilləşdirilməsi üçün **ən çox işlənən metodları** öyrədəcək.
 * [Zaman Səyahətinin Əlavəsi](#adding-time-travel) React-in unikal gücləri haqqında **dərin məlumatlar** verəcək.
 
-Bu dərslikdən dəyər almaq üçün, bütün bölmələri birdəfəyə tamamlamaq vacib deyil. Çalışın mümkün qədər çox bölmədən keçəsiniz -- hətta bir və ya iki bölmədə olsa.
+Bu dərslikdən dəyər almaq üçün bütün bölmələri bir dəfəyə tamamlamaq vacib deyil. Çalışın mümkün qədər çox bölmədən keçəsiniz -- hətta bir və ya iki bölmədə olsa.
 
-Dərslikdə irəliləyərkən kodları copy-paste etmək normaldır amma biz kodları əl ilə yazmağınızı tövsiyyə edirik. Bu sizə əzələ yaddaşı yaratmağa və daha güclü anlayışa kömək edəcək.
+Dərslikdə irəliləyərkən kodları copy-paste etmək normaldır amma biz kodları əl ilə yazmağınızı tövsiyyə edirik. Bu sizə əzələ yaddaşı yaratmağa və daha güclü anlamağa kömək edəcək.
 
 ### Biz nə düzəldirik? {#what-are-we-building}
 
-Bu dərslikdə, biz sizə React ilə interaktiv "X O oyunu" düzəltməyi göstərəcəyik.
+Bu dərslikdə biz React ilə interaktiv "X O oyununu" düzəltməyi göstərəcəyik.
 
-Bizim düzəltdiyimizə buradan baxa bilərsiniz: **[Son Nəticə](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Əgər kod sizə aydın deyilsə və ya sintaksis sizə məchuldursa, narahat olmayın! Bu dərsliyin məqsədi sizə React və onun sintaksisini anlamağa kömək etməkdir.
+Bizim düzəltdiyimizə buradan baxa bilərsiniz: **[Son Nəticəyə](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Əgər kod sizə aydın deyilsə və ya sintaksis sizə tanış deyilsə, narahat olmayın! Bu dərsliyin məqsədi sizə React və onun sintaksisini anlamağa kömək etməkdir.
 
 Dərsliyi başlamamışdan qabaq oyuna baxmağınızı tövsiyyə edirik. Bu oyunun diqqət edəcəyiniz xüsusiyyətlərindən biri oyun taxtasının sağında çıxan nömrələnmiş siyahıdır. Bu siyahı oyunda baş vermiş bütün hərəkətlərin tarixçəsidir və bu siyahı oyun davam etdikcə yenilənir.
 
-Oyun ilə tanış olduqdan sonra oyun səhifəsini bağlaya bilərsiniz. Biz bu dərslikdə sadə bir şablon ilə başlayacağıq. Sonraki addım sizi oyunu yazmağa başlamağa hazır etməkdir.
+Oyun ilə tanış olduqdan sonra oyun səhifəsini bağlaya bilərsiniz. Biz bu dərslikdə sadə bir şablon ilə başlayacağıq. Sonraki addım sizi oyunu yazmağa hazır etməkdir.
 
 ### Ön şərtlər {#prerequisites}
 
 Biz sizin HTML və Javascript ilə tanışlığınızı təxmin edirik amma siz başqa proqramlaşdırma dilindən gəlirsinizsə belə davam edə bilərsiniz. Biz sizin proqramlaşdırma konsepsiyaları ilə (funskiyalar, objectlər, massivlər, və daha az dərəcədə, klasslar) tanışlığınızı təxmin edirik.
 
-Əgər sizə Javascriptə baxmaq lazımdırsa, biz [bu təlimatı](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) oxumağınızı tövsiyyə edirik. Qeyd edirikki, biz həmçinin bəzi ES6 (Javascriptin yeni versiyası) xüsusiyyətlərindən istifadə edirik. Bu dərslikdə, biz [arrow funskiyaları](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classlar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) operatorlarından istifadə edirik. Siz [Babel REPL](babel://es5-syntax-example) istifadə edərək ES6 kodunun nəyə kompilyasiya olunduğunu görə bilərsiniz.
+Əgər sizə Javascriptə baxmaq lazımdırsa, biz [bu təlimatı](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) oxumağınızı tövsiyyə edirik. Qeyd edirikki, biz həmçinin bəzi ES6 (Javascriptin yeni versiyası) xüsusiyyətlərindən istifadə edirik. Bu dərslikdə, biz [arrow funskiyaları](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [klaslar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) operatorlarından istifadə edirik. Siz [Babel REPL](babel://es5-syntax-example) istifadə edərək ES6 kodunun nəyə kompilyasiya olunduğunu görə bilərsiniz.
 
 ## Dərslik üçün Qurulma {#setup-for-the-tutorial}
 
@@ -170,25 +170,25 @@ JSX, Javascriptin bütün gücü ilə gəlir. Siz *hər hansı* Javascript ifad
 
 Yuxarıdalı nümunədə, `ShoppingList` komponenti yalnız hazır qurulmuş DOM komponentlərini (`<div />` və `<li />`) render edir. Amma siz başqa xüsusi komponentləri belə biləşdirə bilərsiniz. Məsələn, siz yuxarıdakı alqı satqı listini `<ShoppingList />` kimi işlədə bilərsiniz. Hər React komponenti inkapsulasiya olunub deyə siz bu komponentləri bir birindən asılı olmayacaq şəkildə istifadə edə bilərsiniz. Bu xüsusiyyət sade komponentlərdən komplex UI-lar yaratmağa icazə verir.
 
-## Inspecting the Starter Code {#inspecting-the-starter-code}
+## Başlanğıc Kodunun Yoxlanması {#inspecting-the-starter-code}
 
-If you're going to work on the tutorial **in your browser,** open this code in a new tab: **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. If you're going to work on the tutorial **locally,** instead open `src/index.js` in your project folder (you have already touched this file during the [setup](#setup-option-2-local-development-environment)).
+Əgər siz bu dərsliyi **brauzerdə** edəcəksinizsə bu kodu yeni təbdə açın: **[Başlanğıc Kodu](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Əgər siz bu dərsliyi **lokalda** edəcəksinizsə, layihə direktoriyasında olan `src/index.js` faylını açın (siz bu fayla [qurulma](#setup-option-2-local-development-environment) bölməsində əl gəzdirmisiniz).
 
-This Starter Code is the base of what we're building. We've provided the CSS styling so that you only need to focus on learning React and programming the tic-tac-toe game.
+Başlağıc Kodu sizin yazacağınız üçün baza kodudur. Biz CSS stilləri təmin etmişikki siz diqqətini yalnız React-i öyrənməyə və "X O oyunu" yazmağa yönləndirəsiniz.
 
-By inspecting the code, you'll notice that we have three React components:
+Koda yaxından baxdığınızda, üç React komponentin olacağını görəcəksiniz:
 
 * Square
 * Board
 * Game
 
-The Square component renders a single `<button>` and the Board renders 9 squares. The Game component renders a board with placeholder values which we'll modify later. There are currently no interactive components.
+ Square komponent tək bir `<button>` və Board komponenti 9 ədəd kvadrat render edir. Game komponenti Board elə belə  dəyərlər ilə render edir. Biz bu dəyərləri gələcək bölmələrdə dəyişəcəyik. İndiki zamanda bu kodda interaktiv komponent yoxdur.
 
-### Passing Data Through Props {#passing-data-through-props}
+### Məlumatı Proplar ilə göndərmək {#passing-data-through-props}
 
-Just to get our feet wet, let's try passing some data from our Board component to our Square component.
+Gəlin Board komponentindən Square komponentinə məlumat göndərək.
 
-In Board's `renderSquare` method, change the code to pass a prop called `value` to the Square:
+Board-un `renderSquare` funskiyasında, Square-ə `value` propu əlavə edin:
 
 ```js{3}
 class Board extends React.Component {
@@ -197,7 +197,7 @@ class Board extends React.Component {
   }
 ```
 
-Change Square's `render` method to show that value by replacing `{/* TODO */}` with `{this.props.value}`:
+Square-in `render` funskiyasında məlumatı göstərmək üçün `{/* TODO */}` kodunu `{this.props.value}` ilə əvəz edin:
 
 ```js{5}
 class Square extends React.Component {
@@ -211,22 +211,23 @@ class Square extends React.Component {
 }
 ```
 
-Before:
+Öncə:
 
 ![React Devtools](../images/tutorial/tictac-empty.png)
 
-After: You should see a number in each square in the rendered output.
+Sonra: Siz kvadratlarda rəqəmləri görməlisiniz.
 
 ![React Devtools](../images/tutorial/tictac-numbers.png)
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/aWWQOG?editors=0010)**
+**[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/aWWQOG?editors=0010)**
 
-Congratulations! You've just "passed a prop" from a parent Board component to a child Square component. Passing props is how information flows in React apps, from parents to children.
+Congratulations! Siz valideyn olan Board komponentindən "propu" uçaq olan Square komponentinə göndərdiniz. React-də məlumat axınını propların göndərilməsi ilə baş verir -- valideyndən uşağa doğru.
 
-### Making an Interactive Component {#making-an-interactive-component}
+### İnteraktiv Komponentin Yaradılması {#making-an-interactive-component}
 
-Let's fill the Square component with an "X" when we click it. 
-First, change the button tag that is returned from the Square component's `render()` function to this:
+Gəlin, Square komponentinə tıklandığı zaman kvadratı "X" ilə dolduraq.
+
+İlk öncə Square komponentindəki `render()` funskiyasında olan "button" təqini aşağıdakı koda çevirin:
 
 ```javascript{4}
 class Square extends React.Component {
@@ -240,11 +241,11 @@ class Square extends React.Component {
 }
 ```
 
-If we click on a Square now, we should get an alert in our browser.
+Əgər indi biz Square-ə tıklasaq, brauzerdə "click" yazısı ilə xəbərdarlıq alacağıq.
 
->Note
+>Qeyd
 >
->To save typing and avoid the [confusing behavior of `this`](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), we will use the [arrow function syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) for event handlers here and further below:
+>Yazmanı qısaltmaq və [`this`-in baş qarışdırıcı işləmə prinsipinindən](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) kənar olmaq üçün, biz buradakı və sonrakı hadisə işləyicilərində [arrow funskiyalası sintaksisindən istifadə edəcəyik](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions):
 >
 >```javascript{4}
 >class Square extends React.Component {
@@ -258,13 +259,13 @@ If we click on a Square now, we should get an alert in our browser.
 >}
 >```
 >
->Notice how with `onClick={() => alert('click')}`, we're passing *a function* as the `onClick` prop. It only fires after a click. Forgetting `() =>` and writing `onClick={alert('click')}` is a common mistake, and would fire the alert every time the component re-renders.
+>Diqqət edinki biz `onClick` propuna *funskiya* göndəririk: `onClick={() => alert('click')}`. Bu xəbərdarlığın yalnız düymənin klikləndiyi vaxt çıxmasını təmin edir. `() =>`-nu yaddan çıxarıb birbaşa `onClick={alert('click')}` yazmaq tez tez edilən bir səhvlədən biridir. Səhv formada yazdıqda, komponentin hər renderindən sonra (məsələn dəyişiklikdən sonra baş verən yenidən render) xəbərdarlıq göstəriləcək (tıklamaqdan asılı olmayaraq).
 
-As a next step, we want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use **state**.
+Sıradakı addımda, biz Square komponentinin tılandığını yadda saxlamaq və "X" işarəsi ilə doldurmaq istəyirik. komponentlər "yadda saxlamaq" üçün **state-dən** istifadə edirlər.
 
-React components can have state by setting `this.state` in their constructors. `this.state` should be considered as private to a React component that it's defined in. Let's store the current value of the Square in `this.state`, and change it when the Square is clicked.
+React komponentlərinin state-ləri olması üçün klas konstrukturunda `this.state`-dən istifadə edilir. `this.state` yalnız onu müəyyənləşdirən React komponentinə privat olmalıdır. Gəlin Square-in cari dəyərini `this.state`-də saxlayaq və Square tıklanarkən bu dəyəri dəyişək.
 
-First, we'll add a constructor to the class to initialize the state:
+İlk olaraq state-i inisializasiya etmək üçün klasa konstruktor əlavə edək:
 
 ```javascript{2-7}
 class Square extends React.Component {
@@ -285,17 +286,17 @@ class Square extends React.Component {
 }
 ```
 
->Note
+>Qeyd
 >
->In [JavaScript classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), you need to always call `super` when defining the constructor of a subclass. All React component classes that have a `constructor` should start it with a `super(props)` call.
+>[JavaScript klaslarında](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), subklasın konstrukturunu tətbiq etdikdə mütləq `super`-dən istifadə etmək lazımdır. Konstrukturu olan bütün React komponentləri `super(props)` funskiya çağırışı ilə başlamalıdır.
 
-Now we'll change the Square's `render` method to display the current state's value when clicked:
+Biz Square komponentinin cari state-inin dəyərini tıklamadan sonra göstərmək üçün, Square-in `render` funskiyasından istifadə edəcəyik:
 
-* Replace `this.props.value` with `this.state.value` inside the `<button>` tag.
-* Replace the `() => alert()` event handler with `() => this.setState({value: 'X'})`.
-* Put the `className` and `onClick` props on separate lines for better readability.
+* `<button>` təqində `this.props.value`-nu `this.state.value` ilə əvəz et.
+* the `() => alert()` hadisə işləyicisini `() => this.setState({value: 'X'})` ilə əvəz et.
+* Oxunaqlığı artirmaq üçün `className` və `onClick` proplarını ayrı sətrlərdə yazın.
 
-After these changes, the `<button>` tag that is returned by the Square's `render` method looks like this:
+Bu dəyişikliklərdən sonra Square-in `render` funskiyasından qaytarılan `<button>` təqi aşağıdakı koda oxşamalıdır:
 
 ```javascript{12-13,15}
 class Square extends React.Component {
@@ -319,28 +320,28 @@ class Square extends React.Component {
 }
 ```
 
-By calling `this.setState` from an `onClick` handler in the Square's `render` method, we tell React to re-render that Square whenever its `<button>` is clicked. After the update, the Square's `this.state.value` will be `'X'`, so we'll see the `X` on the game board. If you click on any Square, an `X` should show up.
+Square komponentinin `render` funskiyasında olan `onClick` işləyicisində `this.setState` çağırmaq ilə biz React-ə `<button>` tıklananda komponenti yenidən render etməyi deyirik. Yeniləmədən sonra, Square-in `this.state.value` dəyəri `'X'` olacaq və bu səbəbdən biz oyun taxtasında `X` görəcəyik. Hər hansı bir Square-i tıklayanda, `X` görünəcək.
 
-When you call `setState` in a component, React automatically updates the child components inside of it too.
+Komponentdən `setState` çağırdıqda, React avtomaik olaraq komponentin içinsəki uşaq komponentləridə  yeniləyir.
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/VbbVLg?editors=0010)**
+**[Bu nöqtəya kimi olan bütün kod](https://codepen.io/gaearon/pen/VbbVLg?editors=0010)**
 
-### Developer Tools {#developer-tools}
+### Developer Alətləri {#developer-tools}
 
-The React Devtools extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) lets you inspect a React component tree with your browser's developer tools.
+[Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) və [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) üçün olan React DevTools Genişlənməsi, React komponent iyerarxiyasını brauzerin developer alətlərindən gözdən keçirməyə imkan yaradır.
 
 <img src="../images/tutorial/devtools.png" alt="React Devtools" style="max-width: 100%">
 
-The React DevTools let you check the props and the state of your React components.
+React DevTools sizə React komponentlərinin state və proplarına baxmağa icazə verir.
 
-After installing React DevTools, you can right-click on any element on the page, click "Inspect" to open the developer tools, and the React tab will appear as the last tab to the right.
+React DevTools-u qurduqdan sonra, siz səhifədə hər hansi bir elementə sağ düymə ilə tıklayıb, "Inspect"-ə tıklayıb developer alətlərini açın. React DevTools developer alətlərinin ən son təbində "React" adı ilə görünəcək.
 
-**However, note there are a few extra steps to get it working with CodePen:**
+*Qeyd edinki CodePen-də işləməsi üçün əlavə bir neçə əlavə addım etmək lazımdır:**
 
-1. Log in or register and confirm your email (required to prevent spam).
-2. Click the "Fork" button.
-3. Click "Change View" and then choose "Debug mode".
-4. In the new tab that opens, the devtools should now have a React tab.
+1. Login edin ve ya qeydiyyatdan keçib emailınızı təsdiq edin (spamin qarşısını almaq üçün lazımdır).
+2. "Fork" düyməsini tıklayın.
+3. "Change View" düyməsini tıklayıb "Debug mode" seçin.
+4. Yeni açılan təbdə brauzerin developer alətlərində React təbi olacaq.
 
 ## Completing the Game {#completing-the-game}
 

From 0ef383a1ff3c045a41f53e9feac124ed234b6942 Mon Sep 17 00:00:00 2001
From: Sophie Alpert <git@sophiebits.com>
Date: Sat, 9 Feb 2019 12:54:41 -0800
Subject: [PATCH 036/118] Update a-component-using-external-plugins.md (#1655)

---
 content/home/examples/a-component-using-external-plugins.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/home/examples/a-component-using-external-plugins.md b/content/home/examples/a-component-using-external-plugins.md
index a8c35bbd6..1c50c8718 100644
--- a/content/home/examples/a-component-using-external-plugins.md
+++ b/content/home/examples/a-component-using-external-plugins.md
@@ -4,4 +4,4 @@ order: 3
 domid: markdown-example
 ---
 
-React is flexible and provides hooks that allow you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
+React allows you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.

From bde423043407217428163d75583e764116a9f3a3 Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Sat, 9 Feb 2019 14:06:02 -0800
Subject: [PATCH 037/118] Update README.md

---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e19398017..9b8203644 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,10 @@ The documentation is divided into several sections with a different tone and pur
 
 ## Translation
 
-If you are interesting in translating `reactjs.org`, please see the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg).
+If you are interesting in translating `reactjs.org`, please see the current translation efforts at [isreactreadyyet.com](https://www.isreactreadyyet.com).
+
+
+If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg).
 
 ## Troubleshooting
 

From 61b96a2f24d6c64851ee747e99d5ea7629059ec6 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 9 Feb 2019 23:43:53 +0000
Subject: [PATCH 038/118] Fix bad formatting

---
 content/tutorial/tutorial.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 0191348f0..0ce56c280 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -82,7 +82,9 @@ npx create-react-app my-app
 
 3. Delete all files in the `src/` folder of the new project 
 
-> Note: **don't delete the entire `src` folder, just the original source files inside it.**.  We'll replace the default source files with examples for this project in the next step.
+> Note:
+>
+>**Don't delete the entire `src` folder, just the original source files inside it.** We'll replace the default source files with examples for this project in the next step.
 
 ```bash
 cd my-app

From 544a3c4b45152b74d842dee80bd5c3882fbb6290 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Sun, 10 Feb 2019 18:54:40 +0400
Subject: [PATCH 039/118] Fix tutorial formatting according to reactjs.org

---
 content/tutorial/tutorial.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 18dca48a0..5b8dda63f 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -82,7 +82,9 @@ npx create-react-app my-app
 
 3. Yeni layihənin `src/` direktoriyasından bütün faylları silin.
 
-> Qeyd: **bütün `src` direktoriyasını yox, yalnız daxilindəki faylları silin.**. Biz standart faylları bu layihədəki nümunələr ilə əvəz edəcəyik.
+> Qeyd:
+>
+> **Bütün `src` direktoriyasını yox, yalnız daxilindəki faylları silin.**. Biz standart faylları bu layihədəki nümunələr ilə əvəz edəcəyik.
 
 ```bash
 cd my-app

From 564dbc705f709029e0092967e3c31b8f2f75de43 Mon Sep 17 00:00:00 2001
From: Alexander Kuznetsov <alexkuz@gmail.com>
Date: Sun, 10 Feb 2019 18:28:06 +0300
Subject: [PATCH 040/118] Descriptive link text for accessibility (#1659)

---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 47daaedf9..4b3bbb6e6 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -89,7 +89,7 @@ Let's recap what happens in this example:
 >
 >React treats components starting with lowercase letters as DOM tags. For example, `<div />` represents an HTML div tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
 >
->You can read more about the reasoning behind this convention [here.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
+>To learn more about the reasoning behind this convention, please read [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
 
 ## Composing Components {#composing-components}
 

From 6dea652a709af39e90a88be45f0f45849ab29d17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlio=20Gomes?=
 <38530342+JulioGsn@users.noreply.github.com>
Date: Sun, 10 Feb 2019 13:53:46 -0200
Subject: [PATCH 041/118] Fixed broken link in readme.md file (#1661)

* Fixed broken link on readme.md file

* Update README.md
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9b8203644..ed0651b9f 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@ The documentation is divided into several sections with a different tone and pur
 
 ## Translation
 
-If you are interesting in translating `reactjs.org`, please see the current translation efforts at [isreactreadyyet.com](https://www.isreactreadyyet.com).
+If you are interesting in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/).
 
 
 If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg).

From 2e4da9ffd39cc6b629f225624c0143ab8026dbf7 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Sun, 10 Feb 2019 23:41:29 +0400
Subject: [PATCH 042/118] Fix react translation bot merge issues

---
 content/home/examples/a-component-using-external-plugins.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/content/home/examples/a-component-using-external-plugins.md b/content/home/examples/a-component-using-external-plugins.md
index 5dbf72830..fcf73922e 100644
--- a/content/home/examples/a-component-using-external-plugins.md
+++ b/content/home/examples/a-component-using-external-plugins.md
@@ -4,8 +4,4 @@ order: 3
 domid: markdown-example
 ---
 
-<<<<<<< HEAD
 React sizə digər kitabxana və freymvorklara inteqrasiya etmək üçün metodlar ilə təmin edir. Bu nümunədə **remarkable** xarici Markdown kitabxanası işlənərək `<textarea>` elementinin dəyəri markdown-a real zamanda çevrilir.
-=======
-React allows you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
->>>>>>> 61b96a2f24d6c64851ee747e99d5ea7629059ec6

From eb802c695ab32327aafe030243ad576e26966f8b Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Mon, 11 Feb 2019 10:38:19 -0800
Subject: [PATCH 043/118] Fix spelling error.

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ed0651b9f..3044c0d66 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@ The documentation is divided into several sections with a different tone and pur
 
 ## Translation
 
-If you are interesting in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/).
+If you are interested in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/).
 
 
 If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg).

From 486dac1c6786de0b4b670c4d4b14123283974f97 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 11 Feb 2019 19:20:28 +0000
Subject: [PATCH 044/118] Remove unnecessary/confusing "unordered"

---
 content/docs/lists-and-keys.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index c82739a6a..f34e9e5d6 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -50,7 +50,7 @@ This code displays a bullet list of numbers between 1 and 5.
 
 Usually you would render lists inside a [component](/docs/components-and-props.html).
 
-We can refactor the previous example into a component that accepts an array of `numbers` and outputs an unordered list of elements.
+We can refactor the previous example into a component that accepts an array of `numbers` and outputs a list of elements.
 
 ```javascript{3-5,7,13}
 function NumberList(props) {

From 4647eeacf07787ac6c4fa041bb06c3e90ea178b7 Mon Sep 17 00:00:00 2001
From: Peng Jie <bivinity.pengzjie@gmail.com>
Date: Tue, 12 Feb 2019 11:46:51 +0800
Subject: [PATCH 045/118] docs(hooks): fix break link

---
 content/docs/hooks-overview.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md
index fef7de00b..df958dc6d 100644
--- a/content/docs/hooks-overview.md
+++ b/content/docs/hooks-overview.md
@@ -16,7 +16,7 @@ Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). Th
 
 **↑↑↑ Each section ends with a yellow box like this.** They link to detailed explanations.
 
-## 📌 State Hook {#-state-hook}
+## 📌 State Hook {#state-hook}
 
 This example renders a counter. When you click the button, it increments the value:
 
@@ -68,7 +68,7 @@ React provides a few built-in Hooks like `useState`. You can also create your ow
 >
 >You can learn more about the State Hook on a dedicated page: [Using the State Hook](/docs/hooks-state.html).
 
-## ⚡️ Effect Hook {#️-effect-hook}
+## ⚡️ Effect Hook {#effect-hook}
 
 You've likely performed data fetching, subscriptions, or manually changing the DOM from React components before. We call these operations "side effects" (or "effects" for short) because they can affect other components and can't be done during rendering.
 
@@ -159,7 +159,7 @@ Hooks let you organize side effects in a component by what pieces are related (s
 >
 >You can learn more about `useEffect` on a dedicated page: [Using the Effect Hook](/docs/hooks-effect.html).
 
-## ✌️ Rules of Hooks {#️-rules-of-hooks}
+## ✌️ Rules of Hooks {#rules-of-hooks}
 
 Hooks are JavaScript functions, but they impose two additional rules:
 
@@ -172,7 +172,7 @@ We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-h
 >
 >You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html).
 
-## 💡 Building Your Own Hooks {#-building-your-own-hooks}
+## 💡 Building Your Own Hooks {#building-your-own-hooks}
 
 Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: [higher-order components](/docs/higher-order-components.html) and [render props](/docs/render-props.html). Custom Hooks let you do this, but without adding more components to your tree.
 
@@ -239,7 +239,7 @@ You can write custom Hooks that cover a wide range of use cases like form handli
 >
 >You can learn more about custom Hooks on a dedicated page: [Building Your Own Hooks](/docs/hooks-custom.html).
 
-## 🔌 Other Hooks {#-other-hooks}
+## 🔌 Other Hooks {#other-hooks}
 
 There are a few less commonly used built-in Hooks that you might find useful. For example, [`useContext`](/docs/hooks-reference.html#usecontext) lets you subscribe to React context without introducing nesting:
 

From d9f15c2279b57562960417376ef52cdbed6cb4e8 Mon Sep 17 00:00:00 2001
From: Tauan Tathiell <lukyhenson@live.com>
Date: Tue, 12 Feb 2019 08:43:04 -0200
Subject: [PATCH 046/118] It changes the fiber link inside codebase overview
 page

---
 content/docs/codebase-overview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md
index 07b07aa78..206319542 100644
--- a/content/docs/codebase-overview.md
+++ b/content/docs/codebase-overview.md
@@ -211,7 +211,7 @@ Its main goals are:
 * Ability to return multiple elements from `render()`.
 * Better support for error boundaries.
 
-You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://blog.ag-grid.com/index.php/2018/11/29/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). While it has shipped with React 16, the async features are not enabled by default yet.
+You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e). While it has shipped with React 16, the async features are not enabled by default yet.
 
 Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler).
 

From 6b70eb25c46c6d5f28decdf809959c45cfb87dda Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Tue, 12 Feb 2019 18:30:15 +0400
Subject: [PATCH 047/118] Translate "Completing the Game" section

---
 content/tutorial/nav.yml     |   2 +-
 content/tutorial/tutorial.md | 168 +++++++++++++++++------------------
 2 files changed, 85 insertions(+), 85 deletions(-)

diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml
index 309178d6a..554e840d9 100644
--- a/content/tutorial/nav.yml
+++ b/content/tutorial/nav.yml
@@ -61,7 +61,7 @@
       forceInternal: true
       subitems:
         - id: lifting-state-up
-          title: State-i Qaldır
+          title: State-in Qaldırılması
           href: /tutorial/tutorial.html#lifting-state-up
           forceInternal: true
         - id: why-immutability-is-important
diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 5b8dda63f..7bd2806bf 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -223,7 +223,7 @@ Sonra: Siz kvadratlarda rəqəmləri görməlisiniz.
 
 **[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/aWWQOG?editors=0010)**
 
-Congratulations! Siz valideyn olan Board komponentindən "propu" uçaq olan Square komponentinə göndərdiniz. React-də məlumat axınını propların göndərilməsi ilə baş verir -- valideyndən uşağa doğru.
+Təbriklər! Siz valideyn olan Board komponentindən "propu" uçaq olan Square komponentinə göndərdiniz. React-də məlumat axınını propların göndərilməsi ilə baş verir -- valideyndən uşağa doğru.
 
 ### İnteraktiv Komponentin Yaradılması {#making-an-interactive-component}
 
@@ -345,19 +345,19 @@ React DevTools-u qurduqdan sonra, siz səhifədə hər hansi bir elementə sağ
 3. "Change View" düyməsini tıklayıb "Debug mode" seçin.
 4. Yeni açılan təbdə brauzerin developer alətlərində React təbi olacaq.
 
-## Completing the Game {#completing-the-game}
+## Oyunu Tamamlamaq {#completing-the-game}
 
-We now have the basic building blocks for our tic-tac-toe game. To have a complete game, we now need to alternate placing "X"s and "O"s on the board, and we need a way to determine a winner.
+Indi bizdə "X O oyununun" əsas blokları hazırdı. Oyunu tamamlamaq üçün biz "X" və "O"nun sıra ilə yerləşdirilməsini düzəltməli və oyunun sonunda qalibi müəyyənləşdirməliyik.
 
-### Lifting State Up {#lifting-state-up}
+### State-in Qaldırılması {#lifting-state-up}
 
-Currently, each Square component maintains the game's state. To check for a winner, we'll maintain the value of each of the 9 squares in one location.
+İndi, hər Square komponenti oyunun vəziyyətini saxlayır. Qalibi təyin etmək üçün biz bu 9 kvadratın dəyərini bir yerdə saxlamalıyıq.
 
-We may think that Board should just ask each Square for the Square's state. Although this approach is possible in React, we discourage it because the code becomes difficult to understand, susceptible to bugs, and hard to refactor. Instead, the best approach is to store the game's state in the parent Board component instead of in each Square. The Board component can tell each Square what to display by passing a prop, [just like we did when we passed a number to each Square](#passing-data-through-props).
+Biz Board komponentinin hər Square komponentdən Square-in state-ini istəməsini fikirləşə bilərik. Bunun React-da mümkün olmasına baxmayaraq, biz bu yol ilə getməyi tövsiyyə etmirik. Çünki bele üsulla yazılan kodu başa düşmək və refaktor etmək çətinləşir və baqların şansı artır. Bunu duzəltməyin ən yaxşı yolu oyunun state-ini hissə-hissə hər Square komponentdə saxlamaq əvəzinə bütünlüklə Board komponentində saxlamaqdır. Board komponenti hər Square-ə nə göstərəcəyini, [Square-ə rəqəm göndərdiyimiz kimi](#passing-data-through-props), prop ilə göndərə bilər.
 
-**To collect data from multiple children, or to have two child components communicate with each other, you need to declare the shared state in their parent component instead. The parent component can pass the state back down to the children by using props; this keeps the child components in sync with each other and with the parent component.**
+**Çoxlu uşaqdan məlumat yığması və ya iki uşaq komponentin bir biri ilə kommunikasiya etməsi üçün, paylaşılan state-i valideyn komponentində bəyan edin. Valideyn komponent bu state-i  uşaq komponentlərə proplar vasisəti ilə göndərə bilər. Bu metod uşaq komponentlər və valideyn komponentlər arasındakı məlumatları sinxron saxlayır.**
 
-Lifting state into a parent component is common when React components are refactored -- let's take this opportunity to try it out. We'll add a constructor to the Board and set the Board's initial state to contain an array with 9 nulls. These 9 nulls correspond to the 9 squares:
+React komponentlərini refaktor etdikdə, state-i valideyn komponentə qaldırmaq çox işlənən praktikadır. Gəlin bu metodu sınayaq. Biz Board komponentinə konstruktor əlavə edib Board-un başlanğıc state-inə 9 ədəd `null` olan massiv əlavə edəcəyik. Bu 9 ədəd `null` 9 ədəd kvadrat üçündür:
 
 ```javascript{2-7}
 class Board extends React.Component {
@@ -373,7 +373,7 @@ class Board extends React.Component {
   }
 
   render() {
-    const status = 'Next player: X';
+    const status = 'Sonrakı oyunçu: X';
 
     return (
       <div>
@@ -399,7 +399,7 @@ class Board extends React.Component {
 }
 ```
 
-When we fill the board in later, the board will look something like this:
+Kvadratları doldurduqda, oyun taxtasının vəziyyəti belə formada olacaq:
 
 ```javascript
 [
@@ -409,7 +409,7 @@ When we fill the board in later, the board will look something like this:
 ]
 ```
 
-The Board's `renderSquare` method currently looks like this:
+Board-un `renderSquare` funskiyası indi belə görsənir:
 
 ```javascript
   renderSquare(i) {
@@ -417,9 +417,9 @@ The Board's `renderSquare` method currently looks like this:
   }
 ```
 
-In the beginning, we [passed the `value` prop down](#passing-data-through-props) from the Board to show numbers from 0 to 8 in every Square. In a different previous step, we replaced the numbers with an "X" mark [determined by Square's own state](#making-an-interactive-component). This is why Square currently ignores the `value` prop passed to it by the Board.
+Bu dərsliyi başlayanda, biz hər Square-də 0-dan 8-ə kimi rəqəmləri göstərmək üçün Board-dan [`value` propunu göndərdik](#passing-data-through-props). Əvvəlki başqa bir bölmədə isə biz rəqəmləri [Square-in daxili state-indən istifadə edərək](#making-an-interactive-component) "X" ilə əvəz etdik. Bu səbəbdən Square komponenti Board-dan göndərilən `value` propunu saymır.
 
-We will now use the prop passing mechanism again. We will modify the Board to instruct each individual Square about its current value (`'X'`, `'O'`, or `null`). We have already defined the `squares` array in the Board's constructor, and we will modify the Board's `renderSquare` method to read from it:
+Biz yenidən propu göndərmək mexanizmindən istifadə edəcəyik. Board komponentindən hər Square-ə kvadratın dəyərini göndərəcəyik (`'X'`, `'O'`, və ya `null`). Biz artıq `squares` massivini Board-un konstrukturunda yaratmışıq və indi biz `renderSquare` funskiyasından bu massivi oxuyacağıq:
 
 ```javascript{2}
   renderSquare(i) {
@@ -427,13 +427,13 @@ We will now use the prop passing mechanism again. We will modify the Board to in
   }
 ```
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/gWWQPY?editors=0010)**
+**[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/gWWQPY?editors=0010)**
 
-Each Square will now receive a `value` prop that will either be `'X'`, `'O'`, or `null` for empty squares.
+İndi hər Square `value` propundan bu dəyərlərdən birini alacaq: `'X'`, `'O'`, və ya `null` (boş kvadrat).
 
-Next, we need to change what happens when a Square is clicked. The Board component now maintains which squares are filled. We need to create a way for the Square to update the Board's state. Since state is considered to be private to a component that defines it, we cannot update the Board's state directly from Square.
+İndi biz Square tıklananda nə olacağını dəyişməliyik. Board komponenti kvadratların dəyərlərini özündə saxlayır. Bu səbəbdən biz Square komponentinə Board-un state-ini dəyişməsini bildirməliyik. State, yarandığı komponentə (bu misalda Board komponentinə) privat olduğundan, biz Square komponentindən Board-un state-ini dəyişə bilmirik.
 
-To maintain the Board's state's privacy, we'll pass down a function from the Board to the Square. This function will get called when a Square is clicked. We'll change the `renderSquare` method in Board to:
+Board-un state-inin privatlığının saxlanması üçün biz Board-dan Square-ə funskiya göndərəcəyik. Bu funskiya Square tıklananda çağrılacaq. Board-un `renderSquare` funskiyasını aşağıdakına dəyişəcəyik:
 
 ```javascript{5}
   renderSquare(i) {
@@ -446,17 +446,17 @@ To maintain the Board's state's privacy, we'll pass down a function from the Boa
   }
 ```
 
->Note
+>Qeyd
 >
->We split the returned element into multiple lines for readability, and added parentheses so that JavaScript doesn't insert a semicolon after `return` and break our code.
+>Biz oxumanı artırmaq üçün qaytarılan elementi bir neçə sətrdə yazdıq və Javascriptin `return`-dən sonra nöqtə vergül qoyub kodumuzu sındırmaması üçün qaytarılan komponenti mötərizəyə saldıq.
 
-Now we're passing down two props from Board to Square: `value` and `onClick`. The `onClick` prop is a function that Square can call when clicked. We'll make the following changes to Square:
+İndi biz Board-dan Square-ə iki prop göndəririk: `value` və `onClick`. `onClick` propu funksiyadır və Square tıklananda çağrılacaq. Square komponentinə aşağıdakı dəyişiklikləri edəcəyik:
 
-* Replace `this.state.value` with `this.props.value` in Square's `render` method
-* Replace `this.setState()` with `this.props.onClick()` in Square's `render` method
-* Delete the `constructor` from Square because Square no longer keeps track of the game's state
+* Square-in `render` funskiyasında `this.state.value`-nu `this.props.value` ilə əvəz edəcəyik
+* Square-in `render` funskiyasında `this.setState()`-i `this.props.onClick()` ilə əvəz edəcəyik
+* Square state saxlamadığından `constructor`-u Square-dən siləcəyik
 
-After these changes, the Square component looks like this:
+Bu dəyişikliklərdən sonra, Square komponenti belə olacaq:
 
 ```javascript{1,2,6,8}
 class Square extends React.Component {
@@ -473,19 +473,19 @@ class Square extends React.Component {
 }
 ```
 
-When a Square is clicked, the `onClick` function provided by the Board is called. Here's a review of how this is achieved:
+Square tıklandıqda Board-un təmin etdiyi `onClick` funksiyası çağrılır. Bu prosesin icmalı:
 
-1. The `onClick` prop on the built-in DOM `<button>` component tells React to set up a click event listener.
-2. When the button is clicked, React will call the `onClick` event handler that is defined in Square's `render()` method.
-3. This event handler calls `this.props.onClick()`. The Square's `onClick` prop was specified by the Board.
-4. Since the Board passed `onClick={() => this.handleClick(i)}` to Square, the Square calls `this.handleClick(i)` when clicked.
-5. We have not defined the `handleClick()` method yet, so our code crashes.
+1. DOM qurulan `<button>` komponentinin `onClick` propu React-ə tıklama hadisəsi üçün hadisə qəbuledicisi qurmasını deyir.
+2. Düymə tıklandığı zaman, React, Square-in `render()` funskiyasında olan `onClick` hadisə işləyicisini çağırır.
+3. Bu hadisə işləyicisi `this.props.onClick()` funskiyasını çağırır. Square-in `onClick` propu Board tərəfindən müəyyənləşdirilib.
+4. Board-un Square-ə `onClick={() => this.handleClick(i)}` göndərməsindən, Square tıklandığında `this.handleClick(i)` funskiyasını çağırır.
+5. Biz `handleClick()` funksiyasını hələ tətbiq etmədiyimizdən bizim kod çökür.
 
->Note
+>Qeyd
 >
->The DOM `<button>` element's `onClick` attribute has a special meaning to React because it is a built-in component. For custom components like Square, the naming is up to you. We could name the Square's `onClick` prop or Board's `handleClick` method differently. In React, however, it is a convention to use `on[Event]` names for props which represent events and `handle[Event]` for the methods which handle the events.
+>DOM `<button>` elementinin qurulmuş komponent olduğundan, bu elementin `onClick` atributunun React-a xüsusi mənasi var. Square kimi xüsusi komponentlər üçün bu atributu adlandırmaq sizdən asılıdır. Biz Square-in `onClick` propunu və ya Board-un `handleClick` funskiyasını başqa cürədə adlandıra bilərdik. React-də, hadisələr üçün `on[Event]` və hadisə işləyiciləri üçün `handle[Event]` adları işlətmək adətdir.
 
-When we try to click a Square, we should get an error because we haven't defined `handleClick` yet. We'll now add `handleClick` to the Board class:
+Square-i tıkladıqda, `handleClick` funskiyasının olmadığından bizə xəta gələcək. Gəlin indi bu funksiyanı Board klasında tətbiq edək:
 
 ```javascript{9-13}
 class Board extends React.Component {
@@ -512,7 +512,7 @@ class Board extends React.Component {
   }
 
   render() {
-    const status = 'Next player: X';
+    const status = 'Sonrakı oyunçu: X';
 
     return (
       <div>
@@ -538,63 +538,63 @@ class Board extends React.Component {
 }
 ```
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)**
+**[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)**
 
-After these changes, we're again able to click on the Squares to fill them. However, now the state is stored in the Board component instead of the individual Square components. When the Board's state changes, the Square components re-render automatically. Keeping the state of all squares in the Board component will allow it to determine the winner in the future.
+Bu dəyişikliklərdən sonra, biz Square-ə tıklayaraq oyun taxtasını doldura bilirk. Amma indi oyunun vəziyyəti Square komponentlərdə individual yerləşmək əvəzinə Board komponentində saxlanır. Board-un state-i dəyişdikdə bütün komponentlər avtomatik yenidən render olunurlar. Bütün kvadratların vəziyyətlərini Board komponentində saxlamaq ilə biz gələcəkdə oyunun qalibinidə müəyyənləşdirə biləcəyik.
 
-Since the Square components no longer maintain state, the Square components receive values from the Board component and inform the Board component when they're clicked. In React terms, the Square components are now **controlled components**. The Board has full control over them.
+Square komponentində state olmadığından, bütün Square komponentləri Board komponentindən dəyərləri alir və tıklandığı zaman Board komponentinə xəbər verir. React terminalogiyasında, Square komponentləri **kontrol olunan komponentlər** adlanırlar. Board komponentinin bu komponentlər üzərində tam kontrolu var.
 
-Note how in `handleClick`, we call `.slice()` to create a copy of the `squares` array to modify instead of modifying the existing array. We will explain why we create a copy of the `squares` array in the next section.
+Qeydə alinki biz `handleClick` funskiyasında mövcud `squares` massivini dəyişmək əvəzinə `.slice()` funskiyasını çağırıb massivin kopiyasını düzəldirik. Gələn bölmədə biz `squares`-in kopiyasını çıxarmağın səbəbini izah edəcəyik.
 
-### Why Immutability Is Important {#why-immutability-is-important}
+### Dəyişməzlik Niyə Vacibdir {#why-immutability-is-important}
 
-In the previous code example, we suggested that you use the `.slice()` operator to create a copy of the `squares` array to modify instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn.
+Əvvəli kod nümunəsində, biz mövcud massivi dəyişmək əvəzinə `.slice()` operatoru ilə `squares` massivinin kopiyasının çıxarmağı tövsiyyə etdik. Bu bölmədə biz dəyişməzlik (immutability) və dəyişməzliyi öyrənməyin niyə vacib olduğunu müzakirə edəcəyik.
 
-There are generally two approaches to changing data. The first approach is to *mutate* the data by directly changing the data's values. The second approach is to replace the data with a new copy which has the desired changes.
+Normalda məlumatı iki yol ilə dəyişmək olur. Birinci yanaşma məlumatın dəyərlərini birbaşa dəyişməklə məlumatı *mutasiya etməkdir*. İkinci yanaşma isə mövcud məlumatı dəyişiklər ilə olan kopiyası ilə əvəz etməkdir.
 
-#### Data Change with Mutation {#data-change-with-mutation}
+#### Məlumatı Mutasiya ilə Dəyişmək {#data-change-with-mutation}
 ```javascript
-var player = {score: 1, name: 'Jeff'};
+var player = {score: 1, name: 'Orxan'};
 player.score = 2;
-// Now player is {score: 2, name: 'Jeff'}
+// player {score: 2, name: 'Orxan'} bərabərdir
 ```
 
-#### Data Change without Mutation {#data-change-without-mutation}
+#### Məlumatı Mutasiyasız Dəyişmək {#data-change-without-mutation}
 ```javascript
-var player = {score: 1, name: 'Jeff'};
+var player = {score: 1, name: 'Orxan'};
 
 var newPlayer = Object.assign({}, player, {score: 2});
-// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}
+// player dəyişməyib, amma newPlayer {score: 2, name: 'Orxan'} bərabərdir
 
-// Or if you are using object spread syntax proposal, you can write:
+// Əgər siz obyekt yayma sintaksisindən istifadə edirsinizsə, siz belə yaza bilərsiniz:
 // var newPlayer = {...player, score: 2};
 ```
 
-The end result is the same but by not mutating (or changing the underlying data) directly, we gain several benefits described below.
+Son nəticənin eyni olmasına baxmayaraq məlumatı mutasiya etmədən dəyişdikdə aşağıdakı faydalardan yararlanırıq.
 
-#### Complex Features Become Simple {#complex-features-become-simple}
+#### Kompleks Xüsusiyyətlər Sadələşir {#complex-features-become-simple}
 
-Immutability makes complex features much easier to implement. Later in this tutorial, we will implement a "time travel" feature that allows us to review the tic-tac-toe game's history and "jump back" to previous moves. This functionality isn't specific to games -- an ability to undo and redo certain actions is a common requirement in applications. Avoiding direct data mutation lets us keep previous versions of the game's history intact, and reuse them later.
+Dəyişməməzlik kompleks xüsusiyyətlərin tətbiqini çox asanlaşdırır. Bu dərslikdə biz "X O oyununun" tarixçəsinin icmalını və əvvəlki gedişlərə qayıda bilmək üçün "zaman səyahəti" tətbiq edəcəyik. Bu xüsusiyyət yalnız oyunlara xas deyil. Bir çox applikasiyaların tələblərində hərəkətləri geri qaytarmaq və ya qabağa çəkmək olur. Məlumatın birbaşa dəyişməyindən çəkinməklə biz oyunun tarixçəsini saxlaya bilir və saxladığımız tarixçədən istifadə edə bilərik.
 
-#### Detecting Changes {#detecting-changes}
+#### Dəyişikliklərin Aşkar Edilməsi {#detecting-changes}
 
-Detecting changes in mutable objects is difficult because they are modified directly. This detection requires the mutable object to be compared to previous copies of itself and the entire object tree to be traversed.
+Mutasiya olunmuş obyektlərin birbaşa dəyişildiyindən, bu dəyişikliklərin aşkar edilməsi çətindir. Dəyişikliyi tapmaq üçün mutasiya olunmuş obyekt, əvvəlki kopiyaları ilə müqayisə edilməlidir. Bu müqayisə üçün bütün obyekt iyerarxiyası yoxlanmalıdır.
 
-Detecting changes in immutable objects is considerably easier. If the immutable object that is being referenced is different than the previous one, then the object has changed.
+Mutasiya olunmamış obyektlərdə dəyişiklikləri aşkar etmək xeyli dərəcədə asandır. Əgər dəyişməz obyektin referansı əvvəki obyektin referansından fərqlidirsə, bu obyekt dəyişmişdir.
 
-#### Determining When to Re-render in React {#determining-when-to-re-render-in-react}
+#### React-də Yenidən Render Etməyin Aşkarlanması {#determining-when-to-re-render-in-react}
 
-The main benefit of immutability is that it helps you build _pure components_ in React. Immutable data can easily determine if changes have been made which helps to determine when a component requires re-rendering.
+Dəyişməzliyin əsas faydası React-da bizə _təmiz komponentlərin_ yaranmasına kömək etməsidir. Mutasiya olunmamış məlumatlar ilə biz dəyişikliyin olduğunu asan formada aşkar edə bilərik. Bu tapıntı ilə komponentin yenidən olduğunu müəyyən edə bilərik.
 
-You can learn more about `shouldComponentUpdate()` and how you can build *pure components* by reading [Optimizing Performance](/docs/optimizing-performance.html#examples).
+`shouldComponentUpdate()` və *təmiz komponentlər* haqqında öyrənmək üçün [Performansın Optimallaşdırılması](/docs/optimizing-performance.html#examples) səhifəsini oxuya bilərsiniz.
 
-### Function Components {#function-components}
+### Funksional Komponentlər {#function-components}
 
-We'll now change the Square to be a **function component**.
+Biz indi Square-i **funskional komponentə** çevirəcəyik.
 
-In React, **function components** are a simpler way to write components that only contain a `render` method and don't have their own state. Instead of defining a class which extends `React.Component`, we can write a function that takes `props` as input and returns what should be rendered. Function components are less tedious to write than classes, and many components can be expressed this way.
+React-də, **funskional komponentlər** komponentlərin sadə formada yazılması üçündür. Bu komponentlərin state-i olmur; yalnız `render` funksiyası olur. `React.Component`-dən törənən klas yazmaq əvəzinə, biz `props` qəbul edən və nəyi render etməyi qaytaran funksiya yaradırıq. Funksional komponentləri yazmaq klas komponentləri yazmaqdan daha az yorucudur. Bir çox komponent belə formada yazıla bilər.
 
-Replace the Square class with this function:
+Square klasını aşağıdakı funskiya ilə əvəz edin:
 
 ```javascript
 function Square(props) {
@@ -606,19 +606,19 @@ function Square(props) {
 }
 ```
 
-We have changed `this.props` to `props` both times it appears.
+Biz `this.props`-u işlətdiyimiz hər iki yerdə `props` ilə əvəz etdik.
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/QvvJOv?editors=0010)**
+**[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/QvvJOv?editors=0010)**
 
->Note
+>Qeyd
 >
->When we modified the Square to be a function component, we also changed `onClick={() => this.props.onClick()}` to a shorter `onClick={props.onClick}` (note the lack of parentheses on *both* sides). In a class, we used an arrow function to access the correct `this` value, but in a function component we don't need to worry about `this`.
+>Biz Square-i funskional komponentə çevirdikdə, həmçinin `onClick={() => this.props.onClick()}` propunu daha qısa `onClick={props.onClick}`-a (**Hər iki** tərəfdəki mötərizələrin olmamasını qeyd edin) çevirdik. Klas olduqda, biz düzgün `this` işlədə bilmək üçün ox funskiyası işlətmişdik. Amma funskional komponentdə `this` bizə lazım deyil.
 
-### Taking Turns {#taking-turns}
+### Sıranı Gözlə {#taking-turns}
 
-We now need to fix an obvious defect in our tic-tac-toe game: the "O"s cannot be marked on the board.
+Biz "X O oyununda" tam aydın ola defekti düzəltməliyik: "O"-lar oyun taxtasında işarələnə bilmirlər.
 
-We'll set the first move to be "X" by default. We can set this default by modifying the initial state in our Board constructor:
+Biz ilk gedişi "X" ilə qeyd edək. Bu ilkin dəyər üçün biz Board-un konstrukturunda başlanğıc state-i dəyişməliyik:
 
 ```javascript{6}
 class Board extends React.Component {
@@ -631,7 +631,7 @@ class Board extends React.Component {
   }
 ```
 
-Each time a player moves, `xIsNext` (a boolean) will be flipped to determine which player goes next and the game's state will be saved. We'll update the Board's `handleClick` function to flip the value of `xIsNext`:
+Hər zaman oyunçu hərəkət etdikdə, `xIsNext` (bulin) kimin sonrakı addımı atdığını müəyyənləşdirmək üçün çevriləcək. `xIsNext`-in dəyərini çevirmək üçün gəlin `handleClick` funskiyasını yeniləyək:
 
 ```javascript{3,6}
   handleClick(i) {
@@ -644,17 +644,17 @@ Each time a player moves, `xIsNext` (a boolean) will be flipped to determine whi
   }
 ```
 
-With this change, "X"s and "O"s can take turns. Let's also change the "status" text in Board's `render` so that it displays which player has the next turn:
+Bu dəyişiklikdə, "X"-lər və "O"-lar sıralarını gözləyə bilərlər. Əlavə olaraq Board-un `render` funksiyasındakı "status" mətnində kimin sonrakı addımı atacağınıda göstərək:
 
 ```javascript{2}
   render() {
-    const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+    const status = 'Sonrakı oyunçu: ' + (this.state.xIsNext ? 'X' : 'O');
 
     return (
-      // the rest has not changed
+      // kodun qalanı dəyişməyib
 ```
 
-After applying these changes, you should have this Board component:
+Bütün dəyişiklikləri etdikdən sonra Board komponenti belə görünəcək:
 
 ```javascript{6,11-16,29}
 class Board extends React.Component {
@@ -685,7 +685,7 @@ class Board extends React.Component {
   }
 
   render() {
-    const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+    const status = 'Sonrakı oyunçu: ' + (this.state.xIsNext ? 'X' : 'O');
 
     return (
       <div>
@@ -711,11 +711,11 @@ class Board extends React.Component {
 }
 ```
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/KmmrBy?editors=0010)**
+**[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/KmmrBy?editors=0010)**
 
-### Declaring a Winner {#declaring-a-winner}
+### Qalibi Bəyan Et {#declaring-a-winner}
 
-Now that we show which player's turn is next, we should also show when the game is won and there are no more turns to make. We can determine a winner by adding this helper function to the end of the file:
+Biz indi kimin sonrakı addımı atacağını bildiyimizdən, gəlin oyununu qalibini və ya oyunda heç bir gedişin qalmadığını göstərək. Qalibi tapmaq üçün aşağıdakı köməkçi funskiyanı faylın sonuna əlavə edə bilərik:
 
 ```javascript
 function calculateWinner(squares) {
@@ -739,23 +739,23 @@ function calculateWinner(squares) {
 }
 ```
 
-We will call `calculateWinner(squares)` in the Board's `render` function to check if a player has won. If a player has won, we can display text such as "Winner: X" or "Winner: O". We'll replace the `status` declaration in Board's `render` function with this code:
+Biz Board-un `render` funskiyasında oyunçunun qazandığını yoxlamaq üçün `calculateWinner(squares)` funskiyasını çağıracağıq. Əgər oyunçu qalib olubsa, biz "Qalib: X" və ya "Qalib: O" formalı mətn göstərəcəyik. Board-un `render` funskiyasındakı `status`-u aşağıdakı formada dəyişəcəyik:
 
 ```javascript{2-8}
   render() {
     const winner = calculateWinner(this.state.squares);
     let status;
     if (winner) {
-      status = 'Winner: ' + winner;
+      status = 'Qalib: ' + winner;
     } else {
-      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+      status = 'Sonrakı oyunçu: ' + (this.state.xIsNext ? 'X' : 'O');
     }
 
     return (
-      // the rest has not changed
+      // kodun qalanı dəyişməyib
 ```
 
-We can now change the Board's `handleClick` function to return early by ignoring a click if someone has won the game or if a Square is already filled:
+İndi Board-un `handleClick` funksiyasını dəyişərək kvadratın boş olmadığında və ya kiminsə qalib olduğunda funksiyadan tez qaytarıb tıklamanı iqnor edək:
 
 ```javascript{3-5}
   handleClick(i) {
@@ -771,9 +771,9 @@ We can now change the Board's `handleClick` function to return early by ignoring
   }
 ```
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/LyyXgK?editors=0010)**
+**[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/LyyXgK?editors=0010)**
 
-Congratulations! You now have a working tic-tac-toe game. And you've just learned the basics of React too. So *you're* probably the real winner here.
+Təbriklər! Sizdə indi işləyən "X O oyunu" var. Və siz həmçinin React-in əsaslarını öyrəndiniz. Bu səbəbdən *siz* yəqinki əsl qalibsiniz.
 
 ## Adding Time Travel {#adding-time-travel}
 

From 538001d2451a055a89d3d5a6c51f5193f6e0f998 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Tue, 12 Feb 2019 18:36:01 +0400
Subject: [PATCH 048/118] Update Docs navigation props, state, and lifecycle
 translations

---
 content/docs/nav.yml | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index cd81f6a68..b204d286b 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -18,9 +18,9 @@
     - id: rendering-elements
       title: Elementlərin Render Edilməsi
     - id: components-and-props
-      title: Komponent və Parametrlər
+      title: Komponent və Proplar
     - id: state-and-lifecycle
-      title: Vəziyyət və Yaşama Tsikli
+      title: State və Lifecycle
     - id: handling-events
       title: Hadisələrin İşlədilməsi
     - id: conditional-rendering
@@ -30,7 +30,7 @@
     - id: forms
       title: Anketlər
     - id: lifting-state-up
-      title: Vəziyyətin Qaldırılması
+      title: State-in Qaldırılması
     - id: composition-vs-inheritance
       title: Kompozisiya vs Varislik
     - id: thinking-in-react
@@ -68,7 +68,7 @@
     - id: refs-and-the-dom
       title: Ref-lər və DOM
     - id: render-props
-      title: Render Etmə Parametrləri
+      title: Render Etmə Propları
     - id: static-type-checking
       title: Static Tip Yoxlaması
     - id: strict-mode
@@ -142,7 +142,7 @@
     - id: faq-functions
       title: Komponentlərə Funskiyaların Göndərilməsi
     - id: faq-state
-      title: Komponent Vəziyyəti
+      title: Komponent State-i
     - id: faq-styling
       title: Stilləmə və CSS
     - id: faq-structure

From cf7bd83b6e59c6b4d961dd0d1dc209e91baac9d8 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Tue, 12 Feb 2019 18:47:24 +0400
Subject: [PATCH 049/118] Translate context properly

---
 content/docs/nav.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index b204d286b..39c9c473b 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -42,7 +42,7 @@
     - id: code-splitting
       title: Kod Parçalanması
     - id: context
-      title: Kontext
+      title: Kontekst
     - id: error-boundaries
       title: Xəta Sərhədləri
     - id: forwarding-refs

From 17bd0a359957fb9973e8d36857ad07660293641d Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Tue, 12 Feb 2019 18:50:08 +0400
Subject: [PATCH 050/118] Copy untranslated style guide from react locatization
 repo

---
 style-guide.md | 89 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 style-guide.md

diff --git a/style-guide.md b/style-guide.md
new file mode 100644
index 000000000..6ec9eedae
--- /dev/null
+++ b/style-guide.md
@@ -0,0 +1,89 @@
+# Universal Style Guide
+
+This repo describes rules that should be applied to **all** languages.
+
+## Heading IDs
+
+All headings have explicit IDs like this:
+
+```md
+## Try React {#try-react}
+```
+
+Do **not** translate these IDs! They are used for navigation and will break if the document is referred to externally, i.e.:
+
+```md
+See the [beginning section](/getting-started#try-react) for more information.
+```
+
+✅ DO:
+
+```md
+## React-i Sına {#try-react}
+```
+
+❌ DON'T:
+
+```md
+## React-i Sına {#react-sına}
+```
+
+This will break the link above.
+
+## Text in Code Blocks
+
+Leave text in code blocks untranslated except for comments. You may optionally translate text in strings, but be careful not to translate strings that refer to code!
+
+Example:
+```js
+// Example
+const element = <h1>Hello, world</h1>;
+ReactDOM.render(element, document.getElementById('root'));
+```
+
+✅ DO:
+
+```js
+// Nümunə
+const element = <h1>Salam dünya</h1>;
+ReactDOM.render(element, document.getElementById('root'));
+```
+
+❌ DON'T:
+
+```js
+// Nümunə
+const element = <h1>Salam dünya</h1>;
+// "root" element ID-dir.
+// TƏRCÜMƏ ETMƏ
+ReactDOM.render(element, document.getElementById('kök'));
+```
+
+❌ DEFINITELY DON'T:
+
+```js
+// Nümunə
+const element = <h1>Salam dünya</h1>;
+ReactDOM.render(element, dokument.idəGörəElementSeç('kök'));
+```
+
+## External Links
+
+If an external link is to an article in a reference like [MDN] or [Wikipedia], and a version of that article exists in your language that is of decent quality, consider linking to that version instead.
+
+[MDN]: https://developer.mozilla.org/en-US/
+[Wikipedia]: https://en.wikipedia.org/wiki/Main_Page
+
+Example:
+
+```md
+React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object).
+```
+
+✅ OK:
+
+```md
+React elementləri [dəyişilməzdir](https://az.wikipedia.org/wiki/Dəyişilməz_obyekt).
+```
+
+For links that have no equivalent (Stack Overflow, YouTube videos, etc.), just use the English link.
\ No newline at end of file

From 093b4b320aa974024a2c8960df46f80d759324a7 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Tue, 12 Feb 2019 18:55:59 +0400
Subject: [PATCH 051/118] Revert Strict mode as it is a special noun

---
 content/docs/nav.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 39c9c473b..06a208af2 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -72,7 +72,7 @@
     - id: static-type-checking
       title: Static Tip Yoxlaması
     - id: strict-mode
-      title: Ciddi Rejim
+      title: Strict Rejimi
     - id: typechecking-with-proptypes
       title: PropType-lar ilə Tip Yoxlamaları
     - id: uncontrolled-components

From 5ffe565d4648f34ce2f2043d2f5769f9a5fbad54 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Tue, 12 Feb 2019 19:06:28 +0400
Subject: [PATCH 052/118] Fix web components translation

---
 content/docs/nav.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 06a208af2..e9e995a25 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -78,7 +78,7 @@
     - id: uncontrolled-components
       title: Kontrolsuz Komponentlər
     - id: web-components
-      title: Veb Komponents
+      title: Veb Komponentlər
 - title: API Arayışı
   items:
     - id: react-api
@@ -101,7 +101,7 @@
     - id: test-renderer
       title: Test Renderer
     - id: javascript-environment-requirements
-      title: JS Mühit Tələbləri
+      title: JS Mühitinin Tələbləri
     - id: glossary
       title: Lüğət
 - title: Hooklar (Yeni)

From cde52ae60d5f5b62b1a557906ad5461d4005d702 Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Tue, 12 Feb 2019 14:47:38 -0800
Subject: [PATCH 053/118] add missing headings on hooks-faq

---
 content/docs/hooks-faq.md | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index d7e304d55..75108506e 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -356,13 +356,13 @@ function Counter() {
   const calculation = count * 100;
   const prevCalculation = usePrevious(calculation);
   // ...
-  ```
+```
 
 It's possible that in the future React will provide a `usePrevious` Hook out of the box since it's a relatively common use case.
 
 See also [the recommended pattern for derived state](#how-do-i-implement-getderivedstatefromprops).
 
-### How do I implement `getDerivedStateFromProps`?
+### How do I implement `getDerivedStateFromProps`? {#how-do-i-implement-getderivedstatefromprops}
 
 While you probably [don't need it](/blog/2018/06/07/you-probably-dont-need-derived-state.html), in rare cases that you do (such as implementing a `<Transition>` component), you can update the state right during rendering. React will re-run the component with updated state immediately after exiting the first render so it wouldn't be expensive.
 
@@ -385,7 +385,7 @@ function ScrollView({row}) {
 
 This might look strange at first, but an update during rendering is exactly what `getDerivedStateFromProps` has always been like conceptually.
 
-### Is there something like forceUpdate?
+### Is there something like forceUpdate? {#is-there-something-like-forceupdate}
 
 Both `useState` and `useReducer` Hooks [bail out of updates](/docs/hooks-reference.html#bailing-out-of-a-state-update) if the next value is the same as the previous one. Mutating state in place and calling `setState` will not cause a re-render.
 
@@ -401,22 +401,22 @@ Normally, you shouldn't mutate local state in React. However, as an escape hatch
 
 Try to avoid this pattern if possible.
 
-### Can I make a ref to a function component?
+### Can I make a ref to a function component? {#can-i-make-a-ref-to-a-function-component}
 
 While you shouldn't need this often, you may expose some imperative methods to a parent component with the [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle) Hook.
 
-### What does `const [thing, setThing] = useState()` mean?
+### What does `const [thing, setThing] = useState()` mean? {#what-does-const-thing-setthing--usestate-mean}
 
 If you're not familiar with this syntax, check out the [explanation](/docs/hooks-state.html#tip-what-do-square-brackets-mean) in the State Hook documentation.
 
 
-## Performance Optimizations
+## Performance Optimizations {#performance-optimizations}
 
-### Can I skip an effect on updates?
+### Can I skip an effect on updates? {#can-i-skip-an-effect-on-updates}
 
 Yes. See [conditionally firing an effect](/docs/hooks-reference.html#conditionally-firing-an-effect). Note that forgetting to handle updates often [introduces bugs](/docs/hooks-effect.html#explanation-why-effects-run-on-each-update), which is why this isn't the default behavior.
 
-### How do I implement `shouldComponentUpdate`?
+### How do I implement `shouldComponentUpdate`? {#how-do-i-implement-shouldcomponentupdate}
 
 You can wrap a function component with `React.memo` to shallowly compare its props:
 
@@ -431,7 +431,7 @@ It's not a Hook because it doesn't compose like Hooks do. `React.memo` is equiva
 `React.memo` doesn't compare state because there is no single state object to compare. But you can make children pure too, or even [optimize individual children with `useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations).
 
 
-### How to memoize calculations?
+### How to memoize calculations? {#how-to-memoize-calculations}
 
 The [`useMemo`](/docs/hooks-reference.html#usememo) Hook lets you cache calculations between multiple renders by "remembering" the previous computation:
 
@@ -464,7 +464,7 @@ function Parent({ a, b }) {
 
 Note that this approach won't work in a loop because Hook calls [can't](/docs/hooks-rules.html) be placed inside loops. But you can extract a separate component for the list item, and call `useMemo` there.
 
-### How to create expensive objects lazily?
+### How to create expensive objects lazily? {#how-to-create-expensive-objects-lazily}
 
 `useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the inputs are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes need to be sure an object is only created once.
 
@@ -525,7 +525,7 @@ function Image(props) {
 This avoids creating an expensive object until it's truly needed for the first time. If you use Flow or TypeScript, you can also give `getObserver()` a non-nullable type for convenience.
 
 
-### Are Hooks slow because of creating functions in render?
+### Are Hooks slow because of creating functions in render? {#are-hooks-slow-because-of-creating-functions-in-render}
 
 No. In modern browsers, the raw performance of closures compared to classes doesn't differ significantly except in extreme scenarios.
 
@@ -550,7 +550,7 @@ Traditionally, performance concerns around inline functions in React have been r
 
 * Finally, the `useReducer` Hook reduces the need to pass callbacks deeply, as explained below.
 
-### How to avoid passing callbacks down?
+### How to avoid passing callbacks down? {#how-to-avoid-passing-callbacks-down}
 
 We've found that most people don't enjoy manually passing callbacks through every level of a component tree. Even though it is more explicit, it can feel like a lot of "plumbing".
 
@@ -592,7 +592,7 @@ This is both more convenient from the maintenance perspective (no need to keep f
 
 Note that you can still choose whether to pass the application *state* down as props (more explicit) or as context (more convenient for very deep updates). If you use context to pass down the state too, use two different context types -- the `dispatch` context never changes, so components that read it don't need to rerender unless they also need the application state.
 
-### How to read an often-changing value from `useCallback`?
+### How to read an often-changing value from `useCallback`? {#how-to-read-an-often-changing-value-from-usecallback}
 
 >Note
 >
@@ -662,15 +662,15 @@ function useEventCallback(fn, dependencies) {
 In either case, we **don't recommend this pattern** and only show it here for completeness. Instead, it is preferable to [avoid passing callbacks deep down](#how-to-avoid-passing-callbacks-down).
 
 
-## Under the Hood
+## Under the Hood {#under-the-hood}
 
-### How does React associate Hook calls with components?
+### How does React associate Hook calls with components? {#how-does-react-associate-hook-calls-with-components}
 
 React keeps track of the currently rendering component. Thanks to the [Rules of Hooks](/docs/hooks-rules.html), we know that Hooks are only called from React components (or custom Hooks -- which are also only called from React components).
 
 There is an internal list of "memory cells" associated with each component. They're just JavaScript objects where we can put some data. When you call a Hook like `useState()`, it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple `useState()` calls each get independent local state.
 
-### What is the prior art for Hooks?
+### What is the prior art for Hooks? {#what-is-the-prior-art-for-hooks}
 
 Hooks synthesize ideas from several different sources:
 

From bbf2cb1d6ff144665b2a25744ed36b837bbac8b9 Mon Sep 17 00:00:00 2001
From: Nurul Sundarani <nurulraza26@gmail.com>
Date: Wed, 13 Feb 2019 16:08:25 +0530
Subject: [PATCH 054/118] Updated Copyright Year

---
 src/components/LayoutFooter/Footer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index bca76aac6..5d91a93a3 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -179,7 +179,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               color: colors.subtleOnDark,
               paddingTop: 15,
             }}>
-            Copyright © 2018 Facebook Inc.
+            Copyright © 2019 Facebook Inc.
           </p>
         </section>
       </div>

From 482ba66ba6ca039bfe4fa919e52959f412160f24 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 13 Feb 2019 14:07:47 +0000
Subject: [PATCH 055/118] Update nav

---
 content/docs/nav.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 4d4a7571f..f9c4d3913 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -34,7 +34,7 @@
     - id: composition-vs-inheritance
       title: Composition vs Inheritance
     - id: thinking-in-react
-      title: Thinking In React
+      title: Философия React
 - title: Advanced Guides
   items:
     - id: accessibility

From 6bd4173a4eaf8ba3acf22a0875b15d016a2e07ff Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 13 Feb 2019 14:08:01 +0000
Subject: [PATCH 056/118] Revert "Update nav"

This reverts commit 482ba66ba6ca039bfe4fa919e52959f412160f24.
---
 content/docs/nav.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index f9c4d3913..4d4a7571f 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -34,7 +34,7 @@
     - id: composition-vs-inheritance
       title: Composition vs Inheritance
     - id: thinking-in-react
-      title: Философия React
+      title: Thinking In React
 - title: Advanced Guides
   items:
     - id: accessibility

From feebdda9825d250c4c609df9c72a8c4ec69fa60f Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Wed, 13 Feb 2019 20:43:24 +0400
Subject: [PATCH 057/118] Translate tutorial and change verbs in tutorial
 navigation

---
 content/tutorial/nav.yml     |  26 ++---
 content/tutorial/tutorial.md | 205 ++++++++++++++++++-----------------
 2 files changed, 116 insertions(+), 115 deletions(-)

diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml
index 554e840d9..d17dacbc2 100644
--- a/content/tutorial/nav.yml
+++ b/content/tutorial/nav.yml
@@ -40,15 +40,15 @@
           href: /tutorial/tutorial.html#what-is-react
           forceInternal: true
         - id: inspecting-the-starter-code
-          title: Başlanğıc Kodunun Yoxlanması
+          title: Başlanğıc Kodunu Yoxlamaq
           href: /tutorial/tutorial.html#inspecting-the-starter-code
           forceInternal: true
         - id: passing-data-through-props
-          title: Məlumatın Proplar ilə Ötürülməsi
+          title: Məlumatı Proplar ilə Ötürmək
           href: /tutorial/tutorial.html#passing-data-through-props
           forceInternal: true
         - id: making-an-interactive-component
-          title: İnteraktiv Komponentin Yaradılması
+          title: İnteraktiv Komponenti Yaratmaq
           href: /tutorial/tutorial.html#making-an-interactive-component
           forceInternal: true
         - id: developer-tools
@@ -61,7 +61,7 @@
       forceInternal: true
       subitems:
         - id: lifting-state-up
-          title: State-in Qaldırılması
+          title: State-i Qaldırılmaq
           href: /tutorial/tutorial.html#lifting-state-up
           forceInternal: true
         - id: why-immutability-is-important
@@ -73,39 +73,39 @@
           href: /tutorial/tutorial.html#function-components
           forceInternal: true
         - id: taking-turns
-          title: Sıranı Gözlə
+          title: Sıranı Gözləmək
           href: /tutorial/tutorial.html#taking-turns
           forceInternal: true
         - id: declaring-a-winner
-          title: Qalibi Bəyan Et
+          title: Qalibi Bəyan Etmək
           href: /tutorial/tutorial.html#declaring-a-winner
           forceInternal: true
     - id: adding-time-travel
-      title: Zaman Səyahətinin Əlavəsi
+      title: Zaman Səyahətini Əlavə Etmək
       href: /tutorial/tutorial.html#adding-time-travel
       forceInternal: true
       subitems:
         - id: storing-a-history-of-moves
-          title: Hərəkətlərin Tarixcəsini Yadda Saxla
+          title: Hərəkətlərin Tarixcəsini Yadda Saxlamaq
           href: /tutorial/tutorial.html#storing-a-history-of-moves
           forceInternal: true
         - id: lifting-state-up-again
-          title: State-i Yenidən Qaldır
+          title: State-i Yenidən Qaldırmaq
           href: /tutorial/tutorial.html#lifting-state-up-again
           forceInternal: true
         - id: showing-the-past-moves
-          title: Keçmiş Hərəkətləri Göstər
+          title: Keçmiş Hərəkətləri Göstərmək
           href: /tutorial/tutorial.html#showing-the-past-moves
           forceInternal: true
         - id: picking-a-key
-          title: Açar Seç
+          title: Açarı Seçmək
           href: /tutorial/tutorial.html#picking-a-key
           forceInternal: true
         - id: implementing-time-travel
-          title: Zaman Səyahətini Tətbiq Et
+          title: Zaman Səyahətini Tətbiq Etmək
           href: /tutorial/tutorial.html#implementing-time-travel
           forceInternal: true
         - id: wrapping-up
-          title: Yekunlaşdır
+          title: Yekunlaşdırmaq
           href: /tutorial/tutorial.html#wrapping-up
           forceInternal: true
diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 7bd2806bf..40520008a 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -26,7 +26,7 @@ Bu dərslik bir neçə bölməyə bölünmüşdür:
 
 * [Dərslik üçün Qurulma](#setup-for-the-tutorial) bu dərsliyi izləmək üçün **başlanğıc nöqtəsidir.**
 * [İcmal](#overview) React-in **əsaslarını** öyrədəcək: komponentlər, proplar, və state.
-* [Oyunu Tamamlamaq](#completing-the-game) React təkmilləşdirilməsi üçün **ən çox işlənən metodları** öyrədəcək.
+* [Oyunu Tamamlamaq](#completing-the-game) React-in təkmilləşdirilməsi üçün **ən çox işlənən metodları** öyrədəcək.
 * [Zaman Səyahətinin Əlavəsi](#adding-time-travel) React-in unikal gücləri haqqında **dərin məlumatlar** verəcək.
 
 Bu dərslikdən dəyər almaq üçün bütün bölmələri bir dəfəyə tamamlamaq vacib deyil. Çalışın mümkün qədər çox bölmədən keçəsiniz -- hətta bir və ya iki bölmədə olsa.
@@ -172,7 +172,7 @@ JSX, Javascriptin bütün gücü ilə gəlir. Siz *hər hansı* Javascript ifad
 
 Yuxarıdalı nümunədə, `ShoppingList` komponenti yalnız hazır qurulmuş DOM komponentlərini (`<div />` və `<li />`) render edir. Amma siz başqa xüsusi komponentləri belə biləşdirə bilərsiniz. Məsələn, siz yuxarıdakı alqı satqı listini `<ShoppingList />` kimi işlədə bilərsiniz. Hər React komponenti inkapsulasiya olunub deyə siz bu komponentləri bir birindən asılı olmayacaq şəkildə istifadə edə bilərsiniz. Bu xüsusiyyət sade komponentlərdən komplex UI-lar yaratmağa icazə verir.
 
-## Başlanğıc Kodunun Yoxlanması {#inspecting-the-starter-code}
+## Başlanğıc Kodunu Yoxlamaq {#inspecting-the-starter-code}
 
 Əgər siz bu dərsliyi **brauzerdə** edəcəksinizsə bu kodu yeni təbdə açın: **[Başlanğıc Kodu](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Əgər siz bu dərsliyi **lokalda** edəcəksinizsə, layihə direktoriyasında olan `src/index.js` faylını açın (siz bu fayla [qurulma](#setup-option-2-local-development-environment) bölməsində əl gəzdirmisiniz).
 
@@ -186,7 +186,7 @@ Koda yaxından baxdığınızda, üç React komponentin olacağını görəcəks
 
  Square komponent tək bir `<button>` və Board komponenti 9 ədəd kvadrat render edir. Game komponenti Board elə belə  dəyərlər ilə render edir. Biz bu dəyərləri gələcək bölmələrdə dəyişəcəyik. İndiki zamanda bu kodda interaktiv komponent yoxdur.
 
-### Məlumatı Proplar ilə göndərmək {#passing-data-through-props}
+### Məlumatı Proplar ilə Göndərmək {#passing-data-through-props}
 
 Gəlin Board komponentindən Square komponentinə məlumat göndərək.
 
@@ -225,7 +225,7 @@ Sonra: Siz kvadratlarda rəqəmləri görməlisiniz.
 
 Təbriklər! Siz valideyn olan Board komponentindən "propu" uçaq olan Square komponentinə göndərdiniz. React-də məlumat axınını propların göndərilməsi ilə baş verir -- valideyndən uşağa doğru.
 
-### İnteraktiv Komponentin Yaradılması {#making-an-interactive-component}
+### İnteraktiv Komponent Yaratmaq {#making-an-interactive-component}
 
 Gəlin, Square komponentinə tıklandığı zaman kvadratı "X" ilə dolduraq.
 
@@ -349,7 +349,7 @@ React DevTools-u qurduqdan sonra, siz səhifədə hər hansi bir elementə sağ
 
 Indi bizdə "X O oyununun" əsas blokları hazırdı. Oyunu tamamlamaq üçün biz "X" və "O"nun sıra ilə yerləşdirilməsini düzəltməli və oyunun sonunda qalibi müəyyənləşdirməliyik.
 
-### State-in Qaldırılması {#lifting-state-up}
+### State-i Qaldırmaq {#lifting-state-up}
 
 İndi, hər Square komponenti oyunun vəziyyətini saxlayır. Qalibi təyin etmək üçün biz bu 9 kvadratın dəyərini bir yerdə saxlamalıyıq.
 
@@ -576,13 +576,13 @@ Son nəticənin eyni olmasına baxmayaraq məlumatı mutasiya etmədən dəyişd
 
 Dəyişməməzlik kompleks xüsusiyyətlərin tətbiqini çox asanlaşdırır. Bu dərslikdə biz "X O oyununun" tarixçəsinin icmalını və əvvəlki gedişlərə qayıda bilmək üçün "zaman səyahəti" tətbiq edəcəyik. Bu xüsusiyyət yalnız oyunlara xas deyil. Bir çox applikasiyaların tələblərində hərəkətləri geri qaytarmaq və ya qabağa çəkmək olur. Məlumatın birbaşa dəyişməyindən çəkinməklə biz oyunun tarixçəsini saxlaya bilir və saxladığımız tarixçədən istifadə edə bilərik.
 
-#### Dəyişikliklərin Aşkar Edilməsi {#detecting-changes}
+#### Dəyişikliklər Aşkar Edilir {#detecting-changes}
 
 Mutasiya olunmuş obyektlərin birbaşa dəyişildiyindən, bu dəyişikliklərin aşkar edilməsi çətindir. Dəyişikliyi tapmaq üçün mutasiya olunmuş obyekt, əvvəlki kopiyaları ilə müqayisə edilməlidir. Bu müqayisə üçün bütün obyekt iyerarxiyası yoxlanmalıdır.
 
 Mutasiya olunmamış obyektlərdə dəyişiklikləri aşkar etmək xeyli dərəcədə asandır. Əgər dəyişməz obyektin referansı əvvəki obyektin referansından fərqlidirsə, bu obyekt dəyişmişdir.
 
-#### React-də Yenidən Render Etməyin Aşkarlanması {#determining-when-to-re-render-in-react}
+#### React-də Yenidən Render Etməyi Aşkarlanır {#determining-when-to-re-render-in-react}
 
 Dəyişməzliyin əsas faydası React-da bizə _təmiz komponentlərin_ yaranmasına kömək etməsidir. Mutasiya olunmamış məlumatlar ilə biz dəyişikliyin olduğunu asan formada aşkar edə bilərik. Bu tapıntı ilə komponentin yenidən olduğunu müəyyən edə bilərik.
 
@@ -614,7 +614,7 @@ Biz `this.props`-u işlətdiyimiz hər iki yerdə `props` ilə əvəz etdik.
 >
 >Biz Square-i funskional komponentə çevirdikdə, həmçinin `onClick={() => this.props.onClick()}` propunu daha qısa `onClick={props.onClick}`-a (**Hər iki** tərəfdəki mötərizələrin olmamasını qeyd edin) çevirdik. Klas olduqda, biz düzgün `this` işlədə bilmək üçün ox funskiyası işlətmişdik. Amma funskional komponentdə `this` bizə lazım deyil.
 
-### Sıranı Gözlə {#taking-turns}
+### Sıranı Gözləmək {#taking-turns}
 
 Biz "X O oyununda" tam aydın ola defekti düzəltməliyik: "O"-lar oyun taxtasında işarələnə bilmirlər.
 
@@ -713,7 +713,7 @@ class Board extends React.Component {
 
 **[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/KmmrBy?editors=0010)**
 
-### Qalibi Bəyan Et {#declaring-a-winner}
+### Qalibi Bəyan Etmək {#declaring-a-winner}
 
 Biz indi kimin sonrakı addımı atacağını bildiyimizdən, gəlin oyununu qalibini və ya oyunda heç bir gedişin qalmadığını göstərək. Qalibi tapmaq üçün aşağıdakı köməkçi funskiyanı faylın sonuna əlavə edə bilərik:
 
@@ -775,21 +775,21 @@ Biz Board-un `render` funskiyasında oyunçunun qazandığını yoxlamaq üçün
 
 Təbriklər! Sizdə indi işləyən "X O oyunu" var. Və siz həmçinin React-in əsaslarını öyrəndiniz. Bu səbəbdən *siz* yəqinki əsl qalibsiniz.
 
-## Adding Time Travel {#adding-time-travel}
+## Zaman Səyahətini Əlavə Etmək {#adding-time-travel}
 
-As a final exercise, let's make it possible to "go back in time" to the previous moves in the game.
+Son bir tapşırıq kimi, gəlin əvvəlki gedişlərə qayıtmağı tətbiq edək.
 
-### Storing a History of Moves {#storing-a-history-of-moves}
+### Hərəkətlər Tarixcəsini Yadda Saxlamaq {#storing-a-history-of-moves}
 
-If we mutated the `squares` array, implementing time travel would be very difficult.
+Əgər biz `squares` massivini mutasiya etsə idik, zaman səyahətinin tətbiqi çətin olacaqdı.
 
-However, we used `slice()` to create a new copy of the `squares` array after every move, and [treated it as immutable](#why-immutability-is-important). This will allow us to store every past version of the `squares` array, and navigate between the turns that have already happened.
+Lazkin, biz hər gedişdən sonra `slide()` funskiyasından istifadə edərək, `squares` massivinin kopiyasını çıxardıq və bu massivə [mutasiya olunmayan](#why-immutability-is-important) kimi davrandıq. Bu bizə `squares` massivinin bütün köhnə versiyalarını saxlamağa və bu versiyalar arasında naviqasiya etməyə imkan yaradır.
 
-We'll store the past `squares` arrays in another array called `history`. The `history` array represents all board states, from the first to the last move, and has a shape like this:
+Biz köhnə `squares` massivlərini `history` adında bir massivdə saxlayacağıq. `history` massivi, birinci gedişdən axırıncı gedişə kimi olan oyun taxtasının bütün vəziyyətlərinin təsviridir. Bu massiv aşağıdakı struktura malikdir:
 
 ```javascript
 history = [
-  // Before first move
+  // Birinci gedişdən əvvəl
   {
     squares: [
       null, null, null,
@@ -797,7 +797,7 @@ history = [
       null, null, null,
     ]
   },
-  // After first move
+  // Birinci gedişdən sonra
   {
     squares: [
       null, null, null,
@@ -805,7 +805,7 @@ history = [
       null, null, null,
     ]
   },
-  // After second move
+  // İkinci gedişdən sonra
   {
     squares: [
       null, null, null,
@@ -817,15 +817,15 @@ history = [
 ]
 ```
 
-Now we need to decide which component should own the `history` state.
+İndi biz hansı komponentin bu `history` state-ini saxlayacağına qərar verməliyik.
 
-### Lifting State Up, Again {#lifting-state-up-again}
+### State-i Yenidən Qaldırmaq {#lifting-state-up-again}
 
-We'll want the top-level Game component to display a list of past moves. It will need access to the `history` to do that, so we will place the `history` state in the top-level Game component.
+Biz ən yuxarıda olan Game komponentinin bütün keçmiş hərəkətlərinin siyahısını göstərməsini istəyirik. Bunun üçün bu komponentin `history`-ə müraciət edə bilməlidir. Bu səbəbdən biz `history` state-ini Game komponentində saxlayacağıq.
 
-Placing the `history` state into the Game component lets us remove the `squares` state from its child Board component. Just like we ["lifted state up"](#lifting-state-up) from the Square component into the Board component, we are now lifting it up from the Board into the top-level Game component. This gives the Game component full control over the Board's data, and lets it instruct the Board to render previous turns from the `history`.
+`history` state-inin Game komponentində olması bizə `squares` state-inin bu komponentin uşağı olan Board komponentindən silinməsinə imkan yaradır. Əvvəl Square komponentindən Board komponentinə ["state-i qaldırdığımız"](#lifting-state-up) kimi, biz indi state-i Board komponentindən Game omponentinə qaldırırıq. Bu Game komponentinin Board-un məlumatı üzərində tam kontrolu olmasını bildirir və Board-a `history`-də olan keçmiş gedişləri render etməyə imkan yaradır.
 
-First, we'll set up the initial state for the Game component within its constructor:
+İlk olaraq, biz Game komponentinin konstruktorunda ilkin state-i inisializasiya edəcəyik:
 
 ```javascript{2-10}
 class Game extends React.Component {
@@ -855,13 +855,13 @@ class Game extends React.Component {
 }
 ```
 
-Next, we'll have the Board component receive `squares` and `onClick` props from the Game component. Since we now have a single click handler in Board for many Squares, we'll need to pass the location of each Square into the `onClick` handler to indicate which Square was clicked. Here are the required steps to transform the Board component:
+Sonra biz Board-a `squares` və `onClick` proparını Game komponentindən almasını təmin edəcəyik. İndi Board-da bütün Square-lər üçün yalnız bir tıklamaq hadisə işləyicisi olduğundan, biz hansı Square-in tıklandığını bilmək üçün, hər Square-in yerini `onClick` işləyicisinə göndərməliyik. Aşağıda Board komponentini yeniləmək üçün olan addımlar göstərilib:
 
-* Delete the `constructor` in Board.
-* Replace `this.state.squares[i]` with `this.props.squares[i]` in Board's `renderSquare`.
-* Replace `this.handleClick(i)` with `this.props.onClick(i)` in Board's `renderSquare`.
+* Board-dan `constructor`-u silin.
+* Board-un `renderSquare` funskiyasında, `this.state.squares[i]`-i `this.props.squares[i]` ilə əvəz edin.
+* Board-un `renderSquare` funskiyasında, `this.handleClick(i)`-i `this.props.onClick(i)` ilə əvəz edin.
 
-The Board component now looks like this:
+Board komponenti aşağıdakı formada olacaq:
 
 ```javascript{17,18}
 class Board extends React.Component {
@@ -890,9 +890,9 @@ class Board extends React.Component {
     const winner = calculateWinner(this.state.squares);
     let status;
     if (winner) {
-      status = 'Winner: ' + winner;
+      status = 'Qalib: ' + winner;
     } else {
-      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+      status = 'Sonrakı oyunçu: ' + (this.state.xIsNext ? 'X' : 'O');
     }
 
     return (
@@ -919,7 +919,7 @@ class Board extends React.Component {
 }
 ```
 
-We'll update the Game component's `render` function to use the most recent history entry to determine and display the game's status:
+İndi biz Game komponentinin `render` funskiyasında, tarixçənin ən yeni qeydindən istifadə edərək, qalibi müəyyənləşdirib oyunun statusunu göstərəcəyik:
 
 ```javascript{2-11,16-19,22}
   render() {
@@ -929,9 +929,9 @@ We'll update the Game component's `render` function to use the most recent histo
 
     let status;
     if (winner) {
-      status = 'Winner: ' + winner;
+      status = 'Qalib: ' + winner;
     } else {
-      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+      status = 'Sonrakı oyunçu: ' + (this.state.xIsNext ? 'X' : 'O');
     }
 
     return (
@@ -951,7 +951,7 @@ We'll update the Game component's `render` function to use the most recent histo
   }
 ```
 
-Since the Game component is now rendering the game's status, we can remove the corresponding code from the Board's `render` method. After refactoring, the Board's `render` function looks like this:
+Game komponentinin oyun statusunu göstərdiyindən, biz bu eyni kodu Board-un `render` funskiyasından silə bilərik. Refaktor etdikdən sonra, Board-un `render` funskiyası belə görünəcək:
 
 ```js{1-4}
   render() {
@@ -977,7 +977,7 @@ Since the Game component is now rendering the game's status, we can remove the c
   }
 ```
 
-Finally, we need to move the `handleClick` method from the Board component to the Game component. We also need to modify `handleClick` because the Game component's state is structured differently. Within the Game's `handleClick` method, we concatenate new history entries onto `history`.
+Ən sonda, biz `handleClick` funskiyasını Board komponentindən Game komponentinə köçürməliyik. Həmçinin biz oyun komponentində state-in stukturunun fərqli olduğunu nəzərə alaraq `handleClick`-i dəyişməliyik. Game-in `handleClick` funskiyasında, biz yeni tarixçə qeydlərini `history` massivinə birləşdiririk.
 
 ```javascript{2-4,10-12}
   handleClick(i) {
@@ -997,30 +997,30 @@ Finally, we need to move the `handleClick` method from the Board component to th
   }
 ```
 
->Note
+>Qeyd
 >
->Unlike the array `push()` method you might be more familiar with, the `concat()` method doesn't mutate the original array, so we prefer it.
+>Bizim tanıdığımız massivdə olan `push()` funskiyasından fərqli olaraq, `concat()` funskiyası orijinal massivi mutasiya etmir. Bu səbəbdən biz `concat`-ə üstünlük veririk.
 
-At this point, the Board component only needs the `renderSquare` and `render` methods. The game's state and the `handleClick` method should be in the Game component.
+Bu nöqtədə, Board komponentinə yalnız `renderSquare` və `render` funkisyaları lazımdır. Oyunun vəziyyəti və `handleClick` funskiyası Game komponentində olmalıdır.
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/EmmOqJ?editors=0010)**
+**[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/EmmOqJ?editors=0010)**
 
-### Showing the Past Moves {#showing-the-past-moves}
+### Keçmiş Hərəkətləri Göstərmək {#showing-the-past-moves}
 
-Since we are recording the tic-tac-toe game's history, we can now display it to the player as a list of past moves.
+Biz "X O oyununun" tarixçəsinin saxladığımızdan, biz indi gedişlərin siyahısını oyunçuya göstərə bilərik.
 
-We learned earlier that React elements are first-class JavaScript objects; we can pass them around in our applications. To render multiple items in React, we can use an array of React elements.
+Biz React elementlərinin 1ci klas Javascript obyetkləri olduğunu və bu obyektərin applikasiyada fərqli yerlərə göndərilə bildiyini öyrəndik. Bir neçə elementi render etmək üçün, biz React elementlərinin massivindən istifadə edə bilərik.
 
-In JavaScript, arrays have a [`map()` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) that is commonly used for mapping data to other data, for example:
+JavaScriptdə, massivlərdə məlumatları başqa məlumatlara uzlaşdırmaq üçün [`map()` funskiyası var](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Məsələn:
 
 ```js
 const numbers = [1, 2, 3];
 const doubled = numbers.map(x => x * 2); // [2, 4, 6]
 ``` 
 
-Using the `map` method, we can map our history of moves to React elements representing buttons on the screen, and display a list of buttons to "jump" to past moves.
+`map` funskiyasından istifadə edərək, biz gedişlərin tarixçəsini ekranda düməyəri göstərən React elementlərinə uzlaşdırıb, keçmiş gedişlərə "tullanmaq" üçün düymələr siyahısı göstərə bilərik
 
-Let's `map` over the `history` in the Game's `render` method:
+Gəlin Game-in `render funskiyasında `history`-nin üzərindən `map` edək:
 
 ```javascript{6-15,34}
   render() {
@@ -1030,8 +1030,8 @@ Let's `map` over the `history` in the Game's `render` method:
 
     const moves = history.map((step, move) => {
       const desc = move ?
-        'Go to move #' + move :
-        'Go to game start';
+        'Gedişə get: #' + move :
+        'Oyunun əvvəlinə qayıt';
       return (
         <li>
           <button onClick={() => this.jumpTo(move)}>{desc}</button>
@@ -1041,9 +1041,9 @@ Let's `map` over the `history` in the Game's `render` method:
 
     let status;
     if (winner) {
-      status = 'Winner: ' + winner;
+      status = 'Qalib: ' + winner;
     } else {
-      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+      status = 'Sonrakı oyunçu: ' + (this.state.xIsNext ? 'X' : 'O');
     }
 
     return (
@@ -1063,62 +1063,63 @@ Let's `map` over the `history` in the Game's `render` method:
   }
 ```
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)**
+**[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)**
 
-For each move in the tic-tac-toes's game's history, we create a list item `<li>` which contains a button `<button>`. The button has a `onClick` handler which calls a method called `this.jumpTo()`. We haven't implemented the `jumpTo()` method yet. For now, we should see a list of the moves that have occurred in the game and a warning in the developer tools console that says:
+"X O oyununun" tarixində olan bütün gedişlər üçün biz içərisində düymə `<button>` olan siyahı bəndi `<li>` yaradırıq. Düymənin `onClick` işləyicisi `this.jumpTo()` adlanan funskiyanı çağırır. Biz `jumpTo` funskiyasını hələki tətbiq etməmişik. İndi, biz oyunda baş vermiş bütün gedişlərin siyahısını və developer alətləri konsolunda aşağıdakı xəbərdarlığı görməliyik:
 
 >  Warning:
 >  Each child in an array or iterator should have a unique "key" prop. Check the render method of "Game".
 
-Let's discuss what the above warning means.
+Gəlin yuxarıdalı xəbərdarlığın nə olduğunu müzakirə edək.
 
-### Picking a Key {#picking-a-key}
+### Açarı Seçmək {#picking-a-key}
 
-When we render a list, React stores some information about each rendered list item. When we update a list, React needs to determine what has changed. We could have added, removed, re-arranged, or updated the list's items.
+Siyahı render etdikdə, React hər render olunmuş siyahı bəndi haqqında məlumat saxlayır. Siyahı yeniləndikdə React nəyin dəyişdiyini müəyyən etməlidir. Biz siyahı bəndlərinə yenisini əlavə edə, bəndi silə, bəndlərinin yerini dəyişə, və ya list bəndləri yeniləyə bilərik.
 
-Imagine transitioning from
+Aşağıdakından
 
 ```html
-<li>Alexa: 7 tasks left</li>
-<li>Ben: 5 tasks left</li>
+<li>Aydan: 7 tapşırıq qalıb</li>
+<li>Elnur: 5 tapşırıq qalıb</li>
 ```
 
-to
+aşağıdakına
 
 ```html
-<li>Ben: 9 tasks left</li>
-<li>Claudia: 8 tasks left</li>
-<li>Alexa: 5 tasks left</li>
+<li>Elnur: 9 tapşırıq qalıb</li>
+<li>Aysel: 8 tapşırıq qalıb</li>
+<li>Aydan: 5 tapşırıq qalıb</li>
 ```
 
-In addition to the updated counts, a human reading this would probably say that we swapped Alexa and Ben's ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and does not know what we intended. Because React cannot know our intentions, we need to specify a *key* property for each list item to differentiate each list item from its siblings. One option would be to use the strings `alexa`, `ben`, `claudia`. If we were displaying data from a database, Alexa, Ben, and Claudia's database IDs could be used as keys.
+keçidi fikirləşin.
+
+Sayın çoxalmağından əlavə, bunu oxuyan insan, bizim Aydan ilə Elnurun sıralamasının dəyişdiyini, və Ayselin Aydan ilə Elnurun arasına əlavə edildiyini deyə bilər. Lakin, React bir kompyuter proqramı olduğundan bizim ne etmək istədiyimi bilmir. React-in bizim niyyətimizi bilmədiyi üçün, biz hər siyahı bəndinə, qonşularından fərqləndirmək üçün, *açar* parametri ilə təyin etməliyik. Bir seçim `aydan`, `elnur`, və `aysel` sətirlərini açar kimi işlətməkdir. Əgər siz məlumatları kənar bir məlumat bazasından oxuyursunuzsa, Aydan, Elnur, və Ayselin məlumat bazasında olan IDlərini açar kimi işlətmək olar.
 
 ```html
-<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>
+<li key={user.id}>{user.name}: {user.taskCount} tapşırıq qalıb</li>
 ```
 
 When a list is re-rendered, React takes each list item's key and searches the previous list's items for a matching key. If the current list has a key that didn't exist before, React creates a component. If the current list is missing a key that existed in the previous list, React destroys the previous component. If two keys match, the corresponding component is moved. Keys tell React about the identity of each component which allows React to maintain state between re-renders. If a component's key changes, the component will be destroyed and re-created with a new state.
 
-`key` is a special and reserved property in React (along with `ref`, a more advanced feature). When an element is created, React extracts the `key` property and stores the key directly on the returned element. Even though `key` may look like it belongs in `props`, `key` cannot be referenced using `this.props.key`. React automatically uses `key` to decide which components to update. A component cannot inquire about its `key`.
-
-**It's strongly recommended that you assign proper keys whenever you build dynamic lists.** If you don't have an appropriate key, you may want to consider restructuring your data so that you do.
+`key` React-də xüsusi və reservlənmiş parametrdir (daha təkminli xüsusiyyə olan `ref` ilə birlikdə). Element yarandığı zaman React `key` parametrini çıxarır və bu açarı birbaşa qaytarılan elementdə saxlayır. `key`-in `props`-a aid olduğu görünsə belə, `key`, `this.props.key` ilə çağrıla bilməz. React avtomatik olaraq `key`-dən istifadə edərək hansı komponentin yenilənəcəyinə qərar verir. Komponent öz `key`-ini soruşa bilməz.
 
-If no key is specified, React will present a warning and use the array index as a key by default. Using the array index as a key is problematic when trying to re-order a list's items or inserting/removing list items. Explicitly passing `key={i}` silences the warning but has the same problems as array indices and is not recommended in most cases.
+**Dinamik siyahılar yaratdəğınız zaman düzgün açarların təyin edilməsi güclü şəkildə tövsiyyə olunur.** Əgər sizdə lazımı açar yoxdursa, sizin açar olana kimi məlumatınızın strukturunu dəyişməniz lazım ola bilər.
 
-Keys do not need to be globally unique; they only need to be unique between components and their siblings.
+Əgər açar təyin edilməyibsə, React sizə xəbərdarlıq edib, massivin indeksini açar kimi işlədəcək. Massiv indeksini açar kimi işlətdikdə, siyahıdakı elementlərin yerini dəyişmək və ya elementləri əlavə edib/sildmək problematik olur. Açıq aydın `key={i}` göndərildikdə xəbərdarlıq susdurulur amma massiv indeksini göndərmək ilə olan problemlər yenədə qalır. Bu səbəbdən, bir çox halda belə formada xəbərdarlığı susdurmaq tövsiyyə edilmir.
 
+Açarlar qlobal formada unikal olmamalıdırlar. Yalnız komponentlər və qonşular arası unikal olmalıdırlar.
 
-### Implementing Time Travel {#implementing-time-travel}
+### Zaman Səyahətini Tətbiq Etmək {#implementing-time-travel}
 
-In the tic-tac-toe game's history, each past move has a unique ID associated with it: it's the sequential number of the move. The moves are never re-ordered, deleted, or inserted in the middle, so it's safe to use the move index as a key.
+"X O oyununun" tarixində, hər bir keçmiş gedişin unkial ID-si var: gedişin ardıllıq rəqəmidir. Bu gedişlərin yeri heç vaxt dəyişmir, silinmir, və ya ortadan gediş əlavə olunmur. Bu səbəbdən, gedişin indeksini açar kimi işlətmək təhlükəsizdir.
 
-In the Game component's `render` method, we can add the key as `<li key={move}>` and React's warning about keys should disappear:
+Game komponentinin `render` funskiyasında, açarı `<li key={move}>` formada yaza bilərik. React-in açarlar haqqında olan xəbərdarlığı itəcək:
 
 ```js{6}
     const moves = history.map((step, move) => {
       const desc = move ?
-        'Go to move #' + move :
-        'Go to game start';
+        'Gedişə get #' + move :
+        'Oyunun əvvəlinə qayıt';
       return (
         <li key={move}>
           <button onClick={() => this.jumpTo(move)}>{desc}</button>
@@ -1127,11 +1128,11 @@ In the Game component's `render` method, we can add the key as `<li key={move}>`
     });
 ```
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)**
+**[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)**
 
-Clicking any of the list item's buttons throws an error because the `jumpTo` method is undefined. Before we implement `jumpTo`, we'll add `stepNumber` to the Game component's state to indicate which step we're currently viewing.
+`jumpTo` funskiyasın olmadığından siyahıdakı hər hansı bir düyməni tıkladıqda xəta baş verir. `jumpTo` funskiyasını tətbiq etməmişdən qabaq, biz hansı gedişdə olduğumuzu bilmək üçün `stepNumber` state-ini Game komponentinə əlavə edəcəyik.
 
-First, add `stepNumber: 0` to the initial state in Game's `constructor`:
+İlk olaraq, `stepNumber: 0`-ı Game `constructor`-da başlanğıc state-ə əlavə edin:
 
 ```js{8}
 class Game extends React.Component {
@@ -1147,11 +1148,11 @@ class Game extends React.Component {
   }
 ```
 
-Next, we'll define the `jumpTo` method in Game to update that `stepNumber`. We also set `xIsNext` to true if the number that we're changing `stepNumber` to is even:
+Sonra, biz `stepNumber`-i yeniləmək üçün Game komponentində `jumpTo` funskiyasını tətbiq edəcəyik. Əlavə olaraq, biz `stepNumber` cüt rəqəm olduqda `xIsNext` state-ini true edəcəyik:
 
 ```javascript{5-10}
   handleClick(i) {
-    // this method has not changed
+    // Bu funksiya dəyişməyib
   }
 
   jumpTo(step) {
@@ -1162,15 +1163,15 @@ Next, we'll define the `jumpTo` method in Game to update that `stepNumber`. We a
   }
 
   render() {
-    // this method has not changed
+    // Bu funksiya dəyişməyib
   }
 ```
 
-We will now make a few changes to the Game's `handleClick` method which fires when you click on a square.
+Biz həmçinin Game-in `handleClick` funskiytasınıda kiçik dəyişikliklər edəcəyik.
 
-The `stepNumber` state we've added reflects the move displayed to the user now. After we make a new move, we need to update `stepNumber` by adding `stepNumber: history.length` as part of the `this.setState` argument. This ensures we don't get stuck showing the same move after a new one has been made.
+Əlavə etdiyimiz `stepNumber` state-i istifadəçiyə gedişi göstərir. Yeni gediş etdikdə isə, biz `stepNumber`-i yeniləmək üçün `stepNumber: history.length`-nu `this.setState` funskiyasının arqumentinin bir hissəsi kimi əlavə etməliyik. Bu biz yeni gediş əlavə etdikdə eyni gedişi göstərməyin qabağını alır.
 
-We will also replace reading `this.state.history` with `this.state.history.slice(0, this.state.stepNumber + 1)`. This ensures that if we "go back in time" and then make a new move from that point, we throw away all the "future" history that would now become incorrect.
+Biz həmçinin `this.state.history`-ni oxumağı `this.state.history.slice(0, this.state.stepNumber + 1)` ilə əvəz edəcəyik. Bu, biz keçmişdə olduğumuz zaman hərəkət etdikdə, olduğumuz nöqtədən yeni gedişin əlavə edilməsi və qalan "gələcək" gedişləri tarixinin silinməsini təmin edir.
 
 ```javascript{2,13}
   handleClick(i) {
@@ -1191,7 +1192,7 @@ We will also replace reading `this.state.history` with `this.state.history.slice
   }
 ```
 
-Finally, we will modify the Game component's `render` method from always rendering the last move to rendering the currently selected move according to `stepNumber`:
+Son olaraq, biz Game komponentinin `render` funskiyasında ən sonuncu gedişi göstərmək əvəzinə `stepNumber` indeksi ilə olan gedişi göstərməliyik:
 
 ```javascript{3}
   render() {
@@ -1199,33 +1200,33 @@ Finally, we will modify the Game component's `render` method from always renderi
     const current = history[this.state.stepNumber];
     const winner = calculateWinner(current.squares);
 
-    // the rest has not changed
+    // kodun qalanı dəyişməyib
 ```
 
-If we click on any step in the game's history, the tic-tac-toe board should immediately update to show what the board looked like after that step occurred.
+Biz oyun tarixində hər hansı bir addıma qayıtsaq, "X O oyununun" taxtası bizə o addımdan sonra oyunun vəziyyətini bizə göstərmək üçün yenilənəcək.
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**
+**[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**
 
-### Wrapping Up {#wrapping-up}
+### Yekunlaşdırmaq {#wrapping-up}
 
-Congratulations! You've created a tic-tac-toe game that:
+Təbriklər! Siz aşağıdakı xüsusiyyətləri olan "X O oyunu" yaratdınız:
 
-* Lets you play tic-tac-toe,
-* Indicates when a player has won the game,
-* Stores a game's history as a game progresses,
-* Allows players to review a game's history and see previous versions of a game's board.
+* Oyunu oynamağa icazə verir,
+* Oyunun qalibini müəyyənləşdirir,
+* Oyunu oynadığınız müddətdə bütün tarixini saxlayır,
+* Oyunçulara oyunun tarixinin icmalını və keçmiş versiyalarını görməyə imkan verir.
 
-Nice work! We hope you now feel like you have a decent grasp on how React works.
+Arzulayırıqki sizdə React-in işləməyi ilə bağlı fikir yarandı.
 
-Check out the final result here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**.
+Son nəticəni buradan göndərə bilərsiniz: **[Son Nəticə](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**.
 
-If you have extra time or want to practice your new React skills, here are some ideas for improvements that you could make to the tic-tac-toe game which are listed in order of increasing difficulty:
+Əgər sizdə əlavə vaxt varsa və ya yeni React bacarıqlarını möhkəmləndirmək istəyirsinizsə, aşağıda bu oyunu təkminləşdirmək üçün bəzi ideayalar var (çətinliyi artmaq sıralaması ile):
 
-1. Display the location for each move in the format (col, row) in the move history list.
-2. Bold the currently selected item in the move list.
-3. Rewrite Board to use two loops to make the squares instead of hardcoding them.
-4. Add a toggle button that lets you sort the moves in either ascending or descending order.
-5. When someone wins, highlight the three squares that caused the win.
-6. When no one wins, display a message about the result being a draw.
+1. Hər gedişin yerini gediş tarixi siyahısında (sütun, sıra) formatında göstərmək.
+2. Seçilmiş gediş siyahısını qalın şrift ilə göstər.
+3. Board-dakı kvadratları hardkod etmək əvəzinə iki sikl ilə yaradın.
+4. Gedişləri artan və ya azalan sıralama ilə sıralamaq üçün düymə əlavə edin.
+5. Əgər kimsə aqlib olubsa, oyunu qazanan üç kvadratı vurğulayın.
+6. Əgər heç kəs qalib gəlmirsə, heç heçə olduğunu göstərin.
 
-Throughout this tutorial, we touched on React concepts including elements, components, props, and state. For a more detailed explanation of each of these topics, check out [the rest of the documentation](/docs/hello-world.html). To learn more about defining components, check out the [`React.Component` API reference](/docs/react-component.html).
+Bu dərslik zamanında, biz React-in konsepsiyalarınına (elementlər, proplar, state, və komponentlər) toxunun. Bu mövzular ilə bağlı daha ətraflı izahat üçün, [sənədlərin qalanını](/docs/hello-world.html) oxuyun. Komponentlərin müəyyənləşdirilməsi haqqında daha ətraflı məlumat almaq üçün, [`React.Component` API Arayışını](/docs/react-component.html) oxuyun.

From e3f43f5bdd57dbc910aefa08e997ae8c8b82e3dc Mon Sep 17 00:00:00 2001
From: Romain Linsolas <linsolas@gmail.com>
Date: Thu, 14 Feb 2019 01:24:52 +0100
Subject: [PATCH 058/118] Fix shallow renderer link on test utils page

---
 content/docs/addons-test-utils.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md
index bbbf5755c..20aae91b5 100644
--- a/content/docs/addons-test-utils.md
+++ b/content/docs/addons-test-utils.md
@@ -139,7 +139,7 @@ Pass a mocked component module to this method to augment it with useful methods
 
 > Note:
 >
-> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/test-utils.html#shallow-rendering) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.
+> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/shallow-renderer.html) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.
 
 * * *
 

From 38140e060d80afa75de20e22f702d409400b3f51 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Thu, 14 Feb 2019 17:16:51 +0400
Subject: [PATCH 059/118] Translate until React.lazy

---
 content/docs/code-splitting.md | 77 +++++++++++-----------------------
 1 file changed, 25 insertions(+), 52 deletions(-)

diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 5b8d40063..1cefba9fb 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -1,20 +1,16 @@
 ---
 id: code-splitting
-title: Code-Splitting
+title: Kod Parçalanması
 permalink: docs/code-splitting.html
 ---
 
-## Bundling {#bundling}
+## Paketləmə {#bundling}
 
-Most React apps will have their files "bundled" using tools like
-[Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/).
-Bundling is the process of following imported files and merging them into a
-single file: a "bundle". This bundle can then be included on a webpage to load
-an entire app at once.
+Bir çox React applikasiyalarda faylları [Webpack](https://webpack.js.org/) və ya [Browserify](http://browserify.org/) kimi alətlər ilə paketləriylər. Paketləmə (bundling) import olunan faylların izlənməsi və "bundle" adlanan bir fayla birləşdirilməsidir. Bu fayl bütün applikasiyanı saytda bir dəfəyə yükləmək üçün istifadə edilə bilər.
 
-#### Example {#example}
+#### Nümunə {#example}
 
-**App:**
+**Applikasiya:**
 
 ```js
 // app.js
@@ -30,7 +26,7 @@ export function add(a, b) {
 }
 ```
 
-**Bundle:**
+**Paket:**
 
 ```js
 function add(a, b) {
@@ -40,44 +36,27 @@ function add(a, b) {
 console.log(add(16, 26)); // 42
 ```
 
-> Note:
+> Qeyd:
 >
-> Your bundles will end up looking a lot different than this.
-
-If you're using [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), or a similar tool, you will have a Webpack setup out of the box to bundle your
-app.
+> Sizin paketləriniz yuxarıdankından çox fərqli olacaq.
+Əgər siz [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), və ya oxşar bir alət işlədirsinizsə, applikasiyanı paketləmək üçün Webpack sizdə hazır qoşulmuş olacaq.
 
-If you aren't, you'll need to setup bundling yourself. For example, see the
-[Installation](https://webpack.js.org/guides/installation/) and
-[Getting Started](https://webpack.js.org/guides/getting-started/) guides on the
-Webpack docs.
+Əgər siz belə alətlərdən istifadə etmirsinizsə, siz paketləməni özünüz goşmalısınız. Misal üçün Webpack sənədlərində [İnstalyasiya](https://webpack.js.org/guides/installation/) və
+[Başlamaq](https://webpack.js.org/guides/getting-started/) təlimatlarına baxın.
 
-## Code Splitting {#code-splitting}
+## Kod Parçalanması {#code-splitting}
 
-Bundling is great, but as your app grows, your bundle will grow too. Especially
-if you are including large third-party libraries. You need to keep an eye on
-the code you are including in your bundle so that you don't accidentally make
-it so large that your app takes a long time to load.
+Paketləmə əladır amma sizin applikasiyanız böyüdükcə paket də böyüyəcək, xüsusəndə böyük üçüncü tərəf kitabxanalardan istifadə edildidikdə. Təsadüfən paketin ölçüsünü böyüdüb applikasiyanın yüklənməsi zamanını artırmamaq üçün paketə import etdiyiniz kodlara fikir verin.ß
 
-To avoid winding up with a large bundle, it's good to get ahead of the problem
-and start "splitting" your bundle.
- [Code-Splitting](https://webpack.js.org/guides/code-splitting/) is a feature
-supported by bundlers like Webpack and Browserify (via
-[factor-bundle](https://github.com/browserify/factor-bundle)) which can create
-multiple bundles that can be dynamically loaded at runtime.
+Böyük paket ilə qalmamaq üçün öncədən problemin üstünə düşmə və paketi "parçalamağa" başlaya bilərsiniz. Webpack və Browserify ([factor-bundle](https://github.com/browserify/factor-bundle) ilə)  kimi paketləmə alətlərində bir çox paketləri yaradıb dinamik formada icra müddətində yüklənməsi xüsusiyyəti [Kod Parçalanması](https://webpack.js.org/guides/code-splitting/) adlanır.
 
-Code-splitting your app can help you "lazy-load" just the things that are
-currently needed by the user, which can dramatically improve the performance of
-your app. While you haven't reduced the overall amount of code in your app,
-you've avoided loading code that the user may never need, and reduced the amount
-of code needed during the initial load.
+Kod Parçalanması sizin applikasiyanızda istifadəçiyə cari lazım olanları "lazy-load" etməyə kömək edir. Bu sizin applikasiyanızın performansını dramatik şəkildə təkminləşdirir. Siz applikasiyada bütün kodun həcmini azalatmasanız da, istifadəçinin işlətməyəcəyi hissələrin yüklənmənməyini qabağını alır bə ilk yüklənən kodun həcmini azaltmış olursunuz.
 
 ## `import()` {#import}
 
-The best way to introduce code-splitting into your app is through the dynamic
-`import()` syntax.
+Kod Parçalanmasını applikasiyanıza əlavə etməyin ən yaxşı yolu dinamik `import()` sintaksisindən istifadə etməkdir.
 
-**Before:**
+**Əvvəl:**
 
 ```js
 import { add } from './math';
@@ -85,7 +64,7 @@ import { add } from './math';
 console.log(add(16, 26));
 ```
 
-**After:**
+**Sonra:**
 
 ```js
 import("./math").then(math => {
@@ -93,23 +72,17 @@ import("./math").then(math => {
 });
 ```
 
-> Note:
+> Qeyd:
 >
-> The dynamic `import()` syntax is a ECMAScript (JavaScript)
-> [proposal](https://github.com/tc39/proposal-dynamic-import) not currently
-> part of the language standard. It is expected to be accepted in the
-> near future.
+> Dinamik `import()` sintaksisi ECMAScript (JavaScript)
+> [təklifi fazasındadır](https://github.com/tc39/proposal-dynamic-import) və hələki dilin standartının 
+> bir hissəsi deyil. Bu təflik yaxın gələcəkdə standarta qəbul ediləcək.
 
-When Webpack comes across this syntax, it automatically starts code-splitting
-your app. If you're using Create React App, this is already configured for you
-and you can [start using it](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported
-out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
+Webpack bu sintaksisi görən kimi, sizin applikasiyanızın kodunu avtomatik parçalayacaq. Əgər siz Create React App işlədirsinizsə, bu xüsusiyyət artiq sizin üçün konfiqurasiya olunub və siz dərhal bunu [işlədə bilərsiniz](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting). Bu xusiyyət həmçinin [Next.js-də](https://github.com/zeit/next.js/#dynamic-import) dəstəklənir.
 
-If you're setting up Webpack yourself, you'll probably want to read Webpack's
-[guide on code splitting](https://webpack.js.org/guides/code-splitting/). Your Webpack config should look vaguely [like this](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269).
+Əgər siz Webpack-i özünüz quraşdırırsınızsa, Webpack-in [kod parçalaması haqqında təlimatını](https://webpack.js.org/guides/code-splitting/) oxumaq sizə lazım olacaq. Sizin Webpack konfiqurasiyası daha [belə bir formada](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269) görünəcək.
 
-When using [Babel](http://babeljs.io/), you'll need to make sure that Babel can
-parse the dynamic import syntax but is not transforming it. For that you will need [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import).
+[Babel](http://babeljs.io/) işlədərkən Babel-ın dinamik import sintaksisini təhlil edə bilir amma transformasiya etmir. Bunun üçün sizə [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) lazımdır.
 
 ## `React.lazy` {#reactlazy}
 

From 23dd323d7d3afa2dfc6c280a2aad7299a16f7085 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Thu, 14 Feb 2019 20:09:53 +0400
Subject: [PATCH 060/118] Translate all parts of code splitting

---
 content/docs/code-splitting.md | 63 ++++++++++++++++------------------
 1 file changed, 29 insertions(+), 34 deletions(-)

diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 1cefba9fb..180139829 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -6,7 +6,7 @@ permalink: docs/code-splitting.html
 
 ## Paketləmə {#bundling}
 
-Bir çox React applikasiyalarda faylları [Webpack](https://webpack.js.org/) və ya [Browserify](http://browserify.org/) kimi alətlər ilə paketləriylər. Paketləmə (bundling) import olunan faylların izlənməsi və "bundle" adlanan bir fayla birləşdirilməsidir. Bu fayl bütün applikasiyanı saytda bir dəfəyə yükləmək üçün istifadə edilə bilər.
+Bir çox React applikasiyalarında, faylları [Webpack](https://webpack.js.org/) və ya [Browserify](http://browserify.org/) kimi alətlər ilə paketləriylər. Paketləmə (bundling) import olunan faylların izlənməsi və "bundle" adlanan bir fayla birləşdirilməsidir. Bu fayl bütün applikasiyanı saytda bir dəfəyə yükləmək üçün istifadə edilə bilər.
 
 #### Nümunə {#example}
 
@@ -39,18 +39,19 @@ console.log(add(16, 26)); // 42
 > Qeyd:
 >
 > Sizin paketləriniz yuxarıdankından çox fərqli olacaq.
+
 Əgər siz [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), və ya oxşar bir alət işlədirsinizsə, applikasiyanı paketləmək üçün Webpack sizdə hazır qoşulmuş olacaq.
 
-Əgər siz belə alətlərdən istifadə etmirsinizsə, siz paketləməni özünüz goşmalısınız. Misal üçün Webpack sənədlərində [İnstalyasiya](https://webpack.js.org/guides/installation/) və
+Əgər siz belə alətlərdən istifadə etmirsinizsə, siz paketləməni özünüz qoşmalısınız. Misal üçün, Webpack sənədlərində [İnstalyasiya](https://webpack.js.org/guides/installation/) və
 [Başlamaq](https://webpack.js.org/guides/getting-started/) təlimatlarına baxın.
 
 ## Kod Parçalanması {#code-splitting}
 
-Paketləmə əladır amma sizin applikasiyanız böyüdükcə paket də böyüyəcək, xüsusəndə böyük üçüncü tərəf kitabxanalardan istifadə edildidikdə. Təsadüfən paketin ölçüsünü böyüdüb applikasiyanın yüklənməsi zamanını artırmamaq üçün paketə import etdiyiniz kodlara fikir verin.ß
+Paketləmə əladır amma sizin applikasiyanız böyüdükcə paket də böyüyəcək, xüsusəndə böyük ölçülü üçüncü tərəf kitabxanalardan istifadə edildikdə. Təsadüfən paketin ölçüsünü böyüdüb applikasiyanın yüklənməsi zamanını artırmamaq üçün paketə import etdiyiniz kodlara fikir verin.
 
-Böyük paket ilə qalmamaq üçün öncədən problemin üstünə düşmə və paketi "parçalamağa" başlaya bilərsiniz. Webpack və Browserify ([factor-bundle](https://github.com/browserify/factor-bundle) ilə)  kimi paketləmə alətlərində bir çox paketləri yaradıb dinamik formada icra müddətində yüklənməsi xüsusiyyəti [Kod Parçalanması](https://webpack.js.org/guides/code-splitting/) adlanır.
+Böyük paket ilə qalmamaq üçün öncədən problemin üstünə düşub paketi "parçalamağa" başlaya bilərsiniz. Webpack və Browserify ([factor-bundle](https://github.com/browserify/factor-bundle) ilə)  kimi paketləmə alətlərində bir çox paketləri yaradıb dinamik formada icra müddətində yüklənməsi xüsusiyyəti [Kod Parçalanması](https://webpack.js.org/guides/code-splitting/) adlanır.
 
-Kod Parçalanması sizin applikasiyanızda istifadəçiyə cari lazım olanları "lazy-load" etməyə kömək edir. Bu sizin applikasiyanızın performansını dramatik şəkildə təkminləşdirir. Siz applikasiyada bütün kodun həcmini azalatmasanız da, istifadəçinin işlətməyəcəyi hissələrin yüklənmənməyini qabağını alır bə ilk yüklənən kodun həcmini azaltmış olursunuz.
+Kod Parçalanması sizin applikasiyanızda istifadəçiyə hal-hazırda lazım olanları "lazy-load" etməyə kömək edir. Bu sizin applikasiyanızın performansını dramatik şəkildə təkminləşdirir. Siz applikasiyada bütün kodun həcmini azalatmasanız da, istifadəçinin işlətməyəcəyi hissələrin yüklənmənməsini qabağını alır bə ilk yüklənən kodun həcmini azaltmış olursunuz.
 
 ## `import()` {#import}
 
@@ -76,21 +77,21 @@ import("./math").then(math => {
 >
 > Dinamik `import()` sintaksisi ECMAScript (JavaScript)
 > [təklifi fazasındadır](https://github.com/tc39/proposal-dynamic-import) və hələki dilin standartının 
-> bir hissəsi deyil. Bu təflik yaxın gələcəkdə standarta qəbul ediləcək.
+> bir hissəsi deyil. Bu təklif yaxın gələcəkdə standarta qəbul ediləcək.
 
-Webpack bu sintaksisi görən kimi, sizin applikasiyanızın kodunu avtomatik parçalayacaq. Əgər siz Create React App işlədirsinizsə, bu xüsusiyyət artiq sizin üçün konfiqurasiya olunub və siz dərhal bunu [işlədə bilərsiniz](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting). Bu xusiyyət həmçinin [Next.js-də](https://github.com/zeit/next.js/#dynamic-import) dəstəklənir.
+Webpack bu sintaksisi görən kimi, sizin applikasiyanızın kodunu avtomatik parçalayacaq. Əgər siz Create React App işlədirsinizsə, bu xüsusiyyət artiq sizin üçün konfiqurasiya olunub və siz dərhal bunu [işlədə bilərsiniz](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting). Bu xusiyyəti həmçinin [Next.js](https://github.com/zeit/next.js/#dynamic-import) də dəstəkləyir.
 
-Əgər siz Webpack-i özünüz quraşdırırsınızsa, Webpack-in [kod parçalaması haqqında təlimatını](https://webpack.js.org/guides/code-splitting/) oxumaq sizə lazım olacaq. Sizin Webpack konfiqurasiyası daha [belə bir formada](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269) görünəcək.
+Əgər siz Webpack-i özünüz quraşdırırsınızsa, Webpack-in [kod parçalaması haqqında təlimatını](https://webpack.js.org/guides/code-splitting/) oxumaq sizə lazım olacaq. Sizin Webpack konfiqurasiyanız təxminən [belə bir formada](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269) görünəcək.
 
-[Babel](http://babeljs.io/) işlədərkən Babel-ın dinamik import sintaksisini təhlil edə bilir amma transformasiya etmir. Bunun üçün sizə [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) lazımdır.
+[Babel](http://babeljs.io/) işlədərkən Babel-ın dinamik import sintaksisini təhlil edə bilməsi amma transformasiya edə bilməməsi lazımdır. Bunun üçün siz [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)-dan istifadə edə bilərsiniz.
 
 ## `React.lazy` {#reactlazy}
 
-> Note:
+> Qeyd:
 >
-> `React.lazy` and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend [Loadable Components](https://github.com/smooth-code/loadable-components). It has a nice [guide for bundle splitting with server-side rendering](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md).
+> `React.lazy` və Suspense serverdə render etmək üçün hazır deyil. Əgər sizə kod parçalanması server-də render olunan applikasiya üçün lazımdırsa, biz [Loadable Components](https://github.com/smooth-code/loadable-components) işlətməyi tövsiyyə edirik. Bunun [server rendering üçün yaxşı təlimatı var](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md).
 
-The `React.lazy` function lets you render a dynamic import as a regular component.
+`React.lazy` funskiyası dinamik import olunmuş komponenti adi komponent kimi render etməyə imkan yaradır.
 
 **Before:**
 
@@ -120,13 +121,13 @@ function MyComponent() {
 }
 ```
 
-This will automatically load the bundle containing the `OtherComponent` when this component gets rendered.
+Bu avtomatik olara `OtherComponent` render olduğu zaman, komponent olan paketi yükləyəcək.
 
-`React.lazy` takes a function that must call a dynamic `import()`. This must return a `Promise` which resolves to a module with a `default` export containing a React component.
+`React.lazy` funskiyası mütləq olaraq dinamik `import()` funskiyasını çağırmalıdır. Bu mütləq `default` eksportunda React komponenti olan modulu "resolve" edən `Promise` qaytarmalıdır.
 
 ### Suspense {#suspense}
 
-If the module containing the `OtherComponent` is not yet loaded by the time `MyComponent` renders, we must show some fallback content while we're waiting for it to load - such as a loading indicator. This is done using the `Suspense` component.
+Əgər `MyComponent` render olunduğu zaman `OtherComponent` olan modul hələ yükənməyibsə, biz modul yüklənənə kimi "fallback" kontenti (məsələn Yükləmə indikatoru) göstərməliyik. Bu `Suspense` komponenti ilə həyata keçirilir.
 
 ```js
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
@@ -134,7 +135,7 @@ const OtherComponent = React.lazy(() => import('./OtherComponent'));
 function MyComponent() {
   return (
     <div>
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={<div>Yüklənir...</div>}>
         <OtherComponent />
       </Suspense>
     </div>
@@ -142,7 +143,7 @@ function MyComponent() {
 }
 ```
 
-The `fallback` prop accepts any React elements that you want to render while waiting for the component to load. You can place the `Suspense` component anywhere above the lazy component. You can even wrap multiple lazy components with a single `Suspense` component.
+`fallback` propu komponent yüklənənə kimi render etmək istədiyiniz React elementini qəbul edir. Siz `Suspense` komponentini lazy komponentin üstündə istənilən yerdə yerləşdirə bilərsiniz. Siz hətta bir neçə lazy komponentləri bir Suspense komponenti ilə əhatə edə bilərsiniz.
 
 ```js
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
@@ -151,7 +152,7 @@ const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
 function MyComponent() {
   return (
     <div>
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={<div>Yüklənir...</div>}>
         <section>
           <OtherComponent />
           <AnotherComponent />
@@ -162,9 +163,9 @@ function MyComponent() {
 }
 ```
 
-### Error boundaries {#error-boundaries}
+### Xəta sərhədləri {#error-boundaries}
 
-If the other module fails to load (for example, due to network failure), it will trigger an error. You can handle these errors to show a nice user experience and manage recovery with [Error Boundaries](/docs/error-boundaries.html). Once you've created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there's a network error.
+Əgər modulun yüklənməsi uğursuz keçirsə (məsələn şəbəkə problemlərinə görə), xəta göstəriləcək. Siz yaxşı İstifadəçi Təcrübəsi üçün bu xətaları tutmaq və bu xətaları bərpa etmək üçün [Xəta Sərhədlərindən](/docs/error-boundaries.html) istifadə edə bilərsiniz. Xəta Sərhədini yaratdıqdan sonra, siz şəbəkə xətası göstərmək üçün bu xəta sərhədini lazy komponentin yuxarısında istənilən yerdə istifadə edə bilərsiniz.
 
 ```js
 import MyErrorBoundary from './MyErrorBoundary';
@@ -174,7 +175,7 @@ const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
 const MyComponent = () => (
   <div>
     <MyErrorBoundary>
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={<div>Yüklənir...</div>}>
         <section>
           <OtherComponent />
           <AnotherComponent />
@@ -185,19 +186,13 @@ const MyComponent = () => (
 );
 ```
 
-## Route-based code splitting {#route-based-code-splitting}
+## Route əsasında kod parçalaması {#route-based-code-splitting}
 
-Deciding where in your app to introduce code splitting can be a bit tricky. You
-want to make sure you choose places that will split bundles evenly, but won't
-disrupt the user experience.
+Applikasiyanızda harada kod parçalaması etmək biraz çaşdırıcı ola bilər. Siz həmişə İstifadəçi Təcrübəsini pozmamaq və paketləri bərabər ayrılmaq üçün düzgün yerdən applikasiyanı bölməlisiniz.
 
-A good place to start is with routes. Most people on the web are used to
-page transitions taking some amount of time to load. You also tend to be
-re-rendering the entire page at once so your users are unlikely to be
-interacting with other elements on the page at the same time.
+Yaxşı başlanğıc nöqtəsi route-lardan bölməni aparmaqdır. Bir çox insan vebdə səhifə keçidlərinin yüklənməsinin zaman aldığına vərdiş ediblər. Bu zaman siz həmçinin bütün səhifəni dərhal yenidən render edirsiniz deyə istifadəçilər eyni zamanda səhifədəki başqa elementlərə qarşılıqlı təsir etmirlər.
 
-Here's an example of how to setup route-based code splitting into your app using
-libraries like [React Router](https://reacttraining.com/react-router/) with `React.lazy`.
+Aşağıdakı nümunədə [React Router](https://reacttraining.com/react-router/) və `React.lazy`-dən istifadə edərək applikasiya kodunu route əsasında parçalanması göstərilib.
 
 ```js
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
@@ -208,7 +203,7 @@ const About = lazy(() => import('./routes/About'));
 
 const App = () => (
   <Router>
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<div>Yüklənir...</div>}>
       <Switch>
         <Route exact path="/" component={Home}/>
         <Route path="/about" component={About}/>
@@ -218,9 +213,9 @@ const App = () => (
 );
 ```
 
-## Named Exports {#named-exports}
+## Adlı Eksportlar {#named-exports}
 
-`React.lazy` currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that treeshaking keeps working and that you don't pull in unused components.
+`React.lazy` yalnız `default` eksportları dəstəkləyir. Əgər sizin import istədiyiniz modul, adlı eksportlar edirsə, siz bu adlı eksportu yenidən `default` eksport edən ara modulu yarada bilərsiniz. Bu treeshaking-in işlədiyini və lazım olmayan komponentlərin yüklənmədiyini təmin edir.
 
 ```js
 // ManyComponents.js

From b2183584ba8c4c2881cc969c1786e6240e3e7b77 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 14 Feb 2019 19:21:15 +0000
Subject: [PATCH 061/118] Use 16.8.2 (#1686)

---
 src/site-constants.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/site-constants.js b/src/site-constants.js
index a401ab74b..5f217fa00 100644
--- a/src/site-constants.js
+++ b/src/site-constants.js
@@ -8,7 +8,7 @@
 // NOTE: We can't just use `location.toString()` because when we are rendering
 // the SSR part in node.js we won't have a proper location.
 const urlRoot = 'https://reactjs.org';
-const version = '16.8.1';
+const version = '16.8.2';
 const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js';
 
 export {urlRoot, version, babelURL};

From 6e32ee96b455339f5d6d6e6823394c7b99562090 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 14 Feb 2019 20:31:35 +0000
Subject: [PATCH 062/118] Bump React used by the website (#1687)

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0dd174fb9..a18d1d5c8 100644
--- a/package.json
+++ b/package.json
@@ -46,8 +46,8 @@
     "normalize.css": "^8.0.0",
     "prettier": "^1.7.4",
     "prismjs": "^1.15.0",
-    "react": "16.7.0-alpha.0",
-    "react-dom": "16.7.0-alpha.0",
+    "react": "16.8.2",
+    "react-dom": "16.8.2",
     "react-helmet": "^5.2.0",
     "react-live": "1.8.0-0",
     "remarkable": "^1.7.1",

From 87f5b7ba905c9fa6b3e0b046d85511550ceca4aa Mon Sep 17 00:00:00 2001
From: Saransh Kataria <saransh@wisdomgeek.com>
Date: Thu, 14 Feb 2019 22:24:08 -0800
Subject: [PATCH 063/118] updated broken link on HOC documentation

---
 content/docs/higher-order-components.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md
index 63da3ef86..4d15f5b97 100644
--- a/content/docs/higher-order-components.md
+++ b/content/docs/higher-order-components.md
@@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);
 
 Whereas a component transforms props into UI, a higher-order component transforms a component into another component.
 
-HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
+HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api/connect.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
 
 In this document, we'll discuss why higher-order components are useful, and how to write your own.
 
@@ -396,4 +396,4 @@ import MyComponent, { someFunction } from './MyComponent.js';
 
 While the convention for higher-order components is to pass through all props to the wrapped component, this does not work for refs. That's because `ref` is not really a prop — like `key`, it's handled specially by React. If you add a ref to an element whose component is the result of a HOC, the ref refers to an instance of the outermost container component, not the wrapped component.
 
-The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).
\ No newline at end of file
+The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).

From cbe648ede3edbddbb4c8ab508b426d2b53728f86 Mon Sep 17 00:00:00 2001
From: Saransh Kataria <saransh@wisdomgeek.com>
Date: Sat, 16 Feb 2019 14:35:03 -0800
Subject: [PATCH 064/118] updated footer to get year based on current date

---
 src/components/LayoutFooter/Footer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index 5d91a93a3..5e571d971 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -179,7 +179,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               color: colors.subtleOnDark,
               paddingTop: 15,
             }}>
-            Copyright © 2019 Facebook Inc.
+            {`Copyright © ${new Date().getFullYear()} Facebook Inc.`}
           </p>
         </section>
       </div>

From ea69a385dca7c48c63f4c35fec345b9e1ba76e9a Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Sat, 16 Feb 2019 19:23:49 -0800
Subject: [PATCH 065/118] fix broken audio link in community roundup 26

---
 content/blog/2015-03-30-community-roundup-26.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/blog/2015-03-30-community-roundup-26.md b/content/blog/2015-03-30-community-roundup-26.md
index ae2dc4979..ec30f30f3 100644
--- a/content/blog/2015-03-30-community-roundup-26.md
+++ b/content/blog/2015-03-30-community-roundup-26.md
@@ -29,7 +29,7 @@ Colin also [blogged about his experience using React Native](http://blog.scottlo
 
 Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :)
 
-<audio src="http://fdlyr.co/d/changelog/cdn.5by5.tv/audio/broadcasts/changelog/2015/changelog-149.mp3" controls="controls" style="width: 100%"></audio>
+<audio src="https://cdn.changelog.com/uploads/podcast/149/the-changelog-149.mp3" controls="controls" style="width: 100%"></audio>
 
 
 ## Hacker News {#hacker-news}

From cd7bfe7b2faebe72d7bd2500926fb7e9f0913c77 Mon Sep 17 00:00:00 2001
From: Farhad Yasir <farhad.yasir.nb@gmail.com>
Date: Mon, 18 Feb 2019 11:55:05 +1100
Subject: [PATCH 066/118] fix(renderExamplePlaceholder):
 renderExamplePlaceholder removed as its never used

---
 src/pages/index.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index bc2d732fd..f52619ce2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -310,13 +310,6 @@ Home.propTypes = {
   }).isRequired,
 };
 
-function renderExamplePlaceholder(containerId) {
-  ReactDOM.render(
-    <h4>Loading code example...</h4>,
-    document.getElementById(containerId),
-  );
-}
-
 const CtaItem = ({children, primary = false}) => (
   <div
     css={{

From f5ccd7e2554e32a96fb1afab332374029a3a0a72 Mon Sep 17 00:00:00 2001
From: Tauan Tathiell <lukyhenson@live.com>
Date: Mon, 11 Feb 2019 20:27:14 -0200
Subject: [PATCH 067/118] It solves a broken link on HOC doc

---
 content/docs/higher-order-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md
index 4d15f5b97..55cd60914 100644
--- a/content/docs/higher-order-components.md
+++ b/content/docs/higher-order-components.md
@@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);
 
 Whereas a component transforms props into UI, a higher-order component transforms a component into another component.
 
-HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api/connect.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
+HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
 
 In this document, we'll discuss why higher-order components are useful, and how to write your own.
 

From aaefe69287eed6da8fbc8c9dee7a418dce265579 Mon Sep 17 00:00:00 2001
From: Vasiliy Vanchuk <v.vanchuk@tut.by>
Date: Tue, 19 Feb 2019 15:27:43 +0400
Subject: [PATCH 068/118] Fix command for initializing tsconfig

Project dependency doesn't add itself it global PATH. So call `tsc` will work either with globally installed typescript, or from npm/yarn script.
---
 content/docs/static-type-checking.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
index b01b92fec..fd55d8bb6 100644
--- a/content/docs/static-type-checking.md
+++ b/content/docs/static-type-checking.md
@@ -219,7 +219,7 @@ Congrats! You've installed the latest version of TypeScript into your project. I
 The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called `tsconfig.json`. To generate this file run:
 
 ```bash
-tsc --init
+npx tsc --init
 ```
 
 Looking at the now generated `tsconfig.json`, you can see that there are many options you can use to configure the compiler. For a detailed description of all the options, check [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).

From d4f7a2c2d9fcdf984526b1f43f04815361c02bf2 Mon Sep 17 00:00:00 2001
From: Deniz Susman <susmandeniz@gmail.com>
Date: Tue, 19 Feb 2019 15:32:42 +0300
Subject: [PATCH 069/118] Fix typo in blog

"collocation" instead of "colocation".
---
 content/blog/2015-08-11-relay-technical-preview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/blog/2015-08-11-relay-technical-preview.md b/content/blog/2015-08-11-relay-technical-preview.md
index c574ccce2..65b1ac5fb 100644
--- a/content/blog/2015-08-11-relay-technical-preview.md
+++ b/content/blog/2015-08-11-relay-technical-preview.md
@@ -13,7 +13,7 @@ While React simplified the process of developing complex user-interfaces, it lef
 
 Declarative data-fetching means that Relay applications specify *what* data they need, not *how* to fetch that data. Just as React uses a description of the desired UI to manage view updates, Relay uses a data description in the form of GraphQL queries. Given these descriptions, Relay coalesces queries into batches for efficiency, manages error-prone asynchronous logic, caches data for performance, and automatically updates views as data changes.
 
-Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This colocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
+Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This collocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
 
 Relay is in use at Facebook in production apps, and we're using it more and more because *Relay lets developers focus on their products and move fast*. It's working for us and we'd like to share it with the community.
 

From 67167457763fac15d0429eb443e8870179b3fe60 Mon Sep 17 00:00:00 2001
From: Vasiliy Vanchuk <v.vanchuk@tut.by>
Date: Tue, 19 Feb 2019 18:42:05 +0400
Subject: [PATCH 070/118] Update static-type-checking.md

---
 content/docs/static-type-checking.md | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
index fd55d8bb6..553ea6354 100644
--- a/content/docs/static-type-checking.md
+++ b/content/docs/static-type-checking.md
@@ -216,9 +216,17 @@ Congrats! You've installed the latest version of TypeScript into your project. I
 ```
 
 ### Configuring the TypeScript Compiler {#configuring-the-typescript-compiler}
-The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called `tsconfig.json`. To generate this file run:
+The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called `tsconfig.json`. To generate this file:
 
-```bash
+If you use [Yarn](https://yarnpkg.com/), run:
+
+```shell
+yarn run tsc --init
+```
+
+If you use [npm](https://www.npmjs.com/), run:
+
+```shell
 npx tsc --init
 ```
 

From 2819a0f0ebee17646128edb4832aedd094051597 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 19 Feb 2019 17:50:35 +0000
Subject: [PATCH 071/118] Remove the "experimental" wording from Hooks intro
 (#1709)

---
 content/docs/hooks-intro.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md
index b4cefcfbe..9470d614d 100644
--- a/content/docs/hooks-intro.md
+++ b/content/docs/hooks-intro.md
@@ -97,9 +97,7 @@ We know that React developers are focused on shipping products and don't have ti
 
 We also understand that the bar for adding a new primitive to React is extremely high. For curious readers, we have prepared a [detailed RFC](https://github.com/reactjs/rfcs/pull/68) that dives into motivation with more details, and provides extra perspective on the specific design decisions and related prior art.
 
-**Crucially, Hooks work side-by-side with existing code so you can adopt them gradually.** We are sharing this experimental API to get early feedback from those in the community who are interested in shaping the future of React — and we will iterate on Hooks in the open.
-
-Finally, there is no rush to migrate to Hooks. We recommend avoiding any "big rewrites", especially for existing, complex class components. It takes a bit of a mindshift to start "thinking in Hooks". In our experience, it's best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to [send us feedback](https://github.com/facebook/react/issues/new), positive or negative.
+**Crucially, Hooks work side-by-side with existing code so you can adopt them gradually.** There is no rush to migrate to Hooks. We recommend avoiding any "big rewrites", especially for existing, complex class components. It takes a bit of a mindshift to start "thinking in Hooks". In our experience, it's best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to [send us feedback](https://github.com/facebook/react/issues/new), positive or negative.
 
 We intend for Hooks to cover all existing use cases for classes, but **we will keep supporting class components for the foreseeable future.** At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes.
 

From 0569c21da09d4c15b8cb1e749bde85db146bbb39 Mon Sep 17 00:00:00 2001
From: "Juan J. Alvarez" <juanjalvarez@users.noreply.github.com>
Date: Tue, 19 Feb 2019 10:49:19 -0800
Subject: [PATCH 072/118] Added Reactathon 2019 to conferences.md (#1695)

---
 content/community/conferences.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/content/community/conferences.md b/content/community/conferences.md
index 78f868d7f..c10cdb607 100644
--- a/content/community/conferences.md
+++ b/content/community/conferences.md
@@ -16,6 +16,11 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 January 31, 2019 in Tehran, Iran
 [Website](http://reactiran.com) - [Instagram](https://www.instagram.com/reactiran/)
 
+### Reactathon 2019 {#reactathon-2019}
+March 30-31, 2019 in San Francisco, USA
+
+[Website](https://www.reactathon.com/) - [Twitter](https://twitter.com/reactathon)
+
 ### App.js Conf 2019 {#appjs-conf-2019}
 April 4-5, 2019 in Kraków, Poland
 

From 0948bf553eac307d48622e4275953baf83dc1bcf Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Wed, 20 Feb 2019 01:48:07 +0300
Subject: [PATCH 073/118] Update static-type-checking.md

---
 content/docs/static-type-checking.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
index 553ea6354..0f459aa84 100644
--- a/content/docs/static-type-checking.md
+++ b/content/docs/static-type-checking.md
@@ -220,13 +220,13 @@ The compiler is of no help to us until we tell it what to do. In TypeScript, the
 
 If you use [Yarn](https://yarnpkg.com/), run:
 
-```shell
+```bash
 yarn run tsc --init
 ```
 
 If you use [npm](https://www.npmjs.com/), run:
 
-```shell
+```bash
 npx tsc --init
 ```
 

From a9989290aaaf7858d7c2d6ccf8c8e7948c60b33b Mon Sep 17 00:00:00 2001
From: Joe Maddalone <joe@insert-title.com>
Date: Wed, 20 Feb 2019 07:49:09 -0600
Subject: [PATCH 074/118] Add React Loop 2019 (#1693)

---
 content/community/conferences.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/content/community/conferences.md b/content/community/conferences.md
index c10cdb607..a9e3694f7 100644
--- a/content/community/conferences.md
+++ b/content/community/conferences.md
@@ -41,6 +41,11 @@ June 12, 2019. Larvik, Norway
 
 [Website](https://reactnorway.com) - [Twitter](https://twitter.com/ReactNorway)
 
+### React Loop 2019 {#react-loop-2019}
+June 21, 2019 Chicago, Illinois USA
+
+[Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop)
+
 ### ComponentsConf 2019 {#componentsconf-2019}
 September 6, 2019 in Melbourne, Australia
 [Website](https://www.componentsconf.com.au/) - [Twitter](https://twitter.com/componentsconf)

From e5a97f2d7e2af8ef6ff2a0559790fb85aa7955b7 Mon Sep 17 00:00:00 2001
From: Varser Zakaryan <37110358+varszakaryan@users.noreply.github.com>
Date: Wed, 20 Feb 2019 17:49:38 +0400
Subject: [PATCH 075/118] Add React Conf Armenia 2019 to conferences (#1715)

This is the first React Conf in the region and it is going to be cool.
---
 content/community/conferences.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/content/community/conferences.md b/content/community/conferences.md
index a9e3694f7..62ac39b40 100644
--- a/content/community/conferences.md
+++ b/content/community/conferences.md
@@ -36,6 +36,11 @@ May 23-24, 2019 in Paris, France
 
 [Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) - [Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
 
+### React Conf Armenia 2019 {#react-conf-am-19}
+May 25, 2019 in Yerevan, Armenia
+
+[Website](https://reactconf.am/) - [Twitter](https://twitter.com/ReactConfAM) - [Facebook](https://www.facebook.com/reactconf.am/) - [YouTube](https://www.youtube.com/c/JavaScriptConferenceArmenia) - [CFP](http://bit.ly/speakReact)
+
 ### React Norway 2019 {#react-norway-2019}
 June 12, 2019. Larvik, Norway
 

From 54250e52d306d9d530766209e34d59d472c780d9 Mon Sep 17 00:00:00 2001
From: Aziza Ismayilova <aziza@appristas.io>
Date: Wed, 20 Feb 2019 19:47:22 +0400
Subject: [PATCH 076/118] Fix code splitting docs mistakes

---
 content/docs/code-splitting.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 180139829..2a3984ebb 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -40,7 +40,7 @@ console.log(add(16, 26)); // 42
 >
 > Sizin paketləriniz yuxarıdankından çox fərqli olacaq.
 
-Əgər siz [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), və ya oxşar bir alət işlədirsinizsə, applikasiyanı paketləmək üçün Webpack sizdə hazır qoşulmuş olacaq.
+Əgər siz [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/) və ya oxşar bir alət işlədirsinizsə, applikasiyanı paketləmək üçün Webpack sizdə hazır qoşulmuş olacaq.
 
 Əgər siz belə alətlərdən istifadə etmirsinizsə, siz paketləməni özünüz qoşmalısınız. Misal üçün, Webpack sənədlərində [İnstalyasiya](https://webpack.js.org/guides/installation/) və
 [Başlamaq](https://webpack.js.org/guides/getting-started/) təlimatlarına baxın.
@@ -75,13 +75,13 @@ import("./math").then(math => {
 
 > Qeyd:
 >
-> Dinamik `import()` sintaksisi ECMAScript (JavaScript)
-> [təklifi fazasındadır](https://github.com/tc39/proposal-dynamic-import) və hələki dilin standartının 
+> Dinamik `import()` sintaksisi ECMAScript (JavaScript) 
+> [təklifi fazasındadır](https://github.com/tc39/proposal-dynamic-import) və hələki dil standartının 
 > bir hissəsi deyil. Bu təklif yaxın gələcəkdə standarta qəbul ediləcək.
 
 Webpack bu sintaksisi görən kimi, sizin applikasiyanızın kodunu avtomatik parçalayacaq. Əgər siz Create React App işlədirsinizsə, bu xüsusiyyət artiq sizin üçün konfiqurasiya olunub və siz dərhal bunu [işlədə bilərsiniz](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting). Bu xusiyyəti həmçinin [Next.js](https://github.com/zeit/next.js/#dynamic-import) də dəstəkləyir.
 
-Əgər siz Webpack-i özünüz quraşdırırsınızsa, Webpack-in [kod parçalaması haqqında təlimatını](https://webpack.js.org/guides/code-splitting/) oxumaq sizə lazım olacaq. Sizin Webpack konfiqurasiyanız təxminən [belə bir formada](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269) görünəcək.
+Əgər Webpack-i özünüz quraşdırırsınızsa, Webpack-in [kod parçalaması haqqında təlimatını](https://webpack.js.org/guides/code-splitting/) oxumaq sizə lazım olacaq. Sizin Webpack konfiqurasiyanız təxminən [belə bir formada](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269) görünəcək.
 
 [Babel](http://babeljs.io/) işlədərkən Babel-ın dinamik import sintaksisini təhlil edə bilməsi amma transformasiya edə bilməməsi lazımdır. Bunun üçün siz [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)-dan istifadə edə bilərsiniz.
 
@@ -93,7 +93,7 @@ Webpack bu sintaksisi görən kimi, sizin applikasiyanızın kodunu avtomatik pa
 
 `React.lazy` funskiyası dinamik import olunmuş komponenti adi komponent kimi render etməyə imkan yaradır.
 
-**Before:**
+**Əvvəl:**
 
 ```js
 import OtherComponent from './OtherComponent';
@@ -107,7 +107,7 @@ function MyComponent() {
 }
 ```
 
-**After:**
+**Sonra:**
 
 ```js
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
@@ -123,7 +123,7 @@ function MyComponent() {
 
 Bu avtomatik olara `OtherComponent` render olduğu zaman, komponent olan paketi yükləyəcək.
 
-`React.lazy` funskiyası mütləq olaraq dinamik `import()` funskiyasını çağırmalıdır. Bu mütləq `default` eksportunda React komponenti olan modulu "resolve" edən `Promise` qaytarmalıdır.
+`React.lazy` funskiyası mütləq olaraq dinamik `import()` funskiyasını çağırmalıdır. Bu mütləq `default` eksportunda React komponenti olan modulu "resolve" edən `Promise`-ə qaytarmalıdır.
 
 ### Suspense {#suspense}
 
@@ -165,7 +165,7 @@ function MyComponent() {
 
 ### Xəta sərhədləri {#error-boundaries}
 
-Əgər modulun yüklənməsi uğursuz keçirsə (məsələn şəbəkə problemlərinə görə), xəta göstəriləcək. Siz yaxşı İstifadəçi Təcrübəsi üçün bu xətaları tutmaq və bu xətaları bərpa etmək üçün [Xəta Sərhədlərindən](/docs/error-boundaries.html) istifadə edə bilərsiniz. Xəta Sərhədini yaratdıqdan sonra, siz şəbəkə xətası göstərmək üçün bu xəta sərhədini lazy komponentin yuxarısında istənilən yerdə istifadə edə bilərsiniz.
+Əgər modulun yüklənməsi uğursuz keçirsə (məsələn, şəbəkə problemlərinə görə), xəta göstəriləcək. Siz yaxşı İstifadəçi Təcrübəsi üçün bu xətaları tutmaq və bu xətaları bərpa etmək üçün [Xəta Sərhədlərindən](/docs/error-boundaries.html) istifadə edə bilərsiniz. Xəta Sərhədini yaratdıqdan sonra, siz şəbəkə xətası göstərmək üçün bu xəta sərhədini lazy komponentin yuxarısında istənilən yerdə istifadə edə bilərsiniz.
 
 ```js
 import MyErrorBoundary from './MyErrorBoundary';
@@ -188,7 +188,7 @@ const MyComponent = () => (
 
 ## Route əsasında kod parçalaması {#route-based-code-splitting}
 
-Applikasiyanızda harada kod parçalaması etmək biraz çaşdırıcı ola bilər. Siz həmişə İstifadəçi Təcrübəsini pozmamaq və paketləri bərabər ayrılmaq üçün düzgün yerdən applikasiyanı bölməlisiniz.
+Applikasiyanızda harada kod parçalaması etmək biraz çaşdırıcı ola bilər. Siz həmişə İstifadəçi Təcrübəsini pozmamaq və paketləri bərabər ayırlmaq üçün düzgün yerdən applikasiyanı bölməlisiniz.
 
 Yaxşı başlanğıc nöqtəsi route-lardan bölməni aparmaqdır. Bir çox insan vebdə səhifə keçidlərinin yüklənməsinin zaman aldığına vərdiş ediblər. Bu zaman siz həmçinin bütün səhifəni dərhal yenidən render edirsiniz deyə istifadəçilər eyni zamanda səhifədəki başqa elementlərə qarşılıqlı təsir etmirlər.
 
@@ -215,7 +215,7 @@ const App = () => (
 
 ## Adlı Eksportlar {#named-exports}
 
-`React.lazy` yalnız `default` eksportları dəstəkləyir. Əgər sizin import istədiyiniz modul, adlı eksportlar edirsə, siz bu adlı eksportu yenidən `default` eksport edən ara modulu yarada bilərsiniz. Bu treeshaking-in işlədiyini və lazım olmayan komponentlərin yüklənmədiyini təmin edir.
+`React.lazy` yalnız `default` eksportları dəstəkləyir. Əgər sizin import etmək istədiyiniz modul, adlı eksportlar edirsə, siz bu adlı eksportları yenidən `default` eksport edən ara modulu yarada bilərsiniz. Bu treeshaking-in işlədiyini və lazım olmayan komponentlərin yüklənmədiyini təmin edir.
 
 ```js
 // ManyComponents.js

From 84e474238db143151f68ae33ceec54f2b9e1dcbc Mon Sep 17 00:00:00 2001
From: Haqverdi Behbudov <haqverdib@gmail.com>
Date: Thu, 21 Feb 2019 00:23:38 +0400
Subject: [PATCH 077/118] =?UTF-8?q?=C4=B0ntroducing-jsx=20translate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

İntroducing-jsx translate
---
 content/docs/introducing-jsx.md | 80 +++++++++++++++++----------------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index d76c3ace6..ce765c681 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -1,36 +1,36 @@
 ---
 id: introducing-jsx
-title: Introducing JSX
+title: JSX-ə giriş
 permalink: docs/introducing-jsx.html
 prev: hello-world.html
 next: rendering-elements.html
 ---
 
-Consider this variable declaration:
+Bu dəyişən bəyannaməni nəzərdən keçirin:
 
 ```js
 const element = <h1>Hello, world!</h1>;
 ```
 
-This funny tag syntax is neither a string nor HTML.
+Bu məzəli tag sintaksisi nə bir simlidir(string), nə də HTML.
 
-It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
+Bu JSX adlanır və JavaScript üçün sintaksis əlavəsidir. İstifadəçi interfeysinin görünməsi üçün React ilə istifadə etməyi məsləhət görürük. JSX şablon dilini sizə xatırlata bilər, lakin JavaScript-in tam funksionallığını istifadə imkanı yaradır.
 
-JSX produces React "elements". We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.
+JSX React "elementləri"-ni yaradır. Bunları [sonrakı bölmə] (/docs/rendering-elements.html) daxilində DOM-da göstərməyi tədbiq edəcəyik. Aşağıda, siz başlamağınız üçün lazım olan JSX əsaslarını tapa bilərsiniz.
 
-### Why JSX? {#why-jsx}
+### Niyə JSX? {#why-jsx}
 
-React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
+Reakt, aplikasiynın işləmə məntiqinin digər UI məntiqləri ilə birləşdirildiyini: hadisələrin(events) necə idarə olunduğunu, state-in zamanla necə dəyişdiyini və göstərilən məlumatların necə nümayiş olunacağına dair reallığı əhatə edir.
 
-Instead of artificially separating *technologies* by putting markup and logic in separate files, React [separates *concerns*](https://en.wikipedia.org/wiki/Separation_of_concerns) with loosely coupled units called "components" that contain both. We will come back to components in a [further section](/docs/components-and-props.html), but if you're not yet comfortable putting markup in JS, [this talk](https://www.youtube.com/watch?v=x7cQ3mrcKaY) might convince you otherwise.
+Fərqli fayllarda markup və məntiq quraraq * texnologiyaları * süni şəkildə ayırmaq əvəzinə React [hər ikisini ehtiva edən "komponentlər" adlandırılan birləşmələrlə](https://en.wikipedia.org/wiki/Separation_of_concerns) reallaşdırdı. [Növbəti bölmədə](/docs/components-and-props.html) komponentlərə geri qayıdacağıq, lakin JS-də markup qurmaqda hələ rahat deyilsinizsə, [bu](https://www.youtube.com/watch?v=x7cQ3mrcKaY) bu sizi əksinə razı sala bilər.
 
-React [doesn't require](/docs/react-without-jsx.html) using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
+React JSX-i istifadə etməyi [tələb etmir](/docs/react-without-jsx.html), amma bir çoxları bunu Javascript içərisində Uİ ilə işləyən zaman faydalı hesab edir. Həmçinin React-a daha çox faydalı səhv və xəbərdarlıq mesajları göstərməyə də imkan verir. 
 
-With that out of the way, let's get started!
+Burdan yola çıxaraq, gəlin başlayaq!
 
-### Embedding Expressions in JSX {#embedding-expressions-in-jsx}
+### JSX-də ifadələr yerləşdirmə {#embedding-expressions-in-jsx}
 
-In the example below, we declare a variable called `name` and then use it inside JSX by wrapping it in curly braces:
+Aşağıdakı misalda `name` adlı bir dəyişən elan edirik və onu JSX daxilində fiqurlu mötərizə ilə istifadə edirik:
 
 ```js{1,2}
 const name = 'Josh Perez';
@@ -42,9 +42,9 @@ ReactDOM.render(
 );
 ```
 
-You can put any valid [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) inside the curly braces in JSX. For example, `2 + 2`, `user.firstName`, or `formatName(user)` are all valid JavaScript expressions.
+JSX daxilində fiqurlu mötərizə içərisində istənilən [JavaScript ifadəsi](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) istifadə edə bilərsiniz. Misal üçün. `2+2`, `user.firstName`, və ya `formatName(user)`, hər biri doğru(valid) Javascript ifadəsidir.
 
-In the example below, we embed the result of calling a JavaScript function, `formatName(user)`, into an `<h1>` element.
+Aşağıdakı misalda, `formatName(user)` JavaScript funksiyasını çağırmanın nəticəsini `<h1>` elementinin daxilinə yerləşdirrik.
 
 ```js{12}
 function formatName(user) {
@@ -70,13 +70,13 @@ ReactDOM.render(
 
 [](codepen://introducing-jsx)
 
-We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283).
+JSX-i kodun rahat oxunması üçün bir neçə sətirə bölürük. Bunun tələb olunmamasına baxmayaraq, [avtomatik olaraq nöqtəli vergüllərin yerləşdirilməsinin](http://stackoverflow.com/q/2846283) qarşısını almaq üçün onu mötərizədə saxlamağı məsləhət görürük
 
-### JSX is an Expression Too {#jsx-is-an-expression-too}
+### JSX həmçinin ifadədir {#jsx-is-an-expression-too}
 
-After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
+Kompilyasiya edilrikdən sonra, JSX ifadələri adi JavaScript funksiyalarına və JavaScript obyektlərinə çevrilir.
 
-This means that you can use JSX inside of `if` statements and `for` loops, assign it to variables, accept it as arguments, and return it from functions:
+Bu o deməkdir ki, JSX daxilində siz `if` və `for` ifadələrindən istifadə edərək onları dəyişənlərə bərabər edə və onları funksiyadan çağıra bilərik:
 
 ```js{3,5}
 function getGreeting(user) {
@@ -87,37 +87,38 @@ function getGreeting(user) {
 }
 ```
 
-### Specifying Attributes with JSX {#specifying-attributes-with-jsx}
+### JSX-lə Atributları Bildirmək {#specifying-attributes-with-jsx}
 
-You may use quotes to specify string literals as attributes:
+Simli literalları dırnaq açaraq bildirə bilərsiniz: 
 
 ```js
 const element = <div tabIndex="0"></div>;
 ```
 
-You may also use curly braces to embed a JavaScript expression in an attribute:
+Həmçinin fiqurlu mötərizələrdən istifadə edərək Javascript ifadəsini atribut kimi bildirə bilərsiniz:
 
 ```js
 const element = <img src={user.avatarUrl}></img>;
 ```
 
-Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
+Javascript ifadələrini atribut kimi bildirərkən bunu dırnaq içində etməyin. Dırnaq açaraq yalnız simli(string) atributları və ya fiqurlu mötərizələrdən istifadə edərək ifadələri bildirə bilərsiniz, lakin bunu eyni atributda etməyin.
 
->**Warning:**
+>**Xəbərdarlıq:**
 >
->Since JSX is closer to JavaScript than to HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names.
+>JSX Javasript-ə HTML-dən daha yaxın olduğundan React DOM xüsusiyyət adlarından standart HTML atributlarının əvəzinə `camelCase`-dən istfadə edərək işlədir.
 >
->For example, `class` becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and `tabindex` becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).
+>Misal üçün, `class` JSX-də [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)-ə çevrilir, və `tabindex` [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)-ə çevrilir.
 
-### Specifying Children with JSX {#specifying-children-with-jsx}
+### Uşaqları(children) JSX ilə ifadə etmək {#specifying-children-with-jsx}
 
-If a tag is empty, you may close it immediately with `/>`, like XML:
+Əgər tag daxilində başqa tag yoxdursa onu dərhal XML kimi `/>`-lə bağlaya bilərsiniz:
 
 ```js
 const element = <img src={user.avatarUrl} />;
 ```
 
-JSX tags may contain children:
+
+JSX tag daxilində başqa taglar ehtiva edə bilər:
 
 ```js
 const element = (
@@ -128,9 +129,9 @@ const element = (
 );
 ```
 
-### JSX Prevents Injection Attacks {#jsx-prevents-injection-attacks}
+### JSX Enjeksiyon hücumlarını qarşısını alır{#jsx-prevents-injection-attacks}
 
-It is safe to embed user input in JSX:
+JSX-də istifadəçi girişini yerləşdirə bilərsiniz:
 
 ```js
 const title = response.potentiallyMaliciousInput;
@@ -138,13 +139,13 @@ const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;
 ```
 
-By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
+React DOM JSX daxilində yerləşdirilmiş bütün ifadələri [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) edir, yəni təhlükəsiz vəziyyət gətirir. Beləliklə, tətbiqinizdə açıq şəkildə yazılmayan heç bir ifadə enjektə edilə bilməz. Hər şey `render`-dən öncə simli(string)-ə çevrilir və bu [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) hücumlarının qarşısını alır.
 
-### JSX Represents Objects {#jsx-represents-objects}
+### JSX Obyektləri təmsil edir {#jsx-represents-objects}
 
-Babel compiles JSX down to `React.createElement()` calls.
+Babel JSX-i `React.createElement()` çağıraraq kompayl edir.
 
-These two examples are identical:
+Bu iki ifadə identikdir:
 
 ```js
 const element = (
@@ -162,7 +163,7 @@ const element = React.createElement(
 );
 ```
 
-`React.createElement()` performs a few checks to help you write bug-free code but essentially it creates an object like this:
+`React.createElement()` bir neçə yoxlama edərək sizə bug-sız kod yazmağa kömək edir, lakin əsasən aşağıda qeyd oluna kimi obyekt yaradır:
 
 ```js
 // Note: this structure is simplified
@@ -175,10 +176,11 @@ const element = {
 };
 ```
 
-These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.
+Bu obyektlər "React element"-ləri adlandırılır. Siz onları ekranda görmək istədiklərinizin təsviri kimi düşünə bilərsiniz. React bu obyektləri oxuyur və onları DOM qurmaq və aktiv saxlamaq üçün istifadə edir.
+
+Sonrakı bölmədə DOM-a Reakt elementlərini render edilməyini araşdıracayıq.
 
-We will explore rendering React elements to the DOM in the next section.
 
->**Tip:**
+>**Məsləhət:**
 >
->We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
+>ES6 və JSX kodlarının daha yaxşı seçilməsi üçün editorunuzda ["Babel" language definition](http://babeljs.io/docs/editors)-dan istifadə etməyi məsləhət görürük. Bu səhifədə qeyd olunanla uyğunlaşan  [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) rəngləndirməsindən istifadə olunur.

From 7b5f4cf604f2d6c650b675f59fa1e34395aa995b Mon Sep 17 00:00:00 2001
From: David Svetlecic <davidmsvetlecic@users.noreply.github.com>
Date: Wed, 20 Feb 2019 16:38:42 -0600
Subject: [PATCH 078/118] Add 'you'

---
 content/docs/hooks-faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index 524c7068f..25e00c2ef 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -466,7 +466,7 @@ Note that this approach won't work in a loop because Hook calls [can't](/docs/ho
 
 ### How to create expensive objects lazily? {#how-to-create-expensive-objects-lazily}
 
-`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the inputs are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes need to be sure an object is only created once.
+`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the inputs are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes you need to be sure an object is only created once.
 
 **The first common use case is when creating the initial state is expensive:**
 

From e4d30a164786e8ed147a50a2489f2d14f6b2b260 Mon Sep 17 00:00:00 2001
From: Haqverdi Behbudov <haqverdib@gmail.com>
Date: Thu, 21 Feb 2019 11:00:30 +0400
Subject: [PATCH 079/118] Update conferences.md

---
 content/community/conferences.md | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/content/community/conferences.md b/content/community/conferences.md
index 62ac39b40..a9e3694f7 100644
--- a/content/community/conferences.md
+++ b/content/community/conferences.md
@@ -36,11 +36,6 @@ May 23-24, 2019 in Paris, France
 
 [Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) - [Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
 
-### React Conf Armenia 2019 {#react-conf-am-19}
-May 25, 2019 in Yerevan, Armenia
-
-[Website](https://reactconf.am/) - [Twitter](https://twitter.com/ReactConfAM) - [Facebook](https://www.facebook.com/reactconf.am/) - [YouTube](https://www.youtube.com/c/JavaScriptConferenceArmenia) - [CFP](http://bit.ly/speakReact)
-
 ### React Norway 2019 {#react-norway-2019}
 June 12, 2019. Larvik, Norway
 

From ac03b9713204627303e73452aa1cb440e68f8018 Mon Sep 17 00:00:00 2001
From: Haqverdi Behbudov <haqverdib@gmail.com>
Date: Thu, 21 Feb 2019 16:01:04 +0400
Subject: [PATCH 080/118] Update introducing-jsx.md

---
 content/docs/introducing-jsx.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index ce765c681..9a44cd8eb 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -6,23 +6,23 @@ prev: hello-world.html
 next: rendering-elements.html
 ---
 
-Bu dəyişən bəyannaməni nəzərdən keçirin:
+Bu dəyişən bəyannaməsini nəzərdən keçirin:
 
 ```js
 const element = <h1>Hello, world!</h1>;
 ```
 
-Bu məzəli tag sintaksisi nə bir simlidir(string), nə də HTML.
+Bu məzəli təq sintaksisi nə bir sətrdir(string), nə də HTML.
 
-Bu JSX adlanır və JavaScript üçün sintaksis əlavəsidir. İstifadəçi interfeysinin görünməsi üçün React ilə istifadə etməyi məsləhət görürük. JSX şablon dilini sizə xatırlata bilər, lakin JavaScript-in tam funksionallığını istifadə imkanı yaradır.
+Bu JSX adlanır və JavaScript üçün sintaksis əlavəsidir. İstifadəçi interfeysinin görünməsi üçün React ilə istifadə etməyi məsləhət görürük. JSX şablon dilini sizə xatırlada bilər, lakin JavaScript-in tam funksionallığından istifadə imkanı yaradır.
 
-JSX React "elementləri"-ni yaradır. Bunları [sonrakı bölmə] (/docs/rendering-elements.html) daxilində DOM-da göstərməyi tədbiq edəcəyik. Aşağıda, siz başlamağınız üçün lazım olan JSX əsaslarını tapa bilərsiniz.
+JSX React "elementləri"-ni yaradır. Bunları [sonrakı bölmə](/docs/rendering-elements.html) daxilində DOM-da göstərməyi tədbiq edəcəyik. Aşağıda, siz başlamağınız üçün lazım olan JSX əsaslarını tapa bilərsiniz.
 
 ### Niyə JSX? {#why-jsx}
 
-Reakt, aplikasiynın işləmə məntiqinin digər UI məntiqləri ilə birləşdirildiyini: hadisələrin(events) necə idarə olunduğunu, state-in zamanla necə dəyişdiyini və göstərilən məlumatların necə nümayiş olunacağına dair reallığı əhatə edir.
+Reakt, applikasiyasının işləmə məntiqinin digər UI məntiqləri ilə birləşdirildiyini: hadisələrin necə idarə olunduğunu, state-in zamanla necə dəyişdiyini və göstərilən məlumatların necə nümayiş olunacağına dair məsələləri əhatə edir.
 
-Fərqli fayllarda markup və məntiq quraraq * texnologiyaları * süni şəkildə ayırmaq əvəzinə React [hər ikisini ehtiva edən "komponentlər" adlandırılan birləşmələrlə](https://en.wikipedia.org/wiki/Separation_of_concerns) reallaşdırdı. [Növbəti bölmədə](/docs/components-and-props.html) komponentlərə geri qayıdacağıq, lakin JS-də markup qurmaqda hələ rahat deyilsinizsə, [bu](https://www.youtube.com/watch?v=x7cQ3mrcKaY) bu sizi əksinə razı sala bilər.
+Fərqli fayllarda markup və məntiq quraraq *texnologiyaları* süni şəkildə ayırmaq əvəzinə React [hər ikisini ehtiva edən "komponentlər" adlandırılan birləşmələrlə](https://en.wikipedia.org/wiki/Separation_of_concerns) reallaşdırdı. [Növbəti bölmədə](/docs/components-and-props.html) komponentlərə geri qayıdacağıq, lakin JS-də markup qurmaqda hələ rahat deyilsinizsə, [bu](https://www.youtube.com/watch?v=x7cQ3mrcKaY) sizi əksinə razı sala bilər.
 
 React JSX-i istifadə etməyi [tələb etmir](/docs/react-without-jsx.html), amma bir çoxları bunu Javascript içərisində Uİ ilə işləyən zaman faydalı hesab edir. Həmçinin React-a daha çox faydalı səhv və xəbərdarlıq mesajları göstərməyə də imkan verir. 
 
@@ -44,7 +44,7 @@ ReactDOM.render(
 
 JSX daxilində fiqurlu mötərizə içərisində istənilən [JavaScript ifadəsi](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) istifadə edə bilərsiniz. Misal üçün. `2+2`, `user.firstName`, və ya `formatName(user)`, hər biri doğru(valid) Javascript ifadəsidir.
 
-Aşağıdakı misalda, `formatName(user)` JavaScript funksiyasını çağırmanın nəticəsini `<h1>` elementinin daxilinə yerləşdirrik.
+Aşağıdakı misalda, `formatName(user)` JavaScript funksiyasını çağırmanın nəticəsini `<h1>` elementinin daxilinə yerləşdiririk.
 
 ```js{12}
 function formatName(user) {
@@ -74,7 +74,7 @@ JSX-i kodun rahat oxunması üçün bir neçə sətirə bölürük. Bunun tələ
 
 ### JSX həmçinin ifadədir {#jsx-is-an-expression-too}
 
-Kompilyasiya edilrikdən sonra, JSX ifadələri adi JavaScript funksiyalarına və JavaScript obyektlərinə çevrilir.
+Kompilyasiya edildikdən sonra, JSX ifadələri adi JavaScript funksiyalarına və JavaScript obyektlərinə çevrilir.
 
 Bu o deməkdir ki, JSX daxilində siz `if` və `for` ifadələrindən istifadə edərək onları dəyişənlərə bərabər edə və onları funksiyadan çağıra bilərik:
 
@@ -109,7 +109,7 @@ Javascript ifadələrini atribut kimi bildirərkən bunu dırnaq içində etməy
 >
 >Misal üçün, `class` JSX-də [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)-ə çevrilir, və `tabindex` [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)-ə çevrilir.
 
-### Uşaqları(children) JSX ilə ifadə etmək {#specifying-children-with-jsx}
+### Uşaqları JSX ilə ifadə etmək {#specifying-children-with-jsx}
 
 Əgər tag daxilində başqa tag yoxdursa onu dərhal XML kimi `/>`-lə bağlaya bilərsiniz:
 
@@ -129,7 +129,7 @@ const element = (
 );
 ```
 
-### JSX Enjeksiyon hücumlarını qarşısını alır{#jsx-prevents-injection-attacks}
+### JSX Enjeksiyon hücumlarını qarşısını alır {#jsx-prevents-injection-attacks}
 
 JSX-də istifadəçi girişini yerləşdirə bilərsiniz:
 
@@ -139,7 +139,7 @@ const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;
 ```
 
-React DOM JSX daxilində yerləşdirilmiş bütün ifadələri [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) edir, yəni təhlükəsiz vəziyyət gətirir. Beləliklə, tətbiqinizdə açıq şəkildə yazılmayan heç bir ifadə enjektə edilə bilməz. Hər şey `render`-dən öncə simli(string)-ə çevrilir və bu [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) hücumlarının qarşısını alır.
+React DOM JSX daxilində yerləşdirilmiş bütün ifadələri [escape](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) edir, yəni təhlükəsiz vəziyyət gətirir. Beləliklə, tətbiqinizdə açıq şəkildə yazılmayan heç bir ifadə enjektə edilə bilməz. Hər şey `render`-dən öncə simli(string)-ə çevrilir və bu [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) hücumlarının qarşısını alır.
 
 ### JSX Obyektləri təmsil edir {#jsx-represents-objects}
 

From 3084e5a49b47b61b8e1aa861644e7444bef28ccb Mon Sep 17 00:00:00 2001
From: Haqverdi Behbudov <haqverdib@gmail.com>
Date: Thu, 21 Feb 2019 16:06:21 +0400
Subject: [PATCH 081/118] Update introducing-jsx.md

---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 9a44cd8eb..deed2818b 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -22,7 +22,7 @@ JSX React "elementləri"-ni yaradır. Bunları [sonrakı bölmə](/docs/renderin
 
 Reakt, applikasiyasının işləmə məntiqinin digər UI məntiqləri ilə birləşdirildiyini: hadisələrin necə idarə olunduğunu, state-in zamanla necə dəyişdiyini və göstərilən məlumatların necə nümayiş olunacağına dair məsələləri əhatə edir.
 
-Fərqli fayllarda markup və məntiq quraraq *texnologiyaları* süni şəkildə ayırmaq əvəzinə React [hər ikisini ehtiva edən "komponentlər" adlandırılan birləşmələrlə](https://en.wikipedia.org/wiki/Separation_of_concerns) reallaşdırdı. [Növbəti bölmədə](/docs/components-and-props.html) komponentlərə geri qayıdacağıq, lakin JS-də markup qurmaqda hələ rahat deyilsinizsə, [bu](https://www.youtube.com/watch?v=x7cQ3mrcKaY) sizi əksinə razı sala bilər.
+Fərqli fayllarda markup və məntiq quraraq *texnologiyaları* süni şəkildə ayırmaq əvəzinə React [*problemləri* ayıraraq](https://en.wikipedia.org/wiki/Separation_of_concerns) hər ikisini ehtiva edən "komponentlər" adlandırılan birləşmələrlə reallaşdırdı. [Növbəti bölmədə](/docs/components-and-props.html) komponentlərə geri qayıdacağıq, lakin JS-də markup qurmaqda hələ rahat deyilsinizsə, [bu](https://www.youtube.com/watch?v=x7cQ3mrcKaY) sizi əksinə razı sala bilər.
 
 React JSX-i istifadə etməyi [tələb etmir](/docs/react-without-jsx.html), amma bir çoxları bunu Javascript içərisində Uİ ilə işləyən zaman faydalı hesab edir. Həmçinin React-a daha çox faydalı səhv və xəbərdarlıq mesajları göstərməyə də imkan verir. 
 

From 0711301ffa72fb3f7537bd189e9d2c8106333d30 Mon Sep 17 00:00:00 2001
From: Haqverdi Behbudov <haqverdib@gmail.com>
Date: Thu, 21 Feb 2019 17:48:55 +0400
Subject: [PATCH 082/118] Update introducing-jsx.md

---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index deed2818b..a5ac548db 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -20,7 +20,7 @@ JSX React "elementləri"-ni yaradır. Bunları [sonrakı bölmə](/docs/renderin
 
 ### Niyə JSX? {#why-jsx}
 
-Reakt, applikasiyasının işləmə məntiqinin digər UI məntiqləri ilə birləşdirildiyini: hadisələrin necə idarə olunduğunu, state-in zamanla necə dəyişdiyini və göstərilən məlumatların necə nümayiş olunacağına dair məsələləri əhatə edir.
+Reakt, applikasiyasının işləmə məntiqinin digər Uİ məntiqləri ilə birləşdirildiyini: hadisələrin necə idarə olunduğunu, state-in zamanla necə dəyişdiyini və göstərilən məlumatların necə nümayiş olunacağına dair məsələləri əhatə edir.
 
 Fərqli fayllarda markup və məntiq quraraq *texnologiyaları* süni şəkildə ayırmaq əvəzinə React [*problemləri* ayıraraq](https://en.wikipedia.org/wiki/Separation_of_concerns) hər ikisini ehtiva edən "komponentlər" adlandırılan birləşmələrlə reallaşdırdı. [Növbəti bölmədə](/docs/components-and-props.html) komponentlərə geri qayıdacağıq, lakin JS-də markup qurmaqda hələ rahat deyilsinizsə, [bu](https://www.youtube.com/watch?v=x7cQ3mrcKaY) sizi əksinə razı sala bilər.
 

From c889aef74eead64f3fb10a730be1429177515a11 Mon Sep 17 00:00:00 2001
From: Haqverdi Behbudov <haqverdib@gmail.com>
Date: Thu, 21 Feb 2019 20:01:05 +0400
Subject: [PATCH 083/118] =?UTF-8?q?Change=20"D=C9=99rsiliyi=20G=C3=B6t?=
 =?UTF-8?q?=C3=BCr"=20to=20"D=C9=99rsliy=C9=99=20Ba=C5=9Fla"=20(#29)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Change Dərsiliyi Götür to Dərsiliyə Başla

Change Dərsiliyi Götür to Dərsiliyə Başla

* Update changes

Update changes

* Update index.js

* Change tutorial button text in header
---
 src/pages/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 34bf30de0..3a522111f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -154,7 +154,7 @@ class Home extends Component {
                     </CtaItem>
                     <CtaItem>
                       <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                        Dərsiliyi Götür
+                        Dərsiliyi Oxu
                       </ButtonLink>
                     </CtaItem>
                   </Flex>
@@ -291,7 +291,7 @@ class Home extends Component {
                 </CtaItem>
                 <CtaItem>
                   <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Dərsiliyi Götür
+                    Dərsliyi Oxu
                   </ButtonLink>
                 </CtaItem>
               </Flex>

From 4a7df5686bc378f3536b2b402a2295c922de546e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 21 Feb 2019 20:05:29 +0000
Subject: [PATCH 084/118] Bump React to 16.8.3 (#1724)

---
 package.json          | 4 ++--
 src/site-constants.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index a18d1d5c8..f1628e72e 100644
--- a/package.json
+++ b/package.json
@@ -46,8 +46,8 @@
     "normalize.css": "^8.0.0",
     "prettier": "^1.7.4",
     "prismjs": "^1.15.0",
-    "react": "16.8.2",
-    "react-dom": "16.8.2",
+    "react": "16.8.3",
+    "react-dom": "16.8.3",
     "react-helmet": "^5.2.0",
     "react-live": "1.8.0-0",
     "remarkable": "^1.7.1",
diff --git a/src/site-constants.js b/src/site-constants.js
index 5f217fa00..5144290f8 100644
--- a/src/site-constants.js
+++ b/src/site-constants.js
@@ -8,7 +8,7 @@
 // NOTE: We can't just use `location.toString()` because when we are rendering
 // the SSR part in node.js we won't have a proper location.
 const urlRoot = 'https://reactjs.org';
-const version = '16.8.2';
+const version = '16.8.3';
 const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js';
 
 export {urlRoot, version, babelURL};

From 927a44a0b43fb5968d58f71891c28970834f2e06 Mon Sep 17 00:00:00 2001
From: Farhad Yasir <farhad.yasir.nb@gmail.com>
Date: Fri, 22 Feb 2019 16:33:27 +1100
Subject: [PATCH 085/118] fix(remove-unused-var): Unused variable ReactDOM
 removed

---
 src/pages/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index f52619ce2..790efd439 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -17,7 +17,6 @@ import {colors, media, sharedStyles} from 'theme';
 import loadScript from 'utils/loadScript';
 import createOgUrl from 'utils/createOgUrl';
 import {babelURL} from 'site-constants';
-import ReactDOM from 'react-dom';
 import logoWhiteSvg from 'icons/logo-white.svg';
 
 class Home extends Component {

From e5bb4393caa90633e7ec35d9463ac1e218cf96e9 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Sat, 23 Feb 2019 03:07:45 +0400
Subject: [PATCH 086/118] Use HTTPs for code splitting babel link in AZ
 translation

---
 content/docs/code-splitting.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 4bb6ee872..70a570be4 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -83,12 +83,7 @@ Webpack bu sintaksisi görən kimi, sizin applikasiyanızın kodunu avtomatik pa
 
 Əgər Webpack-i özünüz quraşdırırsınızsa, Webpack-in [kod parçalaması haqqında təlimatını](https://webpack.js.org/guides/code-splitting/) oxumaq sizə lazım olacaq. Sizin Webpack konfiqurasiyanız təxminən [belə bir formada](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269) görünəcək.
 
-<<<<<<< HEAD
-[Babel](http://babeljs.io/) işlədərkən Babel-ın dinamik import sintaksisini təhlil edə bilməsi amma transformasiya edə bilməməsi lazımdır. Bunun üçün siz [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)-dan istifadə edə bilərsiniz.
-=======
-When using [Babel](https://babeljs.io/), you'll need to make sure that Babel can
-parse the dynamic import syntax but is not transforming it. For that you will need [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import).
->>>>>>> d615c5b7bcceef420c7f9246035f8ae3ba8ae11a
+[Babel](https://babeljs.io/) işlədərkən Babel-ın dinamik import sintaksisini təhlil edə bilməsi amma transformasiya edə bilməməsi lazımdır. Bunun üçün siz [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)-dan istifadə edə bilərsiniz.
 
 ## `React.lazy` {#reactlazy}
 

From 19131a5d2ebf10fff1f286f580d5cb2404879f37 Mon Sep 17 00:00:00 2001
From: Haqverdi Behbudov <haqverdib@gmail.com>
Date: Sat, 23 Feb 2019 13:27:32 +0400
Subject: [PATCH 087/118] http to https changed all links

---
 content/docs/introducing-jsx.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index a5ac548db..307ad15d2 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -70,7 +70,7 @@ ReactDOM.render(
 
 [](codepen://introducing-jsx)
 
-JSX-i kodun rahat oxunması üçün bir neçə sətirə bölürük. Bunun tələb olunmamasına baxmayaraq, [avtomatik olaraq nöqtəli vergüllərin yerləşdirilməsinin](http://stackoverflow.com/q/2846283) qarşısını almaq üçün onu mötərizədə saxlamağı məsləhət görürük
+JSX-i kodun rahat oxunması üçün bir neçə sətirə bölürük. Bunun tələb olunmamasına baxmayaraq, [avtomatik olaraq nöqtəli vergüllərin yerləşdirilməsinin](https://stackoverflow.com/q/2846283) qarşısını almaq üçün onu mötərizədə saxlamağı məsləhət görürük
 
 ### JSX həmçinin ifadədir {#jsx-is-an-expression-too}
 
@@ -139,7 +139,7 @@ const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;
 ```
 
-React DOM JSX daxilində yerləşdirilmiş bütün ifadələri [escape](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) edir, yəni təhlükəsiz vəziyyət gətirir. Beləliklə, tətbiqinizdə açıq şəkildə yazılmayan heç bir ifadə enjektə edilə bilməz. Hər şey `render`-dən öncə simli(string)-ə çevrilir və bu [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) hücumlarının qarşısını alır.
+React DOM JSX daxilində yerləşdirilmiş bütün ifadələri [escape](https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) edir, yəni təhlükəsiz vəziyyət gətirir. Beləliklə, tətbiqinizdə açıq şəkildə yazılmayan heç bir ifadə enjektə edilə bilməz. Hər şey `render`-dən öncə simli(string)-ə çevrilir və bu [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) hücumlarının qarşısını alır.
 
 ### JSX Obyektləri təmsil edir {#jsx-represents-objects}
 
@@ -183,4 +183,4 @@ Sonrakı bölmədə DOM-a Reakt elementlərini render edilməyini araşdıracay
 
 >**Məsləhət:**
 >
->ES6 və JSX kodlarının daha yaxşı seçilməsi üçün editorunuzda ["Babel" language definition](http://babeljs.io/docs/editors)-dan istifadə etməyi məsləhət görürük. Bu səhifədə qeyd olunanla uyğunlaşan  [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) rəngləndirməsindən istifadə olunur.
+>ES6 və JSX kodlarının daha yaxşı seçilməsi üçün editorunuzda ["Babel" language definition](https://babeljs.io/docs/editors)-dan istifadə etməyi məsləhət görürük. Bu səhifədə qeyd olunanla uyğunlaşan  [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) rəngləndirməsindən istifadə olunur.

From f99cc73499384766407f9f1f191cff6aeb781075 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 23 Feb 2019 11:29:51 +0000
Subject: [PATCH 088/118] Revert "Small typo fix" (#1738)

* Revert "Small typo fix"

* Update hooks-faq.md
---
 content/docs/hooks-faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index ea862cbce..b3b99de90 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -192,7 +192,7 @@ There are a few more heuristics, and they might change over time as we fine-tune
 
 ### How do lifecycle methods correspond to Hooks? {#how-do-lifecycle-methods-correspond-to-hooks}
 
-* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing is expensive, you can pass a function to `useState`.
+* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing the initial state is expensive, you can pass a function to `useState`.
 
 * `getDerivedStateFromProps`: Schedule an update [while rendering](#how-do-i-implement-getderivedstatefromprops) instead.
 

From aa8adc49a7d50fadbcdedf4415cba3b5c1acccc4 Mon Sep 17 00:00:00 2001
From: santa claus <jenn@dotbiz.info>
Date: Sat, 23 Feb 2019 08:15:32 -0500
Subject: [PATCH 089/118] Update getting-started.md >> "Online Playgrounds"
 (#1733)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

adding a hello world template on glitch.com to the list of online playgrounds 🎏
---
 content/docs/getting-started.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md
index 7f4c25f91..37972e83e 100644
--- a/content/docs/getting-started.md
+++ b/content/docs/getting-started.md
@@ -36,7 +36,7 @@ React has been designed from the start for gradual adoption, and **you can use a
 
 ### Online Playgrounds {#online-playgrounds}
 
-If you're interested in playing around with React, you can use an online code playground. Try a Hello World template on [CodePen](codepen://hello-world) or [CodeSandbox](https://codesandbox.io/s/new).
+If you're interested in playing around with React, you can use an online code playground. Try a Hello World template on [CodePen](codepen://hello-world), [CodeSandbox](https://codesandbox.io/s/new), or [Glitch](https://glitch.com/edit/#!/remix/starter-react-template).
 
 If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we'd only recommend using this for simple demos.
 

From 07253c8209f721bf5600bdac416f670aa598feb2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 23 Feb 2019 11:42:52 -0800
Subject: [PATCH 090/118] Add "Languages" page (#1691)

* Added language selector page

* PR nits

* Fix typo in variable name

* Added language icon. Show search icon in mobile.

* Tweaked header alignment

* Split languages into 3 categories based on progress:
complete, partially translated, and needs contributors

* Lower-cased pt-* language codes

* Re-added locale sort

* Renamed 'Partially Translated' header to 'In Progress'
---
 content/languages.yml                    | 133 +++++++++++++++++++
 src/components/LayoutHeader/DocSearch.js |  29 ++---
 src/components/LayoutHeader/Header.js    |  77 ++++++++++-
 src/pages/languages.js                   | 159 +++++++++++++++++++++++
 src/site-constants.js                    |   2 +-
 5 files changed, 373 insertions(+), 27 deletions(-)
 create mode 100644 content/languages.yml
 create mode 100644 src/pages/languages.js

diff --git a/content/languages.yml b/content/languages.yml
new file mode 100644
index 000000000..7790945a8
--- /dev/null
+++ b/content/languages.yml
@@ -0,0 +1,133 @@
+# Status enums indicate what percentage of "core" content has been translated:
+# 0: Incomplete (0–49%)
+# 1: Partially complete (50–94%)
+# 2: Complete (95–100%)
+
+- name: English
+  translated_name: English
+  code: en
+  status: 2
+- name: Arabic
+  translated_name: العربية
+  code: ar
+  status: 0
+- name: Azerbaijani
+  translated_name: Azərbaycanca
+  code: az
+  status: 0
+- name: Bulgarian
+  translated_name: Български
+  code: bg
+  status: 0
+- name: Bengali
+  translated_name: বাংলা
+  code: bn
+  status: 0
+- name: German
+  translated_name: Deutsch
+  code: de
+  status: 0
+- name: Spanish
+  translated_name: Español
+  code: es
+  status: 2
+- name: Persian
+  translated_name: فارسی
+  code: fa
+  status: 0
+- name: French
+  translated_name: Français
+  code: fr
+  status: 0
+- name: Hebrew
+  translated_name: עברית
+  code: he
+  status: 0
+- name: Hindi
+  translated_name: हिन्दी
+  code: hi
+  status: 0
+- name: Armenian
+  translated_name: Հայերեն
+  code: hy
+  status: 0
+- name: Indonesian
+  translated_name: Bahasa Indonesia
+  code: id
+  status: 0
+- name: Italian
+  translated_name: Italiano
+  code: it
+  status: 0
+- name: Japanese
+  translated_name: 日本語
+  code: ja
+  status: 1
+- name: Korean
+  translated_name: 한국어
+  code: ko
+  status: 0
+- name: Malayalam
+  translated_name: മലയാളം
+  code: ml
+  status: 0
+- name: Nepali
+  translated_name: नेपाली
+  code: ne
+  status: 0
+- name: Dutch
+  translated_name: Nederlands
+  code: nl
+  status: 0
+- name: Polish
+  translated_name: Polski
+  code: pl
+  status: 0
+- name: Portuguese (Brazil)
+  translated_name: Português do Brasil
+  code: pt-br
+  status: 1
+- name: Portuguese (Portugal)
+  translated_name: Português europeu
+  code: pt-pt
+  status: 0
+- name: Romanian
+  translated_name: Română
+  code: ro
+  status: 0
+- name: Russian
+  translated_name: Русский
+  code: ru
+  status: 0
+- name: Sinhala
+  translated_name: සිංහල
+  code: si
+  status: 0
+- name: Tamil
+  translated_name: தமிழ்
+  code: ta
+  status: 0
+- name: Turkish
+  translated_name: Türkçe
+  code: tr
+  status: 0
+- name: Ukrainian
+  translated_name: Українська
+  code: uk
+  status: 0
+- name: Uzbek
+  translated_name: Oʻzbekcha
+  code: uz
+  status: 0
+- name: Vietnamese
+  translated_name: Tiếng Việt
+  code: vi
+  status: 0
+- name: Simplified Chinese
+  translated_name: 简体中文
+  code: zh-hans
+  status: 0
+- name: Traditional Chinese
+  translated_name: 繁體中文
+  code: zh-hant
+  status: 0
\ No newline at end of file
diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index b31505917..a920a197a 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -42,27 +42,23 @@ class DocSearch extends Component<{}, State> {
           flex: '0 0 auto',
           flexDirection: 'row',
           alignItems: 'center',
-          paddingLeft: '0.5rem',
-          paddingRight: '0.5rem',
+          paddingLeft: '0.25rem',
+          paddingRight: '0.25rem',
 
-          [media.lessThan('small')]: {
-            justifyContent: 'flex-end',
-          },
           [media.lessThan('large')]: {
+            justifyContent: 'flex-end',
             marginRight: 10,
           },
-          [media.between('small', 'medium')]: {
-            width: 'calc(100% / 3)',
-          },
           [media.between('medium', 'xlarge')]: {
-            width: 'calc(100% / 6)',
+            //width: 'calc(100% / 6)',
           },
-          [media.greaterThan('small')]: {
-            minWidth: 120,
+          [media.greaterThan('large')]: {
+            minWidth: 100,
           },
         }}>
         <input
           css={{
+            width: '100%',
             appearance: 'none',
             background: 'transparent',
             border: 0,
@@ -71,12 +67,12 @@ class DocSearch extends Component<{}, State> {
             fontWeight: 300,
             fontFamily: 'inherit',
             position: 'relative',
-            padding: '5px 5px 5px 29px',
+            padding: '4px 4px 4px 29px',
             backgroundImage: 'url(/search.svg)',
             backgroundSize: '16px 16px',
             backgroundRepeat: 'no-repeat',
             backgroundPositionY: 'center',
-            backgroundPositionX: '5px',
+            backgroundPositionX: '4px',
 
             ':focus': {
               outline: 0,
@@ -86,11 +82,6 @@ class DocSearch extends Component<{}, State> {
 
             [media.lessThan('large')]: {
               fontSize: 16,
-            },
-            [media.greaterThan('small')]: {
-              width: '100%',
-            },
-            [media.lessThan('small')]: {
               width: '16px',
               transition: 'width 0.2s ease, padding 0.2s ease',
               paddingLeft: '16px',
@@ -104,7 +95,7 @@ class DocSearch extends Component<{}, State> {
           }}
           id="algolia-doc-search"
           type="search"
-          placeholder="Search docs"
+          placeholder="Search"
           aria-label="Search docs"
         />
       </form>
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 55743a7c1..ca72e0802 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -92,6 +92,7 @@ const Header = ({location}: {location: Location}) => (
 
         <nav
           css={{
+            flex: '1',
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'stretch',
@@ -99,7 +100,6 @@ const Header = ({location}: {location: Location}) => (
             overflowY: 'hidden',
             WebkitOverflowScrolling: 'touch',
             height: '100%',
-            width: '60%',
 
             [media.size('xsmall')]: {
               flexGrow: '1',
@@ -139,12 +139,17 @@ const Header = ({location}: {location: Location}) => (
 
         <div
           css={{
-            [media.lessThan('medium')]: {
-              display: 'none',
-            },
-            [media.greaterThan('large')]: {
-              width: 'calc(100% / 6)',
-            },
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            width: 'auto',
+
+            //[media.lessThan('medium')]: {
+            //width: 'auto',
+            //},
+            //[media.greaterThan('large')]: {
+            //width: 'calc(100% / 4)',
+            //},
           }}>
           <Link
             css={{
@@ -161,10 +166,45 @@ const Header = ({location}: {location: Location}) => (
                 backgroundColor: colors.lighter,
                 borderRadius: 15,
               },
+
+              [media.lessThan('medium')]: {
+                display: 'none',
+              },
             }}
             to="/versions">
             v{version}
           </Link>
+          <Link
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+              padding: '5px 10px',
+              whiteSpace: 'nowrap',
+              ...fonts.small,
+
+              ':hover': {
+                color: colors.brand,
+              },
+
+              ':focus': {
+                outline: 0,
+                backgroundColor: colors.lighter,
+                borderRadius: 15,
+              },
+            }}
+            to="/languages">
+            <LanguagesIcon />{' '}
+            <span
+              css={{
+                marginLeft: '0.5rem',
+
+                [media.lessThan('medium')]: {
+                  display: 'none',
+                },
+              }}>
+              Languages
+            </span>
+          </Link>
           <a
             css={{
               padding: '5px 10px',
@@ -181,6 +221,10 @@ const Header = ({location}: {location: Location}) => (
                 backgroundColor: colors.lighter,
                 borderRadius: 15,
               },
+
+              [media.lessThan('large')]: {
+                display: 'none',
+              },
             }}
             href="https://github.com/facebook/react/"
             target="_blank"
@@ -200,4 +244,23 @@ const Header = ({location}: {location: Location}) => (
   </header>
 );
 
+const LanguagesIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      css={{fill: 'currentColor'}}
+      d="
+        M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5
+        7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09
+        5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62
+        7l1.62-4.33L19.12 17h-3.24z
+      "
+    />
+  </svg>
+);
+
 export default Header;
diff --git a/src/pages/languages.js b/src/pages/languages.js
new file mode 100644
index 000000000..61f063125
--- /dev/null
+++ b/src/pages/languages.js
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ * @flow
+ */
+
+import Layout from 'components/Layout';
+import Container from 'components/Container';
+import Header from 'components/Header';
+import TitleAndMetaTags from 'components/TitleAndMetaTags';
+import React from 'react';
+import {media, sharedStyles} from 'theme';
+
+// $FlowFixMe This is a valid path
+import languages from '../../content/languages.yml';
+
+// Status enums indicate what percentage of "core" content has been translated:
+// 0: Incomplete (0–49%)
+// 1: Partially complete (50–94%)
+// 2: Complete (95–100%)
+const {complete, incomplete, partial} = languages.reduce(
+  (reduced, language) => {
+    switch (language.status) {
+      case 0:
+        reduced.incomplete.push(language);
+        break;
+      case 1:
+        reduced.partial.push(language);
+        break;
+      case 2:
+        reduced.complete.push(language);
+        break;
+    }
+    return reduced;
+  },
+  {complete: [], incomplete: [], partial: []},
+);
+
+type Props = {
+  location: Location,
+};
+
+const Languages = ({location}: Props) => (
+  <Layout location={location}>
+    <Container>
+      <div css={sharedStyles.articleLayout.container}>
+        <div css={sharedStyles.articleLayout.content}>
+          <Header>Languages</Header>
+          <TitleAndMetaTags title="React - Languages" />
+
+          <div css={sharedStyles.markdown}>
+            <p>
+              The React documentation is available in the following languages:
+            </p>
+
+            <LanguagesGrid languages={complete} />
+
+            <h2>In Progress</h2>
+            <LanguagesGrid languages={partial} />
+
+            <h2>Needs Contributors</h2>
+            <LanguagesGrid languages={incomplete} />
+
+            <p>
+              Don't see your language above?{' '}
+              <a
+                href="https://github.com/reactjs/reactjs.org-translation#reactjsorg-translation"
+                target="_blank"
+                rel="noopener">
+                Let us know
+              </a>
+              .
+            </p>
+          </div>
+        </div>
+      </div>
+    </Container>
+  </Layout>
+);
+
+const LanguagesGrid = ({languages}) => (
+  <ul
+    css={{
+      display: 'flex',
+      flexWrap: 'wrap',
+      marginLeft: -20,
+    }}>
+    {languages
+      .sort((a, b) => a.code.localeCompare(b.code))
+      .map(({code, name, status, translated_name}) => (
+        <Language
+          key={code}
+          code={code}
+          name={name}
+          status={status}
+          translatedName={translated_name}
+        />
+      ))}
+  </ul>
+);
+
+const Language = ({code, name, status, translatedName}) => {
+  const prefix = code === 'en' ? '' : `${code}.`;
+
+  return (
+    <li
+      css={{
+        paddingLeft: 20,
+        paddingTop: 20,
+        borderTop: '1px dotted #ececec',
+        paddingBottom: 20,
+        width: '100%',
+        listStyle: 'none',
+
+        [media.size('small')]: {
+          width: '50%',
+        },
+
+        [media.size('medium')]: {
+          width: '33.33%',
+        },
+
+        [media.greaterThan('large')]: {
+          width: '25%',
+        },
+      }}
+      key={code}>
+      <div css={{}}>{name}</div>
+      <div
+        css={{
+          fontSize: 22,
+          fontWeight: 'bold',
+          marginBottom: 8,
+          marginTop: 8,
+        }}>
+        {status === 0 && translatedName}
+        {status > 0 && (
+          <a href={`https://${prefix}reactjs.org/`} rel="nofollow">
+            {translatedName}
+          </a>
+        )}
+      </div>
+      <div css={{marginTop: 10}}>
+        <a
+          css={{
+            fontSize: 12,
+          }}
+          href={`https://github.com/reactjs/${prefix}reactjs.org/`}
+          target="_blank"
+          rel="noopener">
+          Contribute
+        </a>
+      </div>
+    </li>
+  );
+};
+
+export default Languages;
diff --git a/src/site-constants.js b/src/site-constants.js
index 5144290f8..2dc51fadc 100644
--- a/src/site-constants.js
+++ b/src/site-constants.js
@@ -11,4 +11,4 @@ const urlRoot = 'https://reactjs.org';
 const version = '16.8.3';
 const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js';
 
-export {urlRoot, version, babelURL};
+export {babelURL, urlRoot, version};

From d156beb83d5b8a99bcddf56d91bfe8a899bc711d Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Sat, 23 Feb 2019 11:53:11 -0800
Subject: [PATCH 091/118] New blog post for translations (#1721)

* Translation blog post

* look ma Im an author

* sophie updates

* exclamation police

* Final tweaks

* Don't single out Spanish translation since it's already mentioned at the top
* Rename the post

* Last tweaks

* Last tweaks v2

* Last tweaks v3
---
 content/authors.yml                           |  3 +
 .../2019-02-23-is-react-translated-yet.md     | 76 +++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 content/blog/2019-02-23-is-react-translated-yet.md

diff --git a/content/authors.yml b/content/authors.yml
index da8efd3a7..5848c65e8 100644
--- a/content/authors.yml
+++ b/content/authors.yml
@@ -73,6 +73,9 @@ sophiebits:
 steveluscher:
   name: Steven Luscher
   url: https://twitter.com/steveluscher
+tesseralis:
+  name: Nat Alison
+  url: https://twitter.com/tesseralis
 timer:
   name: Joe Haddad
   url: https://twitter.com/timer150
diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md
new file mode 100644
index 000000000..caed243f3
--- /dev/null
+++ b/content/blog/2019-02-23-is-react-translated-yet.md
@@ -0,0 +1,76 @@
+---
+title: "Is React Translated Yet? ¡Sí! Sim! はい！"
+author: [tesseralis]
+---
+
+We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into *over 30* languages! You can find them on the new [Languages](/languages) page.
+
+In addition, the following three languages have completed translating most of the React Docs! 🎉
+
+* **Spanish: [es.reactjs.org](https://es.reactjs.org)**
+* **Japanese: [ja.reactjs.org](https://ja.reactjs.org)**
+* **Brazilian Portuguese: [pt-br.reactjs.org](https://pt-br.reactjs.org)**
+
+Special congratulations to [Alejandro Ñáñez Ortiz](https://github.com/alejandronanez), [Rainer Martínez Fraga](https://github.com/carburo), [David Morales](https://github.com/dmorales), [Miguel Alejandro Bolivar Portilla](https://github.com/Darking360), and all the contributors to the Spanish translation for being the first to *completely* translate the core pages of the docs!
+
+## Why Localization Matters
+
+React already has many meetups and conferences around the world, but many programmers don't use English as their primary language. We’d love to support local communities who use React by making our documentation available in most popular languages.
+
+In the past, React community members have created unofficial translations for [Chinese](https://github.com/discountry/react), [Arabic](https://wiki.hsoub.com/React), and [Korean](https://github.com/reactjs/ko.reactjs.org/issues/4); by making an official channel for these translated docs we're hoping to make them easier to find and help make sure that non-English-speaking users of React aren't left behind.
+
+## Contributing
+
+If you would like to help out on a current translation, check out the [Languages](/languages) page and click on the "Contribute" link for your language.
+
+Can't find your language? If you'd like to maintain your langauge's translation fork, follow the instructions in the [translation repo](https://github.com/reactjs/reactjs.org-translation#starting-a-new-translation)!
+
+## Backstory
+
+Hi everyone! I'm [Nat](https://twitter.com/tesseralis)! You may know me as the [polyhedra lady](https://www.youtube.com/watch?v=Ew-UzGC8RqQ). For the past few weeks, I've been helping the React team coordinate their translation effort. Here's how I did it.
+
+Our original approach for translations was to use a SaaS platform that allows users to submit translations. There was already a [pull request](https://github.com/reactjs/reactjs.org/pull/873) to integrate it and my original responsibility was to finish that integration. However, we had concerns about the feasibility of that integration and the current quality of translations on the platform. Our primary concern was ensuring that translations kept up to date with the main repo and didn't become "stale".
+
+[Dan](https://twitter.com/gaearon) encouraged me to look for alternate solutions, and we stumbled across how [Vue](https://vuejs.org) maintained its translations -- through different forks of the main repo on GitHub. In particular, the [Japanese translation](https://jp.vuejs.org) used a bot to periodically check for changes in the English repo and submits pull requests whenever there is a change.
+
+This approach appealed to us for several reasons:
+
+* It was less code integration to get off the ground.
+* It encouraged active maintainers for each repo to ensure quality.
+* Contributors already understand GitHub as a platform and are motivated to contribute directly to the React organization.
+
+We started of with an initial trial period of three languages: Spanish, Japanese, and Simplified Chinese. This allowed us to work out any kinks in our process and make sure future translations are set up for success. I wanted to give the translation teams freedom to choose whatever tools they felt comfortable with. The only requirement is a [checklist](https://github.com/reactjs/reactjs.org-translation/blob/master/PROGRESS.template.md) that outlines the order of importance for translating pages. 
+
+After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://isreacttranslatedyet.com), to track progress on the different translations. We started *10* new translations on our first day alone!
+
+Because of the automation, the rest of the maintance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
+
+## The Bot
+
+The most challenging part was getting the bot to sync changes from the English version of the site. Initially we were using the [che-tsumi](https://github.com/vuejs-jp/che-tsumi) bot created by the Japanese Vue translation team, but we soon decided to build our own bot to suit our needs. In particular, the che-tsumi bot works by [cherry picking](https://git-scm.com/docs/git-cherry-pick) new commits. This ended up causing a cavalade of new issues that were interconnected, especially when [Hooks were released](/blog/2019/02/06/react-v16.8.0.html).
+
+In the end, we decided that instead of cherry picking each commit, it made more sense to merge all new commits and create a pull request around once a day. Conflicts are merged as-is and listed in the [pull request](https://github.com/reactjs/pt-BR.reactjs.org/pull/114), leaving a checklist for maintainers to fix.
+
+Creating the [sync script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/sync.js) was easy enough: it downloads the translated repo, adds the original as a remote, pulls from it, merges the conflicts, and creates a pull request.
+
+The problem was finding a place for the bot to run. I'm a frontend developer for a reason -- Heroku and its ilk are alien to me and *endlessly* frustrating. In fact, until this past Tuesday, I was running the script by hand on my local machine!
+
+The biggest challenge was space. Each fork of the repo is around 100MB -- which takes minutes to clone on my local machine. We have *32* forks, and the free tiers or most deployment platforms I checked limited you to 512MB of storage. 
+
+After lots of notepad calculations, I found a solution: delete each repo once we've finished the script and limit the concurrency of `sync` scripts that run at once to be within the storage requirements. Luckily, Heroku dynos have a much faster Internet connection and are able to clone even the React repo quickly.
+
+There were other smaller issues that I ran into. I tried using the [Heroku Scheduler](https://elements.heroku.com/addons/scheduler) add-on so I didn't have to write any actual `watch` code, but it end up running too inconsistently, and I [had an existential meltdown on Twitter](https://twitter.com/tesseralis/status/1097387938088796160) when I couldn't figure out how to send commits from the Heroku dyno. But in the end, this frontend engineer was able to get the bot working!
+
+There are, as always, improvements I want to make to the bot. Right now it doesn't check whether there is an outstanding pull request before pushing another one. It's still hard to tell the exact change that happened in the original source, and it's possible to miss out on a needed translation change. But I trust the maintainers we've chosen to work through these issues, and the bot is [open source](https://github.com/reactjs/reactjs.org-translation) if anyone wants to help me make these improvements!
+
+## Thanks
+
+Finally, I would like to extend my gratitude to the following people and groups:
+
+ * All the translation maintainers and contributors who are helping translate React to more than thirty languages.
+ * The [Vue.js Japan User Group](https://github.com/vuejs-jp) for initiating the idea of having bot-managed translations, and especially [Hanatani Takuma](https://github.com/potato4d) for helping us understand their approach and helping maintain the Japanese translation.
+ * [Soichiro Miki](https://github.com/smikitki) for many [contributions](https://github.com/reactjs/reactjs.org/pull/1636) and thoughtful comments on the overall translation process, as well as for maintaining the Japanese translation.
+ * [Eric Nakagawa](https://github.com/ericnakagawa) for managing our previous translation process.
+ * [Brian Vaughn](https://github.com/bvaughn) for setting up the [languages page](/languages) and managing all the subdomains.
+
+ And finally, thank you to [Dan Abramov](https://twitter.com/dan_abramov) for giving me this opportunity and being a great mentor along the way.
\ No newline at end of file

From ef81426b069ece68c0202ce465e9b731c9a2004c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 23 Feb 2019 22:17:16 +0000
Subject: [PATCH 092/118] Put Blog in top bar before Community (#1741)

---
 src/components/LayoutHeader/Header.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index ca72e0802..4e8b6a789 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -123,16 +123,16 @@ const Header = ({location}: {location: Location}) => (
             title="Tutorial"
             to="/tutorial/tutorial.html"
           />
-          <HeaderLink
-            isActive={location.pathname.includes('/community/')}
-            title="Community"
-            to="/community/support.html"
-          />
           <HeaderLink
             isActive={location.pathname.includes('/blog')}
             title="Blog"
             to="/blog/"
           />
+          <HeaderLink
+            isActive={location.pathname.includes('/community/')}
+            title="Community"
+            to="/community/support.html"
+          />
         </nav>
 
         <DocSearch />

From 85d83e8a8ffd298ad02c818a65bd643437406a57 Mon Sep 17 00:00:00 2001
From: Marks Polakovs <marks@markspolakovs.me>
Date: Sun, 24 Feb 2019 03:27:26 +0100
Subject: [PATCH 093/118] [Is React Translated Yet?] Use Dan's correct twitter
 handle (#1742)

---
 content/blog/2019-02-23-is-react-translated-yet.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md
index caed243f3..2b3d4c7f1 100644
--- a/content/blog/2019-02-23-is-react-translated-yet.md
+++ b/content/blog/2019-02-23-is-react-translated-yet.md
@@ -31,7 +31,7 @@ Hi everyone! I'm [Nat](https://twitter.com/tesseralis)! You may know me as the [
 
 Our original approach for translations was to use a SaaS platform that allows users to submit translations. There was already a [pull request](https://github.com/reactjs/reactjs.org/pull/873) to integrate it and my original responsibility was to finish that integration. However, we had concerns about the feasibility of that integration and the current quality of translations on the platform. Our primary concern was ensuring that translations kept up to date with the main repo and didn't become "stale".
 
-[Dan](https://twitter.com/gaearon) encouraged me to look for alternate solutions, and we stumbled across how [Vue](https://vuejs.org) maintained its translations -- through different forks of the main repo on GitHub. In particular, the [Japanese translation](https://jp.vuejs.org) used a bot to periodically check for changes in the English repo and submits pull requests whenever there is a change.
+[Dan](https://twitter.com/dan_abramov) encouraged me to look for alternate solutions, and we stumbled across how [Vue](https://vuejs.org) maintained its translations -- through different forks of the main repo on GitHub. In particular, the [Japanese translation](https://jp.vuejs.org) used a bot to periodically check for changes in the English repo and submits pull requests whenever there is a change.
 
 This approach appealed to us for several reasons:
 
@@ -73,4 +73,4 @@ Finally, I would like to extend my gratitude to the following people and groups:
  * [Eric Nakagawa](https://github.com/ericnakagawa) for managing our previous translation process.
  * [Brian Vaughn](https://github.com/bvaughn) for setting up the [languages page](/languages) and managing all the subdomains.
 
- And finally, thank you to [Dan Abramov](https://twitter.com/dan_abramov) for giving me this opportunity and being a great mentor along the way.
\ No newline at end of file
+ And finally, thank you to [Dan Abramov](https://twitter.com/dan_abramov) for giving me this opportunity and being a great mentor along the way.

From bab2a3491a18e7074799272d60c8a159473bb7f5 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sun, 24 Feb 2019 14:27:31 +0000
Subject: [PATCH 094/118] Hide horizontal scrollbar in header and tweak
 breakpoitns (#1749)

* Hide horizontal scrollbar in header

* Tweak topbar breakpoints

* Simplify breakpoints to fix animation
---
 src/components/LayoutHeader/DocSearch.js | 14 ++++++++------
 src/components/LayoutHeader/Header.js    |  7 +++++++
 src/theme.js                             |  3 +++
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index a920a197a..f9827fc51 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -45,14 +45,16 @@ class DocSearch extends Component<{}, State> {
           paddingLeft: '0.25rem',
           paddingRight: '0.25rem',
 
-          [media.lessThan('large')]: {
+          [media.lessThan('expandedSearch')]: {
             justifyContent: 'flex-end',
             marginRight: 10,
           },
-          [media.between('medium', 'xlarge')]: {
-            //width: 'calc(100% / 6)',
-          },
-          [media.greaterThan('large')]: {
+          // TODO: Something like this could show the full search box in more cases
+          // but it currently breaks its expanding animation.
+          // [media.between('mediumSearch', 'largerSearch')]: {
+          //   width: 'calc(100% / 8)',
+          // },
+          [media.greaterThan('expandedSearch')]: {
             minWidth: 100,
           },
         }}>
@@ -80,7 +82,7 @@ class DocSearch extends Component<{}, State> {
               borderRadius: '0.25rem',
             },
 
-            [media.lessThan('large')]: {
+            [media.lessThan('expandedSearch')]: {
               fontSize: 16,
               width: '16px',
               transition: 'width 0.2s ease, padding 0.2s ease',
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 4e8b6a789..e0a285e84 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -101,6 +101,13 @@ const Header = ({location}: {location: Location}) => (
             WebkitOverflowScrolling: 'touch',
             height: '100%',
 
+            // Hide horizontal scrollbar
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+            '::-webkit-scrollbar': {
+              display: 'none',
+            },
+
             [media.size('xsmall')]: {
               flexGrow: '1',
               width: 'auto',
diff --git a/src/theme.js b/src/theme.js
index 2e1ad7405..9f440d56d 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -38,6 +38,9 @@ const SIZES = {
   // Sidebar/nav related tweakpoints
   largerSidebar: {min: 1100, max: 1339},
   sidebarFixed: {min: 2000, max: Infinity},
+
+  // Topbar related tweakpoints
+  expandedSearch: {min: 1180, max: Infinity},
 };
 
 type Size = $Keys<typeof SIZES>;

From 8d7086f9423a9a6bdbf8c350f3e3a775a2ca511b Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Mon, 25 Feb 2019 15:43:28 +0400
Subject: [PATCH 095/118] Fix merge conflicts in header and translate languages
 button

---
 src/components/LayoutHeader/DocSearch.js |  7 +------
 src/components/LayoutHeader/Header.js    | 12 ++----------
 2 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index 9d18a539f..47fd573e0 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -97,13 +97,8 @@ class DocSearch extends Component<{}, State> {
           }}
           id="algolia-doc-search"
           type="search"
-<<<<<<< HEAD
-          placeholder="Sənədlərdə axtar"
+          placeholder="Axtar"
           aria-label="Sənədlərdə axtar"
-=======
-          placeholder="Search"
-          aria-label="Search docs"
->>>>>>> bab2a3491a18e7074799272d60c8a159473bb7f5
         />
       </form>
     ) : null;
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 5827085bb..465224e3a 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -131,21 +131,13 @@ const Header = ({location}: {location: Location}) => (
             to="/tutorial/tutorial.html"
           />
           <HeaderLink
-<<<<<<< HEAD
-            isActive={location.pathname.includes('/community/')}
-            title="Cəmiyyət"
-            to="/community/support.html"
-          />
-          <HeaderLink
-=======
->>>>>>> bab2a3491a18e7074799272d60c8a159473bb7f5
             isActive={location.pathname.includes('/blog')}
             title="Bloq"
             to="/blog/"
           />
           <HeaderLink
             isActive={location.pathname.includes('/community/')}
-            title="Community"
+            title="Cəmiyyət"
             to="/community/support.html"
           />
         </nav>
@@ -217,7 +209,7 @@ const Header = ({location}: {location: Location}) => (
                   display: 'none',
                 },
               }}>
-              Languages
+              Dillər
             </span>
           </Link>
           <a

From 7a461065d1f6027b9461079d151a8d07cf3b37e5 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Mon, 25 Feb 2019 22:08:58 +0900
Subject: [PATCH 096/118] Update 2019-02-23-is-react-translated-yet.md (#1752)

---
 content/blog/2019-02-23-is-react-translated-yet.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md
index 2b3d4c7f1..9ede5c1a6 100644
--- a/content/blog/2019-02-23-is-react-translated-yet.md
+++ b/content/blog/2019-02-23-is-react-translated-yet.md
@@ -69,7 +69,7 @@ Finally, I would like to extend my gratitude to the following people and groups:
 
  * All the translation maintainers and contributors who are helping translate React to more than thirty languages.
  * The [Vue.js Japan User Group](https://github.com/vuejs-jp) for initiating the idea of having bot-managed translations, and especially [Hanatani Takuma](https://github.com/potato4d) for helping us understand their approach and helping maintain the Japanese translation.
- * [Soichiro Miki](https://github.com/smikitki) for many [contributions](https://github.com/reactjs/reactjs.org/pull/1636) and thoughtful comments on the overall translation process, as well as for maintaining the Japanese translation.
+ * [Soichiro Miki](https://github.com/smikitky) for many [contributions](https://github.com/reactjs/reactjs.org/pull/1636) and thoughtful comments on the overall translation process, as well as for maintaining the Japanese translation.
  * [Eric Nakagawa](https://github.com/ericnakagawa) for managing our previous translation process.
  * [Brian Vaughn](https://github.com/bvaughn) for setting up the [languages page](/languages) and managing all the subdomains.
 

From c792f7d29f317079c5e0ce1fff97fc5480903fbc Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Mon, 25 Feb 2019 15:56:53 -0800
Subject: [PATCH 097/118] Fix eslint errors (#1734)

---
 src/components/CodeEditor/CodeEditor.js     | 2 +-
 src/templates/components/Sidebar/Section.js | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 6e42fff7e..39ebe8f1e 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -43,7 +43,7 @@ class CodeEditor extends Component {
   }
 
   render() {
-    const {children, containerNodeID} = this.props;
+    const {containerNodeID} = this.props;
     const {
       compiledES6,
       code,
diff --git a/src/templates/components/Sidebar/Section.js b/src/templates/components/Sidebar/Section.js
index 94ad877f6..d48ed8e40 100644
--- a/src/templates/components/Sidebar/Section.js
+++ b/src/templates/components/Sidebar/Section.js
@@ -81,10 +81,7 @@ class Section extends React.Component {
                   ? activeItemId === item.id
                   : isItemActive(location, item),
                 item: section.isOrdered
-                  ? {
-                      ...item,
-                      title: `${index + 1}. ${item.title}`,
-                    }
+                  ? {...item, title: `${index + 1}. ${item.title}`}
                   : item,
                 location,
                 onLinkClick,

From 6b4ade316c3b9ace8496caa6bf2f49bc24b75ed8 Mon Sep 17 00:00:00 2001
From: Paul Kim <pkayokay@gmail.com>
Date: Wed, 27 Feb 2019 01:36:10 -0500
Subject: [PATCH 098/118] Update example project link (#1759)

* Remove example project

* Correct with active project link

* Update with new url
---
 .../2019-02-23-is-react-translated-yet.md     | 10 +++----
 content/community/examples.md                 |  4 +--
 yarn.lock                                     | 28 +++++++++----------
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md
index 9ede5c1a6..78bc49b6e 100644
--- a/content/blog/2019-02-23-is-react-translated-yet.md
+++ b/content/blog/2019-02-23-is-react-translated-yet.md
@@ -13,19 +13,19 @@ In addition, the following three languages have completed translating most of th
 
 Special congratulations to [Alejandro Ñáñez Ortiz](https://github.com/alejandronanez), [Rainer Martínez Fraga](https://github.com/carburo), [David Morales](https://github.com/dmorales), [Miguel Alejandro Bolivar Portilla](https://github.com/Darking360), and all the contributors to the Spanish translation for being the first to *completely* translate the core pages of the docs!
 
-## Why Localization Matters
+## Why Localization Matters {#why-localization-matters}
 
 React already has many meetups and conferences around the world, but many programmers don't use English as their primary language. We’d love to support local communities who use React by making our documentation available in most popular languages.
 
 In the past, React community members have created unofficial translations for [Chinese](https://github.com/discountry/react), [Arabic](https://wiki.hsoub.com/React), and [Korean](https://github.com/reactjs/ko.reactjs.org/issues/4); by making an official channel for these translated docs we're hoping to make them easier to find and help make sure that non-English-speaking users of React aren't left behind.
 
-## Contributing
+## Contributing {#contributing}
 
 If you would like to help out on a current translation, check out the [Languages](/languages) page and click on the "Contribute" link for your language.
 
 Can't find your language? If you'd like to maintain your langauge's translation fork, follow the instructions in the [translation repo](https://github.com/reactjs/reactjs.org-translation#starting-a-new-translation)!
 
-## Backstory
+## Backstory {#backstory}
 
 Hi everyone! I'm [Nat](https://twitter.com/tesseralis)! You may know me as the [polyhedra lady](https://www.youtube.com/watch?v=Ew-UzGC8RqQ). For the past few weeks, I've been helping the React team coordinate their translation effort. Here's how I did it.
 
@@ -45,7 +45,7 @@ After the trial period, we were ready to accept more languages. I created [a scr
 
 Because of the automation, the rest of the maintance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
 
-## The Bot
+## The Bot {#the-bot}
 
 The most challenging part was getting the bot to sync changes from the English version of the site. Initially we were using the [che-tsumi](https://github.com/vuejs-jp/che-tsumi) bot created by the Japanese Vue translation team, but we soon decided to build our own bot to suit our needs. In particular, the che-tsumi bot works by [cherry picking](https://git-scm.com/docs/git-cherry-pick) new commits. This ended up causing a cavalade of new issues that were interconnected, especially when [Hooks were released](/blog/2019/02/06/react-v16.8.0.html).
 
@@ -63,7 +63,7 @@ There were other smaller issues that I ran into. I tried using the [Heroku Sched
 
 There are, as always, improvements I want to make to the bot. Right now it doesn't check whether there is an outstanding pull request before pushing another one. It's still hard to tell the exact change that happened in the original source, and it's possible to miss out on a needed translation change. But I trust the maintainers we've chosen to work through these issues, and the bot is [open source](https://github.com/reactjs/reactjs.org-translation) if anyone wants to help me make these improvements!
 
-## Thanks
+## Thanks {#thanks}
 
 Finally, I would like to extend my gratitude to the following people and groups:
 
diff --git a/content/community/examples.md b/content/community/examples.md
index 09606a27d..9df2be352 100644
--- a/content/community/examples.md
+++ b/content/community/examples.md
@@ -11,10 +11,10 @@ There are many example projects created by the React community. Feel free to add
 
 * **[Calculator](https://github.com/ahfarmer/calculator)** Implementation of the iOS calculator built in React
 * **[Emoji Search](https://github.com/ahfarmer/emoji-search)** Simple React app for searching emoji
-* **[Github Battle App](https://github.com/ReactTraining/react-fundamentals/tree/hosting)** Battle two Github users and see the most popular Github projects for any language.
+* **[Github Battle App](https://tm.dev/react-course-project/)** Battle two Github users and see the most popular Github projects for any language.
 * **[React Powered Hacker News Client](https://github.com/insin/react-hn)** A React & react-router-powered implementation of Hacker News using its Firebase API.
 * **[Pokedex](https://github.com/alik0211/pokedex)** The list of Pokémon with live search
-* **[Shopping Cart](https://github.com/jeffersonRibeiro/react-shopping-cart)** Simple ecommerce cart application built using React 
+* **[Shopping Cart](https://github.com/jeffersonRibeiro/react-shopping-cart)** Simple ecommerce cart application built using React
 * **[Progressive Web Tetris](https://github.com/skidding/flatris)** Besides a beautiful, mobile-friendly implementation of Tetris, this project is a playground for integrating and experimenting with web technologies.
 * **[Product Comparison Page](https://github.com/Rhymond/product-compare-react)** Simple Product Compare page built in React
 * **[Hacker News Clone React/GraphQL](https://github.com/clintonwoo/hackernews-react-graphql)** Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
diff --git a/yarn.lock b/yarn.lock
index 35a394271..a3859f100 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10220,15 +10220,15 @@ react-dev-utils@^4.2.1:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-dom@16.7.0-alpha.0:
-  version "16.7.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0-alpha.0.tgz#8379158d4c76d63c989f325f45dfa5762582584f"
-  integrity sha512-/XUn1ldxmoV2B7ov0rWT5LMZaaHMlF9GGLkUsmPRxmWTJwRDOuAPXidSaSlmR/VOhDSI1s+v3+KzFqhhDFJxYA==
+react-dom@16.8.3:
+  version "16.8.3"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.3.tgz#ae236029e66210783ac81999d3015dfc475b9c32"
+  integrity sha512-ttMem9yJL4/lpItZAQ2NTFAbV7frotHk5DZEHXUOws2rMmrsvh1Na7ThGT0dTzUIl6pqTOi5tYREfL8AEna3lA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.11.0-alpha.0"
+    scheduler "^0.13.3"
 
 react-error-overlay@^3.0.0:
   version "3.0.0"
@@ -10282,15 +10282,15 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
-react@16.7.0-alpha.0:
-  version "16.7.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.7.0-alpha.0.tgz#e2ed4abe6f268c9b092a1d1e572953684d1783a9"
-  integrity sha512-V0za4H01aoAF0SdzahHepvfvzTQ1xxkgMX4z8uKzn+wzZAlVk0IVpleqyxZWluqmdftNedj6fIIZRO/rVYVFvQ==
+react@16.8.3:
+  version "16.8.3"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.3.tgz#c6f988a2ce895375de216edcfaedd6b9a76451d9"
+  integrity sha512-3UoSIsEq8yTJuSu0luO1QQWYbgGEILm+eJl2QN/VLDi7hL+EN18M3q3oVZwmVzzBJ3DkM7RMdRwBmZZ+b4IzSA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.11.0-alpha.0"
+    scheduler "^0.13.3"
 
 read-all-stream@^3.0.0:
   version "3.1.0"
@@ -10964,10 +10964,10 @@ sax@>=0.6.0, sax@^1.2.4, sax@~1.2.1, sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.11.0-alpha.0:
-  version "0.11.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.0-alpha.0.tgz#7b132c726608993471db07866f2d59a52b9e190b"
-  integrity sha512-0tUDHYSyni/EHkMMBysVXVwfanCWWbLsulnDB1tGrQiWWrVuRVoclWCPHCYC/1iR5Rj34EQhxh3/F36V+F+ZpA==
+scheduler@^0.13.3:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.3.tgz#bed3c5850f62ea9c716a4d781f9daeb9b2a58896"
+  integrity sha512-UxN5QRYWtpR1egNWzJcVLk8jlegxAugswQc984lD3kU7NuobsO37/sRfbpTdBjtnD5TBNFA2Q2oLV5+UmPSmEQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

From de0dfde86f2d6c94e5430453ef86d7b376bc1b9b Mon Sep 17 00:00:00 2001
From: ManonMet <46459278+ManonMet@users.noreply.github.com>
Date: Wed, 27 Feb 2019 11:21:18 -0700
Subject: [PATCH 099/118] Added React Week '19 NYC (#1667)

---
 content/community/conferences.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/content/community/conferences.md b/content/community/conferences.md
index 62ac39b40..a9a113650 100644
--- a/content/community/conferences.md
+++ b/content/community/conferences.md
@@ -51,6 +51,11 @@ June 21, 2019 Chicago, Illinois USA
 
 [Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop)
 
+### React Week '19 {#RWNY19}
+July 15-21, 2019. New York City, USA
+
+[Website](https://reactweek.nyc) - [Twitter](https://twitter.com/ReactWeek)
+
 ### ComponentsConf 2019 {#componentsconf-2019}
 September 6, 2019 in Melbourne, Australia
 [Website](https://www.componentsconf.com.au/) - [Twitter](https://twitter.com/componentsconf)

From 8e805d799501b2cc7db3a9726272f90228fc1916 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <me@gasim.xyz>
Date: Thu, 28 Feb 2019 02:40:09 +0400
Subject: [PATCH 100/118] Add missing `avatarSize` in "Before you use context"
 to text and code (#1737)

---
 content/docs/context.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/context.md b/content/docs/context.md
index 8e41a465f..e7bb925c7 100644
--- a/content/docs/context.md
+++ b/content/docs/context.md
@@ -54,7 +54,7 @@ For example, consider a `Page` component that passes a `user` and `avatarSize` p
 
 It might feel redundant to pass down the `user` and `avatarSize` props through many levels if in the end only the `Avatar` component really needs it. It's also annoying that whenever the `Avatar` component needs more props from the top, you have to add them at all the intermediate levels too.
 
-One way to solve this issue **without context** is to [pass down the `Avatar` component itself](/docs/composition-vs-inheritance.html#containment) so that the intermediate components don't need to know about the `user` prop:
+One way to solve this issue **without context** is to [pass down the `Avatar` component itself](/docs/composition-vs-inheritance.html#containment) so that the intermediate components don't need to know about the `user` or `avatarSize` props:
 
 ```js
 function Page(props) {
@@ -68,7 +68,7 @@ function Page(props) {
 }
 
 // Now, we have:
-<Page user={user} />
+<Page user={user} avatarSize={avatarSize} />
 // ... which renders ...
 <PageLayout userLink={...} />
 // ... which renders ...

From c0b32b7378d505cbabc4d33923ce89ee576fb34e Mon Sep 17 00:00:00 2001
From: Monica Powell <mmp2181@columbia.edu>
Date: Thu, 28 Feb 2019 01:23:10 -0500
Subject: [PATCH 101/118] Add ReactJS Girls Conference to Conference List
 (#1762)

- add upcoming ReactJS Girls Conf
- move past conferences to the right place
---
 content/community/conferences.md | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/content/community/conferences.md b/content/community/conferences.md
index a9a113650..89ed871d0 100644
--- a/content/community/conferences.md
+++ b/content/community/conferences.md
@@ -12,10 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {#upcoming-conferences}
 
-### React Iran 2019 {#react-iran-2019}
-January 31, 2019 in Tehran, Iran
-[Website](http://reactiran.com) - [Instagram](https://www.instagram.com/reactiran/)
-
 ### Reactathon 2019 {#reactathon-2019}
 March 30-31, 2019 in San Francisco, USA
 
@@ -31,6 +27,11 @@ April 12, 2019 in Amsterdam, The Netherlands
 
 [Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam)
 
+### ReactJS Girls Conference 
+May 3, 2019 in London, UK
+
+[Website](https://reactjsgirls.com/) - [Twitter](https://twitter.com/reactjsgirls)
+
 ### ReactEurope 2019 {#reacteurope-2019}
 May 23-24, 2019 in Paris, France
 
@@ -343,3 +344,8 @@ November 4 in Tel Aviv, Israel
 November 30, Berlin, Germany
 
 [Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/channel/UC1EYHmQYBUJjkmL6OtK4rlw)
+
+### React Iran 2019 {#react-iran-2019}
+January 31, 2019 in Tehran, Iran
+
+[Website](http://reactiran.com) - [Instagram](https://www.instagram.com/reactiran/)

From c6b6dc2d564190a79fd6bf17af0bb2914749112b Mon Sep 17 00:00:00 2001
From: Adam Markon <amarkon895@gmail.com>
Date: Thu, 28 Feb 2019 09:31:52 -0500
Subject: [PATCH 102/118] Stop calling function components stateless (#1760)

These docs still refer to function components as "stateless function components" despite the fact that function components aren't necessarily stateless (anymore). The docs shouldn't use this outdated terminology anymore.

I left the "stateless" in the link to avoid breaking existing links to these docs but can remove if keeping links valid isn't a priority.
---
 content/docs/legacy-context.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/legacy-context.md b/content/docs/legacy-context.md
index 1c62e6650..a17137fd8 100644
--- a/content/docs/legacy-context.md
+++ b/content/docs/legacy-context.md
@@ -152,11 +152,11 @@ If `contextTypes` is defined within a component, the following [lifecycle method
 >
 > As of React 16, `componentDidUpdate` no longer receives `prevContext`.
 
-### Referencing Context in Stateless Function Components {#referencing-context-in-stateless-function-components}
+### Referencing Context in Function Components {#referencing-context-in-stateless-function-components}
 
 > This section documents a legacy API. See the [new API](/docs/context.html).
 
-Stateless function components are also able to reference `context` if `contextTypes` is defined as a property of the function. The following code shows a `Button` component written as a stateless function component.
+Function components are also able to reference `context` if `contextTypes` is defined as a property of the function. The following code shows a `Button` component written as a function component.
 
 ```javascript
 import PropTypes from 'prop-types';

From 75a259881d3b3c241ddd12bc9c299a40aefaa047 Mon Sep 17 00:00:00 2001
From: Sophie Alpert <git@sophiebits.com>
Date: Fri, 1 Mar 2019 17:27:47 -0800
Subject: [PATCH 103/118] Update tutorial.md

---
 content/tutorial/tutorial.md | 64 +++++++++++++-----------------------
 1 file changed, 22 insertions(+), 42 deletions(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 9e1e58872..1c69ae99f 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -31,8 +31,6 @@ The tutorial is divided into several sections:
 
 You don't have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can -- even if it's one or two sections.
 
-It's fine to copy and paste code as you're following along the tutorial, but we recommend to type it by hand. This will help you develop a muscle memory and a stronger understanding.
-
 ### What Are We Building? {#what-are-we-building}
 
 In this tutorial, we'll show how to build an interactive tic-tac-toe game with React.
@@ -188,7 +186,9 @@ The Square component renders a single `<button>` and the Board renders 9 squares
 
 ### Passing Data Through Props {#passing-data-through-props}
 
-Just to get our feet wet, let's try passing some data from our Board component to our Square component.
+To get our feet wet, let's try passing some data from our Board component to our Square component.
+
+We strongly recommend typing code by hand as you're working through the tutorial and not using copy/paste. This will help you develop muscle memory and a stronger understanding.
 
 In Board's `renderSquare` method, change the code to pass a prop called `value` to the Square:
 
@@ -242,7 +242,7 @@ class Square extends React.Component {
 }
 ```
 
-If we click on a Square now, we should get an alert in our browser.
+If you click on a Square now, you should see an alert in your browser.
 
 >Note
 >
@@ -260,7 +260,7 @@ If we click on a Square now, we should get an alert in our browser.
 >}
 >```
 >
->Notice how with `onClick={() => alert('click')}`, we're passing *a function* as the `onClick` prop. It only fires after a click. Forgetting `() =>` and writing `onClick={alert('click')}` is a common mistake, and would fire the alert every time the component re-renders.
+>Notice how with `onClick={() => alert('click')}`, we're passing *a function* as the `onClick` prop. React will only call this function after a click. Forgetting `() =>` and writing `onClick={alert('click')}` is a common mistake, and would fire the alert every time the component re-renders.
 
 As a next step, we want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use **state**.
 
@@ -294,7 +294,7 @@ class Square extends React.Component {
 Now we'll change the Square's `render` method to display the current state's value when clicked:
 
 * Replace `this.props.value` with `this.state.value` inside the `<button>` tag.
-* Replace the `() => alert()` event handler with `() => this.setState({value: 'X'})`.
+* Replace the `onClick={...}` event handler with `onClick={() => this.setState({value: 'X'})}`.
 * Put the `className` and `onClick` props on separate lines for better readability.
 
 After these changes, the `<button>` tag that is returned by the Square's `render` method looks like this:
@@ -356,7 +356,9 @@ We may think that Board should just ask each Square for the Square's state. Alth
 
 **To collect data from multiple children, or to have two child components communicate with each other, you need to declare the shared state in their parent component instead. The parent component can pass the state back down to the children by using props; this keeps the child components in sync with each other and with the parent component.**
 
-Lifting state into a parent component is common when React components are refactored -- let's take this opportunity to try it out. We'll add a constructor to the Board and set the Board's initial state to contain an array with 9 nulls. These 9 nulls correspond to the 9 squares:
+Lifting state into a parent component is common when React components are refactored -- let's take this opportunity to try it out.
+
+Add a constructor to the Board and set the Board's initial state to contain an array of 9 nulls corresponding to the 9 squares:
 
 ```javascript{2-7}
 class Board extends React.Component {
@@ -370,35 +372,9 @@ class Board extends React.Component {
   renderSquare(i) {
     return <Square value={i} />;
   }
-
-  render() {
-    const status = 'Next player: X';
-
-    return (
-      <div>
-        <div className="status">{status}</div>
-        <div className="board-row">
-          {this.renderSquare(0)}
-          {this.renderSquare(1)}
-          {this.renderSquare(2)}
-        </div>
-        <div className="board-row">
-          {this.renderSquare(3)}
-          {this.renderSquare(4)}
-          {this.renderSquare(5)}
-        </div>
-        <div className="board-row">
-          {this.renderSquare(6)}
-          {this.renderSquare(7)}
-          {this.renderSquare(8)}
-        </div>
-      </div>
-    );
-  }
-}
 ```
 
-When we fill the board in later, the board will look something like this:
+When we fill the board in later, the `this.state.squares` array will look something like this:
 
 ```javascript
 [
@@ -432,7 +408,7 @@ Each Square will now receive a `value` prop that will either be `'X'`, `'O'`, or
 
 Next, we need to change what happens when a Square is clicked. The Board component now maintains which squares are filled. We need to create a way for the Square to update the Board's state. Since state is considered to be private to a component that defines it, we cannot update the Board's state directly from Square.
 
-To maintain the Board's state's privacy, we'll pass down a function from the Board to the Square. This function will get called when a Square is clicked. We'll change the `renderSquare` method in Board to:
+Instead, we'll pass down a function from the Board to the Square, and we'll have Square call that function when a square is clicked. We'll change the `renderSquare` method in Board to:
 
 ```javascript{5}
   renderSquare(i) {
@@ -478,11 +454,11 @@ When a Square is clicked, the `onClick` function provided by the Board is called
 2. When the button is clicked, React will call the `onClick` event handler that is defined in Square's `render()` method.
 3. This event handler calls `this.props.onClick()`. The Square's `onClick` prop was specified by the Board.
 4. Since the Board passed `onClick={() => this.handleClick(i)}` to Square, the Square calls `this.handleClick(i)` when clicked.
-5. We have not defined the `handleClick()` method yet, so our code crashes.
+5. We have not defined the `handleClick()` method yet, so our code crashes. If you click a square now, you should see a red error screen saying something like "this.handleClick is not a function".
 
 >Note
 >
->The DOM `<button>` element's `onClick` attribute has a special meaning to React because it is a built-in component. For custom components like Square, the naming is up to you. We could name the Square's `onClick` prop or Board's `handleClick` method differently. In React, however, it is a convention to use `on[Event]` names for props which represent events and `handle[Event]` for the methods which handle the events.
+>The DOM `<button>` element's `onClick` attribute has a special meaning to React because it is a built-in component. For custom components like Square, the naming is up to you. We could give any name to the Square's `onClick` prop or Board's `handleClick` method, and the code would work the same. In React, it's conventional to use `on[Event]` names for props which represent events and `handle[Event]` for the methods which handle the events.
 
 When we try to click a Square, we should get an error because we haven't defined `handleClick` yet. We'll now add `handleClick` to the Board class:
 
@@ -539,7 +515,7 @@ class Board extends React.Component {
 
 **[View the full code at this point](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)**
 
-After these changes, we're again able to click on the Squares to fill them. However, now the state is stored in the Board component instead of the individual Square components. When the Board's state changes, the Square components re-render automatically. Keeping the state of all squares in the Board component will allow it to determine the winner in the future.
+After these changes, we're again able to click on the Squares to fill them, the same as we had before. However, now the state is stored in the Board component instead of the individual Square components. When the Board's state changes, the Square components re-render automatically. Keeping the state of all squares in the Board component will allow it to determine the winner in the future.
 
 Since the Square components no longer maintain state, the Square components receive values from the Board component and inform the Board component when they're clicked. In React terms, the Square components are now **controlled components**. The Board has full control over them.
 
@@ -581,7 +557,7 @@ Detecting changes in mutable objects is difficult because they are modified dire
 
 Detecting changes in immutable objects is considerably easier. If the immutable object that is being referenced is different than the previous one, then the object has changed.
 
-#### Determining When to Re-render in React {#determining-when-to-re-render-in-react}
+#### Determining When to Re-Render in React {#determining-when-to-re-render-in-react}
 
 The main benefit of immutability is that it helps you build _pure components_ in React. Immutable data can easily determine if changes have been made which helps to determine when a component requires re-rendering.
 
@@ -611,7 +587,7 @@ We have changed `this.props` to `props` both times it appears.
 
 >Note
 >
->When we modified the Square to be a function component, we also changed `onClick={() => this.props.onClick()}` to a shorter `onClick={props.onClick}` (note the lack of parentheses on *both* sides). In a class, we used an arrow function to access the correct `this` value, but in a function component we don't need to worry about `this`.
+>When we modified the Square to be a function component, we also changed `onClick={() => this.props.onClick()}` to a shorter `onClick={props.onClick}` (note the lack of parentheses on *both* sides).
 
 ### Taking Turns {#taking-turns}
 
@@ -643,7 +619,9 @@ Each time a player moves, `xIsNext` (a boolean) will be flipped to determine whi
   }
 ```
 
-With this change, "X"s and "O"s can take turns. Let's also change the "status" text in Board's `render` so that it displays which player has the next turn:
+With this change, "X"s and "O"s can take turns. Try it!
+
+Let's also change the "status" text in Board's `render` so that it displays which player has the next turn:
 
 ```javascript{2}
   render() {
@@ -714,7 +692,7 @@ class Board extends React.Component {
 
 ### Declaring a Winner {#declaring-a-winner}
 
-Now that we show which player's turn is next, we should also show when the game is won and there are no more turns to make. We can determine a winner by adding this helper function to the end of the file:
+Now that we show which player's turn is next, we should also show when the game is won and there are no more turns to make. Copy this helper function and paste it at the end of the file:
 
 ```javascript
 function calculateWinner(squares) {
@@ -738,6 +716,8 @@ function calculateWinner(squares) {
 }
 ```
 
+Given an array of 9 squares, this function will check for a winner and return `'X'`, `'O'`, or `null` as appropriate.
+
 We will call `calculateWinner(squares)` in the Board's `render` function to check if a player has won. If a player has won, we can display text such as "Winner: X" or "Winner: O". We'll replace the `status` declaration in Board's `render` function with this code:
 
 ```javascript{2-8}

From 9e20211214b6e02c4178d5e123abe6dbd1a4bea5 Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Sat, 2 Mar 2019 21:46:01 -0800
Subject: [PATCH 104/118] Update languages page (#1771)

* update languages page

* reset languages.yml

* whoops
---
 content/languages.yml | 40 ++++++++++++++++++++++++++++++++++------
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/content/languages.yml b/content/languages.yml
index 7790945a8..ee7aa00c0 100644
--- a/content/languages.yml
+++ b/content/languages.yml
@@ -1,7 +1,7 @@
 # Status enums indicate what percentage of "core" content has been translated:
-# 0: Incomplete (0–49%)
-# 1: Partially complete (50–94%)
-# 2: Complete (95–100%)
+# 0: Incomplete (0-49%)
+# 1: Partially complete (50-99%)
+# 2: Complete (100%)
 
 - name: English
   translated_name: English
@@ -27,6 +27,10 @@
   translated_name: Deutsch
   code: de
   status: 0
+- name: Greek
+  translated_name: Ελληνικά
+  code: el
+  status: 0
 - name: Spanish
   translated_name: Español
   code: es
@@ -38,6 +42,10 @@
 - name: French
   translated_name: Français
   code: fr
+  status: 1
+- name: Gujarati
+  translated_name: ગુજરાતી
+  code: gu
   status: 0
 - name: Hebrew
   translated_name: עברית
@@ -62,11 +70,23 @@
 - name: Japanese
   translated_name: 日本語
   code: ja
-  status: 1
+  status: 2
+- name: Central Khmer
+  translated_name: ភាសាខ្មែរ
+  code: km
+  status: 0
 - name: Korean
   translated_name: 한국어
   code: ko
   status: 0
+- name: Kurdish
+  translated_name: کوردی‎
+  code: ku
+  status: 0
+- name: Lithuanian
+  translated_name: Lietuvių kalba
+  code: lt
+  status: 0
 - name: Malayalam
   translated_name: മലയാളം
   code: ml
@@ -98,7 +118,7 @@
 - name: Russian
   translated_name: Русский
   code: ru
-  status: 0
+  status: 1
 - name: Sinhala
   translated_name: සිංහල
   code: si
@@ -107,6 +127,10 @@
   translated_name: தமிழ்
   code: ta
   status: 0
+- name: Telugu
+  translated_name: తెలుగు
+  code: te
+  status: 0
 - name: Turkish
   translated_name: Türkçe
   code: tr
@@ -114,6 +138,10 @@
 - name: Ukrainian
   translated_name: Українська
   code: uk
+  status: 1
+- name: Urdu
+  translated_name: اردو
+  code: ur
   status: 0
 - name: Uzbek
   translated_name: Oʻzbekcha
@@ -126,7 +154,7 @@
 - name: Simplified Chinese
   translated_name: 简体中文
   code: zh-hans
-  status: 0
+  status: 1
 - name: Traditional Chinese
   translated_name: 繁體中文
   code: zh-hant

From 8803c6375b153af39a850822d844db94ea4c9b0a Mon Sep 17 00:00:00 2001
From: Raed CHAMMAM <RaedsLab@users.noreply.github.com>
Date: Sun, 3 Mar 2019 08:21:23 +0100
Subject: [PATCH 105/118] Fix CRA code splitting link (#1765)

---
 content/docs/code-splitting.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index c0985e92c..32483c5f2 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -102,7 +102,7 @@ import("./math").then(math => {
 
 When Webpack comes across this syntax, it automatically starts code-splitting
 your app. If you're using Create React App, this is already configured for you
-and you can [start using it](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported
+and you can [start using it](https://facebook.github.io/create-react-app/docs/code-splitting) immediately. It's also supported
 out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
 
 If you're setting up Webpack yourself, you'll probably want to read Webpack's

From 2edbcd2d2e08119681f9cc0b7ee9ad9166c5ab3c Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Tue, 5 Mar 2019 20:53:19 +0400
Subject: [PATCH 106/118] Fix all typos noticed by Aziza

---
 content/tutorial/tutorial.md | 134 +++++++++++++++++------------------
 1 file changed, 67 insertions(+), 67 deletions(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 40520008a..36b141073 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -29,7 +29,7 @@ Bu dərslik bir neçə bölməyə bölünmüşdür:
 * [Oyunu Tamamlamaq](#completing-the-game) React-in təkmilləşdirilməsi üçün **ən çox işlənən metodları** öyrədəcək.
 * [Zaman Səyahətinin Əlavəsi](#adding-time-travel) React-in unikal gücləri haqqında **dərin məlumatlar** verəcək.
 
-Bu dərslikdən dəyər almaq üçün bütün bölmələri bir dəfəyə tamamlamaq vacib deyil. Çalışın mümkün qədər çox bölmədən keçəsiniz -- hətta bir və ya iki bölmədə olsa.
+Bu dərslikdən dəyər almaq üçün bütün bölmələri bir dəfəyə tamamlamaq vacib deyil. Çalışın mümkün qədər çox bölmədən keçəsiniz -- hətta bir və ya iki bölmə olsa belə.
 
 Dərslikdə irəliləyərkən kodları copy-paste etmək normaldır amma biz kodları əl ilə yazmağınızı tövsiyyə edirik. Bu sizə əzələ yaddaşı yaratmağa və daha güclü anlamağa kömək edəcək.
 
@@ -37,15 +37,15 @@ Dərslikdə irəliləyərkən kodları copy-paste etmək normaldır amma biz kod
 
 Bu dərslikdə biz React ilə interaktiv "X O oyununu" düzəltməyi göstərəcəyik.
 
-Bizim düzəltdiyimizə buradan baxa bilərsiniz: **[Son Nəticəyə](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Əgər kod sizə aydın deyilsə və ya sintaksis sizə tanış deyilsə, narahat olmayın! Bu dərsliyin məqsədi sizə React və onun sintaksisini anlamağa kömək etməkdir.
+Bizim düzəltdiyimizə buradan baxa bilərsiniz: **[Son Nəticə](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Əgər kod sizə aydın deyilsə və ya sintaksis sizə tanış deyilsə, narahat olmayın! Bu dərsliyin məqsədi sizə React və onun sintaksisini anlamağa kömək etməkdir.
 
-Dərsliyi başlamamışdan qabaq oyuna baxmağınızı tövsiyyə edirik. Bu oyunun diqqət edəcəyiniz xüsusiyyətlərindən biri oyun taxtasının sağında çıxan nömrələnmiş siyahıdır. Bu siyahı oyunda baş vermiş bütün hərəkətlərin tarixçəsidir və bu siyahı oyun davam etdikcə yenilənir.
+Dərsliyə başlamamışdan qabaq oyuna baxmağınızı tövsiyyə edirik. Bu oyunun diqqət edəcəyiniz xüsusiyyətlərindən biri oyun taxtasının sağında çıxan nömrələnmiş siyahıdır. Bu siyahı oyunda baş vermiş bütün hərəkətlərin tarixçəsidir və bu siyahı oyun davam etdikcə yenilənir.
 
 Oyun ilə tanış olduqdan sonra oyun səhifəsini bağlaya bilərsiniz. Biz bu dərslikdə sadə bir şablon ilə başlayacağıq. Sonraki addım sizi oyunu yazmağa hazır etməkdir.
 
 ### Ön şərtlər {#prerequisites}
 
-Biz sizin HTML və Javascript ilə tanışlığınızı təxmin edirik amma siz başqa proqramlaşdırma dilindən gəlirsinizsə belə davam edə bilərsiniz. Biz sizin proqramlaşdırma konsepsiyaları ilə (funskiyalar, objectlər, massivlər, və daha az dərəcədə, klasslar) tanışlığınızı təxmin edirik.
+Biz sizin HTML və Javascript ilə tanışlığınızı təxmin edirik amma siz başqa proqramlaşdırma dilindən gəlsəniz belə davam etməyi bacarmalısınız. Biz sizin proqramlaşdırma konsepsiyaları ilə (funksiyalar, obyektlər, massivlər, və daha az dərəcədə, klaslar) tanışlığınızı təxmin edirik.
 
 Əgər sizə Javascriptə baxmaq lazımdırsa, biz [bu təlimatı](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) oxumağınızı tövsiyyə edirik. Qeyd edirikki, biz həmçinin bəzi ES6 (Javascriptin yeni versiyası) xüsusiyyətlərindən istifadə edirik. Bu dərslikdə, biz [arrow funskiyaları](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [klaslar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) operatorlarından istifadə edirik. Siz [Babel REPL](babel://es5-syntax-example) istifadə edərək ES6 kodunun nəyə kompilyasiya olunduğunu görə bilərsiniz.
 
@@ -59,11 +59,11 @@ Bu başlamaq üçün ən tez yoldur!
 
 İlk olaraq, bu **[Başlama Kodunu](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** yeni təbdə açın. Yeni təb sizə boş "X O oyun" taxtası və React kodu göstərəcək. Biz bu dərslikdə React kodu üstündə işləyəcəyik.
 
-Siz indi ikinci opsiyanından ötüb, [İcmal](#overview) bölməsinə keçə bilərsiniz.
+Siz indi ikinci seçimi ötüb, [İcmal](#overview) bölməsinə keçə bilərsiniz.
 
 ### Seçim 2: Lokal Təkminləşmə Mühiti {#setup-option-2-local-development-environment}
 
-Bu tam istəyə bağlı və bu dərslik üçün məcburi deyil!
+Bu tam istəyə bağlıdır və bu dərslik üçün məcburi deyil!
 
 <br>
 
@@ -120,7 +120,7 @@ Editorunuz üçün sintaks seçilməsini konfiqurasiya etmək üçün [bu təlim
 
 ### Kömək, Mən İlişmişəm!
 
-Əgər ilişmisinizsə, [cəmiyyətimizin dəstək resurslarını](/community/support.html) nəzərdən keçirin. Xüsusisən, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) kömək almaq üçün ən tez yoldur. Əgər siz cavab almırsınızsa və ya siz yenədə ilişmisinizsə, xahiş olunur bizə İssue göndərin və biz sizə kömək etməyə cəhd edəcəyik.
+Əgər ilişmisinizsə, [cəmiyyətimizin dəstək resurslarını](/community/support.html) nəzərdən keçirin. Xüsusilə, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) kömək almaq üçün ən tez yoldur. Əgər siz cavab almırsınızsa və ya siz yenədə ilişmisinizsə, xahiş olunur bizə İssue göndərin və biz sizə kömək etməyə cəhd edəcəyik.
 
 ## İcmal {#overview}
 
@@ -130,7 +130,7 @@ Editorunuz üçün sintaks seçilməsini konfiqurasiya etmək üçün [bu təlim
 
 React UI yaratmaq üçen deklarativ, səmərəli, və elastik Javascript kitabxanasıdır. Bu kitabxana sizə "komponent" adlanan balaca və sərbəst kod hissələrinin birləşməsi ilə kompleks UI yaratmağa icazə verir.
 
-React-də bir neçə növ komponent var amma gelin `React.Component` subklassından yaranan komponentlər ilə başlayaq:
+React-də bir neçə növ komponent var amma gəlin `React.Component` subklassından yaranan komponentlər ilə başlayaq:
 
 ```javascript
 class ShoppingList extends React.Component {
@@ -151,11 +151,11 @@ class ShoppingList extends React.Component {
 // İşlətmə nümunəsi: <ShoppingList name="Rufat" />
 ```
 
-Biz bu maraqlı XML-a oxşar təqlərdən sonra danışacağıq. Biz komponentlərdən istifadə edərək React-ə ekranda nə görmək istədiyimizi deyiril. Məlumat dəyişəndə React səmərəli şəkildə komponentləri yeniləyir və yenidən render edir.
+Biz bu maraqlı XML-a oxşar təqlərdən sonra danışacağıq. Biz komponentlərdən istifadə edərək React-ə ekranda nə görmək istədiyimizi deyirik. Məlumat dəyişəndə React səmərəli şəkildə komponentləri yeniləyir və yenidən render edir.
 
 Yuxarıdakı nümunədə, ShoppingList bir **React komponent klassı** və ya **React komponent növüdür**. Komponent `props` ("properties" sözünün qısa yazılışı) adında parametrlər qəbul edir və görünüş üçün iyerarxiyalı formada `render` funskiyasından qaytarır.
 
-`render` funskiyası nə görmək istədiyinizin *məzmununu* qaytarır. React bu məzmun əsasında nəticəni göstərirş. Xesusi ilə, `render` **React elementi** (nə render edilməyinin yüngül məzmunu) qaytarır. Əksər React proqramçıları "JSX" adında xüsusi sintaksis işlədir. Bu sintaksik belə iyerarxiyalı strukturların yazılışını asalaşdırır. `<div />` sintaksisi qurulma zamanı `React.createElement('div')`-ə çevrilir. Yuxarıdalı nümunənin JSX-siz aşağıdakı formada yazılır:
+`render` funskiyası görmək istədiyiniz *məzmunu* qaytarır. React bu məzmun əsasında nəticəni göstərir. Xüsusi ilə, `render` **React elementi** (nə render edildiyinin yüngül məzmununu) qaytarır. Əksər React proqramçıları "JSX" adında xüsusi sintaksis işlədir. Bu sintaksik belə iyerarxiyalı strukturların yazılışını asanlaşdırır. `<div />` sintaksisi qurulma zamanı `React.createElement('div')`-ə çevrilir. Yuxarıdakı nümunənin JSX-siz forması aşağıdakı kimi yazılır:
 
 ```javascript
 return React.createElement('div', {className: 'shopping-list'},
@@ -168,15 +168,15 @@ return React.createElement('div', {className: 'shopping-list'},
 
 Əgər sizə maraqlıdırsa, `createElement()` [API arayışında](/docs/react-api.html#createelement) daha detallı izah edilir. Biz bu dərslikdə `createElement()` əvəzinə JSX-dən istifadə etməyə davam edəcəyik.
 
-JSX, Javascriptin bütün gücü ilə gəlir. Siz *hər hansı* Javascript ifadəsini JSX-də fiqur mötərizənin içərisindən çağıra bilərsiniz. Hər React elementi bir sadə Javascript obyekti obyektidir. Siz bu obyekti dəyişənə təyin edə bilər və ya applikasiyanızda funskiyalara və s. göndərə bilərsiniz.
+JSX, Javascriptin bütün gücü ilə gəlir. Siz *hər hansı* Javascript ifadəsini JSX-də fiqurlu mötərizənin içərisindən çağıra bilərsiniz. Hər React elementi bir sadə Javascript obyekti obyektidir. Siz bu obyekti dəyişənə təyin edə bilər və ya applikasiyanızda funskiyalara və s. göndərə bilərsiniz.
 
-Yuxarıdalı nümunədə, `ShoppingList` komponenti yalnız hazır qurulmuş DOM komponentlərini (`<div />` və `<li />`) render edir. Amma siz başqa xüsusi komponentləri belə biləşdirə bilərsiniz. Məsələn, siz yuxarıdakı alqı satqı listini `<ShoppingList />` kimi işlədə bilərsiniz. Hər React komponenti inkapsulasiya olunub deyə siz bu komponentləri bir birindən asılı olmayacaq şəkildə istifadə edə bilərsiniz. Bu xüsusiyyət sade komponentlərdən komplex UI-lar yaratmağa icazə verir.
+Yuxarıdakı nümunədə, `ShoppingList` komponenti yalnız hazır qurulmuş DOM komponentlərini (`<div />` və `<li />`) render edir. Amma siz başqa xüsusi komponentləri belə biləşdirə bilərsiniz. Məsələn, siz yuxarıdakı alqı satqı siyahısını `<ShoppingList />` kimi işlədə bilərsiniz. Hər React komponenti inkapsulasiya olunub deyə siz bu komponentləri bir-birindən asılı olmayacaq şəkildə istifadə edə bilərsiniz. Bu xüsusiyyət sadə komponentlərdən kompleks UI-lar yaratmağa icazə verir.
 
 ## Başlanğıc Kodunu Yoxlamaq {#inspecting-the-starter-code}
 
 Əgər siz bu dərsliyi **brauzerdə** edəcəksinizsə bu kodu yeni təbdə açın: **[Başlanğıc Kodu](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Əgər siz bu dərsliyi **lokalda** edəcəksinizsə, layihə direktoriyasında olan `src/index.js` faylını açın (siz bu fayla [qurulma](#setup-option-2-local-development-environment) bölməsində əl gəzdirmisiniz).
 
-Başlağıc Kodu sizin yazacağınız üçün baza kodudur. Biz CSS stilləri təmin etmişikki siz diqqətini yalnız React-i öyrənməyə və "X O oyunu" yazmağa yönləndirəsiniz.
+Başlağıc Kodu sizin yazacağınız üçün baza kodudur. Biz CSS stilləri təmin etmişik ki, siz diqqətinizi yalnız React-i öyrənməyə və "X O oyunu" yazmağa yönləndirəsiniz.
 
 Koda yaxından baxdığınızda, üç React komponentin olacağını görəcəksiniz:
 
@@ -184,7 +184,7 @@ Koda yaxından baxdığınızda, üç React komponentin olacağını görəcəks
 * Board
 * Game
 
- Square komponent tək bir `<button>` və Board komponenti 9 ədəd kvadrat render edir. Game komponenti Board elə belə  dəyərlər ilə render edir. Biz bu dəyərləri gələcək bölmələrdə dəyişəcəyik. İndiki zamanda bu kodda interaktiv komponent yoxdur.
+ Square komponent tək bir `<button>`-u və Board komponenti 9 ədəd kvadrat render edir. Game komponenti Board-u elə-belə dəyərlər ilə render edir. Biz bu dəyərləri gələcək bölmələrdə dəyişəcəyik. İndiki zamanda bu kodda interaktiv komponent yoxdur.
 
 ### Məlumatı Proplar ilə Göndərmək {#passing-data-through-props}
 
@@ -223,7 +223,7 @@ Sonra: Siz kvadratlarda rəqəmləri görməlisiniz.
 
 **[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/aWWQOG?editors=0010)**
 
-Təbriklər! Siz valideyn olan Board komponentindən "propu" uçaq olan Square komponentinə göndərdiniz. React-də məlumat axınını propların göndərilməsi ilə baş verir -- valideyndən uşağa doğru.
+Təbriklər! Siz valideyn olan Board komponentindən "propu" uşaq olan Square komponentinə göndərdiniz. React-də məlumat axınını propların göndərilməsi ilə baş verir -- valideyndən uşağa doğru.
 
 ### İnteraktiv Komponent Yaratmaq {#making-an-interactive-component}
 
@@ -247,7 +247,7 @@ class Square extends React.Component {
 
 >Qeyd
 >
->Yazmanı qısaltmaq və [`this`-in baş qarışdırıcı işləmə prinsipinindən](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) kənar olmaq üçün, biz buradakı və sonrakı hadisə işləyicilərində [arrow funskiyalası sintaksisindən istifadə edəcəyik](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions):
+>Yazını qısaltmaq və [`this`-in baş qarışdırıcı işləmə prinsipinindən](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) kənar olmaq üçün, biz buradakı və sonrakı hadisə işləyicilərində [arrow funskiyaları sintaksisindən istifadə edəcəyik](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions):
 >
 >```javascript{4}
 >class Square extends React.Component {
@@ -261,9 +261,9 @@ class Square extends React.Component {
 >}
 >```
 >
->Diqqət edinki biz `onClick` propuna *funskiya* göndəririk: `onClick={() => alert('click')}`. Bu xəbərdarlığın yalnız düymənin klikləndiyi vaxt çıxmasını təmin edir. `() =>`-nu yaddan çıxarıb birbaşa `onClick={alert('click')}` yazmaq tez tez edilən bir səhvlədən biridir. Səhv formada yazdıqda, komponentin hər renderindən sonra (məsələn dəyişiklikdən sonra baş verən yenidən render) xəbərdarlıq göstəriləcək (tıklamaqdan asılı olmayaraq).
+>Diqqət edin ki, biz `onClick` propuna *funskiya* göndəririk: `onClick={() => alert('click')}`. Bu xəbərdarlığın yalnız düymənin klikləndiyi vaxt çıxmasını təmin edir. `() =>`-nu yaddan çıxarıb birbaşa `onClick={alert('click')}` yazmaq tez-tez edilən bir səhvlərdən biridir. Səhv formada yazdıqda, komponentin hər renderindən sonra (məsələn, dəyişiklikdən sonra baş verən yenidən render) xəbərdarlıq göstəriləcək (tıklamaqdan asılı olmayaraq).
 
-Sıradakı addımda, biz Square komponentinin tılandığını yadda saxlamaq və "X" işarəsi ilə doldurmaq istəyirik. komponentlər "yadda saxlamaq" üçün **state-dən** istifadə edirlər.
+Sıradakı addımda, biz Square komponentinin tıklandığını yadda saxlamaq və "X" işarəsi ilə doldurmaq istəyirik. Komponentlər "yadda saxlamaq" üçün **state-dən** istifadə edirlər.
 
 React komponentlərinin state-ləri olması üçün klas konstrukturunda `this.state`-dən istifadə edilir. `this.state` yalnız onu müəyyənləşdirən React komponentinə privat olmalıdır. Gəlin Square-in cari dəyərini `this.state`-də saxlayaq və Square tıklanarkən bu dəyəri dəyişək.
 
@@ -295,8 +295,8 @@ class Square extends React.Component {
 Biz Square komponentinin cari state-inin dəyərini tıklamadan sonra göstərmək üçün, Square-in `render` funskiyasından istifadə edəcəyik:
 
 * `<button>` təqində `this.props.value`-nu `this.state.value` ilə əvəz et.
-* the `() => alert()` hadisə işləyicisini `() => this.setState({value: 'X'})` ilə əvəz et.
-* Oxunaqlığı artirmaq üçün `className` və `onClick` proplarını ayrı sətrlərdə yazın.
+* `() => alert()` hadisə işləyicisini `() => this.setState({value: 'X'})` ilə əvəz et.
+* Oxunaqlığı artırmaq üçün `className` və `onClick` proplarını ayrı sətrlərdə yazın.
 
 Bu dəyişikliklərdən sonra Square-in `render` funskiyasından qaytarılan `<button>` təqi aşağıdakı koda oxşamalıdır:
 
@@ -324,9 +324,9 @@ class Square extends React.Component {
 
 Square komponentinin `render` funskiyasında olan `onClick` işləyicisində `this.setState` çağırmaq ilə biz React-ə `<button>` tıklananda komponenti yenidən render etməyi deyirik. Yeniləmədən sonra, Square-in `this.state.value` dəyəri `'X'` olacaq və bu səbəbdən biz oyun taxtasında `X` görəcəyik. Hər hansı bir Square-i tıklayanda, `X` görünəcək.
 
-Komponentdən `setState` çağırdıqda, React avtomaik olaraq komponentin içinsəki uşaq komponentləridə  yeniləyir.
+Komponentdən `setState` çağırdıqda, React avtomatik olaraq komponentin içinsəki uşaq komponentləridə  yeniləyir.
 
-**[Bu nöqtəya kimi olan bütün kod](https://codepen.io/gaearon/pen/VbbVLg?editors=0010)**
+**[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/VbbVLg?editors=0010)**
 
 ### Developer Alətləri {#developer-tools}
 
@@ -338,9 +338,9 @@ React DevTools sizə React komponentlərinin state və proplarına baxmağa icaz
 
 React DevTools-u qurduqdan sonra, siz səhifədə hər hansi bir elementə sağ düymə ilə tıklayıb, "Inspect"-ə tıklayıb developer alətlərini açın. React DevTools developer alətlərinin ən son təbində "React" adı ilə görünəcək.
 
-*Qeyd edinki CodePen-də işləməsi üçün əlavə bir neçə əlavə addım etmək lazımdır:**
+**Nəzərə alın ki, CodePen-də işləməsi üçün əlavə bir neçə addım atmaq lazımdır:**
 
-1. Login edin ve ya qeydiyyatdan keçib emailınızı təsdiq edin (spamin qarşısını almaq üçün lazımdır).
+1. Login edin ve ya qeydiyyatdan keçib emailınızı təsdiq edin (spamın qarşısını almaq üçün lazımdır).
 2. "Fork" düyməsini tıklayın.
 3. "Change View" düyməsini tıklayıb "Debug mode" seçin.
 4. Yeni açılan təbdə brauzerin developer alətlərində React təbi olacaq.
@@ -353,9 +353,9 @@ Indi bizdə "X O oyununun" əsas blokları hazırdı. Oyunu tamamlamaq üçün b
 
 İndi, hər Square komponenti oyunun vəziyyətini saxlayır. Qalibi təyin etmək üçün biz bu 9 kvadratın dəyərini bir yerdə saxlamalıyıq.
 
-Biz Board komponentinin hər Square komponentdən Square-in state-ini istəməsini fikirləşə bilərik. Bunun React-da mümkün olmasına baxmayaraq, biz bu yol ilə getməyi tövsiyyə etmirik. Çünki bele üsulla yazılan kodu başa düşmək və refaktor etmək çətinləşir və baqların şansı artır. Bunu duzəltməyin ən yaxşı yolu oyunun state-ini hissə-hissə hər Square komponentdə saxlamaq əvəzinə bütünlüklə Board komponentində saxlamaqdır. Board komponenti hər Square-ə nə göstərəcəyini, [Square-ə rəqəm göndərdiyimiz kimi](#passing-data-through-props), prop ilə göndərə bilər.
+Biz Board komponentinin hər Square komponentdən Square-in state-ini istəməsini fikirləşə bilərik. Bunun React-da mümkün olmasına baxmayaraq, biz bu yol ilə getməyi tövsiyyə etmirik. Çünki belə üsulla yazılan kodu başa düşmək və refaktor etmək çətinləşir və baqların şansı artır. Bunu duzəltməyin ən yaxşı yolu oyunun state-ini hissə-hissə hər Square komponentdə saxlamaq əvəzinə bütünlüklə Board komponentində saxlamaqdır. Board komponenti hər Square-ə nə göstərəcəyini, [Square-ə rəqəm göndərdiyimiz kimi](#passing-data-through-props), prop ilə göndərə bilər.
 
-**Çoxlu uşaqdan məlumat yığması və ya iki uşaq komponentin bir biri ilə kommunikasiya etməsi üçün, paylaşılan state-i valideyn komponentində bəyan edin. Valideyn komponent bu state-i  uşaq komponentlərə proplar vasisəti ilə göndərə bilər. Bu metod uşaq komponentlər və valideyn komponentlər arasındakı məlumatları sinxron saxlayır.**
+**Çoxlu uşaqdan məlumat yığması və ya iki uşaq komponentin bir-biri ilə kommunikasiya etməsi üçün paylaşılan state-i valideyn komponentində bəyan edin. Valideyn komponent bu state-i  uşaq komponentlərə proplar vasisəti ilə göndərə bilər. Bu metod uşaq komponentlər və valideyn komponentlər arasındakı məlumatları sinxron saxlayır.**
 
 React komponentlərini refaktor etdikdə, state-i valideyn komponentə qaldırmaq çox işlənən praktikadır. Gəlin bu metodu sınayaq. Biz Board komponentinə konstruktor əlavə edib Board-un başlanğıc state-inə 9 ədəd `null` olan massiv əlavə edəcəyik. Bu 9 ədəd `null` 9 ədəd kvadrat üçündür:
 
@@ -417,7 +417,7 @@ Board-un `renderSquare` funskiyası indi belə görsənir:
   }
 ```
 
-Bu dərsliyi başlayanda, biz hər Square-də 0-dan 8-ə kimi rəqəmləri göstərmək üçün Board-dan [`value` propunu göndərdik](#passing-data-through-props). Əvvəlki başqa bir bölmədə isə biz rəqəmləri [Square-in daxili state-indən istifadə edərək](#making-an-interactive-component) "X" ilə əvəz etdik. Bu səbəbdən Square komponenti Board-dan göndərilən `value` propunu saymır.
+Bu dərsliyi başlayanda biz hər Square-də 0-dan 8-ə kimi rəqəmləri göstərmək üçün Board-dan [`value` propunu göndərdik](#passing-data-through-props). Əvvəlki başqa bir bölmədə isə biz rəqəmləri [Square-in daxili state-indən istifadə edərək](#making-an-interactive-component) "X" ilə əvəz etdik. Bu səbəbdən Square komponenti Board-dan göndərilən `value` propunu saymır.
 
 Biz yenidən propu göndərmək mexanizmindən istifadə edəcəyik. Board komponentindən hər Square-ə kvadratın dəyərini göndərəcəyik (`'X'`, `'O'`, və ya `null`). Biz artıq `squares` massivini Board-un konstrukturunda yaratmışıq və indi biz `renderSquare` funskiyasından bu massivi oxuyacağıq:
 
@@ -456,7 +456,7 @@ Board-un state-inin privatlığının saxlanması üçün biz Board-dan Square-
 * Square-in `render` funskiyasında `this.setState()`-i `this.props.onClick()` ilə əvəz edəcəyik
 * Square state saxlamadığından `constructor`-u Square-dən siləcəyik
 
-Bu dəyişikliklərdən sonra, Square komponenti belə olacaq:
+Bu dəyişikliklərdən sonra Square komponenti belə olacaq:
 
 ```javascript{1,2,6,8}
 class Square extends React.Component {
@@ -483,7 +483,7 @@ Square tıklandıqda Board-un təmin etdiyi `onClick` funksiyası çağrılır.
 
 >Qeyd
 >
->DOM `<button>` elementinin qurulmuş komponent olduğundan, bu elementin `onClick` atributunun React-a xüsusi mənasi var. Square kimi xüsusi komponentlər üçün bu atributu adlandırmaq sizdən asılıdır. Biz Square-in `onClick` propunu və ya Board-un `handleClick` funskiyasını başqa cürədə adlandıra bilərdik. React-də, hadisələr üçün `on[Event]` və hadisə işləyiciləri üçün `handle[Event]` adları işlətmək adətdir.
+>DOM `<button>` elementinin qurulmuş komponent olduğundan, bu elementin `onClick` atributunun React-ə xüsusi mənası var. Square kimi xüsusi komponentlər üçün bu atributu adlandırmaq sizdən asılıdır. Biz Square-in `onClick` propunu və ya Board-un `handleClick` funskiyasını başqa cür də adlandıra bilərdik. React-də hadisələr üçün `on[Event]` və hadisə işləyiciləri üçün `handle[Event]` adları işlətmək adətdir.
 
 Square-i tıkladıqda, `handleClick` funskiyasının olmadığından bizə xəta gələcək. Gəlin indi bu funksiyanı Board klasında tətbiq edək:
 
@@ -540,17 +540,17 @@ class Board extends React.Component {
 
 **[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)**
 
-Bu dəyişikliklərdən sonra, biz Square-ə tıklayaraq oyun taxtasını doldura bilirk. Amma indi oyunun vəziyyəti Square komponentlərdə individual yerləşmək əvəzinə Board komponentində saxlanır. Board-un state-i dəyişdikdə bütün komponentlər avtomatik yenidən render olunurlar. Bütün kvadratların vəziyyətlərini Board komponentində saxlamaq ilə biz gələcəkdə oyunun qalibinidə müəyyənləşdirə biləcəyik.
+Bu dəyişikliklərdən sonra biz Square-ə tıklayaraq oyun taxtasını doldura bilirik. Amma indi oyunun vəziyyəti Square komponentlərdə individual yerləşmək əvəzinə Board komponentində saxlanır. Board-un state-i dəyişdikdə bütün komponentlər avtomatik yenidən render olunurlar. Bütün kvadratların vəziyyətlərini Board komponentində saxlamaq ilə biz gələcəkdə oyunun qalibini də müəyyənləşdirə biləcəyik.
 
 Square komponentində state olmadığından, bütün Square komponentləri Board komponentindən dəyərləri alir və tıklandığı zaman Board komponentinə xəbər verir. React terminalogiyasında, Square komponentləri **kontrol olunan komponentlər** adlanırlar. Board komponentinin bu komponentlər üzərində tam kontrolu var.
 
-Qeydə alinki biz `handleClick` funskiyasında mövcud `squares` massivini dəyişmək əvəzinə `.slice()` funskiyasını çağırıb massivin kopiyasını düzəldirik. Gələn bölmədə biz `squares`-in kopiyasını çıxarmağın səbəbini izah edəcəyik.
+Qeydə alin ki, biz `handleClick` funskiyasında mövcud `squares` massivini dəyişmək əvəzinə `.slice()` funskiyasını çağırıb massivin kopiyasını düzəldirik. Gələn bölmədə biz `squares`-in kopiyasını çıxarmağın səbəbini izah edəcəyik.
 
 ### Dəyişməzlik Niyə Vacibdir {#why-immutability-is-important}
 
-Əvvəli kod nümunəsində, biz mövcud massivi dəyişmək əvəzinə `.slice()` operatoru ilə `squares` massivinin kopiyasının çıxarmağı tövsiyyə etdik. Bu bölmədə biz dəyişməzlik (immutability) və dəyişməzliyi öyrənməyin niyə vacib olduğunu müzakirə edəcəyik.
+Əvvəli kod nümunəsində biz mövcud massivi dəyişmək əvəzinə `.slice()` operatoru ilə `squares` massivinin kopiyasını çıxarmağı tövsiyyə etdik. Bu bölmədə biz dəyişməzlik (immutability) və dəyişməzliyi öyrənməyin niyə vacib olduğunu müzakirə edəcəyik.
 
-Normalda məlumatı iki yol ilə dəyişmək olur. Birinci yanaşma məlumatın dəyərlərini birbaşa dəyişməklə məlumatı *mutasiya etməkdir*. İkinci yanaşma isə mövcud məlumatı dəyişiklər ilə olan kopiyası ilə əvəz etməkdir.
+Normalda məlumatı iki yol ilə dəyişmək olur. Birinci yanaşma məlumatın dəyərlərini birbaşa dəyişməklə məlumatı *mutasiya etməkdir*. İkinci yanaşma isə mövcud məlumatı dəyişikliklər olan kopiyası ilə əvəz etməkdir.
 
 #### Məlumatı Mutasiya ilə Dəyişmək {#data-change-with-mutation}
 ```javascript
@@ -574,15 +574,15 @@ Son nəticənin eyni olmasına baxmayaraq məlumatı mutasiya etmədən dəyişd
 
 #### Kompleks Xüsusiyyətlər Sadələşir {#complex-features-become-simple}
 
-Dəyişməməzlik kompleks xüsusiyyətlərin tətbiqini çox asanlaşdırır. Bu dərslikdə biz "X O oyununun" tarixçəsinin icmalını və əvvəlki gedişlərə qayıda bilmək üçün "zaman səyahəti" tətbiq edəcəyik. Bu xüsusiyyət yalnız oyunlara xas deyil. Bir çox applikasiyaların tələblərində hərəkətləri geri qaytarmaq və ya qabağa çəkmək olur. Məlumatın birbaşa dəyişməyindən çəkinməklə biz oyunun tarixçəsini saxlaya bilir və saxladığımız tarixçədən istifadə edə bilərik.
+Dəyişməzlik kompleks xüsusiyyətlərin tətbiqini çox asanlaşdırır. Bu dərslikdə biz "X O oyununun" tarixçəsinin icmalını və əvvəlki gedişlərə qayıda bilmək üçün "zaman səyahəti" tətbiq edəcəyik. Bu xüsusiyyət yalnız oyunlara xas deyil. Bir çox applikasiyaların tələblərində hərəkətləri geri qaytarmaq və ya qabağa çəkmək olur. Məlumatın birbaşa dəyişməyindən çəkinməklə biz oyunun tarixçəsini saxlaya bilir və saxladığımız tarixçədən istifadə edə bilərik.
 
-#### Dəyişikliklər Aşkar Edilir {#detecting-changes}
+#### Dəyişikliklərin Aşkar Edilməsi {#detecting-changes}
 
 Mutasiya olunmuş obyektlərin birbaşa dəyişildiyindən, bu dəyişikliklərin aşkar edilməsi çətindir. Dəyişikliyi tapmaq üçün mutasiya olunmuş obyekt, əvvəlki kopiyaları ilə müqayisə edilməlidir. Bu müqayisə üçün bütün obyekt iyerarxiyası yoxlanmalıdır.
 
 Mutasiya olunmamış obyektlərdə dəyişiklikləri aşkar etmək xeyli dərəcədə asandır. Əgər dəyişməz obyektin referansı əvvəki obyektin referansından fərqlidirsə, bu obyekt dəyişmişdir.
 
-#### React-də Yenidən Render Etməyi Aşkarlanır {#determining-when-to-re-render-in-react}
+#### React-də Yenidən Render Etməyin Aşkarlanması {#determining-when-to-re-render-in-react}
 
 Dəyişməzliyin əsas faydası React-da bizə _təmiz komponentlərin_ yaranmasına kömək etməsidir. Mutasiya olunmamış məlumatlar ilə biz dəyişikliyin olduğunu asan formada aşkar edə bilərik. Bu tapıntı ilə komponentin yenidən olduğunu müəyyən edə bilərik.
 
@@ -592,7 +592,7 @@ Dəyişməzliyin əsas faydası React-da bizə _təmiz komponentlərin_ yaranmas
 
 Biz indi Square-i **funskional komponentə** çevirəcəyik.
 
-React-də, **funskional komponentlər** komponentlərin sadə formada yazılması üçündür. Bu komponentlərin state-i olmur; yalnız `render` funksiyası olur. `React.Component`-dən törənən klas yazmaq əvəzinə, biz `props` qəbul edən və nəyi render etməyi qaytaran funksiya yaradırıq. Funksional komponentləri yazmaq klas komponentləri yazmaqdan daha az yorucudur. Bir çox komponent belə formada yazıla bilər.
+React-də **funskional komponentlər** komponentlərin sadə formada yazılması üçündür. Bu komponentlərin state-i olmur; yalnız `render` funksiyası olur. `React.Component`-dən törənən klas yazmaq əvəzinə, biz `props` qəbul edən və nəyi render etməyi qaytaran funksiya yaradırıq. Funksional komponentləri yazmaq klas komponentləri yazmaqdan daha az yorucudur. Bir çox komponent belə formada yazıla bilər.
 
 Square klasını aşağıdakı funskiya ilə əvəz edin:
 
@@ -612,13 +612,13 @@ Biz `this.props`-u işlətdiyimiz hər iki yerdə `props` ilə əvəz etdik.
 
 >Qeyd
 >
->Biz Square-i funskional komponentə çevirdikdə, həmçinin `onClick={() => this.props.onClick()}` propunu daha qısa `onClick={props.onClick}`-a (**Hər iki** tərəfdəki mötərizələrin olmamasını qeyd edin) çevirdik. Klas olduqda, biz düzgün `this` işlədə bilmək üçün ox funskiyası işlətmişdik. Amma funskional komponentdə `this` bizə lazım deyil.
+>Biz Square-i funksional komponentə çevirdikdə, həmçinin `onClick={() => this.props.onClick()}` propunu daha qısa `onClick={props.onClick}`-a (**Hər iki** tərəfdəki mötərizələrin olmamasını qeyd edin) çevirdik. Klas olduqda, biz düzgün `this` işlədə bilmək üçün ox funskiyası işlətmişdik. Amma funskional komponentdə `this` bizə lazım deyil.
 
 ### Sıranı Gözləmək {#taking-turns}
 
-Biz "X O oyununda" tam aydın ola defekti düzəltməliyik: "O"-lar oyun taxtasında işarələnə bilmirlər.
+Biz "X O oyununda" tam aydın olan qüsura düzəltməliyik: "O"-lar oyun taxtasında işarələnə bilmirlər.
 
-Biz ilk gedişi "X" ilə qeyd edək. Bu ilkin dəyər üçün biz Board-un konstrukturunda başlanğıc state-i dəyişməliyik:
+Biz ilk gedişi "X" ilə qeyd edək. Bu ilkin dəyər üçün biz Board-un konstruktorunda başlanğıc state-i dəyişməliyik:
 
 ```javascript{6}
 class Board extends React.Component {
@@ -644,7 +644,7 @@ Hər zaman oyunçu hərəkət etdikdə, `xIsNext` (bulin) kimin sonrakı addım
   }
 ```
 
-Bu dəyişiklikdə, "X"-lər və "O"-lar sıralarını gözləyə bilərlər. Əlavə olaraq Board-un `render` funksiyasındakı "status" mətnində kimin sonrakı addımı atacağınıda göstərək:
+Bu dəyişiklikdə, "X"-lər və "O"-lar sıralarını gözləyə bilərlər. Əlavə olaraq Board-un `render` funksiyasındakı "status" mətnində kimin sonrakı addımı atacağını da göstərək:
 
 ```javascript{2}
   render() {
@@ -715,7 +715,7 @@ class Board extends React.Component {
 
 ### Qalibi Bəyan Etmək {#declaring-a-winner}
 
-Biz indi kimin sonrakı addımı atacağını bildiyimizdən, gəlin oyununu qalibini və ya oyunda heç bir gedişin qalmadığını göstərək. Qalibi tapmaq üçün aşağıdakı köməkçi funskiyanı faylın sonuna əlavə edə bilərik:
+Biz indi kimin sonrakı addımı atacağını bildiyimizdən, gəlin oyunun qalibini və ya oyunda heç bir gedişin qalmadığını göstərək. Qalibi tapmaq üçün aşağıdakı köməkçi funskiyanı faylın sonuna əlavə edə bilərik:
 
 ```javascript
 function calculateWinner(squares) {
@@ -773,7 +773,7 @@ Biz Board-un `render` funskiyasında oyunçunun qazandığını yoxlamaq üçün
 
 **[Bu nöqtəyə kimi olan bütün kod](https://codepen.io/gaearon/pen/LyyXgK?editors=0010)**
 
-Təbriklər! Sizdə indi işləyən "X O oyunu" var. Və siz həmçinin React-in əsaslarını öyrəndiniz. Bu səbəbdən *siz* yəqinki əsl qalibsiniz.
+Təbriklər! Sizdə indi işləyən "X O oyunu" var. Həmçinin siz React-in əsaslarını öyrəndiniz. Bu səbəbdən *siz* yəqinki əsl qalibsiniz.
 
 ## Zaman Səyahətini Əlavə Etmək {#adding-time-travel}
 
@@ -783,7 +783,7 @@ Son bir tapşırıq kimi, gəlin əvvəlki gedişlərə qayıtmağı tətbiq ed
 
 Əgər biz `squares` massivini mutasiya etsə idik, zaman səyahətinin tətbiqi çətin olacaqdı.
 
-Lazkin, biz hər gedişdən sonra `slide()` funskiyasından istifadə edərək, `squares` massivinin kopiyasını çıxardıq və bu massivə [mutasiya olunmayan](#why-immutability-is-important) kimi davrandıq. Bu bizə `squares` massivinin bütün köhnə versiyalarını saxlamağa və bu versiyalar arasında naviqasiya etməyə imkan yaradır.
+Lakin, biz hər gedişdən sonra `slide()` funskiyasından istifadə edərək, `squares` massivinin kopiyasını çıxardıq və bu massivə [mutasiya olunmayan](#why-immutability-is-important) kimi davrandıq. Bu bizə `squares` massivinin bütün köhnə versiyalarını saxlamağa və bu versiyalar arasında naviqasiya etməyə imkan yaradır.
 
 Biz köhnə `squares` massivlərini `history` adında bir massivdə saxlayacağıq. `history` massivi, birinci gedişdən axırıncı gedişə kimi olan oyun taxtasının bütün vəziyyətlərinin təsviridir. Bu massiv aşağıdakı struktura malikdir:
 
@@ -821,9 +821,9 @@ history = [
 
 ### State-i Yenidən Qaldırmaq {#lifting-state-up-again}
 
-Biz ən yuxarıda olan Game komponentinin bütün keçmiş hərəkətlərinin siyahısını göstərməsini istəyirik. Bunun üçün bu komponentin `history`-ə müraciət edə bilməlidir. Bu səbəbdən biz `history` state-ini Game komponentində saxlayacağıq.
+Biz ən yuxarıda olan Game komponentinin bütün keçmiş hərəkətlərinin siyahısını göstərməsini istəyirik. Bunun üçün bu komponent `history`-ə müraciət edə bilməlidir. Bu səbəbdən biz `history` state-ini Game komponentində saxlayacağıq.
 
-`history` state-inin Game komponentində olması bizə `squares` state-inin bu komponentin uşağı olan Board komponentindən silinməsinə imkan yaradır. Əvvəl Square komponentindən Board komponentinə ["state-i qaldırdığımız"](#lifting-state-up) kimi, biz indi state-i Board komponentindən Game omponentinə qaldırırıq. Bu Game komponentinin Board-un məlumatı üzərində tam kontrolu olmasını bildirir və Board-a `history`-də olan keçmiş gedişləri render etməyə imkan yaradır.
+`history` state-inin Game komponentində olması bizə `squares` state-inin bu komponentin uşağı olan Board komponentindən silinməsinə imkan yaradır. Əvvəl Square komponentindən Board komponentinə ["state-i qaldırdığımız"](#lifting-state-up) kimi, biz indi state-i Board komponentindən Game komponentinə qaldırırıq. Bu Game komponentinin Board-un məlumatı üzərində tam kontrolu olmasını bildirir və Board-a `history`-də olan keçmiş gedişləri render etməyə imkan yaradır.
 
 İlk olaraq, biz Game komponentinin konstruktorunda ilkin state-i inisializasiya edəcəyik:
 
@@ -855,7 +855,7 @@ class Game extends React.Component {
 }
 ```
 
-Sonra biz Board-a `squares` və `onClick` proparını Game komponentindən almasını təmin edəcəyik. İndi Board-da bütün Square-lər üçün yalnız bir tıklamaq hadisə işləyicisi olduğundan, biz hansı Square-in tıklandığını bilmək üçün, hər Square-in yerini `onClick` işləyicisinə göndərməliyik. Aşağıda Board komponentini yeniləmək üçün olan addımlar göstərilib:
+Sonra biz Board-a `squares` və `onClick` proplarını Game komponentindən almasını təmin edəcəyik. İndi Board-da bütün Square-lər üçün yalnız bir tıklamaq hadisə işləyicisi olduğundan, biz hansı Square-in tıklandığını bilmək üçün, hər Square-in yerini `onClick` işləyicisinə göndərməliyik. Aşağıda Board komponentini yeniləmək üçün olan addımlar göstərilib:
 
 * Board-dan `constructor`-u silin.
 * Board-un `renderSquare` funskiyasında, `this.state.squares[i]`-i `this.props.squares[i]` ilə əvəz edin.
@@ -1007,18 +1007,18 @@ Bu nöqtədə, Board komponentinə yalnız `renderSquare` və `render` funkisyal
 
 ### Keçmiş Hərəkətləri Göstərmək {#showing-the-past-moves}
 
-Biz "X O oyununun" tarixçəsinin saxladığımızdan, biz indi gedişlərin siyahısını oyunçuya göstərə bilərik.
+Biz "X O oyununun" tarixçəsini saxladığımızdan, biz indi gedişlərin siyahısını oyunçuya göstərə bilərik.
 
-Biz React elementlərinin 1ci klas Javascript obyetkləri olduğunu və bu obyektərin applikasiyada fərqli yerlərə göndərilə bildiyini öyrəndik. Bir neçə elementi render etmək üçün, biz React elementlərinin massivindən istifadə edə bilərik.
+Biz React elementlərinin 1-ci klas Javascript obyetkləri olduğunu və bu obyektərin applikasiyada fərqli yerlərə göndərilə bildiyini öyrəndik. Bir neçə elementi render etmək üçün, biz React elementlərinin massivindən istifadə edə bilərik.
 
-JavaScriptdə, massivlərdə məlumatları başqa məlumatlara uzlaşdırmaq üçün [`map()` funskiyası var](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Məsələn:
+JavaScriptdə massivlərdə məlumatları başqa məlumatlara uzlaşdırmaq üçün [`map()` funskiyası var](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Məsələn:
 
 ```js
 const numbers = [1, 2, 3];
 const doubled = numbers.map(x => x * 2); // [2, 4, 6]
 ``` 
 
-`map` funskiyasından istifadə edərək, biz gedişlərin tarixçəsini ekranda düməyəri göstərən React elementlərinə uzlaşdırıb, keçmiş gedişlərə "tullanmaq" üçün düymələr siyahısı göstərə bilərik
+`map` funskiyasından istifadə edərək, biz gedişlərin tarixçəsini ekranda düymələri göstərən React elementlərinə uzlaşdırıb, keçmiş gedişlərə "tullanmaq" üçün düymələr siyahısını göstərə bilərik.
 
 Gəlin Game-in `render funskiyasında `history`-nin üzərindən `map` edək:
 
@@ -1067,14 +1067,14 @@ Gəlin Game-in `render funskiyasında `history`-nin üzərindən `map` edək:
 
 "X O oyununun" tarixində olan bütün gedişlər üçün biz içərisində düymə `<button>` olan siyahı bəndi `<li>` yaradırıq. Düymənin `onClick` işləyicisi `this.jumpTo()` adlanan funskiyanı çağırır. Biz `jumpTo` funskiyasını hələki tətbiq etməmişik. İndi, biz oyunda baş vermiş bütün gedişlərin siyahısını və developer alətləri konsolunda aşağıdakı xəbərdarlığı görməliyik:
 
->  Warning:
->  Each child in an array or iterator should have a unique "key" prop. Check the render method of "Game".
+>  Xəbərdarlıq:
+>  Massiv və ya iteratorda hər bir uşağın unikal "key" propu olmalıdır. "Game" komponentinin render funksiyasına baxın.
 
-Gəlin yuxarıdalı xəbərdarlığın nə olduğunu müzakirə edək.
+Gəlin yuxarıdakı xəbərdarlığın nə olduğunu müzakirə edək.
 
-### Açarı Seçmək {#picking-a-key}
+### Açarın Seçilməsi {#picking-a-key}
 
-Siyahı render etdikdə, React hər render olunmuş siyahı bəndi haqqında məlumat saxlayır. Siyahı yeniləndikdə React nəyin dəyişdiyini müəyyən etməlidir. Biz siyahı bəndlərinə yenisini əlavə edə, bəndi silə, bəndlərinin yerini dəyişə, və ya list bəndləri yeniləyə bilərik.
+Siyahı render etdikdə, React hər render olunmuş siyahı bəndi haqqında məlumat saxlayır. Siyahı yeniləndikdə React nəyin dəyişdiyini müəyyən etməlidir. Biz siyahı bəndlərinə yenisini əlavə edə, bəndi silə, bəndlərinin yerini dəyişə və ya list bəndləri yeniləyə bilərik.
 
 Aşağıdakından
 
@@ -1093,7 +1093,7 @@ aşağıdakına
 
 keçidi fikirləşin.
 
-Sayın çoxalmağından əlavə, bunu oxuyan insan, bizim Aydan ilə Elnurun sıralamasının dəyişdiyini, və Ayselin Aydan ilə Elnurun arasına əlavə edildiyini deyə bilər. Lakin, React bir kompyuter proqramı olduğundan bizim ne etmək istədiyimi bilmir. React-in bizim niyyətimizi bilmədiyi üçün, biz hər siyahı bəndinə, qonşularından fərqləndirmək üçün, *açar* parametri ilə təyin etməliyik. Bir seçim `aydan`, `elnur`, və `aysel` sətirlərini açar kimi işlətməkdir. Əgər siz məlumatları kənar bir məlumat bazasından oxuyursunuzsa, Aydan, Elnur, və Ayselin məlumat bazasında olan IDlərini açar kimi işlətmək olar.
+Sayın çoxalmağından əlavə, bunu oxuyan insan, bizim Aydan ilə Elnurun sıralamasının dəyişdiyini, və Ayselin Aydan ilə Elnurun arasına əlavə edildiyini deyə bilər. Lakin, React bir kompyuter proqramı olduğundan bizim nə etmək istədiyimizi bilmir. React-in bizim niyyətimizi bilmədiyi üçün, biz hər siyahı bəndinə, qonşularından fərqləndirmək üçün, *açar* parametri ilə təyin etməliyik. Bir seçim `aydan`, `elnur`, və `aysel` sətirlərini açar kimi işlətməkdir. Əgər siz məlumatları kənar bir məlumat bazasından oxuyursunuzsa, Aydan, Elnur, və Ayselin məlumat bazasında olan IDlərini açar kimi işlətmək olar.
 
 ```html
 <li key={user.id}>{user.name}: {user.taskCount} tapşırıq qalıb</li>
@@ -1101,17 +1101,17 @@ Sayın çoxalmağından əlavə, bunu oxuyan insan, bizim Aydan ilə Elnurun sı
 
 When a list is re-rendered, React takes each list item's key and searches the previous list's items for a matching key. If the current list has a key that didn't exist before, React creates a component. If the current list is missing a key that existed in the previous list, React destroys the previous component. If two keys match, the corresponding component is moved. Keys tell React about the identity of each component which allows React to maintain state between re-renders. If a component's key changes, the component will be destroyed and re-created with a new state.
 
-`key` React-də xüsusi və reservlənmiş parametrdir (daha təkminli xüsusiyyə olan `ref` ilə birlikdə). Element yarandığı zaman React `key` parametrini çıxarır və bu açarı birbaşa qaytarılan elementdə saxlayır. `key`-in `props`-a aid olduğu görünsə belə, `key`, `this.props.key` ilə çağrıla bilməz. React avtomatik olaraq `key`-dən istifadə edərək hansı komponentin yenilənəcəyinə qərar verir. Komponent öz `key`-ini soruşa bilməz.
+`key` React-də xüsusi və reservlənmiş parametrdir (daha təkminli xüsusiyyət olan `ref` ilə birlikdə). Element yarandığı zaman React `key` parametrini çıxarır və bu açarı birbaşa qaytarılan elementdə saxlayır. `key`-in `props`-a aid olduğu görünsə belə, `key`, `this.props.key` ilə çağrıla bilməz. React avtomatik olaraq `key`-dən istifadə edərək hansı komponentin yenilənəcəyinə qərar verir. Komponent öz `key`-ini soruşa bilməz.
 
-**Dinamik siyahılar yaratdəğınız zaman düzgün açarların təyin edilməsi güclü şəkildə tövsiyyə olunur.** Əgər sizdə lazımı açar yoxdursa, sizin açar olana kimi məlumatınızın strukturunu dəyişməniz lazım ola bilər.
+**Dinamik siyahılar yaratdığınız zaman düzgün açarların təyin edilməsi ciddi şəkildə tövsiyyə olunur.** Əgər sizdə lazımi açar yoxdursa, sizin açar olana kimi məlumatınızın strukturunu dəyişməniz lazım ola bilər.
 
-Əgər açar təyin edilməyibsə, React sizə xəbərdarlıq edib, massivin indeksini açar kimi işlədəcək. Massiv indeksini açar kimi işlətdikdə, siyahıdakı elementlərin yerini dəyişmək və ya elementləri əlavə edib/sildmək problematik olur. Açıq aydın `key={i}` göndərildikdə xəbərdarlıq susdurulur amma massiv indeksini göndərmək ilə olan problemlər yenədə qalır. Bu səbəbdən, bir çox halda belə formada xəbərdarlığı susdurmaq tövsiyyə edilmir.
+Əgər açar təyin edilməyibsə, React sizə xəbərdarlıq edib, massivin indeksini açar kimi işlədəcək. Massiv indeksini açar kimi işlətdikdə, siyahıdakı elementlərin yerini dəyişmək və ya elementləri əlavə edib/silmək problemli olur. Açıq-aydın `key={i}` göndərildikdə xəbərdarlıq susdurulur amma massiv indeksini göndərmək ilə olan problemlər yenədə qalır. Bu səbəbdən, bir çox halda belə formada xəbərdarlığı susdurmaq tövsiyyə edilmir.
 
 Açarlar qlobal formada unikal olmamalıdırlar. Yalnız komponentlər və qonşular arası unikal olmalıdırlar.
 
 ### Zaman Səyahətini Tətbiq Etmək {#implementing-time-travel}
 
-"X O oyununun" tarixində, hər bir keçmiş gedişin unkial ID-si var: gedişin ardıllıq rəqəmidir. Bu gedişlərin yeri heç vaxt dəyişmir, silinmir, və ya ortadan gediş əlavə olunmur. Bu səbəbdən, gedişin indeksini açar kimi işlətmək təhlükəsizdir.
+"X O oyununun" tarixində, hər bir keçmiş gedişin unkial ID-si var: gedişin ardıcıllıq rəqəmi. Bu gedişlərin yeri heç vaxt dəyişmir, silinmir, və ya ortadan gediş əlavə olunmur. Bu səbəbdən, gedişin indeksini açar kimi işlətmək təhlükəsizdir.
 
 Game komponentinin `render` funskiyasında, açarı `<li key={move}>` formada yaza bilərik. React-in açarlar haqqında olan xəbərdarlığı itəcək:
 
@@ -1167,7 +1167,7 @@ Sonra, biz `stepNumber`-i yeniləmək üçün Game komponentində `jumpTo` funsk
   }
 ```
 
-Biz həmçinin Game-in `handleClick` funskiytasınıda kiçik dəyişikliklər edəcəyik.
+Biz həmçinin Game-in `handleClick` funksiyasında kiçik dəyişikliklər edəcəyik.
 
 Əlavə etdiyimiz `stepNumber` state-i istifadəçiyə gedişi göstərir. Yeni gediş etdikdə isə, biz `stepNumber`-i yeniləmək üçün `stepNumber: history.length`-nu `this.setState` funskiyasının arqumentinin bir hissəsi kimi əlavə etməliyik. Bu biz yeni gediş əlavə etdikdə eyni gedişi göstərməyin qabağını alır.
 
@@ -1216,17 +1216,17 @@ Təbriklər! Siz aşağıdakı xüsusiyyətləri olan "X O oyunu" yaratdınız:
 * Oyunu oynadığınız müddətdə bütün tarixini saxlayır,
 * Oyunçulara oyunun tarixinin icmalını və keçmiş versiyalarını görməyə imkan verir.
 
-Arzulayırıqki sizdə React-in işləməyi ilə bağlı fikir yarandı.
+Arzulayırıq ki, siz də React-in işləməyi ilə bağlı fikir yarandı.
 
 Son nəticəni buradan göndərə bilərsiniz: **[Son Nəticə](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**.
 
-Əgər sizdə əlavə vaxt varsa və ya yeni React bacarıqlarını möhkəmləndirmək istəyirsinizsə, aşağıda bu oyunu təkminləşdirmək üçün bəzi ideayalar var (çətinliyi artmaq sıralaması ile):
+Əgər sizdə əlavə vaxt varsa və ya yeni React bacarıqlarını möhkəmləndirmək istəyirsinizsə, aşağıda bu oyunu təkminləşdirmək üçün bəzi ideayalar var (çətinliyin artırılması sırası ilə):
 
 1. Hər gedişin yerini gediş tarixi siyahısında (sütun, sıra) formatında göstərmək.
 2. Seçilmiş gediş siyahısını qalın şrift ilə göstər.
 3. Board-dakı kvadratları hardkod etmək əvəzinə iki sikl ilə yaradın.
 4. Gedişləri artan və ya azalan sıralama ilə sıralamaq üçün düymə əlavə edin.
-5. Əgər kimsə aqlib olubsa, oyunu qazanan üç kvadratı vurğulayın.
-6. Əgər heç kəs qalib gəlmirsə, heç heçə olduğunu göstərin.
+5. Əgər kimsə qalib olubsa, oyunu qazanan üç kvadratı vurğulayın.
+6. Əgər heç kəs qalib gəlmirsə, heç-heçə olduğunu göstərin.
 
-Bu dərslik zamanında, biz React-in konsepsiyalarınına (elementlər, proplar, state, və komponentlər) toxunun. Bu mövzular ilə bağlı daha ətraflı izahat üçün, [sənədlərin qalanını](/docs/hello-world.html) oxuyun. Komponentlərin müəyyənləşdirilməsi haqqında daha ətraflı məlumat almaq üçün, [`React.Component` API Arayışını](/docs/react-component.html) oxuyun.
+Bu dərslik zamanı biz React-in konsepsiyalarını (elementlər, proplar, state, və komponentlər) nəzərdək keçirdik. Bu mövzular ilə bağlı daha ətraflı izahat üçün, [qalan sənədləri](/docs/hello-world.html) oxuyun. Komponentlərin müəyyənləşdirilməsi haqqında daha ətraflı məlumat almaq üçün, [`React.Component` API Arayışını](/docs/react-component.html) oxuyun.

From 9b45c10eeaaec56802cf10d5300fbffecca0f17d Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Tue, 5 Mar 2019 20:55:51 +0400
Subject: [PATCH 107/118] Fix format issues

---
 content/tutorial/tutorial.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index f4133973d..36b141073 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -86,7 +86,6 @@ npx create-react-app my-app
 >
 > **Bütün `src` direktoriyasını yox, yalnız daxilindəki faylları silin.**. Biz standart faylları bu layihədəki nümunələr ilə əvəz edəcəyik.
 
-
 ```bash
 cd my-app
 cd src
@@ -232,7 +231,6 @@ Gəlin, Square komponentinə tıklandığı zaman kvadratı "X" ilə dolduraq.
 
 İlk öncə Square komponentindəki `render()` funskiyasında olan "button" təqini aşağıdakı koda çevirin:
 
-
 ```javascript{4}
 class Square extends React.Component {
   render() {
@@ -1018,7 +1016,7 @@ JavaScriptdə massivlərdə məlumatları başqa məlumatlara uzlaşdırmaq üç
 ```js
 const numbers = [1, 2, 3];
 const doubled = numbers.map(x => x * 2); // [2, 4, 6]
-```
+``` 
 
 `map` funskiyasından istifadə edərək, biz gedişlərin tarixçəsini ekranda düymələri göstərən React elementlərinə uzlaşdırıb, keçmiş gedişlərə "tullanmaq" üçün düymələr siyahısını göstərə bilərik.
 

From cda11db7ebf2b1a2f504cf7dc460076f48d16322 Mon Sep 17 00:00:00 2001
From: Arvindeva Wibisono <45450464+arvindeva@users.noreply.github.com>
Date: Wed, 6 Mar 2019 02:34:38 +0700
Subject: [PATCH 108/118] Fixed typo (#1786)

'minifed' -> 'minified'
---
 content/docs/add-react-to-a-website.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md
index 6a668e0a1..a97b44d45 100644
--- a/content/docs/add-react-to-a-website.md
+++ b/content/docs/add-react-to-a-website.md
@@ -110,7 +110,7 @@ Commonly, you might want to display React components in multiple places on the H
 
 ### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production}
 
-Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users.
+Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users.
 
 If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`:
 

From 2982cd93f2d76ad6216dd9aa3ec30905781a79dd Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Wed, 6 Mar 2019 00:15:18 +0400
Subject: [PATCH 109/118] Translate untranslated content in Tutorial

---
 content/tutorial/tutorial.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 36b141073..d1cfd8a7a 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -1099,7 +1099,7 @@ Sayın çoxalmağından əlavə, bunu oxuyan insan, bizim Aydan ilə Elnurun sı
 <li key={user.id}>{user.name}: {user.taskCount} tapşırıq qalıb</li>
 ```
 
-When a list is re-rendered, React takes each list item's key and searches the previous list's items for a matching key. If the current list has a key that didn't exist before, React creates a component. If the current list is missing a key that existed in the previous list, React destroys the previous component. If two keys match, the corresponding component is moved. Keys tell React about the identity of each component which allows React to maintain state between re-renders. If a component's key changes, the component will be destroyed and re-created with a new state.
+Siyahı yenidən render etdikdə, React hər siyahı elementinin açarını götürür və keçmiş siyahıda eyni açarlı elementləri axtarır. Əgər cari siyahıda olan açar əvvəl mövcud deyildisə, React yeni komponent yaradır. Əgər keçmiş siyahıda olan açar cari siyahıda yoxdursa, React əvvəlki komponenti dağıdır. Əgər açarlar eynidirsə, açarı saxlayan element yerini dəyişir. Açarlar React-ə hər komponentin şəxsiyyəti haqqında məlumat verir və React-ə yenidən renderlər arası state-i saxlayır. Əgər komponentin açarı dəyişirsə, komponent dağılıb və yeni state ilə düzəlir.
 
 `key` React-də xüsusi və reservlənmiş parametrdir (daha təkminli xüsusiyyət olan `ref` ilə birlikdə). Element yarandığı zaman React `key` parametrini çıxarır və bu açarı birbaşa qaytarılan elementdə saxlayır. `key`-in `props`-a aid olduğu görünsə belə, `key`, `this.props.key` ilə çağrıla bilməz. React avtomatik olaraq `key`-dən istifadə edərək hansı komponentin yenilənəcəyinə qərar verir. Komponent öz `key`-ini soruşa bilməz.
 

From 0a9cc79310a19196ac597910067d41e484777519 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Wed, 6 Mar 2019 00:18:02 +0400
Subject: [PATCH 110/118] Fix CRA Code Splitting URL

---
 content/docs/code-splitting.md | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 3cae38479..64440168d 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -79,14 +79,7 @@ import("./math").then(math => {
 > [təklifi fazasındadır](https://github.com/tc39/proposal-dynamic-import) və hələki dil standartının 
 > bir hissəsi deyil. Bu təklif yaxın gələcəkdə standarta qəbul ediləcək.
 
-<<<<<<< HEAD
-Webpack bu sintaksisi görən kimi, sizin applikasiyanızın kodunu avtomatik parçalayacaq. Əgər siz Create React App işlədirsinizsə, bu xüsusiyyət artiq sizin üçün konfiqurasiya olunub və siz dərhal bunu [işlədə bilərsiniz](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting). Bu xusiyyəti həmçinin [Next.js](https://github.com/zeit/next.js/#dynamic-import) də dəstəkləyir.
-=======
-When Webpack comes across this syntax, it automatically starts code-splitting
-your app. If you're using Create React App, this is already configured for you
-and you can [start using it](https://facebook.github.io/create-react-app/docs/code-splitting) immediately. It's also supported
-out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
->>>>>>> 8803c6375b153af39a850822d844db94ea4c9b0a
+Webpack bu sintaksisi görən kimi, sizin applikasiyanızın kodunu avtomatik parçalayacaq. Əgər siz Create React App işlədirsinizsə, bu xüsusiyyət artiq sizin üçün konfiqurasiya olunub və siz dərhal bunu [işlədə bilərsiniz](https://facebook.github.io/create-react-app/docs/code-splitting). Bu xusiyyəti həmçinin [Next.js](https://github.com/zeit/next.js/#dynamic-import) də dəstəkləyir.
 
 Əgər Webpack-i özünüz quraşdırırsınızsa, Webpack-in [kod parçalaması haqqında təlimatını](https://webpack.js.org/guides/code-splitting/) oxumaq sizə lazım olacaq. Sizin Webpack konfiqurasiyanız təxminən [belə bir formada](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269) görünəcək.
 

From 5437c3ff51d686ad14d1540cff053fe704b2d3c5 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Wed, 6 Mar 2019 00:34:37 +0400
Subject: [PATCH 111/118] Translate tutorial according to latest sync @8803c637

---
 content/tutorial/tutorial.md | 58 ++++++++++++------------------------
 1 file changed, 19 insertions(+), 39 deletions(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index d1cfd8a7a..bd560f880 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -31,8 +31,6 @@ Bu dərslik bir neçə bölməyə bölünmüşdür:
 
 Bu dərslikdən dəyər almaq üçün bütün bölmələri bir dəfəyə tamamlamaq vacib deyil. Çalışın mümkün qədər çox bölmədən keçəsiniz -- hətta bir və ya iki bölmə olsa belə.
 
-Dərslikdə irəliləyərkən kodları copy-paste etmək normaldır amma biz kodları əl ilə yazmağınızı tövsiyyə edirik. Bu sizə əzələ yaddaşı yaratmağa və daha güclü anlamağa kömək edəcək.
-
 ### Biz nə düzəldirik? {#what-are-we-building}
 
 Bu dərslikdə biz React ilə interaktiv "X O oyununu" düzəltməyi göstərəcəyik.
@@ -190,6 +188,8 @@ Koda yaxından baxdığınızda, üç React komponentin olacağını görəcəks
 
 Gəlin Board komponentindən Square komponentinə məlumat göndərək.
 
+Dərslikdə irəliləyərkən kodları copy-paste etmək normaldır amma biz kodları əl ilə yazmağınızı tövsiyyə edirik. Bu sizə əzələ yaddaşı yaratmağa və daha güclü anlamağa kömək edəcək.
+
 Board-un `renderSquare` funskiyasında, Square-ə `value` propu əlavə edin:
 
 ```js{3}
@@ -243,7 +243,7 @@ class Square extends React.Component {
 }
 ```
 
-Əgər indi biz Square-ə tıklasaq, brauzerdə "click" yazısı ilə xəbərdarlıq alacağıq.
+Əgər indi siz Square-ə tıklasanız, brauzerdə "click" yazısı ilə xəbərdarlıq alacaqsınız.
 
 >Qeyd
 >
@@ -261,7 +261,7 @@ class Square extends React.Component {
 >}
 >```
 >
->Diqqət edin ki, biz `onClick` propuna *funskiya* göndəririk: `onClick={() => alert('click')}`. Bu xəbərdarlığın yalnız düymənin klikləndiyi vaxt çıxmasını təmin edir. `() =>`-nu yaddan çıxarıb birbaşa `onClick={alert('click')}` yazmaq tez-tez edilən bir səhvlərdən biridir. Səhv formada yazdıqda, komponentin hər renderindən sonra (məsələn, dəyişiklikdən sonra baş verən yenidən render) xəbərdarlıq göstəriləcək (tıklamaqdan asılı olmayaraq).
+>Diqqət edin ki, biz `onClick` propuna *funskiya* göndəririk: `onClick={() => alert('click')}`. React, bu xəbərdarlığın yalnız düymənin klikləndiyi vaxt çıxmasını təmin edir. `() =>`-nu yaddan çıxarıb birbaşa `onClick={alert('click')}` yazmaq tez-tez edilən bir səhvlərdən biridir. Səhv formada yazdıqda, komponentin hər renderindən sonra (məsələn, dəyişiklikdən sonra baş verən yenidən render) xəbərdarlıq göstəriləcək (tıklamaqdan asılı olmayaraq).
 
 Sıradakı addımda, biz Square komponentinin tıklandığını yadda saxlamaq və "X" işarəsi ilə doldurmaq istəyirik. Komponentlər "yadda saxlamaq" üçün **state-dən** istifadə edirlər.
 
@@ -295,7 +295,7 @@ class Square extends React.Component {
 Biz Square komponentinin cari state-inin dəyərini tıklamadan sonra göstərmək üçün, Square-in `render` funskiyasından istifadə edəcəyik:
 
 * `<button>` təqində `this.props.value`-nu `this.state.value` ilə əvəz et.
-* `() => alert()` hadisə işləyicisini `() => this.setState({value: 'X'})` ilə əvəz et.
+* `onClick={...}` hadisə işləyicisini `onClick={() => this.setState({value: 'X'})}` ilə əvəz et.
 * Oxunaqlığı artırmaq üçün `className` və `onClick` proplarını ayrı sətrlərdə yazın.
 
 Bu dəyişikliklərdən sonra Square-in `render` funskiyasından qaytarılan `<button>` təqi aşağıdakı koda oxşamalıdır:
@@ -357,7 +357,9 @@ Biz Board komponentinin hər Square komponentdən Square-in state-ini istəməsi
 
 **Çoxlu uşaqdan məlumat yığması və ya iki uşaq komponentin bir-biri ilə kommunikasiya etməsi üçün paylaşılan state-i valideyn komponentində bəyan edin. Valideyn komponent bu state-i  uşaq komponentlərə proplar vasisəti ilə göndərə bilər. Bu metod uşaq komponentlər və valideyn komponentlər arasındakı məlumatları sinxron saxlayır.**
 
-React komponentlərini refaktor etdikdə, state-i valideyn komponentə qaldırmaq çox işlənən praktikadır. Gəlin bu metodu sınayaq. Biz Board komponentinə konstruktor əlavə edib Board-un başlanğıc state-inə 9 ədəd `null` olan massiv əlavə edəcəyik. Bu 9 ədəd `null` 9 ədəd kvadrat üçündür:
+React komponentlərini refaktor etdikdə, state-i valideyn komponentə qaldırmaq çox işlənən praktikadır. Gəlin bu metodu sınayaq.
+
+Board komponentinə konstruktor əlavə edərək Board-un başlanğıc state-inə 9 ədəd `null` olan massiv əlavə edin. Bu 9 ədəd `null` 9 ədəd kvadrat üçündür:
 
 ```javascript{2-7}
 class Board extends React.Component {
@@ -371,35 +373,9 @@ class Board extends React.Component {
   renderSquare(i) {
     return <Square value={i} />;
   }
-
-  render() {
-    const status = 'Sonrakı oyunçu: X';
-
-    return (
-      <div>
-        <div className="status">{status}</div>
-        <div className="board-row">
-          {this.renderSquare(0)}
-          {this.renderSquare(1)}
-          {this.renderSquare(2)}
-        </div>
-        <div className="board-row">
-          {this.renderSquare(3)}
-          {this.renderSquare(4)}
-          {this.renderSquare(5)}
-        </div>
-        <div className="board-row">
-          {this.renderSquare(6)}
-          {this.renderSquare(7)}
-          {this.renderSquare(8)}
-        </div>
-      </div>
-    );
-  }
-}
 ```
 
-Kvadratları doldurduqda, oyun taxtasının vəziyyəti belə formada olacaq:
+Kvadratları doldurduqda, oyun taxtasının vəziyyəti (`this.state.squares` massivi) belə formada olacaq:
 
 ```javascript
 [
@@ -433,7 +409,7 @@ Biz yenidən propu göndərmək mexanizmindən istifadə edəcəyik. Board kompo
 
 İndi biz Square tıklananda nə olacağını dəyişməliyik. Board komponenti kvadratların dəyərlərini özündə saxlayır. Bu səbəbdən biz Square komponentinə Board-un state-ini dəyişməsini bildirməliyik. State, yarandığı komponentə (bu misalda Board komponentinə) privat olduğundan, biz Square komponentindən Board-un state-ini dəyişə bilmirik.
 
-Board-un state-inin privatlığının saxlanması üçün biz Board-dan Square-ə funskiya göndərəcəyik. Bu funskiya Square tıklananda çağrılacaq. Board-un `renderSquare` funskiyasını aşağıdakına dəyişəcəyik:
+Bunun əvəzinə, biz Board-dan Sqquare-ə funksiya göndərəcəyik. Bu funskiya Square tıklananda çağrılacaq. Board-un `renderSquare` funskiyasını aşağıdakına dəyişəcəyik:
 
 ```javascript{5}
   renderSquare(i) {
@@ -479,11 +455,11 @@ Square tıklandıqda Board-un təmin etdiyi `onClick` funksiyası çağrılır.
 2. Düymə tıklandığı zaman, React, Square-in `render()` funskiyasında olan `onClick` hadisə işləyicisini çağırır.
 3. Bu hadisə işləyicisi `this.props.onClick()` funskiyasını çağırır. Square-in `onClick` propu Board tərəfindən müəyyənləşdirilib.
 4. Board-un Square-ə `onClick={() => this.handleClick(i)}` göndərməsindən, Square tıklandığında `this.handleClick(i)` funskiyasını çağırır.
-5. Biz `handleClick()` funksiyasını hələ tətbiq etmədiyimizdən bizim kod çökür.
+5. Biz `handleClick()` funksiyasını hələ tətbiq etmədiyimizdən bizim kod çökür. Əgər siz indi düyməni tıklasanız, sizdə qırmızı rəngdə xəta səhifəsi "this.handleClick is not a function" formasında çıxacaq.
 
 >Qeyd
 >
->DOM `<button>` elementinin qurulmuş komponent olduğundan, bu elementin `onClick` atributunun React-ə xüsusi mənası var. Square kimi xüsusi komponentlər üçün bu atributu adlandırmaq sizdən asılıdır. Biz Square-in `onClick` propunu və ya Board-un `handleClick` funskiyasını başqa cür də adlandıra bilərdik. React-də hadisələr üçün `on[Event]` və hadisə işləyiciləri üçün `handle[Event]` adları işlətmək adətdir.
+>DOM `<button>` elementinin qurulmuş komponent olduğundan, bu elementin `onClick` atributunun React-ə xüsusi mənası var. Square kimi xüsusi komponentlər üçün bu atributu adlandırmaq sizdən asılıdır. Biz Square-in `onClick` propunu və ya Board-un `handleClick` funskiyasını başqa cür də adlandıra bilərik və kod eyni formada işləyəcək. React-də hadisələr üçün `on[Event]` və hadisə işləyiciləri üçün `handle[Event]` adları işlətmək adətdir.
 
 Square-i tıkladıqda, `handleClick` funskiyasının olmadığından bizə xəta gələcək. Gəlin indi bu funksiyanı Board klasında tətbiq edək:
 
@@ -612,7 +588,7 @@ Biz `this.props`-u işlətdiyimiz hər iki yerdə `props` ilə əvəz etdik.
 
 >Qeyd
 >
->Biz Square-i funksional komponentə çevirdikdə, həmçinin `onClick={() => this.props.onClick()}` propunu daha qısa `onClick={props.onClick}`-a (**Hər iki** tərəfdəki mötərizələrin olmamasını qeyd edin) çevirdik. Klas olduqda, biz düzgün `this` işlədə bilmək üçün ox funskiyası işlətmişdik. Amma funskional komponentdə `this` bizə lazım deyil.
+>Biz Square-i funksional komponentə çevirdikdə, həmçinin `onClick={() => this.props.onClick()}` propunu daha qısa `onClick={props.onClick}`-a (**Hər iki** tərəfdəki mötərizələrin olmamasını qeyd edin) çevirdik.
 
 ### Sıranı Gözləmək {#taking-turns}
 
@@ -644,7 +620,9 @@ Hər zaman oyunçu hərəkət etdikdə, `xIsNext` (bulin) kimin sonrakı addım
   }
 ```
 
-Bu dəyişiklikdə, "X"-lər və "O"-lar sıralarını gözləyə bilərlər. Əlavə olaraq Board-un `render` funksiyasındakı "status" mətnində kimin sonrakı addımı atacağını da göstərək:
+Bu dəyişiklikdə, "X"-lər və "O"-lar sıralarını gözləyə bilərlər.
+
+Əlavə olaraq Board-un `render` funksiyasındakı "status" mətnində kimin sonrakı addımı atacağını da göstərək:
 
 ```javascript{2}
   render() {
@@ -715,7 +693,7 @@ class Board extends React.Component {
 
 ### Qalibi Bəyan Etmək {#declaring-a-winner}
 
-Biz indi kimin sonrakı addımı atacağını bildiyimizdən, gəlin oyunun qalibini və ya oyunda heç bir gedişin qalmadığını göstərək. Qalibi tapmaq üçün aşağıdakı köməkçi funskiyanı faylın sonuna əlavə edə bilərik:
+Biz indi kimin sonrakı addımı atacağını bildiyimizdən, gəlin oyunun qalibini və ya oyunda heç bir gedişin qalmadığını göstərək. Qalibi tapmaq üçün aşağıdakı köməkçi funskiyanı faylın sonuna əlavə edin:
 
 ```javascript
 function calculateWinner(squares) {
@@ -739,6 +717,8 @@ function calculateWinner(squares) {
 }
 ```
 
+9 kvadratdan ibarət olan massiv verildikdə, bu funskiya qalibi müəyyənləşdirib, "X", "O" və ya "null" qaytaracaq.
+
 Biz Board-un `render` funskiyasında oyunçunun qazandığını yoxlamaq üçün `calculateWinner(squares)` funskiyasını çağıracağıq. Əgər oyunçu qalib olubsa, biz "Qalib: X" və ya "Qalib: O" formalı mətn göstərəcəyik. Board-un `render` funskiyasındakı `status`-u aşağıdakı formada dəyişəcəyik:
 
 ```javascript{2-8}

From fbe2b00ed7380343ec3fafcf91c12f23342b2f09 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <gasim@appristas.io>
Date: Wed, 6 Mar 2019 00:39:08 +0400
Subject: [PATCH 112/118] Fix accidental change in "Picking a Key" translation

---
 content/tutorial/tutorial.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index bd560f880..cdb39b0d8 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -1052,7 +1052,7 @@ Gəlin Game-in `render funskiyasında `history`-nin üzərindən `map` edək:
 
 Gəlin yuxarıdakı xəbərdarlığın nə olduğunu müzakirə edək.
 
-### Açarın Seçilməsi {#picking-a-key}
+### Açarı Seçmək {#picking-a-key}
 
 Siyahı render etdikdə, React hər render olunmuş siyahı bəndi haqqında məlumat saxlayır. Siyahı yeniləndikdə React nəyin dəyişdiyini müəyyən etməlidir. Biz siyahı bəndlərinə yenisini əlavə edə, bəndi silə, bəndlərinin yerini dəyişə və ya list bəndləri yeniləyə bilərik.
 

From e81a451424cbf267e0814c0ba76314c8cdb08018 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 5 Mar 2019 15:20:19 -0800
Subject: [PATCH 113/118] 16.8.3 -> 16.8.4

---
 src/site-constants.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/site-constants.js b/src/site-constants.js
index 2dc51fadc..f26103279 100644
--- a/src/site-constants.js
+++ b/src/site-constants.js
@@ -8,7 +8,7 @@
 // NOTE: We can't just use `location.toString()` because when we are rendering
 // the SSR part in node.js we won't have a proper location.
 const urlRoot = 'https://reactjs.org';
-const version = '16.8.3';
+const version = '16.8.4';
 const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js';
 
 export {babelURL, urlRoot, version};

From e4015f32c557ce8967de8072b5bc3f297d0d3c79 Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Tue, 5 Mar 2019 15:47:18 -0800
Subject: [PATCH 114/118] Update languages.yml (#1791)

* French is at 100% core pages!
* Added Swedish
---
 content/languages.yml | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/content/languages.yml b/content/languages.yml
index ee7aa00c0..ff0be2c1d 100644
--- a/content/languages.yml
+++ b/content/languages.yml
@@ -42,7 +42,7 @@
 - name: French
   translated_name: Français
   code: fr
-  status: 1
+  status: 2
 - name: Gujarati
   translated_name: ગુજરાતી
   code: gu
@@ -123,6 +123,9 @@
   translated_name: සිංහල
   code: si
   status: 0
+- name: Swedish
+  translated_name: Svenska
+  code: sv
 - name: Tamil
   translated_name: தமிழ்
   code: ta
@@ -158,4 +161,4 @@
 - name: Traditional Chinese
   translated_name: 繁體中文
   code: zh-hant
-  status: 0
\ No newline at end of file
+  status: 0

From b50fe64c1e88489022eddf2cfff0995778827f84 Mon Sep 17 00:00:00 2001
From: Farhad Yasir <farhad.yasir.nb@gmail.com>
Date: Thu, 7 Mar 2019 06:31:15 +1100
Subject: [PATCH 115/118] fix(unicode-to-char): Replaced other languages
 unicode to text (#1780)

* fix(unicode-to-char): Replaced other languages unicode to text

* fix(unicode-to-char): run prettier to fix lint error

* feat(unicode-to-char): modified the replace function with p1 parameter
---
 src/components/CodeEditor/CodeEditor.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 39ebe8f1e..de8235438 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -11,6 +11,12 @@ import {LiveEditor, LiveProvider} from 'react-live';
 import {colors, media} from 'theme';
 import MetaTitle from 'templates/components/MetaTitle';
 
+// Replace unicode to text for other languages
+const unicodeToText = text =>
+  text.replace(/\\u([\dA-F]{4})/gi, (_, p1) =>
+    String.fromCharCode(parseInt(p1, 16)),
+  );
+
 const compileES5 = (
   code, // eslint-disable-next-line no-undef
 ) => Babel.transform(code, {presets: ['es2015', 'react']}).code;
@@ -271,7 +277,7 @@ class CodeEditor extends Component {
 
       if (showJSX) {
         newState.code = code;
-        newState.compiledES6 = compileES6(code);
+        newState.compiledES6 = unicodeToText(compileES6(code));
       } else {
         newState.compiledES6 = code;
       }

From acb2fd43308c117fb283ea04a8e00bcc0bc01431 Mon Sep 17 00:00:00 2001
From: lsdsjy <lsdsjy@163.com>
Date: Sat, 9 Mar 2019 16:21:51 +0800
Subject: [PATCH 116/118] Update render-props.md (#1776)

Update React Router render func URL
---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index c9b6f9c04..e1482f491 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -14,7 +14,7 @@ A component with a render prop takes a function that returns a React element and
 )}/>
 ```
 
-Libraries that use render props include [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) and [Downshift](https://github.com/paypal/downshift).
+Libraries that use render props include [React Router](https://reacttraining.com/react-router/web/api/Route/render-func) and [Downshift](https://github.com/paypal/downshift).
 
 In this document, we’ll discuss why render props are useful, and how to write your own.
 

From d6d30b6c352c315577f240d7e18486cbe9690e48 Mon Sep 17 00:00:00 2001
From: Mark Murray <mark@murray.xyz>
Date: Sat, 9 Mar 2019 08:27:44 +0000
Subject: [PATCH 117/118] Rename App class component to Counter (#1739)

---
 content/docs/addons-test-utils.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md
index a6e06e1be..6cf2af081 100644
--- a/content/docs/addons-test-utils.md
+++ b/content/docs/addons-test-utils.md
@@ -53,7 +53,7 @@ To prepare a component for assertions, wrap the code rendering it and performing
 For example, let's say we have this `Counter` component:
 
 ```js
-class App extends React.Component {
+class Counter extends React.Component {
   constructor(props) {
     super(props);
     this.state = {count: 0};

From c0f4b34282a2ce8391121c8cf274a4b6bd7d7c90 Mon Sep 17 00:00:00 2001
From: Luan Ferreira <luanegidioferreira@gmail.com>
Date: Mon, 11 Mar 2019 00:02:34 -0300
Subject: [PATCH 118/118] Fix small typo in blog post (#1803)

---
 content/blog/2019-02-23-is-react-translated-yet.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md
index 78bc49b6e..3ac56a5a4 100644
--- a/content/blog/2019-02-23-is-react-translated-yet.md
+++ b/content/blog/2019-02-23-is-react-translated-yet.md
@@ -43,7 +43,7 @@ We started of with an initial trial period of three languages: Spanish, Japanese
 
 After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://isreacttranslatedyet.com), to track progress on the different translations. We started *10* new translations on our first day alone!
 
-Because of the automation, the rest of the maintance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
+Because of the automation, the rest of the maintenance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
 
 ## The Bot {#the-bot}