emirhanpala / learningreactdev

React Notlarım

• 👋 Hi, I’m @EmirhanPala
• 🌱 I’m currently learning ReactJS, Kubernetes, Micro Services->Api Gateway(Ocelot),ElasticSearch (Loglama),Exception Yönetimi,Core Middleware Exception ve Sentry (Exception loglama),Kodlama Standartları->Yazım teknikleri ve Notasyon,Redis,Apm,DTO->Data Transfer Object,PostgreSQL(Jmeter ve pgbench ile Stres testleri)

---

Github Stats:

learningreactdev's Issues

Bölüm9: React Router

• Kurulum
• Exact Prop
• URL Parameters
• Nesting
• NavLink
• No Match (404)

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/9.Bolum/react-router

Bölüm19: E-Ticaret Uygulaması

• Uygulama Tanitimi
• Backend'e Genel Bakış
• Chakra UI Kurulumu
• Products Ekranının Hazırlanması
• React Query
• React Query Dev Tools
• Ürün Detay Sayfasının Geliştirilmesi
• useInfiniteQuery
• Kullanımı Kayıt İşlemleri - 1
• Kullanımı Kayıt İşlemleri - 2
• Kullanımı Kayıt İşlemleri - 3
• Kullanımı Kayıt İşlemleri - 4
• Çıkış İşlemleri
• Protected Routes
• Login İşlemleri
• Sepete Atma İşlemleri - 1
• Sepete Atma İşlemleri - 2
• Sipariş Oluşturma İşlemleri
• Admin: Routing İşlemleri
• Admin: Order Sayfası
• Admin: Products Sayfası
• Admin: Product Update İşlemleri
• Admin: Yeni Ürün Eklemek

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/19.Bolum

1.Temel Bilgiler

• Tanıtım
• İnternet nasıl çalışır?
• Bir web sitesi nasıl çalışır?
• BackEnd, FrontEnd, FullStack Developer Kimdir?
• Editor nedir? Editörümüzü tanıyalım ve Kuralım

2.HTML 5

• Plunker Online Editörümüzü Tanıyalım
• Html nedir?
• Temel html elementleri
• Linklerle çalışmak
• Tablolarla çalışmak
• Formatlama
• Layout
• Form tagleri
• Html5 ile gelen form tagleri

5.Javascript ES6+

• Temel operasyonlar ve tiplerle çalışmak 1
• Temel operasyonlar ve tiplerle çalışmak 2
• Şart bloklarına giriş
• Şart bloklarıyla çalışmak 2
• Fonksiyonlarla çalışmak
• Diziler
• Dizi fonksiyonlarıyla çalışmak
• Nesnelerle çalışmak
• Recap demo 1
• Döngülerle çalışmak
• Recap demo 2
• DOM manipülasyonu nedir?
• Demo youtube üzerinde DOM manipulasyonu
• Demo GetElementsByTaName
• Demo GetElementsByClassName
• Demo QuerySelectorAll
• Demo GetElementsByName
• Demo AddEventListener
• Demo Nodlarla Çalışmak
• Demo ReplaceChild ile çalışmak
• EcmaScript Nedir?
• Önemli - Scope kavramı var let const
• İleri fonksiyonlar
• İleri diziler
• İleri nesneler Referanslar ve this ile çalışmak
• Classlarla çalışmak

14.React Yaşam Döngüsüyle Çalışmaya Başlamak

• Componentdidmount ve fetch ile çalışmak
• Ürünlerin listelenmesi
• Componentler arası iletişim trafiğinin yönetilmesi

18.React Rounting

• Routing implementasyonu
• Sepet detay sayfasının yazılması
• Sepetten silme işleminin yapılması

Bölüm1: Temel JS Çalışmak

• React Nedir? Ne Zaman İhtiyaç Duyarız?
• Real Dom / Virtual Dom
• IDE / Text Editör Seçimi
• Node.JS Kurulumu
• Temel Node.JS
• ES6 Modül Sistemi
• Callback Functions / async-await ve Axios
• Promises
• Array Functions

Link:
https://github.com/EmirhanPala/LearningReactDev/tree/main/1.Giris-Bolumu

12.Eventlerle Çalışmaya Başlamak

• Eventlerle çalışmaya başlamak
• Componentler arası veri ve event transferi

Bölüm21: React ve Redux ile Movie App Projesi (Legacy)

