Sıfırdan Projelerle Front-End ve React 18.x Öğren (52+ Saat)

€99.90

Sıfırdan Projelerle Front-End ve React 18.x Öğren (52+ Saat)

Course
335 Lessons

52+ Saat Detaylı Video Eğitim ile ;Sıfırdan JavaScript ve ReactJS ile Dinamik Web Projeleri Yaparak Kendini Geliştir(HTML,CSS, Sass, Bootstrap, Git & GitHub)

Hemen Kaydol

İndirim Kodu

Eğitimin İndirim Kodunu Aktif Etmek İçin Linke Tıklayabilirsiniz..

İndirimi Uygula..

React ile Front-End Development Kursuna Hemen Başla..

Sıfırdan başlayanlar için ve kendini React konusunda geliştirmek isteyenler için hazırladığım kursa bu platformdan kayıt olup hemen izlemeye başlayabilirsiniz. Kursa kaydolduktan sonra hemen videoları yine www.hakanyalcinkaya.dev platformundan izleyebileceksiniz..

İndirimi Uygula ve Hemen Kaydol

Yeni Kurslardan Haberdar Ol

Hazırlayacağım kurslardan haberdar olmak için abone olmayı unutma ;)

Öğrenecekleriniz

Kullanıcı Dostu, Hızlı ve Gelişmiş React Projeleri Oluşturabileceksiniz
Her Bölümde Projeler Yaparak HTML, CSS, SASS, Bootstrap Gibi Konularda Kendinizi Geliştirebileceksiniz
VS-Code Kod Editörünü Kullanmayı ve Daha Birçok Ek Aracı Kullanmayı Öğreneceksiniz
Her Bölümde Yaptığınız Projeleri Yayına Almayı ve Versiyon Kontrol Sistemi İle Çalışmayı Öğreneceksiniz
ES6+ ve VanillaJS Temellerinizi Sağlamlaştıracaksınız
ReactJS olmadan da Single Page Applications (SPA) Yapmayı Ayrıca Görecek ve Vizyonunuzu Geliştireceksiniz

Açıklama

Sıfırdan Projelerle JavaScript ve React Eğitimi React18 ile birlikte tasarlanmıştır. Hazırlanan React eğitim setinin hedefi ilerde çıkacak olan güncellemelere de sizleri hazırlayacak şekilde dokümantasyon paylaşımı ile güçlendirilmiştir. Hazırlanan eğitim özellikle yazılıma yeni başlayanlar için tasarlanmıştır. Her bölümde bölüm sonu projeleri yaparak kendinizi geliştirmeye devam edeceğiniz ve bilginizi pekiştirebileceğiniz bir sistemle eğitim hazırlanmıştır.

Eğitimin Özellikleri

Yeni Başlayanlar İçin İdeal: Eğitim, yazılıma yeni başlayanlar için özel olarak tasarlanmıştır. Bölüm sonu projeleri ile kendinizi sürekli geliştirip, öğrendiklerinizi pekiştirebilirsiniz.

Pratik ve Uygulamalı Yaklaşım: Teorik bilginin yanı sıra, her bölümde gerçek projeler geliştirerek pratik yapma imkanı sunulmaktadır.

Eğitimde işlenen temel konular:

HTML: Web'in Yapıtaşı olan HTML, Etiketler, Browser Davranışları ve CSS Olmadan Nasıl Basit Web Projeleri Yapabileceğimiz
CSS: Box Model ve FlexBox ile Responsive (Cihaz Uyumlu) Web Sitelerinin Nasıl Yapılabileceği ve Yeni Gelen CSS Özelliklerini Nasıl Kullanabileceğimiz
SASS/SCSS: SASS ile Daha Az CSS Yazma Teknikleri ve CSS ile Yapılan Projelerin SASS'a Dönüştürülmesi
Visual Studio Code ile Performanslı Çalışmak
Git Versiyon Kontrol Sistemi ve GitHub Kullanımı
Not Alma Teknikleri
JavaScript Temelleri ve Sadece JavaScript Bilgimizle Nasıl Single Page Application(SPA) yapabileceğimiz
ReactJS Temelleri
ReactJS ve Context API ile Çalışmak
React ve Redux ile Çalışmak
React ile API Bazlı Uygulamalar Geliştirmek
React ve Firebase ile Backend İhtiyaçlarını Ortadan Kaldırarak Projeler Geliştirmek

