├── README.md ├── _config.yml ├── _layouts └── default.html ├── assets └── css │ └── style.scss ├── gelismis-kilavuzlar ├── ajax-kullanimi.md ├── derinlemesine-jsx.md ├── es6-olmadan-react.md ├── fragmentler.md ├── jsx-olmadan-react.md ├── lifecycle-fonksiyonlari.md ├── react-hook.md └── react-terimler-sozlugu.md ├── hizli-baslangic ├── click-ve-change-olaylari.md ├── component-ve-props.md ├── composition-ve-inheritance.md ├── elementleri-render-etmek.md ├── formlar.md ├── jsx-nedir.md ├── listeler-ve-keyler.md ├── merhaba-dunya.md ├── sartli-render.md ├── state-guncellemek.md └── state-ve-lifecycle.md ├── kurulum └── reactjs-kurulumu.md ├── ornek-projeler └── ornek-projeler.md ├── reactjs.md └── uygulamali-egitim ├── etkilesimli-component.md ├── kazanani-bildirmek.md ├── siradaki-oyuncu.md ├── verileri-props-uzerinden-gecirmek.md ├── veriyi-korumanin-onemi.md └── xox-oyunu.md /README.md: -------------------------------------------------------------------------------- 1 | *Bu dokümantasyon, React'ın resmi Türkçe çevirisi yapılmadan önce hazırlanmıştır.* 2 | 3 | *Artık güncellenmemektedir ve React'ın yeni özelliklerini içermemektedir.* 4 | 5 | *En güncel ve doğru bilgi için lütfen [React'ın resmi Türkçe dokümantasyonunu](https://tr.react.dev/) takip edin.* 6 | 7 |
8 | 9 |

10 | 11 |

12 | 13 |

React JS - Türkçe Doküman

14 | 15 |

omergulcicek.github.io/react

16 | 17 | React JS dokümantasyonunun Türkçe'ye uyarlanmış halidir. 18 | 19 | Birebir çeviri değildir; eklemeler, silmeler ve düzenlemeler olmuştur. 20 | 21 | Element, Component, Props, State, Class gibi yazılımsal kelimelerde daha kolay anlaşılması için çeviri yapılmamıştır. 22 | 23 | Kendi eklediğim notları eğik yazılı şekilde aralara ekleyeceğim. 24 | 25 | Hatalı yerlerin düzeltilmesi için pull request gönderebilirsiniz. 26 | 27 | 28 |

Kurulum

29 | 30 | - React JS Kurulumu 31 | 32 |

Hızlı Başlangıç

33 | 34 | - Merhaba Dünya 35 | - JSX Nedir? 36 | - Elementleri Render Etmek 37 | - Component ve Props 38 | - State ve Lifecycle 39 | - Click ve Change Olayları 40 | - Şartlı Render 41 | - Listeler ve Keyler 42 | - Formlar 43 | - State Güncellemek 44 | - Composition ve Inheritance 45 | 46 |

Gelişmiş Kılavuzlar

47 | 48 | - Derinlemesine JSX 49 | - ES6 Olmadan React 50 | - JSX Olmadan React 51 | - Fragmentler 52 | - Lifecycle Fonksiyonları 53 | - React Terimler Sözlüğü 54 | - AJAX Kullanımı 55 | - React Hook 56 | 57 |

Uygulamalı Eğitim

58 | 59 | - XOX Oyunu 60 | - Verileri Props Üzerinden Geçirmek 61 | - Etkileşimli Component 62 | - Veriyi Korumanın Önemi 63 | - Sıradaki Oyuncu 64 | - Kazananı Bildirmek 65 | 66 |

Örnek Projeler

67 | 68 | - Calculator: Hesap Makinesi 69 | - Emoji Search: Emoji Arama 70 | - Memory Game: Hafıza Oyunu 71 | - Leblebi: Otomatik Tamamlama 72 | - React-IcoMoon: React ile Icon Kullanımı 73 | 74 | Geliştirdiğiniz React uygulamalarını listeye ekleyebilirsiniz. 75 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% seo %} 7 | 8 | 9 | 10 | 11 | 12 | 13 | 20 | 21 |

22 | {{ content }} 23 | 24 | 34 |

