From 35fb0e6f5664ce402e880f6ba6e9759bca0df5ac Mon Sep 17 00:00:00 2001 From: TolgaYuceel Date: Mon, 5 Feb 2024 20:48:59 +0300 Subject: [PATCH 1/3] translate describing the ui --- src/content/learn/describing-the-ui.md | 177 +++++++++++++------------ 1 file changed, 89 insertions(+), 88 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index ce49b85c8..6a49a06e1 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -1,30 +1,30 @@ --- -title: Describing the UI +title: Kullanıcı Arayüzünü Tanımlama --- -React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable *components.* From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you'll learn to create, customize, and conditionally display React components. +React, kullanıcı arayüzleri (UI) oluşturmak için kullanılan bir JavaScript kütüphanesidir. Kullanıcı arayüzü butonlar, metinler ve resimler gibi küçük birimlerden oluşur. React bunları yeniden kullanılabilir, iç içe yerleştirilebilir *bileşenler* halinde birleştirmenize olanak tanır. Web sitelerinden telefon uygulamalarına kadar ekrandaki her şey bileşenlere ayrılabilir. Bu bölümde, React bileşenlerini oluşturmayı, özelleştirmeyi ve koşullu olarak görüntülemeyi öğreneceksiniz. -* [How to write your first React component](/learn/your-first-component) -* [When and how to create multi-component files](/learn/importing-and-exporting-components) -* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx) -* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces) -* [How to configure components with props](/learn/passing-props-to-a-component) -* [How to conditionally render components](/learn/conditional-rendering) -* [How to render multiple components at a time](/learn/rendering-lists) -* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure) -* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree) +* [İlk React bileşeninizi nasıl yazarsınız](/learn/your-first-component) +* [Çok bileşenli dosyalar ne zaman ve nasıl oluşturulur](/learn/importing-and-exporting-components) +* [JSX ile JavaScript'e işaretleme nasıl eklenir](/learn/writing-markup-with-jsx) +* [Bileşenlerinizden JavaScript fonksiyonlarına erişmek için JSX ile süslü parantezler nasıl kullanılır](/learn/javascript-in-jsx-with-curly-braces) +* [Bileşenler prop'lar ile nasıl yapılandırılır](/learn/passing-props-to-a-component) +* [Bileşenleri koşullu olarak nasıl render edebilirim](/learn/conditional-rendering) +* [Birden çok bileşeni aynı anda nasıl render edebilirim](/learn/rendering-lists) +* [Bileşenleri saf tutarak kafa karışıklığına neden olan hatalardan nasıl kaçınılır](/learn/keeping-components-pure) +* [Kullanıcı arayüzünüzü ağaçlar olarak anlamak neden yararlıdır](/learn/understanding-your-ui-as-a-tree) -## Your first component {/*your-first-component*/} +## İlk bileşeniniz {/*your-first-component*/} -React applications are built from isolated pieces of UI called *components*. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a `Gallery` component rendering three `Profile` components: +React uygulamaları, *bileşenler* adı verilen izole kullanıcı arayüzü parçalarından oluşturulur. Bir React bileşeni, işaretleme ile serpiştirebileceğiniz bir JavaScript fonksiyonudur. Bileşenler bir buton kadar küçük veya tüm bir sayfa kadar büyük olabilir. İşte üç adet `Profil` bileşeni oluşturan bir `Galeri` bileşeni: @@ -41,7 +41,7 @@ function Profile() { export default function Gallery() { return (
-

Amazing scientists

+

Muhteşem Bilim İnsanları

@@ -58,13 +58,13 @@ img { margin: 0 10px 10px 0; height: 90px; } -Read **[Your First Component](/learn/your-first-component)** to learn how to declare and use React components. +React bileşenlerini bildirmeyi ve kullanmayı öğrenmek için **[İlk bileşeniniz](/learn/your-first-component)** bölümünü okuyun. -## Importing and exporting components {/*importing-and-exporting-components*/} +## Bileşenlerin içe ve dışa aktarılması {/*importing-and-exporting-components*/} -You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can *export* a component into its own file, and then *import* that component from another file: +Bu durumda, bir dosyada birçok bileşen bildirebilirsiniz, ancak büyük dosyaları navigate etmek zor olabilir. Bu sorunu çözmek için, bir bileşeni kendi dosyasında dışa aktarabilir (export), ardından başka bir dosyadan o bileşeni içe aktarabilirsiniz (import): @@ -85,7 +85,7 @@ import Profile from './Profile.js'; export default function Gallery() { return (
-

Amazing scientists

+

Muhteşem Bilim İnsanları

@@ -113,32 +113,32 @@ img { margin: 0 10px 10px 0; } -Read **[Importing and Exporting Components](/learn/importing-and-exporting-components)** to learn how to split components into their own files. +Bileşenleri kendi dosyalarına nasıl ayıracağınızı öğrenmek için **[Bileşenleri İçe ve Dışa Aktarma](/learn/importing-and-exporting-components)** bölümünü okuyun. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## JSX ile işaretleme (markup) yazma {/*writing-markup-with-jsx*/} -Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. +Her React bileşeni, React'in tarayıcıda render ettiği bazı işaretlemeler (markuplar) içerebilecek bir JavaScript fonksiyonudur. React bileşenleri, bu işaretlemeyi temsil etmek için JSX adı verilen bir sözdizimi uzantısını kullanır. JSX, HTML'ye çok benzer, ancak biraz daha katıdır ve dinamik bilgileri görüntüleyebilir. -If we paste existing HTML markup into a React component, it won't always work: +Mevcut HTML işaretlemesini bir React bileşenine yapıştırırsak, bu her zaman çalışmayacaktır: ```js export default function TodoList() { return ( - // This doesn't quite work! -

Hedy Lamarr's Todos

+ // Bu tam olarak işe yaramaz! +

Hedy Lamarr'ın Yapılacakları

Hedy Lamarr
    -
  • Invent new traffic lights -
  • Rehearse a movie scene -
  • Improve spectrum technology +
  • Yeni trafik ışıkları icat etmek +
  • Bir film sahnesinin provasını yapmak +
  • Spektrum teknolojisini geliştirmek
); } @@ -150,7 +150,7 @@ img { height: 90px; } -If you have existing HTML like this, you can fix it using a [converter](https://transform.tools/html-to-jsx): +Eğer böyle bir HTML'iniz varsa, [dönüştürücü](https://transform.tools/html-to-jsx) kullanarak düzeltebilirsiniz: @@ -158,16 +158,16 @@ If you have existing HTML like this, you can fix it using a [converter](https:// export default function TodoList() { return ( <> -

Hedy Lamarr's Todos

+

Hedy Lamarr'ın Yapılacakları

Hedy Lamarr
    -
  • Invent new traffic lights
    • -
  • Rehearse a movie scene
    • -
  • Improve spectrum technology
    • +
  • Yeni trafik ışıkları icat etmek
    • +
  • Bir film sahnesinin provasını yapmak
    • +
  • Spektrum teknolojisini geliştirmek
); @@ -182,13 +182,13 @@ img { height: 90px; } -Read **[Writing Markup with JSX](/learn/writing-markup-with-jsx)** to learn how to write valid JSX. +Doğru JSX yazmayı öğrenmek için **[JSX ile İşaretleme (Markup) Yazma](/learn/writing-markup-with-jsx)** bölümünü okuyun. -## JavaScript in JSX with curly braces {/*javascript-in-jsx-with-curly-braces*/} +## JSX içinde JavaScript kodunu süslü parantezlerle kullanma {/*javascript-in-jsx-with-curly-braces*/} -JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to "open a window" to JavaScript: +JSX, JavaScript dosyası içinde HTML benzeri işaretleme yazmanıza olanak tanır ve renderlama mantığını ile içeriği aynı yerde tutar. Bazı durumlarda, bu işaretlemenin içine biraz JavaScript mantığı eklemek veya dinamik bir özelliğe başvurmak isteyebilirsiniz. Bu durumda, JSX içinde süslü parantez kullanarak JavaScript'e bir "pencere açabilirsiniz". @@ -204,16 +204,16 @@ const person = { export default function TodoList() { return (
-