Eğitim Bitiminde Hangi Konularda Kendinizi Geliştirmiş Olacaksınız;

Çok hızlı Bootstrap projeleri geliştirebileceksiniz
Kendi Projelerinizi Hayata Geçirebileceksiniz
Adım Adım Proje Geliştirmeyi Öğreneceksiniz
Web Projelerinde En Çok Bilinmesi Gereken Konuları Öğrenmiş Olacaksınız
İşe Girmek için Elinizde Referans Projeler Olacak
Uluslararası Firmalarda Çalışabilecek Bilgi Birikimine Sahip Olacaksınız
Front-End Developer Olacaksınız

Bu Kurs Kimler İçin

Kursu İndirimli Satın Almak İçin Instagram/hakanyalcinkayadev Profilini Ziyaret Edebilirsiniz. Profildeki Linke Tıklayarak Eğitimi İndirimli Olarak Satın Alabilirsiniz
Sıfırdan Kendini Web Uygulamaları Geliştirmek İsteyenler
Front-End Developer Olmak İsteyenler
React ile Güçlü Projeler Geliştirmek İsteyenler
Birçok Proje ile Kendini Geliştirmek İsteyenler

***

Eğitimin Sonunda Kazanımlarınız:

Hızlı Proje Geliştirme: Bootstrap ile hızlı projeler geliştirme.
Kendi Projelerinizi Hayata Geçirme: Kendi projelerinizi baştan sona tamamlayabilme.
Adım Adım Proje Geliştirme: Proje geliştirme sürecini adım adım öğrenme.
Web Geliştirme Bilgisi: Web projelerinde en çok bilinmesi gereken konular.
Referans Projeler: İş başvurularında kullanabileceğiniz referans projeler.
Uluslararası Fırsatlar: Uluslararası firmalarda çalışabilecek bilgi birikimi.
Front-End Developer: Profesyonel bir Front-End Developer olma yolunda ilerleme.

İçerik (52+ Saat)

Eğitim içeriğindeki bazı videoları "Preview" butonuna basarak izleyebilirsiniz..

Kursu İndirimli Satın Almak İçin Instagram/hakanyalcinkayadev Profilini Ziyaret Edebilirsiniz. Profildeki Linke Tıklayarak Eğitimi İndirimli Olarak Satın Alabilirsiniz

Başlangıç

Yeni Teknoloji Çıktı.. Şimdi Ne Olacak? Hemen En Yeni Olana Geçmeli miyiz?

Frameworkler ve Yazılım Dillerindeki Versiyon Değişiklikleri Hakkında Genel Bilgi

Preview

Çözüm Geliştirici Olmak

Diff Checker - Yazdığınız Koddaki Farklılıkları Bulmak

Preview

Denemek ve Yeniden Yeni Yollar Denemek

10 Günde Yazılan Yazılım Dili..

Front-End Yol Haritası

Biraz Tarihçe :) HTML, CSS, JavaScript ve Browser Tarihçesi

Bu Eğitimi Alırsam Front-End Developer Olabilir miyim?

Sınıf İçi Eğitim vs Özel Ders vs Video Eğitim

Yapay Zeka ve Biz

Preview

Front-End Eğitiminde Kullanılan Kaynak Dosyalara Nasıl Erişebilirim

Bölüm Sonu İleri Bildirim Formu

Kurulum

Windows İşletim Sistemine Gerekli Kurulumların Yapılması

macOS İşletim Sistemine Gerekli Kurulumların Yapılması

GitHub Profilinin Açılması

Eğitime Hazırlık: Notion, Chrome ve MarkDown ile Üretkenliğinizi Arttırın