35 | 36 | {% if site.google_analytics %} 37 | 46 | {% endif %} 47 | 48 | 49 | -------------------------------------------------------------------------------- /assets/css/style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | @import "{{ site.theme }}"; 5 | 6 | .page-header { 7 | background-color: #61dafb; 8 | background-image: linear-gradient(120deg, #0f4f61, #61dafb); 9 | } 10 | 11 | .highlight .err { 12 | color: inherit; 13 | background-color: inherit; 14 | } 15 | 16 | .site-footer { 17 | text-align: center; 18 | } 19 | -------------------------------------------------------------------------------- /gelismis-kilavuzlar/ajax-kullanimi.md: -------------------------------------------------------------------------------- 1 |

Ajax Kullanımı

2 | 3 | React ile istediğiniz herhangi bir AJAX kütüphanesini kullanabilirsiniz. 4 | 5 | Popüler olanlar Axios, jQuery AJAX ve tarayıcıda yerleşik olarak bulunan window.fetch. 6 | 7 |

Lifecycleda AJAX isteğini nerede yapmalıyım?

8 | 9 | AJAX isteklerini `componentDidMount` fonksiyonunda kullanmalısınız. AJAX isteğinden gelen veriyi `setState` yardımıyla state'e atarak componentin içerisinde kullanabilirsiniz. 10 | 11 | Aşağıdaki component, `state`i doldurmak için `componentDidMount`ta bir AJAX çağrısının nasıl yapılacağını gösterir: 12 | 13 | ```js 14 | { 15 | items: [ 16 | { id: 1, name: "Apples", price: "$2" }, 17 | { id: 2, name: "Peaches", price: "$5" } 18 | ]; 19 | } 20 | ``` 21 | 22 | ```js 23 | class MyComponent extends React.Component { 24 | constructor(props) { 25 | super(props); 26 | this.state = { 27 | error: null, 28 | isLoaded: false, 29 | items: [] 30 | }; 31 | } 32 | 33 | componentDidMount() { 34 | //AJAX isteğini burada başlatıyoruz. 35 | fetch("https://api.example.com/items") 36 | .then(res => res.json()) 37 | .then( 38 | result => { 39 | //AJAX'tan gelen veri ile state'imizi güncelliyoruz. 40 | this.setState({ 41 | isLoaded: true, 42 | items: result.items 43 | }); 44 | }, 45 | error => { 46 | this.setState({ 47 | isLoaded: true, 48 | error 49 | }); 50 | } 51 | ); 52 | } 53 | 54 | render() { 55 | const { error, isLoaded, items } = this.state; 56 | if (error) { 57 | return

Error: {error.message}

; 58 | } else if (!isLoaded) { 59 | return

Yükleniyor...

; 60 | } else { 61 | return ( 62 |

65 | {item.name} {item.price} 66 |

69 | ); 70 | } 71 | } 72 | } 73 | ``` 74 | 75 | Sıradaki Eğitim: React Hook 76 | -------------------------------------------------------------------------------- /gelismis-kilavuzlar/derinlemesine-jsx.md: -------------------------------------------------------------------------------- 1 |

Derinlemesine JSX

2 | 3 | Temel olarak, JSX sadece `React.createElement(component, props, ...children)` fonksiyonları için syntax sağlar. 4 | 5 | JSX kodu: 6 | 7 | ```js 8 | 9 | Tıkla 10 | 11 | ``` 12 | 13 | Yukarıdaki kodu, bu koda derler: 14 | 15 | ```js 16 | React.createElement( 17 | MyButton, 18 | {color: 'blue', shadowSize: 2}, 19 | 'Tıkla' 20 | ) 21 | ``` 22 | 23 | Hiçbir child yoksa etiketi direkt kapatarakta kullanabilirsiniz: 24 | 25 | ```js 26 |

27 | ``` 28 | 29 | Yukarıdaki kodu, bu koda derler: 30 | 31 | ```js 32 | React.createElement( 33 | 'div', 34 | {className: 'sidebar'}, 35 | null 36 | ) 37 | ``` 38 | 39 | JSX'in JavaScript'e nasıl dönüştürüldüğünü test etmek isterseniz, online Babel derleyicisini deneyebilirsiniz. 40 | 41 |

React'te Element Tipini Belirleme

42 | 43 | Bir JSX etiketinin ilk harfi, React elementinin türünü belirler. 44 | 45 | Büyük harfle başlayan bir JSX etiketi, bunun bir React componenti olduğunu belirtir. Bu etiketler, adlandırılmış değişkene doğrudan referans olarak derlenir; bu nedenle, JSX `` ifadesini kullanırsanız, `Foo` scope (kapsam) dahilinde olmalıdır. 46 | 47 |

React Scope'ta Olmalı

48 | 49 | JSX `React.createElement` çağrısına derlediğinden, `React` kitaplığı daima JSX kodunuzun scope'unda olmalıdır. 50 | 51 | Örneğin, `React` ve `CustomButton` doğrudan JavaScript'te atıf yapılmamasına rağmen, bu kodda her iki importta gereklidir: 52 | 53 | ```js 54 | import React from 'react'; 55 | import CustomButton from './CustomButton'; 56 | 57 | function WarningButton() { 58 | // return React.createElement(CustomButton, {color: 'red'}, null); 59 | return ; 60 | } 61 | ``` 62 | 63 | Bir JavaScript paketleyicisi kullanmazsanız ve React'i `