{person.name}'s Todos

+

{person.name}'nın Yapılacaklası

Gregorio Y. Zara
    -
  • Improve the videophone
    • -
  • Prepare aeronautics lectures
    • -
  • Work on the alcohol-fuelled engine
    • +
  • Görüntülü telefonu geliştirmek
    • +
  • Havacılık derslerini hazırlamak
    • +
  • Alkol yakıtlı motor üzerinde çalışmak
); @@ -230,13 +230,13 @@ body > div > div { padding: 20px; } -Read **[JavaScript in JSX with Curly Braces](/learn/javascript-in-jsx-with-curly-braces)** to learn how to access JavaScript data from JSX. +JSX'ten JavaScript verilerine nasıl erişileceğini öğrenmek için **[JSX içinde Süslü Parantezlerle JavaScript](/learn/javascript-in-jsx-with-curly-braces)** bölümünü okuyun. -## Passing props to a component {/*passing-props-to-a-component*/} +## Bileşenlere Prop'ları Aktarma {/*passing-props-to-a-component*/} -React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, functions, and even JSX! +React bileşenleri birbirleriyle iletişim kurmak için *props* kullanırlar. Her ana bileşen, alt bileşenlerine prop'lar vererek onlara bazı bilgiler aktarabilir. Prop'lar size HTML niteliklerini hatırlatabilir, ancak nesneler, diziler, fonksiyonlar ve hatta JSX dahil olmak üzere herhangi bir JavaScript değerini bunlar aracılığıyla iletebilirsiniz! @@ -311,15 +311,15 @@ export function getImageUrl(person, size = 's') { -Read **[Passing Props to a Component](/learn/passing-props-to-a-component)** to learn how to pass and read props. +Prop'ların nasıl aktarılacağını ve okunacağını öğrenmek için **[Bileşenlere Prop'ları Aktarma](/learn/passing-props-to-a-component)** bölümünü okuyun. -## Conditional rendering {/*conditional-rendering*/} +## Koşullu olarak render etme {/*conditional-rendering*/} -Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators. +Bileşenlerinizin genellikle farklı koşullara bağlı olarak farklı şeyler göstermesi gerekecektir. React'te, `if` ifadeleri, `&&` ve `? :` operatörleri gibi JavaScript sözdizimlerini kullanarak JSX'i koşullu olarak oluşturabilirsiniz. -In this example, the JavaScript `&&` operator is used to conditionally render a checkmark: +Bu örnekte, bir onay işaretini (checkmark) koşullu olarak oluşturmak için JavaScriptdeki `&&` operatörü kullanılmıştır: @@ -335,19 +335,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
-