Notion ile Not Alma Sisteminin Oluşturulması

Chrome'da Sayfaların Bookmark ile Organize Edilmesi

Visual Studio Code - Genel Kullanımı

*Markdown Nedir? Nasıl Kullanılır?

Preview

Bölüm Sonu İleri Bildirim Formu

HTML

HTML Nedir?

Arkana Yaslan - CSS Olmadan Web Siteleri Nasıl Gözüküyor?

İlk HTML Dokümanının Oluşturulması

Başlıklar ve Paragraflar ile Çalışmak

HTML Yapısının Emmet ile Oluşturulması

Visual Studio Code içinde Hangi Yapısal Dil ile Çalıştığımızın Belirlenmesi

Açıklama Satırı Eklemek

Listeler ile Çalışmak

Emmet ile Çalışmak - Bölüm 1

Preview

Emmet ile Çalışmak - Bölüm 2

Emmet ile Çalışmak - Bölüm 3

Linkler ile Çalışmak

HTML Yapılarına Görsel Eklemek

Link ve Görselin Birlikte Kullanımı

Bold ve İtalik Gibi Metinsel Özelliklerin Eklenmesi

Block ve Inline Etiketler Nelerdir? Nasıl Kullanılır?

Tablo ile Çalışmak

Girintiler(Indentations) ile Çalışmak

HTML Etiketlerine Ekstra Özellikler Eklenebilmesi

Semantic(Anlamlandırılmış) Etiketlerin Kullanımı

Web Sitelerinde Erişilebilirlik

Erişilebilirlik için Tasarım (Ek Bilgi)

Diğer HTML Etiketleri Neler

Sürpriz Yumurta :)

Bölüm Sonu Projesi 1

Bölüm Sonu Projesi 1 - Projeyi Canlıya Almak

Bölüm Sonu Projesi 2

Bölüm Sonu Projesi 2 - Projeyi Canlıya Almak

Classless CSS - İlham

Bölüm Sonu Hikayesi

Bölüm Sonu İleri Bildirim Formu

Visual Studio Code (VS Code) Kulllanımı

Ekran Kullanımının İyileştirilmesi

IDE Nedir? Metin/Kod Editörü Nedir?

VS Code Genel Görünümü ve Görünüm Özellikleri

Proje Klasörü Açmak ve Birden Fazla Proje ile Çalışmak

VS Code içinde Dosya ve Klasör Açma Taktikleri

VS Code Ayarlarının İncelenmesi ve Birden Fazla Profil ile Çalışmak

Font Kullanımı

Görünümün Ayarlanması: Temalar ve İkonlar

VS Code - Birden Fazla Profil ile Çalışmak

Preview

Outline ve Breadcrumbs

Multi-Cursor Kullanımı

005-011-Blok-Yapilari-Tasima-ve-Kopyalama.mp4

Klavye Kısayol Tuşları ile Çalışmak

Code Snippets Kullanımı

VS Code içinde Terminal ile Çalışmak

VS Code Playground

Bölüm Sonu İleri Bildirim Formu

Git Versiyon Kontrol Sistemi ve GitHub Platformu

Neden Versiyon Kontrol Sistemi Kullanıyoruz?

Versiyon Kontrol Sistemi Görsel Demo

Projelerde Versiyon Kontrol Sisteminin Oluşturulması (git init)

.gitignore ile Versiyonlanmayacak Dosya ve Klasorlerin Tanımlanması

.gitignore Dosyasının Diğer Projelere Eklenmesi

Terminal'de Versiyon Kontrol Sistemi Komutları

Birden Fazla Branch ile Çalışmak

GitHub Profil Sayfasının Oluşturulması

Preview

GitHub'a Projenin Aktarılması

Uzaktaki Repodan(GitHub) Projenin Clone ile Alınması - Projenin Senkron Edilmesi

VS-Code'u Online Açmak ve GitHub Üzerindeki Repoda Değişiklik Yapmak

