From aa45f80bc69f4fdd92bf558b86d6379478b1c987 Mon Sep 17 00:00:00 2001 From: Ali Oguzhan Yildiz Date: Sun, 13 Aug 2023 15:47:06 +0300 Subject: [PATCH 1/2] start translating thinking-in-react --- src/content/learn/thinking-in-react.md | 90 +++++++++++++------------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 23d4beb3f..d9c9930a5 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -1,49 +1,49 @@ --- -title: Thinking in React +title: React'te Düşünmek --- -React can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called *components*. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we’ll guide you through the thought process of building a searchable product data table with React. +React baktığınız tasarımlar ve oluşturduğunuz uygulamalar hakkında düşünme şeklinizi değiştirebilir. React ile bir kullanıcı arayüzü oluşturduğunuzda, öncelikle uygulamanızı *bileşenler* adı verilen parçalara ayırırsınız. Ardından, her bileşeniniz için farklı görsel durumlar tanımlarsınız. Son olarak, veri akışını sağlamak için bileşenlerinizi birbirine bağlarsınız. Bu öğreticide, React ile arama özelliği olan bir ürün veri tablosu oluşturmanın düşünce sürecinde size rehberlik edeceğiz. -## Start with the mockup {/*start-with-the-mockup*/} +## Bir Örnekle Başlayın {/*start-with-the-mockup*/} -Imagine that you already have a JSON API and a mockup from a designer. +Öncelikle, bir JSON API'mızın ve tasarımcımızdan gelen bir modelimizin olduğunu hayal edin. -The JSON API returns some data that looks like this: +JSON API şöyle bir veri döndürüyor: ```json [ - { category: "Fruits", price: "$1", stocked: true, name: "Apple" }, - { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" }, - { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" }, - { category: "Vegetables", price: "$2", stocked: true, name: "Spinach" }, - { category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" }, - { category: "Vegetables", price: "$1", stocked: true, name: "Peas" } + { category: "Meyveler", price: "₺10", stocked: true, name: "Elma" }, + { category: "Meyveler", price: "₺10", stocked: true, name: "Mandalina" }, + { category: "Meyveler", price: "₺20", stocked: false, name: "Portakal" }, + { category: "Sebzeler", price: "₺20", stocked: true, name: "Ispanak" }, + { category: "Sebzeler", price: "₺40", stocked: false, name: "Kabak" }, + { category: "Sebzeler", price: "₺10", stocked: true, name: "Börülce" } ] ``` -The mockup looks like this: +Tasarımımız da şöyle: -To implement a UI in React, you will usually follow the same five steps. +React'te bir kullanıcı arayüzü (UI) oluşturmak için genellikle hep aynı beş adımı izleyeceksiniz. -## Step 1: Break the UI into a component hierarchy {/*step-1-break-the-ui-into-a-component-hierarchy*/} +## Adım 1: Kullanıcı Arabirimini Bileşen Hiyerarşisine Bölün {/*step-1-break-the-ui-into-a-component-hierarchy*/} -Start by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them! +Her bileşenin etrafına kutular çizin ve bileşenlerinize isim verin. Bir tasarımcı ile çalışıyorsanız, tasarım aracında bileşenler zaten adlandırmış olabilirler. Onlara sorun! -Depending on your background, you can think about splitting up a design into components in different ways: +Tecrübenize bağlı olarak, bir tasarımı farklı yöntemlerle bileşenlere ayırmayı düşünebilirsiniz: -* **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents. -* **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.) -* **Design**--consider how you would organize the design's layers. +* **Programlama**--yeni bir fonksiyon veya nesne oluşturup oluşturmayacağınıza karar vermek için aynı teknikleri kullanın. Bu tekniklerden biri [tek sorumluluk ilkesi](https://tr.wikipedia.org/wiki/Tek_sorumluluk_ilkesi)dir, yani bir bileşen ideal olarak sadece bir şey yapmalıdır. Büyümeye başlarsa, daha küçük alt bileşenlere ayrılmalıdır. +* **CSS**--tek tek neler için sınıf seçiçiler yazacağınızı düşünün. (Bununla birlikte, bileşenler biraz daha az ayrıntılıdır.) +* **Tasarım**--tasarımın katmanlarını nasıl düzenleyeceğinizi düşünün. -If your JSON is well-structured, you'll often find that it naturally maps to the component structure of your UI. That's because UI and data models often have the same information architecture--that is, the same shape. Separate your UI into components, where each component matches one piece of your data model. +JSON veriniz iyi yapılandırılmışsa, genellikle arayüzün bileşen yapısıyla doğal bir şekilde eşleştiğini göreceksiniz. Çünkü UI ve veri modelleri genellikle aynı bilgi mimarisine, yani aynı şekle sahiptir. Arayüzünüzü, her bileşenin veri modelinizin bir parçasıyla eşleştiği bileşenlere ayırın. -There are five components on this screen: +Bu ekranın beş bileşeni var: @@ -51,19 +51,19 @@ There are five components on this screen: -1. `FilterableProductTable` (grey) contains the entire app. -2. `SearchBar` (blue) receives the user input. -3. `ProductTable` (lavender) displays and filters the list according to the user input. -4. `ProductCategoryRow` (green) displays a heading for each category. -5. `ProductRow` (yellow) displays a row for each product. +1. `FilterableProductTable` (gri) bütün uygulamayı içerir. +2. `SearchBar` (mavi) kullanıcıdan arama sorgusunu alır. +3. `ProductTable` (lavanta) kullanıcının arama sorgusuna göre listeyi filtreleyip görüntüler. +4. `ProductCategoryRow` (yeşil) her kategorinin başlığını görüntüler. +5. `ProductRow` (sarı) her ürün için bir satır görüntüler. -If you look at `ProductTable` (lavender), you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference, and you could go either way. For this example, it is a part of `ProductTable` because it appears inside the `ProductTable`'s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own `ProductTableHeader` component. +`ProductTable` (lavanta) öğesine bakarsanız, tablo başlığının ("İsim" ve "Fiyat" etiketlerini içeren kısım) kendi bileşeni olmadığını görürsünüz. Bu bir tercih meselesidir ve her iki şekilde de yapılabilir. Bu örnekte, başlık kısmı `ProductTable`'ın bir parçasıdır, çünkü `ProductTable` listesinin içinde görünüyor. Ancak, bu başlık kısmı karmaşık hale gelirse (örneğin, sıralama özelliği eklerseniz), onu kendi `ProductTableHeader` bileşenine taşıyabilirsiniz. -Now that you've identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy: +Tasarım modelinizdeki bileşenleri tanımladığınıza göre, bunları bir hiyerarşi içinde düzenleyin. Modelde başka bir bileşen içinde görünen bileşenler, hiyerarşide bir alt öğe olarak görünmelidir: * `FilterableProductTable` * `SearchBar` @@ -71,13 +71,13 @@ Now that you've identified the components in the mockup, arrange them into a hie * `ProductCategoryRow` * `ProductRow` -## Step 2: Build a static version in React {/*step-2-build-a-static-version-in-react*/} +## Adım 2: React’te Statik Versiyonunu Oluşturun {/*step-2-build-a-static-version-in-react*/} -Now that you have your component hierarchy, it's time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity... yet! It's often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing. +Artık bileşen hiyerarşisine sahip olduğunuza göre, uygulamanızı hayata geçirme vakti geldi. Bunun en kolay yolu, herhangi bir etkileşim eklemeden (şimdilik!) veri modelinizden kullanıcı arayüzünü oluşturan bir versiyon oluşturmaktır. Statik versiyonu önce oluşturmak ve sonrasında etkileşim eklemek genellikle daha kolaydır. Çünkü statik bir sürüm oluşturmak *daha çok yazma ve daha az düşünme* gerektirirken, etkileşimli (interaktif) versiyonu yazmak *daha çok düşünme ve daha az yazma* gerektirir. -To build a static version of your app that renders your data model, you'll want to build [components](/learn/your-first-component) that reuse other components and pass data using [props.](/learn/passing-props-to-a-component) Props are a way of passing data from parent to child. (If you're familiar with the concept of [state](/learn/state-a-components-memory), don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don't need it.) +Veri modelinizi render eden bir statik versiyonu oluşturmak için, diğer bileşenleri kullanan ve [prop’lar](/learn/passing-props-to-a-component) aracılığıyla veri ileten [bileşenler](/learn/your-first-component) oluşturmak isteyeceksiniz. prop’lar bileşenler arasında yukarıdan aşağıya veri iletmenin bir yoludur. (Eğer [state](/learn/state-a-components-memory) konseptine aşinaysanız, bu statik versiyonu oluşturmak için state’leri hiçbir şekilde kullanmayın. State konsepti sadece etkileşim, yani zaman içinde değişen verilerin olduğu durumlar, için ayrılmıştır. Buna, uygulamanın statik bir sürümünü yaptığınız için, ihtiyacınız yoktur.) -You can either build "top down" by starting with building the components higher up in the hierarchy (like `FilterableProductTable`) or "bottom up" by working from components lower down (like `ProductRow`). In simpler examples, it’s usually easier to go top-down, and on larger projects, it’s easier to go bottom-up. +Uygulamanızı, hiyerarşide daha yukarıdaki (örneğin, `FilterableProductTable`) bileşenlerden başlayarak, yukarıdan aşağıya (top-down) şeklinde; ya da daha aşağıdaki (`ProductRow`) bileşenler ile başlayarak, aşağıdan yukarıya (bottom-up) şeklinde oluşturabilirsiniz. Daha basit örneklerde, genellikle yukarıdan aşağıya gitmek daha kolaydır. Daha büyük projelerde ise aşağıdan yukarıya gitmek daha kolaydır. @@ -130,8 +130,8 @@ function ProductTable({ products }) { - - + + {rows} @@ -142,11 +142,11 @@ function ProductTable({ products }) { function SearchBar() { return ( - + ); @@ -162,12 +162,12 @@ function FilterableProductTable({ products }) { } const PRODUCTS = [ - {category: "Fruits", price: "$1", stocked: true, name: "Apple"}, - {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"}, - {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"}, - {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"}, - {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"}, - {category: "Vegetables", price: "$1", stocked: true, name: "Peas"} + { category: "Meyveler", price: "₺10", stocked: true, name: "Elma" }, + { category: "Meyveler", price: "₺10", stocked: true, name: "Mandalina" }, + { category: "Meyveler", price: "₺20", stocked: false, name: "Portakal" }, + { category: "Sebzeler", price: "₺20", stocked: true, name: "Ispanak" }, + { category: "Sebzeler", price: "₺40", stocked: false, name: "Kabak" }, + { category: "Sebzeler", price: "₺10", stocked: true, name: "Börülce" } ]; export default function App() { @@ -195,13 +195,13 @@ td { -(If this code looks intimidating, go through the [Quick Start](/learn/) first!) +(Eğer bu kod korkutucu geliyorsa, önce [Hızlı Başlangıç](/learn/) bölümünü okuyun!) -After building your components, you'll have a library of reusable components that render your data model. Because this is a static app, the components will only return JSX. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. This is called _one-way data flow_ because the data flows down from the top-level component to the ones at the bottom of the tree. +Bileşenlerinizi oluşturduktan sonra, veri modelinizi render eden yeniden kullanılabilir bileşenlerden oluşan bir kütüphaneniz olacaktır. Bu statik bir uygulama olduğu için, bileşenler yalnızca JSX döndürecektir. Hiyerarşinin en üstündeki bileşen (`FilterableProductTable`) veri modelinizi bir prop olarak alacaktır. Bu, tek yönlü veri akışı (_one-way data flow_) olarak adlandırılır; çünkü veri, en üstteki bileşenden ağacın en altındaki bileşenlere doğru akar. -At this point, you should not be using any state values. That’s for the next step! +Bu noktada, herhangi bir state değeri kullanmamalısınız. Onun için bir sonraki adımı bekleyin! From 8207f019b1b21bf260ad3e84f63c1fc652804156 Mon Sep 17 00:00:00 2001 From: Ali Oguzhan Yildiz Date: Mon, 6 Nov 2023 18:23:40 +0300 Subject: [PATCH 2/2] translate thinking-in-react.md --- src/content/learn/thinking-in-react.md | 167 +++++++++++++------------ 1 file changed, 85 insertions(+), 82 deletions(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index d9c9930a5..985d2ed0d 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -45,8 +45,6 @@ JSON veriniz iyi yapılandırılmışsa, genellikle arayüzün bileşen yapısı Bu ekranın beş bileşeni var: - - @@ -59,8 +57,6 @@ Bu ekranın beş bileşeni var: - - `ProductTable` (lavanta) öğesine bakarsanız, tablo başlığının ("İsim" ve "Fiyat" etiketlerini içeren kısım) kendi bileşeni olmadığını görürsünüz. Bu bir tercih meselesidir ve her iki şekilde de yapılabilir. Bu örnekte, başlık kısmı `ProductTable`'ın bir parçasıdır, çünkü `ProductTable` listesinin içinde görünüyor. Ancak, bu başlık kısmı karmaşık hale gelirse (örneğin, sıralama özelliği eklerseniz), onu kendi `ProductTableHeader` bileşenine taşıyabilirsiniz. Tasarım modelinizdeki bileşenleri tanımladığınıza göre, bunları bir hiyerarşi içinde düzenleyin. Modelde başka bir bileşen içinde görünen bileşenler, hiyerarşide bir alt öğe olarak görünmelidir: @@ -205,75 +201,75 @@ Bu noktada, herhangi bir state değeri kullanmamalısınız. Onun için bir sonr -## Step 3: Find the minimal but complete representation of UI state {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/} +## Step 3: Arayüzün minimal (ancak eksiksiz) halini belirleme {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/} -To make the UI interactive, you need to let users change your underlying data model. You will use *state* for this. +Kullanıcı arayüzünüzü etkileşimli hale getirmek için, kullanıcılarınızın temel veri modelinizi değiştirmesine izin vermeniz gerekir. Bunun için *state* kullanacaksınız. -Think of state as the minimal set of changing data that your app needs to remember. The most important principle for structuring state is to keep it [DRY (Don't Repeat Yourself).](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) Figure out the absolute minimal representation of the state your application needs and compute everything else on-demand. For example, if you're building a shopping list, you can store the items as an array in state. If you want to also display the number of items in the list, don't store the number of items as another state value--instead, read the length of your array. +State'i, uygulamanızın hatırlaması gereken minimum değişen veri kümesi olarak düşünün. State oluşturmanın en önemli ilkesi *Kendinizi Tekrar Etmemektir* ([DRY (Don't Repeat Yourself).](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)). Uygulamanızın ihtiyaç duyduğu state'i belirleyin ve kalan her şeyi sadece ihtiyaç olduğunda hesaplayın. Örneğin, bir alışveriş listesi oluşturuyorsanız; listedeki öğeleri state halinde bir dizi olarak saklayabilirsiniz. Listedeki öğe sayısını da görüntülemek istiyorsanız öğe sayısını başka bir state değeri olarak tutmayın; bunun yerine dizinin uzunluğunu okuyun (length of array). -Now think of all of the pieces of data in this example application: +Örnek uygulamamızdaki sahip olduğumuz tüm veri parçalarına bakalım: -1. The original list of products -2. The search text the user has entered -3. The value of the checkbox -4. The filtered list of products +1. Orijinal ürün listesi +2. Kullanıcının girdiği arama metni +3. Checkbox’ın değeri +4. Filtrelenmiş ürün listesi -Which of these are state? Identify the ones that are not: +Bunlarin hangileri state? State olmayanları belirleyin: -* Does it **remain unchanged** over time? If so, it isn't state. -* Is it **passed in from a parent** via props? If so, it isn't state. -* **Can you compute it** based on existing state or props in your component? If so, it *definitely* isn't state! +* Zaman içinde **değişmeden mi** duruyor? Eğer öyleyse, state değildir. +* Prop'lar aracılığıyla **üst bileşenden mi geliyor**? Eğer öyleyse, state değildir. +* Varolan state veya prop'lara dayalı olarak **hesaplayabilir misiniz**? Eğer öyleyse, *kesinlikle* state değildir! -What's left is probably state. +Geriye kalanlar muhtemelen state'tir. -Let's go through them one by one again: +Hadi teker teker inceleyelim: -1. The original list of products is **passed in as props, so it's not state.** -2. The search text seems to be state since it changes over time and can't be computed from anything. -3. The value of the checkbox seems to be state since it changes over time and can't be computed from anything. -4. The filtered list of products **isn't state because it can be computed** by taking the original list of products and filtering it according to the search text and value of the checkbox. +1. Orijinal ürün listesi **prop olarak iletildiği için state değildir.** +2. Arama metni zaman içinde değiştiği için ve bir yerden hesaplanamadığı için state'tir. +3. Checkbox'un değeri zaman içinde değiştiği için ve bir yerden hesaplanamadığı için state'tir. +4. Filtrelenmiş ürün listesi, orijinal ürün listesini alıp arama metni ve checkbox'ın değerine göre filtreleyip **hesaplanabilir**. Bu yüzden **state değildir**. -This means only the search text and the value of the checkbox are state! Nicely done! +Demek ki sadece arama metni ve checkbox'ın değeri state'tir! Güzel iş! -#### Props vs State {/*props-vs-state*/} +#### Prop'lar vs State {/*props-vs-state*/} -There are two types of "model" data in React: props and state. The two are very different: +React'te iki tür "model" veri vardır: prop'lar ve state. İkisi birbirinden çok farklıdır: -* [**Props** are like arguments you pass](/learn/passing-props-to-a-component) to a function. They let a parent component pass data to a child component and customize its appearance. For example, a `Form` can pass a `color` prop to a `Button`. -* [**State** is like a component’s memory.](/learn/state-a-components-memory) It lets a component keep track of some information and change it in response to interactions. For example, a `Button` might keep track of `isHovered` state. +* [**Prop'lar** fonksiyonlara ilettiğiniz argümanlara](/learn/passing-props-to-a-component) benzer. Prop'lar, üst bileşenin alt bileşene data iletip, görünümünü özelleştirmesini sağlar. Örneğin, bir `Form` bileşeni bir `Button` bileşenine `color` prop'u iletebilir. +* [**State** bir bileşenin hafızası gibidir](/learn/state-a-components-memory). Bir bileşenin bazı bilgileri takip etmesini ve gelen etkilşimlere cevap olarak o bilgiyi değiştirmesini sağlar. Örneğin, bir `Button` bileşeni `isHovered` state'ini takip edebilir. -Props and state are different, but they work together. A parent component will often keep some information in state (so that it can change it), and *pass it down* to child components as their props. It's okay if the difference still feels fuzzy on the first read. It takes a bit of practice for it to really stick! +Prop'lar ve state farklıdır, ancak birlikte çalışırlar. Bir üst bileşen genellikle bazı bilgileri state olarak tutar (değiştirebilmek için) ve bu bilgiyi alt bileşenlere prop olarak *geçirir*. İlk okumada aradaki fark hala belirsiz geliyorsa sorun değil. Gerçekten oturması için biraz pratik gerekiyor! -## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/} +## Step 4: State’inizin barınacağı yeri belirleyin {/*step-4-identify-where-your-state-should-live*/} -After identifying your app’s minimal state data, you need to identify which component is responsible for changing this state, or *owns* the state. Remember: React uses one-way data flow, passing data down the component hierarchy from parent to child component. It may not be immediately clear which component should own what state. This can be challenging if you’re new to this concept, but you can figure it out by following these steps! +Uygulamanızın minimum state verisini belirledikten sonra, bu state'i değiştirmekten sorumlu olan veya state'e *sahip olan* bileşeni belirlemeniz gerekir. Unutmayın: React, veriyi yukarıdan aşağıya doğru tek yönlü olarak (one-way data flow) aktarır. Bu yüzden, hangi bileşenin hangi state'i sahipleneceği hemen net olmayabilir. Bu konseptle yeni tanışıyorsanız bu zor olabilir, ancak aşağıdaki adımları takip ederek çözebilirsiniz! -For each piece of state in your application: +Uyguamanızdaki her state parçası için: -1. Identify *every* component that renders something based on that state. -2. Find their closest common parent component--a component above them all in the hierarchy. -3. Decide where the state should live: - 1. Often, you can put the state directly into their common parent. - 2. You can also put the state into some component above their common parent. - 3. If you can't find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common parent component. +1. State'e bağlı olarak bir şeyler render eden *her* bileşeni belirleyin. +2. O bileşenlere en yakın ortak üst bileşeni bulun (Hiyerarşide hepsinin üstünde olan bir bileşen). +3. State'in barınacağı yere karar verin: + 1. Genellikle, state'i direkt olarak ortak üst bileşene koyabilirsiniz. + 2. Ayrıca State'i, ortak üst bileşenlerinin üstündeki bir bileşene de koyabilirsiniz. + 3. State'i koyabileceğiniz bir bileşen bulamıyorsanız, sadece state'i tutması için yeni bir bileşen oluşturun ve onu ortak üst bileşenlerinin üstündeki bir yere ekleyin. -In the previous step, you found two pieces of state in this application: the search input text, and the value of the checkbox. In this example, they always appear together, so it makes sense to put them into the same place. +Önceki adımda, bu uygulamadaki iki state parçasını buldunuz: arama inputu ve checkbox'ın değeri. Bu örnekte ikisi daima birlikte görünüyor; bu yüzden aynı yere koymak mantıklıdır. -Now let's run through our strategy for them: +Şimdi o ikisi için stratejimizi gözden geçirelim: -1. **Identify components that use state:** - * `ProductTable` needs to filter the product list based on that state (search text and checkbox value). - * `SearchBar` needs to display that state (search text and checkbox value). -1. **Find their common parent:** The first parent component both components share is `FilterableProductTable`. -2. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`. +1. **State kullanan bileşenleri belirleyin:** + * `ProductTable` stat'e göre ürün listesini filtrelemesi gerekiyor. (arama metni ve checkbox değeri). + * `SearchBar` state'i göstermesi gerekiyor. (arama metni ve checkbox değeri). +2. **Ortak üst bileşeni bulun:** İki bileşenin de ortak olarak paylaştığı üst bileşen `FilterableProductTable` bileşenidir. +3. **State'in barınacağı yere karar verin**: Filtre metni ve checkbox için gerekli state değerlerini `FilterableProductTable` bileşeninde tutacağız. -So the state values will live in `FilterableProductTable`. +Sonuç olarak state değerleri `FilterableProductTable` bileşeninde barınacak. -Add state to the component with the [`useState()` Hook.](/reference/react/useState) Hooks are special functions that let you "hook into" React. Add two state variables at the top of `FilterableProductTable` and specify their initial state: +Bileşene state eklemek için [`useState()` Hook'unu](/reference/react/useState) kullanın. Hook'lar React'e "bağlanmanızı" (hook-into) sağlayan özel fonksiyonlardır. `FilterableProductTable` bileşeninin en üstüne iki state değişkeni ekleyin ve başlangıç değerlerini belirtin: ```js function FilterableProductTable({ products }) { @@ -295,7 +291,7 @@ Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as p ``` -You can start seeing how your application will behave. Edit the `filterText` initial value from `useState('')` to `useState('fruit')` in the sandbox code below. You'll see both the search input text and the table update: +Uygulamanızın nasıl davranacağını görmeye başlayabilirsiniz. Aşağıdaki sandbox'ta, `filterText` başlangıç değerini `useState('')` yerine `useState('elma')` olarak değiştirin. Hem arama inputu hem de tablo güncellenecektir: @@ -377,8 +373,8 @@ function ProductTable({ products, filterText, inStockOnly }) {
NamePriceİsimFiyat
- - + + {rows} @@ -392,25 +388,25 @@ function SearchBar({ filterText, inStockOnly }) { + placeholder="Ara..."/> ); } const PRODUCTS = [ - {category: "Fruits", price: "$1", stocked: true, name: "Apple"}, - {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"}, - {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"}, - {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"}, - {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"}, - {category: "Vegetables", price: "$1", stocked: true, name: "Peas"} + { category: "Meyveler", price: "₺10", stocked: true, name: "Elma" }, + { category: "Meyveler", price: "₺10", stocked: true, name: "Mandalina" }, + { category: "Meyveler", price: "₺20", stocked: false, name: "Portakal" }, + { category: "Sebzeler", price: "₺20", stocked: true, name: "Ispanak" }, + { category: "Sebzeler", price: "₺40", stocked: false, name: "Kabak" }, + { category: "Sebzeler", price: "₺10", stocked: true, name: "Börülce" } ]; export default function App() { @@ -437,7 +433,7 @@ td { -Notice that editing the form doesn't work yet. There is a console error in the sandbox above explaining why: +Farkettiyseniz, formu düzenlemek henüz çalışmıyor. Yukarıdaki sandbox'ta nedenini açıklayan bir konsol hatası var: @@ -445,7 +441,15 @@ You provided a \`value\` prop to a form field without an \`onChange\` handler. T -In the sandbox above, `ProductTable` and `SearchBar` read the `filterText` and `inStockOnly` props to render the table, the input, and the checkbox. For example, here is how `SearchBar` populates the input value: + + +Bir form alanına \`value\` prop'u verdiniz; ancak bir \`onChange\` handler'ı sağlamadınız. Bu salt-okunur bir form alanı oluşturacaktır. + + + + + +Yukarıdaki sandboxta, `ProductTable` ve `SearchBar`, tabloyu, inputu ve checkbox'ı render etmek için, `filterText` ve `inStockOnly` prop'larını okur. Örneğin, `SearchBar`'ın input değerini nasıl doldurduğuna bakalım: ```js {1,6} function SearchBar({ filterText, inStockOnly }) { @@ -454,19 +458,18 @@ function SearchBar({ filterText, inStockOnly }) { + placeholder="Ara..."/> ``` -However, you haven't added any code to respond to the user actions like typing yet. This will be your final step. +Ancak henüz kullanıcı eylemlerine (yazmak gibi) yanıt vermek için herhangi bir kod eklemediniz. Bu da son adımınız olacak. +## Step 5: Ters veri akışı ekleyin {/*step-5-add-inverse-data-flow*/} -## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/} +Uygulumanız şu anda, prop'lar ve state'in hiyerarşi boyunca aşağı doğru akmasıyla, doğru bir şekilde render ediliyor. Ancak kullanıcı girdisine göre state'i değiştirmek için, ters istikametteki veri akışını da desteklenmeniz gerekemktedir. Hiyerarşinin derinliklerindeki form bileşenlerinin `FilterableProductTable` bileşenindeki state'i güncellemesi gerekecek. -Currently your app renders correctly with props and state flowing down the hierarchy. But to change the state according to user input, you will need to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`. +React bu veri akışını açıkça yapar, ancak iki-yönlü veri bağlamaya göre biraz daha fazla kod yazmanızı gerektirir. Yukarıdaki örnekte yazı yazmaya veya kutuyu işaretlemeye çalışırsanız, React girdinizi görmezden gelir. Bu kasıtlıdır. `` yazarak, `input`'un `value` prop'unu her zaman `FilterableProductTable`'dan iletilem `filterText` state'ine eşit olarak ayarladınız. `filterText` state'i hiçbir zaman değişmediği için, input hiçbir zaman değişmez. -React makes this data flow explicit, but it requires a little more typing than two-way data binding. If you try to type or check the box in the example above, you'll see that React ignores your input. This is intentional. By writing ``, you've set the `value` prop of the `input` to always be equal to the `filterText` state passed in from `FilterableProductTable`. Since `filterText` state is never set, the input never changes. - -You want to make it so whenever the user changes the form inputs, the state updates to reflect those changes. The state is owned by `FilterableProductTable`, so only it can call `setFilterText` and `setInStockOnly`. To let `SearchBar` update the `FilterableProductTable`'s state, you need to pass these functions down to `SearchBar`: +Kullanıcı form inputlarını değiştirdiğinde, state'in bu değişiklikleri yansıtacak şekilde güncellenmesini istersiniz. State `FilterableProductTable`'a aittir, bu yüzden yalnızca o bileşen `setFilterText` ve `setInStockOnly` fonksiyonlarını çağırabilir. `SearchBar`'ın `FilterableProductTable`'ın state'ini güncellemesine izin vermek için, bu fonksiyonları `SearchBar`'a iletmeniz gerekir: ```js {2,3,10,11} function FilterableProductTable({ products }) { @@ -482,17 +485,17 @@ function FilterableProductTable({ products }) { onInStockOnlyChange={setInStockOnly} /> ``` -Inside the `SearchBar`, you will add the `onChange` event handlers and set the parent state from them: +`SearchBar`'ın içinde, `onChange` olay yöneticilerini ekleyip, onlar aracılığıyla üst bileşenin state'ini güncelleyeceksiniz: ```js {5} onFilterTextChange(e.target.value)} /> ``` -Now the application fully works! +Uygulama şimdi tamamen çalışıyor! @@ -576,8 +579,8 @@ function ProductTable({ products, filterText, inStockOnly }) {
NamePriceİsimFiyat
- - + + {rows} @@ -595,7 +598,7 @@ function SearchBar({ onFilterTextChange(e.target.value)} /> ); } const PRODUCTS = [ - {category: "Fruits", price: "$1", stocked: true, name: "Apple"}, - {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"}, - {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"}, - {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"}, - {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"}, - {category: "Vegetables", price: "$1", stocked: true, name: "Peas"} + { category: "Meyveler", price: "₺10", stocked: true, name: "Elma" }, + { category: "Meyveler", price: "₺10", stocked: true, name: "Mandalina" }, + { category: "Meyveler", price: "₺20", stocked: false, name: "Portakal" }, + { category: "Sebzeler", price: "₺20", stocked: true, name: "Ispanak" }, + { category: "Sebzeler", price: "₺40", stocked: false, name: "Kabak" }, + { category: "Sebzeler", price: "₺10", stocked: true, name: "Börülce" } ]; export default function App() { @@ -642,8 +645,8 @@ td { -You can learn all about handling events and updating state in the [Adding Interactivity](/learn/adding-interactivity) section. +Olayları yönetmek ve state'i güncellemek hakkında daha fazla bilgi için [Etkileşim Ekleme](/learn/adding-interactivity) bölümüne bakabilirsiniz. -## Where to go from here {/*where-to-go-from-here*/} +## Bundan sonrası {/*where-to-go-from-here*/} -This was a very brief introduction to how to think about building components and applications with React. You can [start a React project](/learn/installation) right now or [dive deeper on all the syntax](/learn/describing-the-ui) used in this tutorial. +Bu, bileşenleri ve uyguamaları React ile nasıl oluşturacağınızı düşünmenin çok kısa bir girişiydi. Hemen şimdi [bir React projesi başlatabilirsiniz](/learn/installation) veya bu öğreticide kullanılan tüm sözdizimi hakkında [daha derinlere inebilirsiniz](/learn/describing-the-ui).
NamePriceİsimFiyat