Sally Ride's Packing List

+

Sally Ride'ın Bavul Listesi

@@ -359,15 +359,15 @@ export default function PackingList() { -Read **[Conditional Rendering](/learn/conditional-rendering)** to learn the different ways to render content conditionally. +İçeriği koşullu olarak oluşturmanın farklı yollarını öğrenmek için **[Koşullu Olarak Render Etmek](/learn/conditional-rendering)** bölümünü okuyun. -## Rendering lists {/*rendering-lists*/} +## Listeleri render etmek {/*rendering-lists*/} -You will often want to display multiple similar components from a collection of data. You can use JavaScript's `filter()` and `map()` with React to filter and transform your array of data into an array of components. +Genellikle bir veri koleksiyonundan birden fazla benzer bileşeni görüntülemek istersiniz. Veri dizinizi filtrelemek ve bir bileşen dizisine dönüştürmek için JavaScript'in `filter()` ve `map()` fonksiyonlarını React ile kullanabilirsiniz. -For each array item, you will need to specify a `key`. Usually, you will want to use an ID from the database as a `key`. Keys let React keep track of each item's place in the list even if the list changes. +Her dizi öğesi için bir `key` belirtmeniz gerekecektir. Genellikle, veritabanından bir ID'yi `key` olarak kullanmak isteyeceksiniz. Key'ler, liste değişse bile React'in her öğenin listedeki yerini takip etmesini sağlar. @@ -385,13 +385,13 @@ export default function List() {

{person.name}: {' ' + person.profession + ' '} - known for {person.accomplishment} + bilinen çalışması: {person.accomplishment}

); return (
-

Scientists

+

Bilim insanları

    {listItems}
); @@ -402,32 +402,32 @@ export default function List() { export const people = [{ id: 0, name: 'Creola Katherine Johnson', - profession: 'mathematician', - accomplishment: 'spaceflight calculations', + profession: 'matematikçi', + accomplishment: 'uzay uçuşu hesaplamaları', imageId: 'MK3eW3A' }, { id: 1, name: 'Mario José Molina-Pasquel Henríquez', - profession: 'chemist', - accomplishment: 'discovery of Arctic ozone hole', + profession: 'kimyager', + accomplishment: 'Arktik ozon deliğinin keşfi', imageId: 'mynHUSa' }, { id: 2, name: 'Mohammad Abdus Salam', - profession: 'physicist', - accomplishment: 'electromagnetism theory', + profession: 'fizikçi', + accomplishment: 'elektromanyeti̇zma teori̇si̇', imageId: 'bE7W1ji' }, { id: 3, name: 'Percy Lavon Julian', - profession: 'chemist', - accomplishment: 'pioneering cortisone drugs, steroids and birth control pills', + profession: 'kimyager', + accomplishment: 'kortizon ilaçları, steroidler ve doğum kontrol haplarına öncülük etmek', imageId: 'IOjWm71' }, { id: 4, name: 'Subrahmanyan Chandrasekhar', - profession: 'astrophysicist', - accomplishment: 'white dwarf star mass calculations', + profession: 'astrofizikçi', + accomplishment: 'beyaz cüce yıldız kütle hesaplamaları', imageId: 'lrWQx8l' }]; ``` @@ -459,18 +459,18 @@ h2 { font-size: 20px; } -Read **[Rendering Lists](/learn/rendering-lists)** to learn how to render a list of components, and how to choose a key. +Bir bileşen listesinin nasıl oluşturulacağını ve bir anahtarın nasıl seçileceğini öğrenmek için **[Listeleri Render Etmek](/learn/rendering-lists)** bölümünü okuyun. -## Keeping components pure {/*keeping-components-pure*/} +## Bileşenleri saf tutmak {/*keeping-components-pure*/} -Some JavaScript functions are *pure.* A pure function: +Bazı JavaScript fonksiyonları *saftır.* Saf bir fonksiyon: -* **Minds its own business.** It does not change any objects or variables that existed before it was called. -* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result. +* **Kendi işine bakar.** Çağrılmadan önce var olan hiçbir nesneyi veya değişkeni değiştirmez. +* **Aynı girdiler, aynı çıktılar.** Aynı girdiler verildiğinde, saf bir fonksiyon her zaman aynı sonucu döndürmelidir. -By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component: +Bileşenlerinizi yalnızca saf fonksiyonlar olarak yazarsanız, kod tabanınız büyüdükçe şaşırtıcı hatalardan ve öngörülemeyen davranışlardan kaçınabilirsiniz. İşte saf olmayan bir bileşen örneği: @@ -480,7 +480,7 @@ let guest = 0; function Cup() { // Bad: changing a preexisting variable! guest = guest + 1; - return

Tea cup for guest #{guest}

; + return

Misafir #{guest} için çay bardağı

; } export default function TeaSet() { @@ -496,13 +496,13 @@ export default function TeaSet() { -You can make this component pure by passing a prop instead of modifying a preexisting variable: +Önceden var olan bir değişkeni değiştirmek yerine bir prop geçirerek bu bileşeni saf hale getirebilirsiniz: ```js function Cup({ guest }) { - return

Tea cup for guest #{guest}

; + return

Misafir #{guest} için çay bardağı

; } export default function TeaSet() { @@ -520,43 +520,44 @@ export default function TeaSet() { -Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how to write components as pure, predictable functions. +Bileşenlerin saf, öngörülebilir fonksiyonlar olarak nasıl yazılacağını öğrenmek için **[Bileşenleri Saf Tutmak](/learn/keeping-components-pure)** bölümünü okuyun. -## Your UI as a tree {/*your-ui-as-a-tree*/} +## Arayüzünüzü bir ağaç olarak düşünün {/*your-ui-as-a-tree*/} -React uses trees to model the relationships between components and modules. +React, bileşenler ve modüller arasındaki ilişkileri modellemek için ağaçları kullanır. -A React render tree is a representation of the parent and child relationship between components. +React render ağacı, bileşenler arasındaki ebeveyn ve çocuk ilişkisinin bir temsilidir. -An example React render tree. +Örnek bir React render ağacı. -Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance. +Ağacın tepesine yakın, kök bileşene yakın bileşenler üst düzey bileşenler olarak kabul edilir. Alt bileşeni olmayan bileşenler yaprak bileşenlerdir. Bileşenlerin bu şekilde kategorize edilmesi, veri akışını ve işleme performansını anlamak için kullanışlıdır. -Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. + +JavaScript modülleri arasındaki ilişkiyi modellemek, uygulamanızı anlamanın bir başka yararlı yoludur. Bunu modül bağımlılık ağacı olarak adlandırıyoruz. -An example module dependency tree. +Örnek bir modül bağımlılık ağacı. -A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. +Bağımlılık ağacı genellikle derleme araçları tarafından istemcinin indirmesi ve renderlaması için ilgili tüm JavaScript kodunu paketlemek için kullanılır. Büyük bir paket boyutu, React uygulamaları için kullanıcı deneyimini geriletir. Modül bağımlılık ağacını anlamak, bu tür sorunları ayıklamak için yardımcı olur. -Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance. +Bir React uygulaması için render ve modül bağımlılık ağaçlarının nasıl oluşturulacağını ve bunların kullanıcı deneyimini ve performansı iyileştirmek için nasıl yararlı zihinsel modeller olduğunu öğrenmek için **[Arayüzünüzü Bir Ağaç Olarak Anlamak](/learn/understanding-your-ui-as-a-tree)** bölümünü okuyun. -## What's next? {/*whats-next*/} +## Sırada ne var? {/*whats-next*/} -Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page! +Bu bölümü sayfa sayfa okumaya başlamak için [İlk Bileşeniniz](/learn/your-first-component) bölümüne gidin! -Or, if you're already familiar with these topics, why not read about [Adding Interactivity](/learn/adding-interactivity)? +Ya da bu konulara zaten aşinaysanız, neden [Etkileşim Ekleme](/learn/adding-interactivity) hakkında okumuyorsunuz? From 32ef7171d13b6a6f5a699ee7dafbc057ebbe9f65 Mon Sep 17 00:00:00 2001 From: TolgaYuceel Date: Mon, 5 Feb 2024 21:06:48 +0300 Subject: [PATCH 2/3] fix: some bugs --- src/content/learn/describing-the-ui.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 6a49a06e1..1c9edf615 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -236,7 +236,7 @@ JSX'ten JavaScript verilerine nasıl erişileceğini öğrenmek için **[JSX iç ## Bileşenlere Prop'ları Aktarma {/*passing-props-to-a-component*/} -React bileşenleri birbirleriyle iletişim kurmak için *props* kullanırlar. Her ana bileşen, alt bileşenlerine prop'lar vererek onlara bazı bilgiler aktarabilir. Prop'lar size HTML niteliklerini hatırlatabilir, ancak nesneler, diziler, fonksiyonlar ve hatta JSX dahil olmak üzere herhangi bir JavaScript değerini bunlar aracılığıyla iletebilirsiniz! +React bileşenleri birbirleriyle iletişim kurmak için *props* kullanırlar. Her ana bileşen, alt bileşenlerine prop'lar vererek onlara bazı bilgiler aktarabilir. Prop'lar size HTML özelliklerini hatırlatabilir, ancak nesneler, diziler, fonksiyonlar ve hatta JSX dahil olmak üzere herhangi bir JavaScript değerini bunlar aracılığıyla iletebilirsiniz! @@ -536,7 +536,7 @@ React render ağacı, bileşenler arasındaki ebeveyn ve çocuk ilişkisinin bir -Ağacın tepesine yakın, kök bileşene yakın bileşenler üst düzey bileşenler olarak kabul edilir. Alt bileşeni olmayan bileşenler yaprak bileşenlerdir. Bileşenlerin bu şekilde kategorize edilmesi, veri akışını ve işleme performansını anlamak için kullanışlıdır. +Ağacın tepesine , kök bileşene yakın bileşenler üst düzey bileşenler olarak kabul edilir. Alt elemanı olmayan bileşenler yaprak bileşenlerdir. Bileşenlerin bu şekilde kategorize edilmesi, veri akışını ve işleme performansını anlamak için kullanışlıdır. JavaScript modülleri arasındaki ilişkiyi modellemek, uygulamanızı anlamanın bir başka yararlı yoludur. Bunu modül bağımlılık ağacı olarak adlandırıyoruz. From 79565418247db05edd2b82f51b65210dadc1012a Mon Sep 17 00:00:00 2001 From: TolgaYuceel Date: Wed, 7 Feb 2024 16:31:36 +0300 Subject: [PATCH 3/3] fix: typo fix --- src/content/learn/describing-the-ui.md | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 1c9edf615..d801b6196 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -4,7 +4,7 @@ title: Kullanıcı Arayüzünü Tanımlama -React, kullanıcı arayüzleri (UI) oluşturmak için kullanılan bir JavaScript kütüphanesidir. Kullanıcı arayüzü butonlar, metinler ve resimler gibi küçük birimlerden oluşur. React bunları yeniden kullanılabilir, iç içe yerleştirilebilir *bileşenler* halinde birleştirmenize olanak tanır. Web sitelerinden telefon uygulamalarına kadar ekrandaki her şey bileşenlere ayrılabilir. Bu bölümde, React bileşenlerini oluşturmayı, özelleştirmeyi ve koşullu olarak görüntülemeyi öğreneceksiniz. +React, kullanıcı arayüzleri (UI) render etmek için kullanılan bir JavaScript kütüphanesidir. Kullanıcı arayüzü butonlar, metinler ve resimler gibi küçük birimlerden oluşur. React bunları yeniden kullanılabilir, iç içe yerleştirilebilir *bileşenler* halinde birleştirmenize olanak tanır. Web sitelerinden telefon uygulamalarına kadar ekrandaki her şey bileşenlere ayrılabilir. Bu bölümde, React bileşenlerini oluşturmayı, özelleştirmeyi ve koşullu olarak görüntülemeyi öğreneceksiniz. @@ -188,7 +188,7 @@ Doğru JSX yazmayı öğrenmek için **[JSX ile İşaretleme (Markup) Yazma](/le ## JSX içinde JavaScript kodunu süslü parantezlerle kullanma {/*javascript-in-jsx-with-curly-braces*/} -JSX, JavaScript dosyası içinde HTML benzeri işaretleme yazmanıza olanak tanır ve renderlama mantığını ile içeriği aynı yerde tutar. Bazı durumlarda, bu işaretlemenin içine biraz JavaScript mantığı eklemek veya dinamik bir özelliğe başvurmak isteyebilirsiniz. Bu durumda, JSX içinde süslü parantez kullanarak JavaScript'e bir "pencere açabilirsiniz". +JSX, renderlama mantığını ve içeriği aynı yerde tutarak bir JavaScript dosyası içinde HTML benzeri biçimlendirme yazmanıza olanak tanır. Bazen bu işaretlemenin içine küçük bir JavaScript mantığı eklemek veya dinamik bir özelliğe başvurmak isteyebilirsiniz. Bu durumda, JavaScript'e "bir pencere açmak" için JSX'inizde süslü parantezleri kullanabilirsiniz: @@ -317,9 +317,9 @@ Prop'ların nasıl aktarılacağını ve okunacağını öğrenmek için **[Bile ## Koşullu olarak render etme {/*conditional-rendering*/} -Bileşenlerinizin genellikle farklı koşullara bağlı olarak farklı şeyler göstermesi gerekecektir. React'te, `if` ifadeleri, `&&` ve `? :` operatörleri gibi JavaScript sözdizimlerini kullanarak JSX'i koşullu olarak oluşturabilirsiniz. +Bileşenlerinizin genellikle farklı koşullara bağlı olarak farklı şeyler göstermesi gerekecektir. React'te, `if` ifadeleri, `&&` ve `? :` operatörleri gibi JavaScript sözdizimlerini kullanarak JSX'i koşullu olarak render edebilirsiniz. -Bu örnekte, bir onay işaretini (checkmark) koşullu olarak oluşturmak için JavaScriptdeki `&&` operatörü kullanılmıştır: +Bu örnekte, bir onay işaretini (checkmark) koşullu olarak render etmek için JavaScriptdeki `&&` operatörü kullanılmıştır: @@ -359,7 +359,7 @@ export default function PackingList() { -İçeriği koşullu olarak oluşturmanın farklı yollarını öğrenmek için **[Koşullu Olarak Render Etmek](/learn/conditional-rendering)** bölümünü okuyun. +İçeriği koşullu olarak render etmenin farklı yollarını öğrenmek için **[Koşullu Olarak Render Etmek](/learn/conditional-rendering)** bölümünü okuyun. @@ -459,7 +459,7 @@ h2 { font-size: 20px; } -Bir bileşen listesinin nasıl oluşturulacağını ve bir anahtarın nasıl seçileceğini öğrenmek için **[Listeleri Render Etmek](/learn/rendering-lists)** bölümünü okuyun. +Bir bileşen listesinin nasıl render edileceğini ve bir anahtarın nasıl seçileceğini öğrenmek için **[Listeleri Render Etmek](/learn/rendering-lists)** bölümünü okuyun. @@ -478,7 +478,7 @@ Bileşenlerinizi yalnızca saf fonksiyonlar olarak yazarsanız, kod tabanınız let guest = 0; function Cup() { - // Bad: changing a preexisting variable! + // Kötü: önceden var olan bir değişkeni değiştirir! guest = guest + 1; return

Misafir #{guest} için çay bardağı

; } @@ -528,20 +528,19 @@ Bileşenlerin saf, öngörülebilir fonksiyonlar olarak nasıl yazılacağını React, bileşenler ve modüller arasındaki ilişkileri modellemek için ağaçları kullanır. -React render ağacı, bileşenler arasındaki ebeveyn ve çocuk ilişkisinin bir temsilidir. +React render ağacı, bileşenler arasındaki üst ve alt ilişkisinin bir temsilidir. - + Örnek bir React render ağacı. -Ağacın tepesine , kök bileşene yakın bileşenler üst düzey bileşenler olarak kabul edilir. Alt elemanı olmayan bileşenler yaprak bileşenlerdir. Bileşenlerin bu şekilde kategorize edilmesi, veri akışını ve işleme performansını anlamak için kullanışlıdır. - +Ağacın tepesine, kök bileşene yakın bileşenler üst düzey bileşenler olarak kabul edilir. Alt elemanı olmayan bileşenler yaprak bileşenlerdir. Bileşenlerin bu şekilde kategorize edilmesi, veri akışını ve render etme performansını anlamak için kullanışlıdır. JavaScript modülleri arasındaki ilişkiyi modellemek, uygulamanızı anlamanın bir başka yararlı yoludur. Bunu modül bağımlılık ağacı olarak adlandırıyoruz. - + Örnek bir modül bağımlılık ağacı.