GitHub.io (GitHub Pages) üzerinde Web Sitemizi Yayınlamak

GitHub Gist'i Keşfet, Code Snippets ve Diğer Bilgilerini GitHub Gist'e Kaydet

GitHub Alternatifleri

Bölüm Sonu İleri Bildirim Formu

CSS

CSS Nedir

CSS Tanımlamaları - Inline, Internal ve External CSS Tanımlamaları

Relative Path, Root-Relative Path ve Absolute Path ile Dosya Yeri Belirlemek

Açıklama Satırı Eklemek, Genel Seçiciler ve CSS Yazma Kuralları

CSS Seçicileri ile Çalışmak

Block, Inline ve Inline-Block Yapılarını Anlamak

Kutu Özellikleri: Margin, Padding, Border, Width ve Height

Görünürlük: Visibility ve Display None Arasındaki Farklar

User Agent CSS Düzenlemeri

Hover ve Display None Özelliklerinin Birlikte Kullanımı

CSS Reset ve Normalize Nedir ve Neden Kullanılmalı

Preview

CSS Bloklarının/Yapılarının Organize Edilmesi

Background-Image Kullanımı

Renk Tanımlamaları - HEX, RGBA ve HSL Kullanımı

Metin Özellikleri

Font Size, REM ve EM Kullanımları

Font-Family Kullanımı

Float Kullanımı

Liste Özellikleri

CSS Değişkenleri ile Çalışmak ve Değişkenleri :root ile Tanımlamak

:root ile Dark Theme Oluşturmak

Proje1: Pico Clone - NavBar

Proje1: Pico Clone - Dark Theme

Proje1: Pico Clone - main Block ve aside Düzenlemeleri

Proje1: Pico Clone - Article Yapısının Eklenmesi

Neden Classless CSS Kullandık

CSS Positions ile Objelerin Yerleşiminin Değiştirilmesi

Media Query ile Responsive Yapılar Oluşturmak

CodePen ile Denemeler Yapmak

Flexbox Kullanımı ve İlk Yapının Oluşturulması

Flexbox - Justify Content Kullanımı

Flexbox - Justify Content Özelliklerine Devam ;)

Flexbox ile Ekranın Ortasında Kutu Oluşturulması

Flexbox ile Google Layout(İskelet) Yapısının Oluşturulması

Flexbox - Order Kullanımı ile Responsive Yapıda Sıralamanın Değiştirilmesi

Flexbox - Align Self ile Tek Bir Kutunun Yerleşiminin Değiştirilmesi

Flexbox - Wrap, Grow, Shrink ve Basis Kullamımları

Bölüm Sonu Projesi: Yapının Hazırlanması ve Navbar

Bölüm Sonu Projesi: Main Kısmının Oluşturulması

Bölüm Sonu Projesi: Aside Kısmının Oluşturulması

Bölüm Sonu Projesi: Alt Kısmın Oluşturulması

Bölüm Sonu Projesi: Projenin Yayına/Canlıya Alınması

Bölüm Sonu İleri Bildirim Formu

SASS - SCSS

SASS / SCSS Nedir?

SCSS ve SASS Arasındaki Farklar Nedir?

Preview

SCSS'i Online Ortamda ve Proje İçinde Kullanmak/Ayarlamak

VS Code içinde Live Sass Compiler Kullanımı ile Sass Kullanımı

VS Code içerisinde Hazırladığım Repo için Live Sass Compiler Ayarlar Düzenlemesi

README Dosyasındaki Linkler ve .gitignore Düzenlemesi Hakkında

SCSS - Değişken Tanımlamak

SCSS ile import Kullanımı

SCSS Nesting Kullanımı

Parent Selector Kullanımı

Mixin Kullanımı

Preview

Extend Kullanımı

Interpolation Kullanımı

List ile Birden Fazla Değişkenin Sistemde Tutulabilmesi

Each Kullanımı (Liste İçindeki Verileri Döngüde Kullanmak)

Map Kullanımı(Key / Value Yapıları Kullanımı)

For Kullanımı

