React Öğren - Kodlama Kursu
React Öğren - Kodlama Kursu — Telefonunda JSX yazarak ve çalıştırarak React programlamayı öğren
React Öğren - Kodlama Kursu, biraz HTML, CSS veya JavaScript bilen yeni başlayanlara ve başka bir framework’ten geçiş yapan geliştiricilere React programlamayı öğreten, başlangıçta ücretsiz bir iOS ve Android uygulamasıdır. Bir kod düzenleyicide JSX yaz, Çalıştır’a dokun ve bileşeninin canlı önizlemede oluşturulmasını izle. 88 kurs ve 324 ders, seni ilk bileşenden hooks ve state management üzerinden Next.js’e kadar götürür; bu süreçte 20 rehberli proje de yer alır.
- Fiyat
- Ücretsiz, Pro yükseltmesi
- Platformlar
- iOS ve Android
- Diller
- 22
- Yaş derecelendirmesi
- 4+
- Sürüm
- 82.6.1
- Gereksinimler
- iOS 15.1 veya üzeri
- App Store
- 3.8 ★ (4)
Bileşenin bir sunucuda değil, telefonunda oluşturulur.
runtime, ReactDOM ve Babel uygulamaya dahil edilmiştir; böylece yazdığın JSX derlenir ve cihazda görüntülenir. Az önce oluşturduğun düğmeye dokunabilir, formuna yazı yazabilir ve kullanıcı arayüzünün tepki verdiğini görebilirsin. Hooks’un mantığını kavramanı sağlayan geri bildirim döngüsü budur.
Nedir
React Öğren - Kodlama Kursu, iOS ve Android için hazırlanmış, 88 kurs ve 324 etkileşimli ders içeren, başlangıçta ücretsiz bir React kursudur. JSX’in ilk satırından hooks, state management, React 19 ve Next.js App Router’a kadar ilerlersin. Yerleşik düzenleyici kodunu cihazda derler ve bileşeni canlı önizlemede oluşturur; 20 rehberli proje de ilerlemeden önce her adımı kontrol eder. Bu, bağımsız bir öğrenme uygulamasıdır ve Meta veya Vercel ile bağlantısı yoktur.
Uygulamanın içinde
Nasıl görünüyor
Kurs
React kursunda neler öğretiliyor?
Uygulamanın kendi listesinden alınan 88 kurs, React’e ilk kez çalışırken izlenecek olağan sıraya göre düzenlenmiştir.
React Kickoff, JSX ve Props & Composition
Bileşenler, deklaratif UI ve React’in DOM’u nasıl güncellediği; ardından JSX kuralları, listeleri oluşturma ve props ile verileri alt bileşenlere aktarma.
State, Events, Forms ve useRef
useState ve olay yönetimi, doğrulamalı kontrollü formlar ve render işlemini tetiklemeden değerler ile DOM’a erişmek için useRef.
useEffect, Data Fetching ve Custom Hooks
Effect’lerin ne zaman çalıştığı, bağımlılık dizileri, API çağrıları için yüklenme ve hata durumları ve yeniden kullanılabilir mantığı kendi hook’larına ayırma.
Context, Redux Toolkit ve Zustand
Context ve useReducer ile prop drilling yapmadan state paylaşımı; ardından daha büyük uygulamalar için RTK Query içeren Redux Toolkit, Zustand ve Jotai.
Routing, React Query ve Büyük Ölçekli Formlar
İstemci tarafı yönlendirme ve React Router kalıpları, TanStack Query ve SWR ile sunucu state’i, React Hook Form ve iyimser UI.
Performans, Testing ve TypeScript
Oluşturma ve memoisation, code splitting, sanallaştırılmış listeler, React Testing Library ile testing ve bileşenler ile hook’ları tiplendirme.
React 19, Server Components ve Next.js
Server Components ve Actions, SSR ve hydration; ardından data fetching, caching ve authentication ile Next.js App Router.
Nasıl çalışır
Bir ders nasıl işlenir?
Bir ders, hemen ardından yazıp çalıştıracağın kısa bir kavram açıklamasından oluşur; böylece fikir ve sonucu aynı ekranda görürsün.
Bir kavramı oku
Öğrenme yolundan bir kurs aç ve state’in nasıl güncellendiği veya bir listenin neden keys’e ihtiyaç duyduğu gibi kısa bir dersi oku. Kurs genel görünümü, hangi derslerin ücretsiz olduğunu gösterir; böylece başlamadan önce formatı görebilirsin.
JSX yaz ve Çalıştır’a dokun
Bileşeni kod düzenleyicide yaz ve çalıştır. Canlı önizleme bileşenini uygulamanın içinde oluşturur; böylece düğmeye tıklayabilir, alana yazı yazabilir ve kodun ne yaptığını görebilirsin.
Kontrol et, sonra üzerine inşa et
Quiz’ler, kodlama görevleri ve rehberli projeler, fikri gerçekten kavradığını doğrular; okuyamadığın bir hook’u veya hatayı AI mentor açıklar. Bug Hunt ve UI Match, kavramı ikinci kez uygulamanı sağlar.
İçinde neler var
Uygulamayla birlikte gelenler
88
Kurs, 324 ders
JSX, props ve state’ten custom hooks, forms, Context ve Redux Toolkit üzerinden Server Components, SSR ve Next.js App Router’a kadar; A1’den C1’e gruplandırılmış içerik.
Canlı
Canlı önizlemeli düzenleyici
Bileşenin uygulamanın içinde oluşturulduğu, JSX için tasarlanmış bir kod düzenleyici. Çok dosyalı projeler, gerçek uygulamaların oluşturulma biçiminde bir bileşeni başka bir bileşene aktarmana olanak tanır.
20
Rehberli proje
Bir beğen düğmesi, profil kartları, bahşiş hesaplayıcı, quiz oyunu, alışveriş sepeti ve daha fazlasını küçük adımlarla oluştur. Her adım, bileşenin gerçekten çalıştığını kontrol eder.
Laboratuvar
Hooks Lab ve props düğmeleri
Her state değişimini ve yeniden render’ı gerçekleştiği anda izle; bir prop’u kaydırıcıyla değiştirerek bileşenin güncellendiğini gör. Render profiler ve state timeline Pro’nun bir parçasıdır.
30
Kodlama görevleri
Hooks, rendering, forms, context ve performance konularında kolay, orta ve zor seviyelerde görevler; ayrıca spaced repetition ile UI Match, Bug Hunt ve Component Recall.
AI
AI mentor
Bir açıklama iste, AI’ın kodunu inceleyip bir düzeltme önermesini sağla veya herhangi bir konuda özel bir ders oluştur. Mentor ve sertifika sınavı Pro’nun bir parçasıdır.
Arka plan
React yazmak için aslında neleri ve hangi sırayla anlaman gerekir?
React, veri değiştiğinde kendini yeniden çizen küçük ve yeniden kullanılabilir bileşenlerden kullanıcı arayüzleri oluşturmak için kullanılan bir JavaScript kütüphanesidir. Yeni başlayanların çoğu sözdiziminde değil, bunun temelindeki modelde takılır: render nedir, state sayılan şey nedir ve effect’ler ne zaman çalışır? Bu fikirleri sırayla ve her birini ekranda test edebileceğin bir şeyle öğrenmek, hepsini bir anda okumaktan daha hızlıdır.
Bileşenler ve propsyeniden kullanım birimi
Bileşen, arayüzün bir bölümünü döndüren bir işlevdir; props ise üst bileşeninden aldığı girdilerdir. Veriler props aracılığıyla aşağı doğru aktığı için bir bileşeni okuyup ne oluşturacağını tahmin edebilirsin.
Statezaman içinde değişen şey
State, bir bileşenin render’lar arasında hatırladığı verilerdir; örneğin bir alandaki metin veya bir menünün açık olup olmadığı. State’i güncellemek yeni bir render planlar ve neredeyse her etkileşimli ekranın temelindeki mekanizma budur.
Hooks ve effect’leryeni başlayanların takıldığı yer
useState, useRef ve useReducer gibi Hooks’lar, bir bileşenin state tutmasını ve DOM’a erişmesini sağlar. useEffect, bir render’dan sonra kod çalıştırır; yanlış bir dependency array ise döngülerin ve güncel olmayan değerlerin en yaygın kaynağıdır.
Render ve yeniden renderuygulamanın neden yavaş hissettirdiği
Bir bileşen, state’i veya props’u değiştiğinde yeniden render edilir; içindeki bileşenler de aynı şekilde yeniden render edilir. Bir render’ı neyin tetiklediğini bilmek, memoisation’dan code splitting’e kadar her performans iyileştirmesinin başlangıç noktasıdır.
Uygunluk
Kimler için uygun — kimler için değil
Şu durumlarda senin için uygun
- Biraz HTML, CSS veya JavaScript biliyor ve React’e doğru şekilde başlamak istiyorsan
- Başka bir framework’ten gelen ve hızlıca React’e geçmesi gereken bir geliştiriciysen
- Kod çalıştığı anda sonucu ekranda görerek en iyi öğreniyorsan
- Küçük projelerden oluşan bir portföy hazırlıyor ve yönlendirmeli adımlar istiyorsan
- Bir frontend mülakatına hazırlanıyor ve prova yapmak için sorular istiyorsan
Şu durumlarda doğru araç değil
- JavaScript’i hiç görmediysen; çünkü kurs biraz JavaScript bilgisi varsayıyor
- Hâlâ bir laptop gerektiren tam bir proje oluşturup dağıtmak istiyorsan
- Her şeyin ücretsiz olmasını bekliyorsan; ilk kurs ücretsiz, geri kalanların kilidini Pro açıyor
- React ekibinin resmî bir kursunu istiyorsan; çünkü bu bağımsız bir uygulama
Sorular
Sık sorulan sorular
Telefonda React programlamayı öğrenebilir misin?
Temel fikirler, bileşenler, props, state ve hook’lar; yazdıklarını çalıştırabiliyorsan telefonda öğrenilebilir. React Öğren - Kodlama Kursu, ReactDOM ve Babel’i içerir; böylece JSX’in cihazdaki canlı önizlemede oluşturulur. Daha büyük bir proje geliştirmeye ve dağıtmaya başladığında laptop kullanışlı hâle gelir.
React öğrenmeden önce JavaScript bilmem gerekiyor mu?
Biraz bilmek yardımcı olur. React Öğren - Kodlama Kursu; değişkenler, fonksiyonlar ve diziler gibi konularda biraz HTML, CSS veya JavaScript bilen kişilere yöneliktir. Daha önce hiç JavaScript yazmadıysan önce onu öğren; çünkü React dersleri JavaScript okuyabildiğini varsayar.
Props ve state arasındaki fark nedir?
Props, bir bileşenin üst bileşeninden aldığı ve değiştirmemesi gereken girdilerdir; state ise bileşenin sahip olduğu ve zaman içinde güncellediği verilerdir. React Öğren - Kodlama Kursu’te bunu, her state değişikliğini ve yeniden oluşturmayı gösteren Hooks Lab ile görebilirsin. Props knobs ise bir prop’u kaydırıcıyla değiştirmeni sağlar.
Uygulama useEffect gibi hook’ları öğretiyor mu?
Evet. React Öğren - Kodlama Kursu; useState, useEffect, useRef, useReducer, özel hook’lar ve useLayoutEffect konularını kapsar. Ayrı derslerde effect’lerin ne zaman çalıştığı, bağımlılık dizileri ve yaygın hatalar ele alınır; ayrıca bozuk bileşenlerdeki hataları bulman için Bug Hunt modu bulunur.
React ile React Native aynı şey mi ve uygulama ikisini de öğretiyor mu?
Hayır. React, kullanıcı arayüzleri oluşturmak için kullanılan kütüphanedir; React Native ise mobil uygulamalar oluşturmak için aynı fikirleri kullanır. React Öğren - Kodlama Kursu önce web için React’i öğretir; React Native fundamentals kursu da web geliştiricilerinin bu becerileri mobile aktarmasına yardımcı olur.
React Öğren - Kodlama Kursu, Next.js ve React 19’u kapsıyor mu?
Evet. Kurslar React 19 özelliklerini ve Server Components, SSR ve hydration, streaming ile data fetching, caching ve authentication içeren Next.js App Router’ı kapsar. Ayrıca web geliştiricileri için bir React Native fundamentals kursu da vardır.
Ne tür projeler oluşturabilirim?
20 yönlendirmeli proje bulunur ve her biri küçük adımlarla oluşturulur: beğen düğmesi, profil kartları, bahşiş hesaplayıcı, quiz oyunu, kronometre, kayıt formu, alışveriş sepeti, görsel carousel’i, sayfalandırılmış liste ve todo uygulaması. Devam etmeden önce her adım bileşeninin çalıştığını kontrol eder.
React Öğren - Kodlama Kursu ücretsiz mi?
İndirmesi ücretsizdir. Ücretsiz sürümde ilk kurs, bir yönlendirmeli proje, iki coding mission, canlı önizlemeli code editor, Hooks Lab, props knobs, Bug Hunt ve günde üç UI Match kontrolü bulunur; ayrıca reklam gösterilir. Pro, tüm kursların, projelerin ve mission’ların, AI mentor’un, render profiler’ın ve certificate exam’in kilidini açar ve reklamları kaldırır.
Sertifika veya mülakat hazırlığı var mı?
Final sınavını geçenler, Pro’nun parçası olan ve paylaşılabilen bir sertifika kazanır. Mülakatlar için temel kavramları prova edebileceğin 50 mülakat sorusu, 50 soruluk bir quiz ve bir cheat sheet bulunur.
Kod bir sunucuda mı çalışıyor?
Hayır. Runtime uygulamaya dahil edilmiştir; bu nedenle kodun cihazda derlenir ve oluşturulur. Bu yüzden oluşturduğun düğmeye dokunabilir ve önizlemede UI’ın tepki verdiğini görebilirsin.
Hangi dilleri ve platformları destekliyor?
React Öğren - Kodlama Kursu, iOS ve Android'de çalışır ve 22 dilde sunulur. 4+ yaş derecelendirmesine sahiptir ve iPhone'da iOS 15.1 veya sonraki bir sürümü gerektirir.
Başla
İlk component'ini bugün render et
iOS ve Android'de, 22 dilde kullanmaya başlamak ücretsiz.
CoddyKit'ten daha fazlası
iOS ve Android üzerinde kullanılabilir.