Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
React Context API ve Hooklar | Part 1
Rating: 4.6 out of 5(63 ratings)
5,569 students

React Context API ve Hooklar | Part 1

React ile Redux ya da MobX karmaşına girmeden Uygulama Geliştirin
Last updated 4/2020
Turkish

What you'll learn

  • React
  • React Context API
  • React Hook Yapıları
  • Sıfırdan React İle Uygulama Geliştirme

Course content

3 sections12 lectures1h 50m total length
  • Giriş3:32

    Kurs hakkında kısa bir giriş videosu.

    Kurs boyunca yapacağımız uygulamayı görmek için:

    https://yaztest-rch.web.app/

    adresine gidebilir ve uygulamayı test edebilirsiniz.

    İyi dersler.

  • Proje Oluşturma ve Temel Bileşenler14:41

    Proje oluşturma ve temel bileşenlerin hazırlanması.

  • Proje Oluşturma ve Temel Bileşenler - 210:21

    Kullanacağımız temel bileşenlerin hazırlanmasına kaldığımız yerden devam ediyoruz.

  • Bileşenleri Ayırma ve Veri Aktarma10:11

    Oluşturduğumuz bileşenleri yaptıkları işlere göre daha alt bileşenlere parçalama ve veri aktarımı işlemlerini yapıyoruz.

  • EventListener ile Klavyeden Gelen Komutları Yakalama12:49

    EventListener ile klavyeden gelen komutların dinlenmesi ve durdurma kombinasyonun yakalanmasını sağlıyoruz.

  • Girilen Metni Kontrol Etme10:35

    Kullanıcının girdiği test metninin kontrol işlemini yapıyoruz.

  • Girilen Metni Kontrol Etme - 212:23

    Kullanıcının girdiği test metninin kontrol işlemini yapıyoruz.

  • Girilen Metni Kontrol Etme - 313:03

    Kullanıcının girdiği test metninin kontrol işlemini yapıyoruz.

  • Skor Kartlarını Oluşturma ve CSS Düzeltmeleri12:35

    Kullanıcının test sonuçlarını gösterecek kartların oluşturulması ve CSS düzeltmeleri yaparak görselliği biraz daha iyileştiriyoruz.

Requirements

  • Temel seviyede React bilgisi

Description

Bilgilendirme:

Öncelikle Udemy tarafından yapılan bir değişiklik nedeni ile 2 saat üzeri eğitimler ücretsiz olarak yayınlanamıyor. Bu nedenle React Context API ve Hooklar eğitimini 3 parçaya bölmem gerekti.

En yeni bilgilendirme:

React Context API ve Hooklar Eğitimine ait Part 1, Part 2 ve Part 3 Kurs açılış sayfalarındaki metnin aynı olması sebebi ile Udemy tarafından içerik kopyalama olarak işaretlenmiş ve eğitimlerim yayından kaldırılmış, bir süre yayında olmamasının sebebi de tam olarak buydu. Aslında üç eğitim de bana ait ama sitem bunun ayrımını yapamamış ve benden her bir eğitimin


Bu kurs başlı başına bir eğitim değildir. Anlamlı hale gelebilmesi için yukarıda da belirttiğim gibi Part 1 ve Part 2 eğitimlerini tamamlamış olmanız gerekmektedir.


Her şeyden önce nasıl bir uygulama yapacağımızı görmek isterseniz:

https://yaztest-rch.web.app/

adresine giderek uygulamayı test edebilirsiniz.


Peki Bu kursun olayı ne?

React ile uygulama geliştirmenin en önemli kısmı Durum Yönetimi(State Management)dir. Çoğu zaman bileşen seviyesinde Durum verileri kullanarak bileşenlerimizi yönetmeye çalışsak da uygulama genelinde birden fazla bileşenin kullandığı veriler vardır. İşte bu verileri merkezi bir yerden yönetmek React Geliştirme sürecinin en uğraştırıcı ve çoğu zaman kafa karıştırıcı kısmı olmuştur. Bu karmaşayı azaltmak adına Redux ve MobX gibi paketler geliştirilmiş, pek çok soruna çözüm getiriyor olsalar da ortada bir sorun var; yapılarını anlamak, anlayınca da uygulamak epey zahmetli olabiliyor. React geliştiricileri bu soruna çözüm olmak adına yeni bir çözüm getirdiler:

React Hooks!

Peki nedir bu React Hooks? Aslında yardımcı fonksiyonlara verilen bir isim. "useState", "useContext", "useEffect" gibi ön tanımlı Hook Fonskiyonları olmakla birlikte kendi Hook metodlarımızı da geliştirebiliyoruz ama bu kursta sadece ön tanımlı olanlardan bahsedeceğim. Ön tanımlılara dönecek olursak Fonksiyon Tipte bileşenlerde state kullanımı ya da yaşam döngüsü metodları kullanabilme, doğrudan reducer bloklarına erişebilme, context oluşturma, contextlere erişebilme gibi işleri hızlı ve sancısız yapmamızı sağlıyorlar.

Peki ya State(Durum) Yönetimi?

İşte bu hook metodlarından ,useContext ve useReducer metodları bir veri kümesi oluşturmak ve herhangi bir bileşen içerisinden ulaşabilmek gibi işlemleri bir kaç satır ile yapmamızı sağlıyor tabi bu "bir kaç satır" ifadesi hali hazırda Redux ya da MobX ile uyguluma geliştirmiş olanlar için bir çağrışım yapıyordur.


Bu bölümde

  • Proje Oluşturma ve genel bilesenlerin yazılması

  • EventListener ile klavyeden gelen komutların yakalanması

  • Bir Input alanına girilen metnin belirli kriterlere göre işlenmesi

  • Context yapılarına giriş

    konularını anlatmaya çalıştım.

Sözü daha fazla uzatmadan en iyisi eğitime geçelim.


Ve bir de: ses seviyesi az ama bunun sebebi tamamen mikrofonumun profesyonel olmaması ve profesyonel mikrofonların pahalı olması. :)

Herkese iyi kodlamalar!


NOT: Yeni Udemy yönetmeliğine göre Ücretsiz Eğitimler 2 saatten fazla olamayacak. Bu nedenle Seriyi partlar halinde yayınlanmıştır.

Who this course is for:

  • Front-End developer
  • Arayüz Tasarımcısı
  • Başlangıç Seviye React Geliştiricisi
  • Web Developer