SCSS Renk Fonksiyonlarının Kullanımı

Bölüm Sonu Çalışması:Classless CSS ile Yapılan Blog Çalışmasının SCSS'e Çevirmek

Bölüm Sonu İleri Bildirim Formu

Bootstrap

Bootstrap Nedir? Alternatifleri Nelerdir?

Arkana Yaslan: Online Platform ile Web Sitesi Yapımı ve Bootstrap'ı Özelleştirmek

Bootstrap'ın Standardize Ettiği Renk İsimlendirmelerini Anlamak

UI Nedir? UX Nedir? Bu Kavramlar Neden Önemli?

Container ve Grid(Izgara) Sistemini Anlamak

Grid Sistem ile Çalışmak

Responsive (Cihaz Uyumlu) Grid Sistem Oluşturmak

Responsive Yapılarda Reordering(Cihaz Uyumlu Düzen Değişimi)

Margin ve Padding Kullanımı

Responsive Uyumlu Olarak Yapıları Gizlemek veya Göstermek

Bootstrap Dokümantasyonunda Gezinti.. Özelliklerin İncelenmesi

Preview

Bölüm Sonu Projesi 1: Navbar ve Üst Bilgi

Bölüm Sonu Projesi 1: Hero Info

Bölüm Sonu Projesi 1: Card Yapısının Oluşturulması

Bölüm Sonu Projesi 1: Aside ve Makalelerin Oluşturulması

Bölüm Sonu Projesi 1: Aside ve Diğer İçeriklerin Zenginleştirilmesi

Bölüm Sonu Projesi 1: Footer ve Görsellerin Eklenmesi

Bölüm Sonu Projesi 1: Projenin Canlıya Alınması

Bölüm Sonu Projesi 2: Starbucks Layout: Navbar ve İlk Kısımların Düzenlemesi

Bölüm Sonu Projesi 2: Starbucks Layout: Genel Yapının Düzenlenmesi

Bölüm Sonu Projesi 2: Starbucks Layout: İçerik ve Card Yapısının Düzenlenmesi

Bölüm Sonu Projesi 2: Starbucks Layout: Aside Layout Düzenlenmesi

Bölüm Sonu Projesi 2: Starbucks Layout: Footer Düzenlenmesi

Bölüm Sonu Projesi 2: Starbucks Lyt: CSS Düzenleme ve Projenin Canlıya Alınması

Bölüm Sonu İleri Bildirim Formu

JavaScript

JavaScript ile İlk Kodun Oluşturulması ve İlk Çıktının Alınması

console.log Nedir? Nasıl Kullanılır?

Değişken Tanımlama ve İsimlendirme Kuralları

let, const, var ile Değişken Tanımlamak ve Aralarındaki Farklar

Boolean Veri Tipi ile Çalışmak

Number Veri Tipi ile Çalışmak

Number Veri Tipi ile İlgili Ek Bilgiler

String(Metinsel) Veri Tipi ile Çalışmak

Template Literals Kullanımı

Veri Türü Dönüşümü ve Veri Tipi Kontrolü

prompt, alert ve confirm Kullanımı

DOM Öğelerine Erişmek

DOM Etiketleri ile İşlem Yapmak

Açıklama Satırları ve Fazlası..

DOM'da Yeni Etiket/Element Oluşturmak

Karşılaştırma Operatörleri

Koşullar ile Çalışmak

Çoklu Koşul Yapısı Oluşturmak

while Döngüsü ile Çalışmak

ternary operator(Short If) ile Tek Satırlık Koşullar Oluşturmak

Preview

Array ile Çalışmak

Array Metodları ile Array İçerisindeki Verilerin Kontrolü ve Daha Fazlası

Fonksiyonlar ile Çalışmak

Arrow Function(Fat Arrow =>) Fonksiyonları ile Çalışmak

Object ile Çalışmak

Object Kullanımı ve Diğer İşlemler

Destructuring: Array ve/veya Object içerisinden Item Çıkartmak

