From dc1e59c3fb5834fcbaabbc020b4745b7ff76eff5 Mon Sep 17 00:00:00 2001 From: Samet SARIKAYA <13sametsarikaya@gmail.com> Date: Mon, 18 May 2026 22:25:22 +0300 Subject: [PATCH] =?UTF-8?q?chore(turkish):=20G=C3=BCn=2025-26=20=C3=A7evir?= =?UTF-8?q?isi=20eklendi=20(=C3=96zel=20Hook'lar,=20Context)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../25_Gun_Ozel_Hooklar/25_ozel_hooklar.md | 228 ++++++++++++++++++ Turkish/26_Gun_Context/26_context.md | 39 +++ Turkish/readMe.md | 2 + 3 files changed, 269 insertions(+) create mode 100644 Turkish/25_Gun_Ozel_Hooklar/25_ozel_hooklar.md create mode 100644 Turkish/26_Gun_Context/26_context.md diff --git a/Turkish/25_Gun_Ozel_Hooklar/25_ozel_hooklar.md b/Turkish/25_Gun_Ozel_Hooklar/25_ozel_hooklar.md new file mode 100644 index 0000000..9a4c4d7 --- /dev/null +++ b/Turkish/25_Gun_Ozel_Hooklar/25_ozel_hooklar.md @@ -0,0 +1,228 @@ +
+

30 Days Of React: Özel Hook'lar (Custom Hooks)

+ + + + + Twitter Follow + + +Yazar: +Asabeneh Yetayeh
+ Ekim, 2020 + + +
+ +[<< Gün 24](../24_Gun_Projeler/24_projeler.md) | [Gün 26 >>](../26_Gun_Context/26_context.md) + +![30 Days of React banner](../../images/30_days_of_react_banner_day_25.jpg) + +# Özel Hook'lar (Custom Hooks) + +Mevcut React hook'larının üzerine özel bir hook oluşturmak mümkündür. Örneğin veri çekerken fetch veya axios ile HTTP isteği göndermek ve React yaşam döngüsünü yönetmek için useEffect hook'unu kullanırız. useEffect ve useState üzerine useFetch adında bir özel hook oluşturalım. + +Önceki bölümde bu kod parçasını yazmıştık ve useEffect hook'larını bir API'den veri çekmek için kullandık. Şimdi bu kodu bir özel hook'a dönüştürelim. Özel hook için isimlendirme kuralı camelCase'dir ve `use` kelimesiyle başlar; bu yüzden özel hook'umuza `useFetch` adını verdik. + +```js +import React, { useState, useEffect } from 'react' +import axios from 'axios' +import ReactDOM, { findDOMNode } from 'react-dom' + +const Country = ({ country: { name, flag, population } }) => { + return ( +
+
+ {name} +
+

{name.toUpperCase()}

+
+

+ Nüfus: + {population} +

+
+
+ ) +} + +const App = (props) => { + // başlangıç state ve güncelleme metodu + const [data, setData] = useState([]) + + useEffect(() => { + fetchData() + }, []) + + const fetchData = async () => { + const url = 'https://restcountries.eu/rest/v2/all' + try { + const response = await fetch(url) + const data = await response.json() + setData(data) + } catch (error) { + console.log(error) + } + } + + return ( +
+

Hook Kullanarak Veri Çekme

+

API Çağrısı

+
+

API'de {data.length} ülke var

+
+ {data.map((country) => ( + + ))} +
+
+
+ ) +} + +const rootElement = document.getElementById('root') +ReactDOM.render(, rootElement) +``` + +`useFetch.js` adında bir dosya oluşturun ve useState ile useEffect'i import edin. Ardından yukarıdaki kodun state, useEffect ve fetchData fonksiyon kısmını useFetch.js dosyasına taşıyın. + +```js +import { useState, useEffect } from 'react' + +const useFetch = () => { + const [data, setData] = useState([]) + + const fetchData = async () => { + const url = 'https://restcountries.eu/rest/v2/all' + try { + const response = await fetch(url) + const data = await response.json() + setData(data) + } catch (error) { + console.log(error) + } + } + + useEffect(() => { + fetchData() + }, []) +} +``` + +Ardından useFetch fonksiyonunun bir parametre almasını sağlayalım. Veri çekerken yalnızca API değiştiğinden fonksiyon için bir URL parametresi geçirelim. + +```js +import { useState, useEffect } from 'react' + +const useFetch = (url) => { + const [data, setData] = useState([]) + + const fetchData = async () => { + try { + const response = await fetch(url) + const data = await response.json() + setData(data) + } catch (error) { + console.log(error) + } + } + + useEffect(() => { + fetchData() + }, []) +} + +export default useFetch +``` + +Yukarıdaki kodla veriyi çekebilmeliyiz ancak fonksiyonu useEffect içine koymak daha doğrudur; fonksiyon kodunu useEffect'e taşıyalım. + +```js +import { useState, useEffect } from 'react' + +export const useFetch = (url) => { + const [data, setData] = useState([]) + + useEffect(() => { + const fetchData = async () => { + try { + const response = await fetch(url) + const data = await response.json() + setData(data) + } catch (error) { + console.log(error) + } + } + fetchData() + }, [url]) + + return data +} + +export default useFetch +``` + +Şimdi her şeyi bir araya getirelim ve çalıştıralım. + +```js +// index.js + +import React, { useState, useEffect } from 'react' +import axios from 'axios' +import ReactDOM, { findDOMNode } from 'react-dom' +import useFetch from './useFetch' + +const Country = ({ country: { name, flag, population } }) => { + return ( +
+
+ {name} +
+