• Proje Tanıtımı ve Projeyi Oluşturma
• Proje Dizinlerinin Oluşturulması
• Store ve Root Reducer'ı Oluşturmak
• Redux Dev Tools & Thunk Middleware Kurulumları
• Redux Provider
• React Router Kurulumu
• Movies Page Component Redux Store Bağlantısı
• Movies List Component'inin Hazırlanması
• Semantic UI Kurulumu
• Semantic UI Tema Düzenlemeleri
• Semantic UI Bug Fix - 1
• Semantic UI Bug Fix - 2
• Footer Component'inin Hazırlanması
• Header Component'inin Hazırlanması
• Semantic UI Tema Son İşlemler
• NodeJS Backend'in Kurulması
• mLab Düzeltme
• Movies Action'ın Yazılması
• Movies Reducer'ın Yazılması
• MovieList PropType Tanımının Güncellenmesi
• Redux Logger Kurulumu
• Error Action Dispatch İşlemi
• Redux Promise Middleware Kullanımı
• Filmlerin Listelemesinin Yapılması
• Filmlerin Listelemesinin Yapılması - 2
• Loading Indicator
• Routing Menüde Active Class Gösterimi
• New Movie Sayfasının Hazırlanması
• New Movie Form Component'inin Hazırlanması
• New Movie Form Component'inin Hazırlanması - 2
• New Movie Form Validasyon İşlemleri
• New Movie Form Validasyon İşlemleri - 2
• New Movie Sayfası Reducer Tanımının Yapılması
• onNewMovieSubmit Action
• onNewMovieSubmit Error Handling
• Redirect ile Yönlendirme İşleminin Yapılması
• Edit & Delete Butonlarının Hazırlanması
• Movie Edit - Route İşlemleri
• Movie Edit - Inputların Doldurulması
• Movie Edit - Fetch Movie
• Movie Edit - Loading Gösterimi
• Movie Edit - Update
• Delete Movie - 1
• Delete Movie - 2
• Redirect Bug Fix
• Anasayfa Tasarımı

Link:

Bölüm22: Next.JS (Legacy)

• Server Side Rendering Nedir?
• Next.JS Nedir?
• Next.JS Kurulumu
• Pages
• Components
• Link
• Routing Query String Kullanımı
• Routing as Operatörü
• Layout
• Head Component'i
• Built in CSS
• Next.JS ve Express ile Custom Route Oluşturmak
• Hot Module Reloading
• Isomorphic Fetch
• Stateful Componentlerde Isomorphic Fetch
• Prefetch
• onMouseEnter Prefetch
• PWA Nedir? Service Worker Nedir?
• Next.JS Offline
• Now Deploy

Link:

7.React Dünyasına Giriş

• Create-React-App kurulumu
• İlk react projemizin oluşturulması

Bölüm5: Component Lifecycle

• useEffect
• Component Unmount

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/learn-react/lifecycle

Bölüm16: Testing

• Neden Test Yazarız?
• React Testing Library - 1
• React Testing Library - 2

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/16.Bolum/testing

Bölüm17: NPMJS Üzerinde Component Paylaşmak

• Create-React-Library
• Publish İşlemleri
• Semantic Versiyonlama

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/17.Bolum/sharkui

21.Redux Büyük Proje

• Redux projesinin kurulması
• Klasör yapılandırmasının yapılması
• Temel bileşenlerin yapılandırılması
• Action ile çalışmak
• Reducer ile çalışmaya başlamak
• Redux store konfigurasyonu
• Connect ile çalışmak
• Özel tekrar

17.Alertifyjs İmplementasyonu

• Alertifyjs implementasyonu

20.Redux İle Çalışmak ve İlk Küçük Proje

• Redux nedir?
• Redux projesinin oluşturulması ve paketler
• Action yapısını anlamak
• Reducer ve store ile çalışmak
• Genel tekrar ve configurestore
• Componentin reducera bağlanması
• Dispatch ile çalışmak
• Projenin tamamlanması

9.Reactstrap İle Çalışmak

• ReactStrap ile çalışmak

Bölüm2: Component'ler ile Çalışmak

• Bir React Projesini Ayağa Kaldırmak(create-react-app)
• Component Nedir?
• Component Oluşturmak/Kullanmak
• JSX ve Temel Kuralları
• Componentlerde Değişken Render Etmek
• Koşullu Render İşlemi

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/learn-react/src

24.React Hooks

• React hooksa giriş
• useEffect ve redux ile çalışmak 1
• useEffect ve redux ile çalışmak 2
• Detay sayfasının yazılması
• Select inputunun yazılması
• Ürün detaylarının tamamlanması
• Küçük hataların düzeltilmesi
• Uygulamanın test edilmesi
• Validasyonun yapılması

23.React Hata Yönetimi

• Hata yönetimi yapmak
• Reducer yazılması

19.Formlarla Çalışmaya Başlamak

• Formlarla çalışmaya başlamak
• Form submit işlemleriyle çalışmaya başlamak
• Çoklu form elemanlarıyla çalışmak
• Zengin form demosu

8.Component Mimarisiyle Çalışmak

• Component mimarisini derinlemesine anlamak
• İlk componentlerimizi oluşturalım

16.Component Drilling

• Component drilling
• Component drilling ile event taşıma

3.CSS 3