Etiketlere Class Eklemek, Class Çıkartmak veya Toggle ile Ekle/Çıkar İşlemleri

DOM Hareketlerini(DOM Events) Yakalamak

Navbar Menu Dropdown Egzersizi

For Döngüsü ile Çalışmak

forEach Döngüsü ile Çalışmak (Array.prototype.forEach)

Navbar Dropdown ve forEach Kullanımı

Navbar Menu Dışına Tıklanınca Menünün Kapanması ve DOM Hareketlerinin Takibi

JavaScript ile Form Yönetimi

HTML Form Method ve Action Bilgileri

JavaScript ile Form içindeki Bilgilerin Alınması

localStorage Kullanımı: Veri Eklemek, Veriyi Getirmek ve Veriyi Silmek

Bölüm Sonu Çalışması 1: Form Oluşturmak

Bölüm Sonu Çalışması 1: Form Yapısının Dinamik Hale Getirilmesi

Bölüm Sonu Çalışması 1: Form Bilgilerin localStorage'a Yazılması

Bölüm Sonu Çalışması 1: Renk Paletlerinin Sayfada Gösterilmesi

Bölüm Sonu Çalışması 1: Renk Paletine Tıklayınca Kopyalama - Clipboard Kullanımı

Array: .filter Kullanımı

Array: .map Kullanımı

Array: .reduce Kullanımı

JSON Stringify ve Parse Kullanımı

Fetch API ile Çalışmak

Hata Yönetimi

Bölüm Sonu Çalışması 2: Hash Routing Yapısının Oluşturulması

Bölüm Sonu Çalışması 2: Verilerin Fetch API ile Getirilmesi

Bölüm Sonu İleri Bildirim Formu

React Temelleri

React'ı Anlamak

Ek Bilgi: nokta(.) Yani Bu Klasör Kullanımını Anlamak

Preview

React'ı Online Ortamda Çalıştırmak ve create-react-app ile Ortam Kurulumu

React'ı Vite ile Kurmak ve Çalıştırmak

Projenin Klasör Yapısının İncelenmesi

ReactJS - JSX Kuralları - 1

ReactJS - JSX Kuralları - 2

ReactJS - JSX Kuralları - 3

ReactJS - JSX Kuralları - 4

Module Import ve Export Kullanımı - 1

Module Import ve Export Kullanımı - 2

Module Import ve Export Kullanımı - 3

React - Props Kullanımı - 1

React - Props Kullanımı - 2

React - Props ile Componentler Arası Bilgi Aktarımı

React - Props children Kullanımı

React - Props Drilling Nedir?

Preview

Conditional Rendering - Koşullu Render Kullanımı

Optional Chain Kontrolü

useState: Component içindeki Bilgileri Değiştirebilmek için useState Kullanımı

useState ile Dinamik Yapılar Oluşturmak

useState ve Props ile Componentler Arası İletişim Sağlamak

Bölüm Sonu Çalışması 1: Yapının Oluşturulması ve PicoCSS Eklenmesi

Bölüm Sonu Çalışması 1: Taskların Tamamlanması

Bölüm Sonu Çalışması 2: Genel Yapının Oluşturulması

Bölüm Sonu Çalışması 2: Ürünler Yapısının Oluşturulması

Bölüm Sonu Çalışması 2: ProductCard Yapısının Oluşturulması ve Aktif Ürün Seçimi

Bölüm Sonu Çalışması 2: Props Cehennemi :) Bilgilerin Alt Component'e Gönderimi

Bölüm Sonu Çalışması 2: Filtreleme İşlemleri

Bölüm Sonu İleri Bildirim Formu

React - Form ile Çalışmak

Yeni Projenin Oluşturulması ve Bootstrap'ın Eklenmesi

Form Submit İşleminin Denetimi için preventDefault Eklenmesi

Form İçindeki Bilgilerin Yeni Task Olarak Eklenmesi

Form İçindeki Bilgilerin UUID ile Eklenmesi ve İstenilen Öğenin Silinmesi

