Git Product home page Git Product logo

learningreactdev's Introduction

LearningReactDev

React Notlarım

React projesini ayağa kaldırmak için facebook'un bize vermiş olduğu create-react-app repoyu kullanıcaz.

TERMİNAL KOMUTLARI

Yeni proje oluşturmak için

npx create-react-app project name

Projeyi çalıştırmak için

npm start

Projeye kütüphane yüklemek için

npm install kütüphaneAdı
npm i kütüphaneAdı

Test kodlarını çalışmak için

npm test

Semantic Versiyonlama

Versiyonlama yapılırken ortadaki sayı artarsa onun sağındaki sıfırlanır veya en baştaki artarsa onun sağındakilerde sıfırlanarak ilerler.

npm version patch --force
npm upgrade minor -f

React build ve Deploy

npm run build 
//Dosyaları terminal üzerinde seçili olan reactın içerisine kurar.
Reactı çalıştırmak için gerekli olan build klasörünün içine girilir.
cd build
Deploy etmek içinde
npx surge

NPMJS Component Paylaşmak

React kütüphanesi oluşturabilmek için gerekli olan bütün dosya ve dizinleri ilgili proje dizinlerine yerleştirmek için create-react-library repoyu kullanıcaz.

Kullanılan Kaynaklar

learningreactdev's People

Contributors

emirhanpala avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

learningreactdev's Issues

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

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

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:

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

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ı

6.Kurulum

  • Node ve Visual Studio Code kurulumu

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:

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ı

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

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ı

18.React Rounting

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

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

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

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

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.