From 7a0f3f4364111abd3aa07a9fd096fa85365b7ce6 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Fri, 8 Feb 2019 19:36:57 +0400 Subject: [PATCH 01/13] 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 Date: Fri, 8 Feb 2019 19:50:55 +0400 Subject: [PATCH 02/13] 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 579fe8274bcdea5fb97280674429257fc76e5118 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Fri, 8 Feb 2019 20:35:59 +0400 Subject: [PATCH 03/13] 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!
-Optional: Instructions for following along locally using your preferred text editor +Məcburi Deyil: Üstünlük verdiyiniz kod redaktoru ilə lokal qurulmasının təlimatları -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.
-### 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 e8fda61d4c7377a73ddd15f3f36f66f3ccb31654 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Fri, 8 Feb 2019 22:05:29 +0400 Subject: [PATCH 04/13] 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 (
-

Shopping List for {this.props.name}

+

{this.props.name} üçün alış-veriş siyahısı

  • Instagram
  • WhatsApp
    • @@ -146,14 +146,14 @@ class ShoppingList extends React.Component { } } -// Example usage: +// İşlətmə nümunəsi: ``` -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 `
    ` 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. `
    ` 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 `
    ` and `
  • `. But you can compose and render custom React components too. For example, we can now refer to the whole shopping list by writing ``. 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 (`
    ` və `
  • `) 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 `` 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 615d1f41f820e132f68c6558f2395f2ef60e99f0 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Sat, 9 Feb 2019 18:29:00 +0400 Subject: [PATCH 05/13] 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 (`
    ` və `
  • `) 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 `` 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 ` @@ -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 `
  • ` which contains a button ` @@ -1127,11 +1128,11 @@ In the Game component's `render` method, we can add the key as `
  • ` }); ``` -**[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 2edbcd2d2e08119681f9cc0b7ee9ad9166c5ab3c Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Tue, 5 Mar 2019 20:53:19 +0400 Subject: [PATCH 09/13] 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!
    @@ -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: ``` -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. `
    ` 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. `
    ` 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 (`
    ` və `
  • `) 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 `` 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 (`
    ` və `
  • `) 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ı `` 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 `