Canlı örneklerle React eğitimi
Ücretsiz bir React 19 eğitimi: bileşenler, JSX, props, state, hook'lar ve performans. Her örnek sayfada çalışır; kodu düzenleyip bileşenin ve konsolun nasıl değiştiğini görebilirsin.
Rehberli bir React yolculuğuna başlaBaşlarken
- React NedirReact, kullanıcı arayüzlerini bileşenlerden kurmaya yarayan bir JavaScript kütüphanesidir. Ekranın mevcut veriye göre ne göstermesi gerektiğini tarif edersin, veri değişince React sayfayı onunla uyumlu tutar.
- React KurulumuReact'i Vite ile bir proje oluşturarak kur: Node.js'i kontrol et, tek bir oluşturma komutu çalıştır, bağımlılıkları yükle ve geliştirme sunucusunu başlat. Oluşturulan dosyalar, production derlemesi ve Create React App'in neden kullanımdan kalktığı da anlatılıyor.
- JSXJSX, React bileşenlerinin içine HTML benzeri işaretleme yazmanı sağlayan bir JavaScript sözdizimi uzantısıdır. Kurallarını öğren: tek kök öğe, kapatılmış etiketler, className, camelCase özellikler, süslü parantezler, satır içi stiller, yorumlar ve neye derlendiği.
- React BileşenleriBir React bileşeni, JSX döndüren bir JavaScript fonksiyonudur. Fonksiyon bileşenlerini nasıl yazıp adlandıracağını, bir ağaçta nasıl birleştireceğini, dosyalara nasıl böleceğini, saf nasıl tutacağını ve bileşenlerin öğelerden farkını öğren.
- React PropsProps, bir React bileşeninin girdileridir: bir ebeveynin bir çocuğa JSX özellikleri olarak aktardığı değerler. Props'u nasıl aktarıp destructure edeceğini, varsayılan değerleri, fonksiyon aktarmayı, props yaymayı ve props'un neden salt okunur olduğunu öğren.
- React childrenchildren, bir bileşenin açılış ve kapanış etiketleri arasına koyduğun her şeyi tutan prop'tur. Onunla sarmalayıcı ve yerleşim bileşenleri kurmayı, birden çok yuvayı adlandırılmış props olarak aktarmayı, children'ı fonksiyon olarak kullanmayı ve Children API'nin ne zaman yanlış araç olduğunu öğren.
- React FragmentBir React Fragment, sayfaya bir düğüm eklemeden birkaç öğeyi tek bir dönüş değerinde gruplar. Kısa <>...</> sözdizimini, <Fragment key> gerektiği durumu ve fragment'ların tablolar ile listeler içinde neden önemli olduğunu öğren.
- Koşullu RenderReact'te koşullu render düz JavaScript'tir: bir bileşenin hangi JSX'i döndüreceğine bir if deyimi, bir ternary ya da && karar verir. Her kalıbı, &&'nin yazdırabildiği başıboş 0'ı, null döndürmeyi ve bir bileşeni gizlemenin onu render etmemekle neden aynı olmadığını öğren.
- React Listeler ve KeyReact'te bir liste render etmek için bir dizi üzerinde map() çağırır ve her öğe için JSX döndürürsün; her öğeye de bir key prop'u verirsin. Önce filter sonra map yapmayı, key'lerin nereden gelmesi gerektiğini ve liste değiştiğinde index key'lerin öğeleri neden karıştırdığını öğren.
- React OlaylarıReact olayları, bir fonksiyon alan onClick ve onChange gibi props'tur; kullanıcı bir şey yaptığında React bu fonksiyonu bir olay nesnesiyle çağırır. Bir işleyiciyi çağırmak yerine aktarmayı, argüman geçirmeyi, e.target.value ile e.key'i okumayı, form yenilenmesini engellemeyi ve kabarcıklanmayı durdurmayı öğren.
- React CSS ve StilReact bileşenlerini className ve sıradan CSS ile, JavaScript'te hesaplanan değerler için style prop'u ile, kapsamlı sınıf adları için CSS Modules ile ya da Tailwind yardımcı sınıflarıyla stillendirirsin. Her birini, koşullu sınıfları ve hangisinin ne zaman kullanılacağını öğren.
State ve formlar
- useStateuseState bir bileşene yeniden render'lardan sağ çıkan bir değer ve değer değiştiğinde ekranı yeniden çizen bir setter verir. Sözdizimini, updater fonksiyonlarını, state'teki nesne ve dizileri ve bir değerin onu ayarladıktan hemen sonra neden eski göründüğünü öğren.
- State'te Dizi ve Nesne GüncellemeReact state'indeki bir diziyi ya da nesneyi değiştirmek için yenisini oluştur ve setter'a aktar. Öğe eklemeyi, çıkarmayı, değiştirmeyi, araya eklemeyi ve sıralamayı, iç içe nesneleri güncellemeyi ve state'i değiştirmenin ekranı neden değiştirmediğini öğren.
- React FormlarReact'te kontrollü input'larla form kur: metin alanları, textarea, select, onay kutuları ve radyo düğmeleri, birçok alan için tek bir state nesnesi, onSubmit ile gönderme, doğrulama hatalarını gösterme ve React 19 form action'ları.
- Kontrollü ve Kontrolsüz BileşenlerKontrollü bir input değerini React state'inden alır ve yalnızca onChange ile değişir. Kontrolsüz bir input kendi değerini DOM'da tutar; onu bir ref ya da FormData ile okursun. Farkı, yaygın uyarıları ve hangisinin ne zaman kullanılacağını öğren.
- State'i Yukarı TaşımakState'i yukarı taşımak, state'i iki bileşenden çıkarıp en yakın ortak ebeveynlerine koymak demektir; ebeveyn değeri ve bir setter'ı props olarak geri aşağı aktarır. Ne zaman taşınacağını, bunun üç adımda nasıl yapılacağını ve state'in ne zaman yerelde kalması gerektiğini öğren.
- useReduceruseReducer state saklar ve her güncellemeyi tek bir reducer fonksiyonuna taşır: bir action dispatch edersin, reducer da sonraki state'i döndürür. Sözdizimini, saf bir reducer yazmayı, bir todo listesi örneğini, lazy başlatmayı ve ne zaman useState yerine seçileceğini öğren.
Efektler ve ref'ler
- useEffectuseEffect, React ekranı güncelledikten sonra kod çalıştırır; böylece bir bileşen React dışındaki bir şeyle senkronize olabilir: bir zamanlayıcı, bir abonelik, bir olay dinleyicisi. Bağımlılık dizisinin üç biçimini, temizlemeyi, sonsuz döngüleri ve ne zaman hiç efekte ihtiyacın olmadığını öğren.
- React Veri ÇekmeReact'te veriyi isteği useEffect içinde başlatarak, yükleme, hata ve veriyi state'te tutarak ve girdiler değiştikten sonra gelen yanıtları yok sayarak çek. Efektlerde async/await, AbortController, yarış durumları ve ne zaman bunun yerine bir kütüphane kullanılacağı anlatılıyor.
- useRefuseRef bir bileşene, içeriğini render'lar arasında koruyan ve değiştirdiğinde render'a yol açmayan bir kutu, `{ current }`, verir. Onu bir DOM düğümüne ulaşmak (odaklama, kaydırma, ölçme) ya da bir zamanlayıcı id'sini veya ekranın göstermediği herhangi bir değeri saklamak için kullan.
- forwardRefforwardRef bir bileşenin ebeveyninden bir ref alıp onu içindeki bir DOM düğümüne bağlamasını sağlar. React 19'da fonksiyon bileşenleri `ref`'i normal bir prop olarak alır, bu yüzden yeni kodun artık forwardRef'e ihtiyacı yoktur. İki sürümü, useImperativeHandle'ı ve TypeScript tiplerini çalışırken gör.
- useLayoutEffectuseLayoutEffect useEffect gibi çalışır ama React DOM'u güncelledikten hemen sonra ve tarayıcı boyamadan önce çalışır. Onu bir öğeyi ölçüp yerleşimi görünür bir titreme olmadan ayarlamak için kullan, geri kalan her şey için useEffect'i sakla.
Hook'lar ve context
- React Hook'larıHook, adı use ile başlayan ve bir bileşenin state, context, ref ya da efekt gibi bir React özelliğini kullanmasını sağlayan bir fonksiyondur. Tüm yerleşik hook'ları amaçlarına göre gruplanmış hâlde, her hook'un uyduğu iki kuralı ve kendi hook'unu nasıl yazacağını gör.
- useContextuseContext bir ebeveyn bileşenin sağladığı bir değeri okur; böylece derinde iç içe geçmiş bir bileşen, aradaki her bileşen onu prop olarak aşağı aktarmadan bu değeri alır. createContext'i, provider'ları, context'i bir çocuktan güncellemeyi ve context'in yeniden render'ları nasıl etkilediğini öğren.
- Prop DrillingProp drilling, bir prop'u yalnızca daha aşağıdaki bir bileşen kullanabilsin diye onu kullanmayan bileşenlerden geçirmektir. Onu çalıştırılabilir bir örnekte, bir uygulama büyüdükçe neden zarar verdiğini ve çözümlerini denenecekleri sırayla gör: composition, context, sonra bir state kütüphanesi.
- Özel Hook'larÖzel hook, adı use ile başlayan ve başka hook'ları çağıran bir fonksiyondur; böylece birkaç bileşen aynı state'li mantığı yeniden kullanabilir. useToggle, useLocalStorage, useDebounce ve useWindowWidth yaz ve her çağrının neden kendi state'ini aldığını öğren.
- Hook KurallarıHook'ların iki kuralı vardır: onları bir bileşenin en üst düzeyinde çağır, asla koşulların, döngülerin ya da iç içe fonksiyonların içinde değil; ve onları yalnızca fonksiyon bileşenlerinden ya da özel hook'lardan çağır. React'in neden her render'da aynı çağrı sırasına ihtiyaç duyduğunu ve sıra değiştiğinde aldığın hataları nasıl düzelteceğini öğren.
- useIduseId her bileşen örneği için benzersiz, sabit bir id döndürür; böylece bir etiket, bir input ve bir aria-describedby ipucu, bileşen birçok kez görünse bile birbirini gösterebilir. Math.random ve sayaçların sunucu tarafı render'da neden bozulduğunu ve useId'nin neden liste key'leri için olmadığını öğren.
- useSyncExternalStoreuseSyncExternalStore bir bileşeni React dışında yaşayan veriye, örneğin küçük bir store modülüne ya da navigator.onLine gibi bir tarayıcı API'sine abone eder ve bu veri her değiştiğinde yeniden render eder. subscribe ve getSnapshot'ı, snapshot'ın neden önbelleğe alınması gerektiğini ve getServerSnapshot'ı öğren.
Render ve performans
- React RenderBir React bileşeni, state'i değiştiğinde, ebeveyni render olduğunda ya da okuduğu bir context değiştiğinde yeniden render olur. Render ile commit arasındaki farkı, sanal DOM'un gerçekte ne anlama geldiğini ve ihtiyacın olmayan render'ları nasıl durduracağını öğren.
- useMemouseMemo bir hesaplamanın sonucunu render'lar arasında önbelleğe alır ve yalnızca bağımlılıkları değiştiğinde yeniden hesaplar. Sözdizimini, bir memo çocuğu için bir nesneyi nasıl sabit tutacağını ve useMemo'nun ne zaman değmediğini öğren.
- useCallbackuseCallback, bağımlılıkları değişene kadar render'lar arasında aynı fonksiyonu döndürür. Yalnızca o fonksiyon bir memo çocuğuna aktarıldığında ya da bir efekt bağımlılığı olarak kullanıldığında işe yarar. Sözdizimini, useMemo'dan farkını ve kaçınılacak hataları öğren.
- React.memomemo bir bileşeni sarar; böylece props'u geçen seferkiyle sığ olarak eşit olduğunda React onun yeniden render'ını atlar. Ne zaman işe yaradığını, props'taki yeni nesne ve fonksiyonların onu neden boşa çıkardığını ve neyi durdurmadığını öğren.
- useTransitionuseTransition bir state güncellemesini acil değil olarak işaretler; böylece React yavaş kısmı arka planda render ederken sayfayı akıcı tutabilir. isPending'i, startTransition'ı, React 19'daki async transition'ları ve bunun neden debounce olmadığını öğren.
- useDeferredValueuseDeferredValue sana ağır render'lar sırasında geride kalmasına izin verilen bir değer kopyası verir; böylece yavaş bir liste yetişirken bir input akıcı kalır. Nasıl çalıştığını, React 19'daki başlangıç değerini ve useTransition ile debounce'a göre farkını öğren.
- Suspense ve lazySuspense, içindeki bileşenler hazır değilken bir yedek içerik gösterir; React.lazy ise bir bileşenin kodunu yalnızca ilk render olduğunda yükler. Kod bölmeyi, iç içe sınırları, React 19'da use() ile Suspense'i ve hataların ele alınmasını öğren.
React 19 ve ileri konular
- React 19React 19; Actions, useActionState, useOptimistic, use, prop olarak ref ve belge meta verisini ekledi, 19.2 ise Activity ve useEffectEvent'i ekledi. Her özelliği çalışırken, nelerin kaldırıldığını ve nasıl yükseltileceğini gör.
- useActionStateuseActionState async bir action'ı sarar, en son döndürdüğü değeri tutar ve hâlâ çalışıp çalışmadığını söyler. İmzayı, form action'larını, doğrulama hatalarını döndürmeyi ve onu bir formun dışında çağırmayı öğren.
- useOptimisticuseOptimistic, async bir action hâlâ çalışırken beklediğin sonucu gösterir, sonra bittiğinde gerçek state'e geri döner; böylece başarısız bir istek kendini geri alır. Sözdizimini, reducer biçimini ve neden bir action içinde çalışması gerektiğini öğren.
- React use Hook'uuse, render sırasında bir promise'in ya da bir context'in değerini okur. Bir promise ile veri gelene kadar askıya alınır ve en yakın Suspense yedek içeriğini gösterir. Diğer hook'ların aksine if deyimlerinin ve döngülerin içinde çalışabilir.
- React Error BoundaryError boundary, içindeki bileşenler render olurken fırlatılan hataları yakalayan ve boş bir ekran yerine bir yedek arayüz gösteren bir bileşendir. Neyi yakaladığını, onu bir class olarak nasıl yazacağını, nasıl sıfırlayacağını ve react-error-boundary kütüphanesini öğren.
- React PortalcreatePortal bir bileşenin bir kısmını document.body gibi farklı bir DOM düğümüne render eder; bileşen ise React ağacında aynı yerde kalır. Onu overflow hidden ve z-index katmanlamasından kaçması gereken modallar, tooltip'ler ve menüler için kullan.
- React Strict ModeStrictMode, yalnızca geliştirmede çalışan bir sarmalayıcıdır: bileşenleri iki kez render eder, mount sırasında efektleri kurulum, temizleme, kurulum olarak çalıştırır ve kullanımdan kalkan API'ler hakkında uyarır; böylece saf olmayan render'lar ve eksik temizlemeler erkenden ortaya çıkar. Production'da hiçbir şey yapmaz.
- Bileşen Yaşam DöngüsüHer React bileşeni mount olur (görünür), güncellenir (yeniden render olur) ve unmount olur (kaldırılır). Her aşamanın useEffect ile nasıl eşleştiğini, class yaşam döngüsü metotlarını ve hook karşılıklarını, render ve commit aşamalarını öğren.
- Class BileşenleriBir class bileşeni, React.Component'ten türeyen ve bir render metodundan JSX döndüren bir JavaScript class'ıdır. this.props, this.state ve setState'i, olay işleyicilerini bağlamayı, yaşam döngüsü metotlarını, PureComponent'i ve bir class'ı fonksiyon bileşenine nasıl dönüştüreceğini öğren.
Karşılaştırmalar ve mülakatlar
- React Mülakat SorularıBaşlangıçtan ileri seviyeye yaklaşık 30 React mülakat sorusu; her biri bir mülakatçının kabul edeceği kısa bir cevapla ve okumaktansa görmesi daha kolay olanlar için canlı kodla.
- React vs AngularReact, başka araçlarla birleştirdiğin bir arayüz kütüphanesidir; Angular ise yönlendirme, formlar, HTTP ve bağımlılık enjeksiyonu yerleşik tam bir framework'tür. İkisinde de yazılmış aynı bileşenleri yan yana karşılaştır.
- React vs VueReact ve Vue, kullanıcı arayüzlerini bileşenlerden kurmaya yarayan JavaScript araçlarıdır. İşaretlemede (JSX ve şablonlar), değişikliklere nasıl tepki verdiklerinde (değişmez state ve yeniden render'lar ile değiştirilebilir reaktif ref'ler) ve ekosistemin ne kadarının resmi olduğunda ayrılırlar.
- TypeScript ile ReactBir React uygulaması TypeScript ile nasıl tiplenir: props ve children, union ve null ile useState, DOM öğeleri için useRef, olay işleyicileri, context, generic bileşenler ve yerel öğe props'u.