Task Görünümü Düzenlemesi ve Düzenle Butonunun Eklenmesi

Task Düzenleme Aksiyonunun Oluşturulması

UI Düzenlemeleri ile Yapının İyileştirilmesi

Task Bilgilerinin Filtrelenmesi ve useEffect Kullanımı

useEffect Nedir? Neden İhtiyaç Duyarız?

Preview

Component Yapısının Düzenlenmesi

Tasklar için --Bitti-- Yapısının Oluşturulması

useEffect ve localStorage Kullanımı ile Taskların localStorage İçinde Tutulması

Bölüm Sonu İleri Bildirim Formu

React Router Dom ile Çalışmak

React Router Dom Kullanımı ve Yapının Oluşturulması

Routes Yapısının Oluşturulması ve İstenilen Component'in URLe Göre Getirilmesi

Ana Sayfada Ürünlerin Gösterilmesi

Ürünler Sayfasının Oluşturulması

Kategori Detay Sayfasının Oluşturulması

Ürün Detay Sayfasının Oluşturulması

Preview

Protected-Private Route ile İstenilen Componentlerin Gösterimi

Site Yüklendiğinde localStorage ve useEffect ile Kullanıcının Getirilmesi

User Bilgisinin Props ile Diğer Componentlere İletilmesi

Favoriler Yapısının Oluşturulması

Bölüm Sonu İleri Bildirim Formu

React - Context API ile Çalışmak

Context API ile Oluşturulacak Projenin Genel Yapısının Hazırlanması

React Router Dom'un Projeye Eklenmesi

Dark Theme Yapısının Oluşturulması ve Temanın Değiştirilebilmesi

Context API Yapısının Oluşturulması ve Tema Bilgisinin Site Genelinde Kullanımı

Context API, useEffect ve localStorage'in Birlikte Kullanılması

Bölüm Sonu Çalışması: React Router Dom ile Yapının Kurulması

Bölüm Sonu Çalışması: Context API Yapısının Eklenmesi

Preview

Bölüm Sonu Çalışması: Tüm Componentlerin Context API İçerisinden Veri Alınması

Bölüm Sonu İleri Bildirim Formu

Styled-Components ile Çalışmak

React: Styled Components Nedir ve Nasıl Kurulur?

Preview

React: Styled-Components ile İlk Styled Button Yapısının Oluşturulması

React: Styled-Components - Props Kullanımı

React: Styled-Components - Extend Kullanımı

React: Styled-Components Attributes(Ek Özellik) Eklemek

React: Styled-Components Animasyon Oluşturmak

React: Styled-Components - Tema Kullanımı

React: Styled-Components - Global Style Kullanımı

React: Styled Components - Bölüm Sonu Çalışması - Kurulum

React:Styled Components - Bölüm Sonu Çalışmsı - GlobalCSS Yapısının Kurgulanması

React: Styled Components - Bölüm Sonu Çalışması - Tema Oluşturulması

React: Styled Components - Bölüm Sonu Çalışması - Tema Yapısının Düzenlenmesi

React: Styled Components - Bölüm Sonu - Header Yapısının Tema ile Çalışması

React: Styled Components - Bölüm Sonu - Context API Yapısının Oluştuşturulması

React: Styled Components - Bölüm Sonu Çalışması - Tema ve Context API Kullanımı

React: Styled Components - Bölüm Sonu Çalışması - Aside Yapısının Oluşturulması

Styled Components - Bölüm Sonu - Diğer Component Yapılarının Düzenlenmesi - 1

Styled Components - Bölüm Sonu - Diğer Component Yapılarının Düzenlenmesi - 2

Bölüm Sonu İleri Bildirim Formu

React: useReducer ile Çalışmak

React: useReducer ile İlk Örnek Yapının Oluşturulması

React: useReducer Yapısının useContext ile Kullanılması

React: useReducer - Add Todo Yapısının Oluşturulması

React: useReducer - Todo Payload Bilgisinin Kullanılması

React: useReducer - Todo Payload Bilgisinin Context API ile Kullanılması

