From 04aadb94d8d3b4a0ff4dc3e1ce480db571e0a011 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Fri, 25 Oct 2019 15:46:48 +0400 Subject: [PATCH 1/3] Translate State Hook --- content/docs/hooks-state.md | 162 ++++++++++++++++++------------------ content/docs/nav.yml | 6 +- 2 files changed, 84 insertions(+), 84 deletions(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 0b4d15b65..c9932b0f8 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -1,38 +1,38 @@ --- id: hooks-state -title: Using the State Hook +title: State Hookunun İstifadəsi permalink: docs/hooks-state.html next: hooks-effect.html prev: hooks-overview.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*Hooklar* React 16.8-ə əlavə olunan yenilikdir. Hooklar ilə klas yazmadan state və ya digər React xüsusiyyətlərindən istifadə edə bilərsiniz. -The [introduction page](/docs/hooks-intro.html) used this example to get familiar with Hooks: +Hooklar ilə tanış olmaq üçün [giriş səhifəsində](/docs/hooks-intro.html) aşağıdakı nümunədən istifadə edilir: ```js{4-5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // "count" adlı state dəyişəni yaradın const [count, setCount] = useState(0); return (
-

You clicked {count} times

+

{count} dəfə tıklandı

); } ``` -We'll start learning about Hooks by comparing this code to an equivalent class example. +Biz yuxarıdakı nümunəni klas nümunəsi ilə müqayisə edərək Hookları öyrənəcəyik. -## Equivalent Class Example {#equivalent-class-example} +## Ekvivalent Klas Nümunəsi Example {#equivalent-class-example} -If you used classes in React before, this code should look familiar: +React ilə klaslardan istifadə etmisinizsə, aşağıdakı kod sizə tanış gələcək: ```js class Example extends React.Component { @@ -46,9 +46,9 @@ class Example extends React.Component { render() { return (
-

You clicked {this.state.count} times

+

{this.state.count} dəfə tıklandı

); @@ -56,39 +56,39 @@ class Example extends React.Component { } ``` -The state starts as `{ count: 0 }`, and we increment `state.count` when the user clicks a button by calling `this.setState()`. We'll use snippets from this class throughout the page. +State `{ count: 0 }` ilə başlayır. İstifadəçi düyməni tıkladıqda `this.setState()`-dən istifadə edərək `state.count`-un dəyərini artırırıq. Biz bu klasda olan kod parçalarını bu səhifənin sonuna kimi işlədəyəcik. ->Note +>Qeyd > ->You might be wondering why we're using a counter here instead of a more realistic example. This is to help us focus on the API while we're still making our first steps with Hooks. +>Daha realistik nümunə əvəzinə sayğac nümunəsindən niyə istifadə etdiyimiz sizi maraqlandıra bilər. Biz Hooklar ilə ilk addımlar atdığımız üçün bu nümunə ilə daha çox API-a fokuslana bilərik. -## Hooks and Function Components {#hooks-and-function-components} +## Hooklar və Funksiya Komponentləri {#hooks-and-function-components} -As a reminder, function components in React look like this: +React-də funksiya komponentləri aşağıdakı formada yazılır: ```js const Example = (props) => { - // You can use Hooks here! + // Burada Hooklardan istifadə edə bilərsiniz! return
; } ``` -or this: +və ya: ```js function Example(props) { - // You can use Hooks here! + // Burada Hooklardan istifadə edə bilərsiniz! return
; } ``` -You might have previously known these as "stateless components". We're now introducing the ability to use React state from these, so we prefer the name "function components". +Siz bu komponentləri "state-siz komponentlər" kimi tanıyırdınız. Biz, indi bu komponentlərdən React state-ini işlədilməsinə imkan yaratdığımızdan bu komponentləri "funksiya komponentləri" kimi adlandırılmasını üstün tuturuq. -Hooks **don't** work inside classes. But you can use them instead of writing classes. +Hookları klaslar ilə işlətmək **mümkün deyil**. Lakin, Hookları klaslar ilə əvəz etmək mümkündür. -## What's a Hook? {#whats-a-hook} +## Hook nədir? {#whats-a-hook} -Our new example starts by importing the `useState` Hook from React: +Aşağıdakı nümunədə React-dən `useState` hookunu ixdal edirik: ```js{1} import React, { useState } from 'react'; @@ -98,17 +98,17 @@ function Example() { } ``` -**What is a Hook?** A Hook is a special function that lets you "hook into" React features. For example, `useState` is a Hook that lets you add React state to function components. We'll learn other Hooks later. +**Hook nədir?** React xüsusiyyətlərindən istifadə edə bilmək üçün (hook into) təmin olunan xüsusi funksiyalar Hooklar adlanırlar. Məsələn, `useState` funksiyası React state-ini funksiya komponentlərinə əlavə etmək üçün istifadə edilən Hookdur. Digər Hooklar haqqında sonrakı bölmələrdə danışacağıq. -**When would I use a Hook?** If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We're going to do that right now! +**Nə zaman Hook-dan istifadə edim?** Əgər funksiya komponenti yazdıqda bu komponentə state əlavə etmək üçün ilk öncə komponenti klasa çevirmək lazım idi. İndi isə, funksiya komponenti daxilindən Hook istifadə etmək mümkündür. Biz indi bunu edəcəyik! ->Note: +>Qeyd: > ->There are some special rules about where you can and can't use Hooks within a component. We'll learn them in [Rules of Hooks](/docs/hooks-rules.html). +>Komponent daxilində Hookların harada işlədilməsi haqqında bəzi qaydalar var. Bu qaydaları öyrənmək üçün [Hookların Qaydaları](/docs/hooks-rules.html) bölməsinə baxa bilərsiniz. -## Declaring a State Variable {#declaring-a-state-variable} +## State Dəyişəninin Təyin Edilməsi {#declaring-a-state-variable} -In a class, we initialize the `count` state to `0` by setting `this.state` to `{ count: 0 }` in the constructor: +Klas istifadə etdikdə `count` state-inə `0` təyin etmək üçün konstruktorda `this.state` dəyişənini `{ count: 0 }` dəyərinə təyin etmək lazımdır: ```js{4-6} class Example extends React.Component { @@ -120,76 +120,76 @@ class Example extends React.Component { } ``` -In a function component, we have no `this`, so we can't assign or read `this.state`. Instead, we call the `useState` Hook directly inside our component: +Funksiya komponentində isə `this` dəyişənini olmadığından `this.state` dəyərindən istifadə edə bilmirik. Əvəzinə, komponentin daxilindən birbaşa `useState` Hookunu çağıracağıq: ```js{4,5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // "count" adlı state dəyişəni yaradın const [count, setCount] = useState(0); ``` -**What does calling `useState` do?** It declares a "state variable". Our variable is called `count` but we could call it anything else, like `banana`. This is a way to "preserve" some values between the function calls — `useState` is a new way to use the exact same capabilities that `this.state` provides in a class. Normally, variables "disappear" when the function exits but state variables are preserved by React. +**`useState` çağırdıqda nə baş verir?** Bu funksiya "state dəyişəni" yaradır. Bizim dəyişənimiz `count` adlanır. Lakin, siz dəyişəni istədiyiniz kimi adlandıra bilərsiniz (məsələn "banan"). Bu bizə funksiya çağırışları arasında bəzi dəyərlərin "saxlanmasına" imkan yaradır. `this.state`-in klasa təmin etdiyi imkanların hamısı `useState` Hookunda var. Normalda, dəyişənləri hər funksiya çağırışı zamanı sıfırlanır. Lakin, state dəyərləri React tərəfindən saxlanılır. -**What do we pass to `useState` as an argument?** The only argument to the `useState()` Hook is the initial state. Unlike with classes, the state doesn't have to be an object. We can keep a number or a string if that's all we need. In our example, we just want a number for how many times the user clicked, so pass `0` as initial state for our variable. (If we wanted to store two different values in state, we would call `useState()` twice.) +**`useState` arqument kimi nə göndərilir?** `useState()` Hookun tək arqumenti ilkin state-dir. Klaslardan fərqli olaraq, state dəyəri obyekt olmamalıdır. State rəqəm və ya mətn kimi tiplərdə ola bilər. Nümunəmizdə, istifadəçinin nə qədər tıkladığını bilmək üçün rəqəm lazımdır. Bu səbəbdən, ilkin state kimi `0` dəyərini göndəririk. (Bir neçə state dəyəri lazım olduqda `useState()` funksiyasını bir neçə dəfə çağıra bilərik.) -**What does `useState` return?** It returns a pair of values: the current state and a function that updates it. This is why we write `const [count, setCount] = useState()`. This is similar to `this.state.count` and `this.setState` in a class, except you get them in a pair. If you're not familiar with the syntax we used, we'll come back to it [at the bottom of this page](/docs/hooks-state.html#tip-what-do-square-brackets-mean). +**`useState` nə qaytarır?** Bu funksiya dəyərlər cütü qaytarır: cari dəyər və dəyəri yeniləyən funksiya. Bu səbəbdən biz `const [count, setCount] = useState()` formada yazırıq. Bu funksiya, klasda olan `this.state.count` və `this.setState` dəyərlərinə bərabərdir. Əgər işlətdiyimiz sintaksis sizə tanış gəlmirsə, bu haqqda [səhifənin sonunda](/docs/hooks-state.html#tip-what-do-square-brackets-mean) danışacağıq. -Now that we know what the `useState` Hook does, our example should make more sense: +`useState` Hookunun nə etdiyini bildikdən sonra bizim nümunəmiz daha məntiqli olur: ```js{4,5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // "count" adlı state dəyişəni yaradın const [count, setCount] = useState(0); ``` -We declare a state variable called `count`, and set it to `0`. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current `count`, we can call `setCount`. +`count` adlı və `0` dəyərli dəyişən yaradırıq. React, render etmələr zamanı cari dəyəri yadda saxlayaraq ən yeni versiyanı funksiyaya göndərir. Cari `count` dəyərini yeniləmək üçün `setCount` funksiyasını çağırırıq. ->Note +>Qeyd > ->You might be wondering: why is `useState` not named `createState` instead? +>Niyə `useState` funksiyası `createState` kimi çağrılmayıb? > ->"Create" wouldn't be quite accurate because the state is only created the first time our component renders. During the next renders, `useState` gives us the current state. Otherwise it wouldn't be "state" at all! There's also a reason why Hook names *always* start with `use`. We'll learn why later in the [Rules of Hooks](/docs/hooks-rules.html). +>"Create" sözünün düzgün olmamasının səbəbi state-in yalnız komponentin ilk render edildiyi zaman yaranmasıdır. Sonrakı render etmələr zamanı `useState` sadəcə cari state-i qaytarır (yeni state yaratmır). Əks halda, bu state olmazdı! Hook adlarının *həmişə* `use` ilə başlamasının səbəbi var. Biz bunun səbəbini [Hookların Qaydaları](/docs/hooks-rules.html) bölməsindən öyrənəcəyik. -## Reading State {#reading-state} +## State-in Oxunması {#reading-state} -When we want to display the current count in a class, we read `this.state.count`: +Klasda cari state-i göstərmək üçün `this.state.count` dəyərini oxuyuruq: ```js -

You clicked {this.state.count} times

+

{this.state.count} dəfə tıklandı

``` -In a function, we can use `count` directly: +Funksiyada isə `count` dəyərini birbaşa oxuyuruq: ```js -

You clicked {count} times

+

{count} dəfə tıklandı

``` -## Updating State {#updating-state} +## State-in Yenilənməsi {#updating-state} -In a class, we need to call `this.setState()` to update the `count` state: +Klasda, `count` state-ini yeniləmək üçün `this.setState()` funksiyasını çağırırıq: ```js{1} ``` -In a function, we already have `setCount` and `count` as variables so we don't need `this`: +Funksiyada isə, `setCount` və `count` dəyərlərinin dəyişən kimi mövcud olduğundan `this` dəyişəni lazım deyil: ```js{1} ``` -## Recap {#recap} +## Təkrar {#recap} -Let's now **recap what we learned line by line** and check our understanding. +Gəlin **nə öyrəndiyimizi sətir-sətir təkrarlayıb** Hooklar haqqında anlayışımızı yoxlayaq.