Details
Diğer Eğitimler

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
455 Eğitim Seti
Eğitimlere Dön