Preview

Bölüm Sonu İleri Bildirim Formu

React - Redux ile Çalışmak

React - Redux Toolkit Kurulumu

React - Redux Toolkit - Counter Yapısının Oluşturulması

Counter Slice ve Action Yapısının Oluşturulması

React - Redux Store Bilgisinin Farklı Componentlerde Kullanılabilmesi

Redux Store'a İkinci Yapının Oluşturulması ve Kullanımı: Todo List

React - Redux Store İçindeki Todo Bilgisinin Silinmesi

Preview

Bölüm Sonu İleri Bildirim Formu

Redux Toolkit Query, Fetch ve Axios ile API Kullanımı(3 Yöntem) + ReactRouterDom

React - Redux Toolkit Query(RTK) - Ortam Kurulumu

Projede Yapılacaklar Listesinin Oluşturulması ve Navbar Eklenmesi

Ana Sayfa, Container ve Row Yapılarının Oluşturulması

React Router Dom ve Diğer Sayfaların Eklenmesi

.env (Environment) Yapısının Eklenmesi ve ENV Kullanımı

Preview

Cat API Key Bilgisinin Eklenmesi

1. Yöntem: Fetch API ile Kategori Verilerinin Çekilmesi

1. Yöntem: Fetch API ile Kategori Sayfasının Düzenlenmesi

1. Yöntem: customHook ile Fetch API Yapısının Oluşturulması

1. Yöntem: Detay Sayfasındaki Bilgilerin Fetch API ile Getirilmesi

1. Yöntem: Kategori Düzenlemeleri ve Fetch API ile Görsellerin Getirilmesi

2. Yöntem: Axios ile Kategorilerin Getirilmesi

2. Yöntem: Axios ile Kategori Detay Sayfasının Getirilmesi

3: Yöntem: Redux Toolkit Query ile Tüm Yapının Oluşturulması

Bölüm Sonu İleri Bildirim Formu

Hazırladığım Eğitimlerle İlgili Yorumlar

Hocamızın emeğine sağlık. Anlamadığım birçok şeyi çok iyi anladım. Kurs içeriği çok güzel hazırlanmış. Hocamız her şeyi detaylıca anlatıyor ve konunun daha iyi anlaşılması için çeşitli örnek projeler yapıyor. Başka dersleri sabırsızlıkla bekliyorum

Gülnisa

Hakan Hocam gerçekten muazzam bilgi ve tecrübeleri ile harika bir eğitim hazırlamış. Eğitimi aldığım için çok mutluyum ve herkese tavsiye ederim.

Edit: Eğitimin yarısı bitti bile ve çok eğlenceli geçiyor :)

Ferdi S.

Dersine girdiğim en iyi Öğretmensiniz ve her bir kelimenizde ki bilgi benim için çok önemli . Totalde 52 saat ama bunun arka planında ki emeği görebiliyorum.

Umarım bu bilgileri doğru bir şekilde kullanır ve sizinle paylaşma fırsatı yakalarım. Teşekürler

Mustafa B.

Hakan hoca alanında gerçekten bayağı iyidir. Her eğitimini zevk alarak izleyeceğinizi düşünüyorum. İyi çalışmalar herkese :)

Umut K.

Hakan hocamın Patika.dev deki eğitimlerinden oldukça memnun kaldığım için ve konu anlatımını kendi anlama biçimime yakın bulduğum gördüm ve bu eğitimi de ondan almaya karar verdim

Onur I.

Her eğitiminde bir şeyleri öğretirken öylesine değil gerçekten öğrensinler şeklinde yaklaşımıyla, bence mükemmel üslubuyla. Kesinlikle çok kaliteli ve çok iyi bir eğitmen. Sayın Hakan Yalçınkaya benim nazarımda Hakan Yalçınkaya ve diğerleri gibi iddialı bir cümlenin karşılığı. Umarım hayatta her şey gönlünce olsun sayın Hocam. Sevgiler :)

Ahmet Fatih R.

Kurslar