Eğitim Hakkında
React, etkileşimli web kullanıcı arayüzleri oluşturmak için en popüler çerçevedir.
Gatsby, statik aşamalı web uygulaması (PWA) üreticisidir. Gatsby, siteniz için gerekli HTML, CSS, JavaScript ve verileri yükleyerek sitenizin olabildiğince hızlı yüklenmesini sağlar.
Gatsby ayrıca diğer sayfalar için önemli kaynakları önceden getirir, böylece bu sayfalara giden bağlantıların tıklanması onları olabildiğince çabuk yükler.
Neler Öğreneceksiniz
Tüm katılımcılar:
• React çerçevesinin temellerini öğrenmeyi
• İşlevsel ve sınıf tabanlı React bileşenleri oluşturmayı
• Stil bileşenlerini
• Gatsby ile algılanan sayfa yükleme sürelerini hızlandırmayı
• Uygulamalarınızdaki verileri hızla sorgulamak için GraphQL kullanmayı
• Gatsby eklentilerini kurmayı ve yapılandırmayı
• Durum yönetimi için Redux kullanmayı
• Bir üretim sitesi dağıtmayı
Eğitim İçeriği
Giriş
Modern Web Geliştirme Araçları
Web Dilleri: HTML, CSS, JavaScript
Verilerin Rolü
React nedir?
React hangi sorunu çözer?
Gatsby nedir?
Gatsby hangi sorunu çözer?
React'e Başlarken
React Programlamanın Üç Unsuru
Bildirime Dayalı Programlama
Bileşen tabanlı
Bir Kez Öğrenin, Her Yere Yazın
React Projeleri
React App Generator Oluşturun
Oluşturulan Proje Dosya Yapısı
Webpack, Babel vb.
Sıcak Yeniden Yükleme
React Create Element ve JSX Sözdizimi
Fonksiyonel Bileşenler
Bileşen nedir
Rendering Bileşenleri
Modele Dayalı DOM Değişiklikleri
Verileri Bileşenlere Aktarma
Props ile Veri Aktarma
Nesne Yok Etme
Varsayılan Sahne
PropTypes
Bileşen Oluşturma
Kompozisyon Kalıpları
Props ile İşlevleri Geçirme
React Hooks
Yönetim Devleti
Devletin Amacını Anlayın
Durumu Düzgün Olarak Güncelleme
Efekt Kancası ile Yan Etkileri Yönetin
Bir Bileşen Yüklendiğinde Kod Çalıştırma
Ref Kanca ile Elemanlara Erişim
Öğe Odağını Bileşen Yüküne Ayarlama
Sınıf Tabanlı Bileşenler
Sınıf Tabanlı ve İşlevsel Bileşenler
Yönetim Devleti
Yaşam Döngüsü Yöntemleri
React Bileşenlerini Stil Etme
Stil ve Sınıf Adı Sahne
CSS Modülleri
JS'de CSS
Duygu ve Tarza Sahip Bileşenler
Gatsby ile Başlarken
Modern Site Üreticisi
Statik site nedir?
Gatsby Takımları
Gatsby CLI'yi yükleme
Bir Gatsby Projesi Oluşturma
Başlangıç Projelerini Kullanma
Oluşturulan Proje Dosya Yapısı
Yapılandırma Dosyaları
Bina Projeleri
Statik Site Barındırma
Gatsby Bileşenleri
Sayfa Bileşeni nedir?
Yönlendirme ve Sayfa Bileşenleri
Sayfalar Arasında Bağlantı Kurma
Alt bileşen nedir?
Sayfalarda Bileşen Mantığını Yeniden Kullanma
Düzen Bileşeni nedir?
Düzen Bileşenleri ve CSS
Düzen Bileşenleri ve Duygu
Mizanpaj Bileşenleri ve Stili Bileşenler
CSS Izgarası ve Flexbox
Verilerle Çalışma
Veri nedir?
Birçok Veri Kaynağını Kullanma
Veri Türleri
Yapılandırılmamış Veriler
Sayfa API'si oluşturun
GraphQL ile Veri Sorgulama
Sayfa Sorguları
Statik Sorgular
Wordpress (isteğe bağlı)
Bir Wordpress sitesi ile Gatsby web sitenizi nasıl güçlendireceğinizi keşfedin
Gatsby sitesini oluşturmak için veri kaynağı olarak Wordpress
Web sitesinin canlı olarak yürütülmesi için bir veri kaynağı olarak Wordpress
GraphQL Kullanımı
GraphQL Sorguları
Verileri Grafik Olarak Düşünmek
GraphIQL Kullanımı
Özellikleri Seçme
Aliasing
Değişkenler
Operasyon Adı
Parça
Gatsby Eklentileri
Eklentileri Kurmak
Eklentileri Yapılandırma
Kaynak Eklentiler
Trafo Eklentileri
Çeşitli Eklentileri Keşfedin
Redux (isteğe bağlı, eğitime ek bir gün eklenir)
Gatsby'de durumu yönetmek için Redux kullanın
"Gatsby-plugin-react-redux" Eklentisini kullanma
Redux Desen
Değişmez Programlama
Hareketler
Redüktörler
Durum Verilerinin Seçilmesi
Eşzamansız İşlemler Gerçekleştirme
Bir Üretim Sitesi Dağıtmak
Bir Siteyi Denetleme
Manifest Oluşturma
Çevrimdışı Destek
Sayfa Meta Verileri
Diğer Eğitimler
Digital Vizyon
444 Eğitim Seti