{name.toUpperCase()}

+
+

+ Nüfus: + {population} +

+
+
+ ) +} + +const App = (props) => { + const url = 'https://restcountries.eu/rest/v2/all' + const data = useFetch(url) + + return ( +
+

Özel Hook'lar

+

API Çağrısı

+
+

API'de {data.length} ülke var

+
+ {data.map((country) => ( + + ))} +
+
+
+ ) +} + +const rootElement = document.getElementById('root') +ReactDOM.render(, rootElement) +``` + +useState ve useEffect hook'ları günlük olarak kullandığınız en yaygın React hook'larıdır. Temel hook'lara ek olarak çok sık kullanılmayan başka hook'lar da vardır. Tüm hook'ları nasıl kullanacağınızı bilmek zorunda değilsiniz. useState, useEffect ve useRef çok önemli hook'lardır ve nasıl kullanılacaklarını bilmeniz önerilir. + +# Egzersizler + +Not: Ülkeler uygulamasını geliştirmeye devam edin. + +1. [Ülkeler API](https://restcountries.eu/rest/v2/all)'sini kullanarak aşağıdaki uygulamayı geliştirin. +[DEMO](https://www.30daysofreact.com/day-23/countries-data) + +🎉 TEBRİKLER! 🎉 + +[<< Gün 24](../24_Gun_Projeler/24_projeler.md) | [Gün 26 >>](../26_Gun_Context/26_context.md) diff --git a/Turkish/26_Gun_Context/26_context.md b/Turkish/26_Gun_Context/26_context.md new file mode 100644 index 0000000..2f4f941 --- /dev/null +++ b/Turkish/26_Gun_Context/26_context.md @@ -0,0 +1,39 @@ +
+

30 Days Of React: Context

+ + + + + Twitter Follow + + +Yazar: +Asabeneh Yetayeh
+ Ekim, 2020 + + +
+ +[<< Gün 25](../25_Gun_Ozel_Hooklar/25_ozel_hooklar.md) | [Gün 27 >>](../27_Gun_useRef/27_useref.md) + +![30 Days of React banner](../../images/30_days_of_react_banner_day_26.jpg) + +# Context + +Context, bileşen ağacı boyunca her düzeydeki her alt bileşene prop'ları manuel olarak aktarmak zorunda kalmadan veri geçirmemizi sağlar. + +React'te veriler prop'lar aracılığıyla yukarıdan aşağıya (ebeveynden çocuğa) aktarılır; ancak bu yöntem, bir uygulama içindeki pek çok bileşenin ihtiyaç duyduğu bazı prop türleri (örneğin yerel dil tercihi, UI teması) için zahmetli olabilir. Context, ağacın her seviyesinden bir prop'u açıkça geçirmek zorunda kalmadan bu tür değerleri bileşenler arasında paylaşmanın bir yolunu sunar. + +## Context Ne Zaman Kullanılır? + +Context, geçerli kimliği doğrulanmış kullanıcı, tema veya tercih edilen dil gibi, bir React bileşen ağacı için "global" sayılabilecek verileri paylaşmak amacıyla tasarlanmıştır. Örneğin aşağıdaki kodda Button bileşenini stillemek için bir "tema" prop'unu elle aktarıyoruz. + +Yukarıdaki metin herhangi bir değişiklik yapılmadan [React belgeleri](https://reactjs.org/docs/context.html)'nden alınmıştır. + +React belgelerinde context hakkında oldukça iyi bilgiler yer almaktadır; [React belgelerine](https://reactjs.org/docs/context.html) göz atabilirsiniz. + +# Egzersizler + +🎉 TEBRİKLER! 🎉 + +[<< Gün 25](../25_Gun_Ozel_Hooklar/25_ozel_hooklar.md) | [Gün 27 >>](../27_Gun_useRef/27_useref.md) diff --git a/Turkish/readMe.md b/Turkish/readMe.md index c77a1b8..73fb860 100644 --- a/Turkish/readMe.md +++ b/Turkish/readMe.md @@ -47,3 +47,5 @@ | 22 | [Hook ile Form](./22_Gun_Hook_ile_Form/22_hook_ile_form.md) | | 23 | [Hook ile Veri Çekme](./23_Gun_Hook_ile_Veri_Cekme/23_hook_ile_veri_cekme.md) | | 24 | [Projeler](./24_Gun_Projeler/24_projeler.md) | +| 25 | [Özel Hook'lar](./25_Gun_Ozel_Hooklar/25_ozel_hooklar.md) | +| 26 | [Context](./26_Gun_Context/26_context.md) |