• CSS Nedir?
• Temel css kullanımları
• Css özellikleriyle çalışmak
• Tablolarla eventlerde çalışmak
• Inputlarla çalışmak
• Class yapısı
• Id yapısı

Bölüm15: Localization

• React Intl - Kurulum
• Default Locale
• Parametre Geçmek

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/15.Bolum/localization

15.Şartlı İfadelerle Çalışmak

• Şartlı ifadelerle çalışmak
• Sepete ürün eklemek

Bölüm12: Context API ile State Yönetimi

• Context Nedir?
• Context Oluşturmak
• Context Provider
• Theme Switcher Yapımı
• Context Provider Side Effects
• Multi Context
• Custom Context Hook

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/12.Bolum/context

13.Api Altyapısının Hazırlanması

• JsonServer ile api kurulumu

Bölüm3: Props ile Çalışmak

• Props Nedir? Nasıl Kullanılır?
• Döngülerde "key" Prop'u
• React Developer Tools
• Prop Types
• Prop Types: isRequired
• Prop Types: oneOfType
• Prop Types: shape
• Default Props

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/learn-react/src

Bölüm11: Memoization

• React.memo
• useMemo
• useCallback

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/11.Bolum/memoization

22.Redux Thunk

• Redux thunk ile çalışmak
• Seçili kategorinin yönetilmesi
• Ürünlerin listelenmesi
• Sepete ekleme redux
• Sepete ekleme react
• Sepet özetinin yazılması
• Sepetten ürün silinmesi
• Routing alt yapısının kurulması
• Sepet detayının gösterilmesi

Bölüm8: Data Fetching

• Native Fetch
• Axios

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/8.Bolum

Bölüm6: Telefon Rehberi Uygulaması

• Ne geliştireceğiz
• Form Component'inin Geliştirilmesi
• Kayıtların Listelenmesi
• Filtreleme İşlemi
• Stil Tanımlarının Yapılması

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/6.Bolum/contacts-app

Bölüm14: Gerçek Zamanlı Chat Uygulaması

• Giriş
• Chat Context
• Temel Bileşenlerin Geliştirilmesi
• Backend Bağlantısı
• Mesajların İletilmesi
• Mesajların Listelenmesi
• Feed Scroll

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/14.Bolum/chat-app

6.Kurulum

• Node ve Visual Studio Code kurulumu

11.State İle Çalışmaya Başlamak

• State ile çalışmaya başlamak

Bölüm10: Form Yönetimi

• Kurulum
• handleSubmit & handleChange
• Radio / Checkbox / Dropdown
• useFormik
• Form Validasyonları - 1
• Form Validasyonları - 2

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/10.Bolum/formik

Bölüm18: Deploy

• Surge.sh
• Netlify
• AWS EC2 Üzerine Deploy İşlemleri

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/18.Bolum/

Bölüm4: State Yönetimi

• State Nedir? Nasıl Oluşturulur?
• Array States
• Object States
• Sayaç Uygulaması
• Re-Render Mantığını Anlamak (React vs JQuery)
• Input için State Tanımı Yapmak

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/learn-react/states

Bölüm7: Stillendirme

• Stil Tanımı Yapmak
• Module CSS

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/7.Bolum/style-definations

Bölüm13: Gerçek Zamanlı Çalışan Uygulamalar Geliştirmek

• Arayüzün Hazırlanması
• Socket Server'a Bağlanmak
• Backend'e Veri İletmek
• Bir Kanala Abone Olmak

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/13.Bolum/realtime-colors

10.Props İle Çalışmaya Başlamak

• Props ile çalışmaya başlamak
• Best Pratice - Props ile Encapsulation

4.Bootstrap 4

• Bootstrap nedir? Neler Yapabiliriz?
• Bootstrap yaşam döngüsünü anlamak ve şablon giydirmek
• Container layput ve grid mimarisi
• Tablolarla çalışmak
• Dropdown ile çalışmak
• Formlarla çalışmak
• Inputlarla çalışmak
• Listelerle çalışmak

Bölüm20: Redux (Legacy)

• Redux Nedir? Neden İhtiyaç Duyarız?
• Redux Data Flow
• Stora Oluşturmak
• Dispatch
• combineReducer ile Multi Reducer Kullanımı
• Store Subscribe
• Initial State
• Redux Dev Tools
• Provider Nedir?
• Dizin Yapısının Oluşturulması
• Connect ile Component'e Bağlanmak
• mapStateToProps
• Action Dispatch Etmek
• mapDispatchToProps
• Component'e Props Geçmek
• Merge Props
• Thunk Middleware
• Async Actions
• Async Action Dispatch İşlemi
• Async/Await ile Servis Çağrımı
• Immutable vs Mutable
• Array'i Immutable Saklamak
• Redux Logger Middleware
• Redux Promise Middleware

Link: https://github.com/EmirhanPala/LearningReactDev/tree/main/20.Bolum/redux