İleri Seviye React Eğitimi
- Bundle Nedir?
- Bundle lar Neden Kullanılır ve Ne İşe Yarar?
- CSS Pre-Processor Nedir?
- Code Splitting Nedir?
- Webpack ve Mantığı
- Webpack Kurulumu
- Webpack de Custom Configuration
- Loader
- Plugins
- webpack-Server
İlk günümüzde, bundle nedir ve neden kullanılır konusundan başlayarak, CSS pre-processor, code splitting ve webpack'in mantığı üzerine derinlemesine bilgiler edindik. Web kurulumu ve custom configuration yapmayı öğrenip, loader ve plugin kullanımına geçiş yaptık. Webpack-server hakkında bilgi sahibi olduktan sonra günü tamamladık.
-
Önceki Günün Özeti
-
webpack-server de alinan hatanin giderilmesi
# Check the webpack-dev-server http://localhost:8080/webpack-dev-server mode: 'development',
-
Rollup - Webpack - Snowpack Performans/Popülerlik/Bundle Size Karşılaştırması
-
Rollup Nedir?
-
Rollup Kurulumu
npm install --save-dev rollup # GLOBAL npm install rollup --global # or `npm i rollup -g` for short rollup -v / rollup --help
-
Rollup ile Bundle Oluşturma
# Compile to a CommonJS module ('cjs') rollup main.js --file bundle.js --format cjs rollup src/main.js --format cjs rollup src/main.js -f cjs -o bundle.js rollup src/main.js -f cjs > bundle.js
-
Rollup da Kullanılabilecek Formatlar
- esm (ES Module): ArrowFunc, import, export
- cjs (CommonJS): require, export
- iife (Immediately Invoked Function Expression)
- umd (Universal Module Definition): nodejs + browser
- amd (Asynchronous Module Definition): RequireJS
- system (SystemJS)
-
Konfigürasyon Kullanımı
-
Rollup da Plugin Rollup Awesome Plugins
npm install @rollup/plugin-json --save-dev
-
Rollup da Output Plugin Kullanımı Output Plugin Documentation
npm install @rollup/plugin-terser --save-dev
İkinci günümüzde, önceki günün özetini yaparak başladık. Yine önceki günde Webpack-server'da alınan hatanın nasıl giderileceğini öğrendik. Ardından, Rollup, Webpack ve Snowpack'in performans, popülerlik ve bundle boyutu açısından karşılaştırmasını yaptık. Rollup'un ne olduğunu, kurulumunu ve Rollup ile bundle oluşturmayı öğrendik. Rollup'da kullanılabilecek formatları inceledik, konfigürasyon kullanımını ve pluginleri öğrendik. Son olarak, Rollup'da output plugin kullanımına dair bilgiler edindik.
-
Önceki Günün Özeti
-
Rollup Code Splitting - Lazy Dynamic Loading
output.manualChunks
=> Manual Chunks Documentationoutput.chunkFileNames
=> Chunk File Names Documentationoutput.entryFileNames
=> Entry File Names Documentation
-
rollup-plugin-serve
- npm Package
- Kurulum:
npm install --save-dev rollup-plugin-serve
-
React Lazy - Suspense
-
Pre Methods
- mime-types
preMethods
import -> react-dom
=>return -> none
=>href -> string
preconnect(href)
prefetchDNS(href)
preinit(href,option)
preinitmodule(href,option)
=> ES6preload(href,option)
preloadModule(href,option)
=> ES6
- Init => Indirir ve derler (Download and Execute)
- Load => Yalnizca indirir (only Download)
-
Ileri Component Konulari npx create-react-app [sampleApple] npm i axios
Bugün, önceki günün konularını gözden geçirdik ve ardından Rollup ile kod bölme ve dinamik yükleme yöntemlerini inceledik. output.manualChunks
, output.chunkFileNames
ve output.entryFileNames
gibi Rollup konfigürasyon seçeneklerine göz attık. rollup-plugin-serve
eklentisinin kurulumu ve kullanımı hakkında bilgi edindik.
React'te Lazy ve Suspense kullanarak bileşenlerin nasıl ertelenerek yükleneceğini öğrendik. Ayrıca, mime-types
ne olduğuna ve preMethods
(preconnect, prefetchDNS, preinit, preinitmodule, preload, preloadModule) gibi ön yükleme yöntemlerini inceledik. Son olarak, ileri seviye bileşen konularına değindik ve npx create-react-app
komutuyla yeni bir React projesi oluşturup, axios
ile bir endpoint'e GET işlemi yapıp projeyi ertesi gün için hazır hale getirip, ileri düzey bileşen konularına (advanced component topics) giriş yaptık.
- Önceki Günün Özeti
- Suspense icin de Inline Component Kullanimi
- Ileri Component Konular
- Higher Order Component (HOC)
- Reusable Higher Order Component
- Pure Component
- React Hooks
- useState
- useEffect
- useRef
Bugün, önceki günün konularını gözden geçirdik ve ardından React'te Suspense kullanarak inline componentlerin nasıl oluşturulacağını öğrendik. Daha sonra ileri seviye component konularına, özellikle Higher Order Component (HOC), Reusable Higher Order Component ve Pure Component'lere odaklandık. Son olarak, React Hooks'tan useState, useEffect ve useRef kullanımlarını inceledik.
- Önceki Günün Özeti
- React Hooks (Genel Tablo)
- Side Effect Kavramı
- Memoization
- useMemo
- useMemo Ne Zaman Kullanılmalı/Kullanılmamalı
- useCallback
- useEffect vs useMemo vs useCallback
- React 18 Hooks
- useId
- useDeferredValue
- useTransition
Bugün, önceki günün konularını özetleyerek başladık ve ardından React Hooks genel tablosunu inceledik. Side Effect kavramını ve Memoization'ı tartıştık. useMemo hook'unun ne zaman kullanılması veya kullanılmaması gerektiğini öğrendik ve useCallback ile karşılaştırmalar yaptık. Ayrıca, useEffect, useMemo ve useCallback arasındaki farkları ele aldık. Son olarak, React 18 ile gelen yeni hook'lar olan useId, useDeferredValue ve useTransition hakkında bilgi edindik.
- Önceki Günün Özeti
- React 18 Hooks
- useTransition
- useSyncExternalStore
- useInsertionEffect
- useLayoutEffect
- Soru-Cevap
- Redux
Bugün, önceki haftanın konularını özetleyerek başladık ve ardından React 18 ile gelen yeni hook'ları incelemeye devam ettik. İlk olarak, useTransition hook'unun kullanımını ve uygulamalarını tartıştık. Sonrasında, dış veri kaynaklarıyla senkronizasyonu sağlayan useSyncExternalStore hook'unu öğrendik. Daha sonra, CSS veya DOM manipülasyonları için tasarlanan useInsertionEffect hook'unun detaylarına değindik. useLayoutEffect hook'unun ne zaman ve nasıl kullanılacağını ele aldık. Günü, soru-cevap ve Redux'ın temel kavramları ile teorisi üzerine bir giriş ile tamamladık.
- Önceki Günün Özeti
- Redux
- npx create-react-app sample01
- https://redux.js.org/assets/images/ReduxDataFlowDiagram-49fa8c3968371d9ef6f2a1486bd40a26.gif
- npm i redux
- npm i @reduxjs/toolkit
- Reducer, Store, getState(), Action, subscribe(), dispatch()
- Multi Reducer => CombineReducer
- Initial data for reducer
- Provider - npm install react-redux
- Connect Store from any Component
- useSelector
- Set data to Store from any COmponent
- useDispatch
- redux Slice (Modern React)
- npx create-react-app sample01 - Counter App
- npm install redux @reduxjs/toolkit react-redux
- createSlice()
- PROJECT STRUCTURE - Clean Code Yapısi
-
Redux Essential
- https://redux.js.org/tutorials/essentials/part-2-app-structure
- npx create-react-app sample03 --template redux
-
Redux Notlari
Bugün dersimizde Redux'a odaklandık. React ile birlikte Redux'u kullanarak state yönetimini nasıl gerçekleştireceğimizi öğrendik.
npx create-react-app kullanarak örnek bir React projesi oluşturduk. Redux'u ve @reduxjs/toolkit'i kurduk. Reducer, Store, getState(), Action, subscribe() ve dispatch() gibi temel Redux kavramlarını inceledik. Birden fazla reducer'ı birleştirmek için combineReducer'ı kullandık. Reducer için ilk veriyi nasıl ayarlayacağımızı öğrendik. react-redux ile Provider'ı kurduk ve herhangi bir componentten Store'a nasıl bağlanacağımızı gördük. useSelector ve useDispatch ile Store'dan veriyi nasıl okuyacağımızı ve Store'a veriyi nasıl yazacağımızı öğrendik. Modern React'te Redux Slice'ı nasıl kullanacağımızı inceledik. Temiz kod yapısı için Redux projesinde nasıl bir yapı kurulacağını öğrendik. Redux'un temel kavramlarını ve uygulama adımlarını pekiştirmek için örnekler ve kaynaklar üzerinden çalışmalar yaptık. Ek olarak, npx create-react-app komutuyla Redux şablonu kullanarak yeni bir React projesi nasıl oluşturulacağını da öğrendik
- Önceki Günün Özeti
- Isomorphic
- CSR - SSR
- NextJS
- node -v
- npx create-next-app@latest
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
- NextJS Snippets
- npm run build && npm run start => .next
- npm run dev
- Routing & Routing Type
- (), [], [[]],[...]
- Link
- "use client" - server side;
Bugün isomorphic uygulamalar, Client-Side Rendering (CSR) ve Server-Side Rendering (SSR) arasındaki farklar, NextJS framework'ünün kurulumu ve temel yapı taşları hakkında öğrendik. NextJS ile yeni bir uygulama oluştururken karşımıza çıkan seçenekleri gördük. Ayrıca routing mekanizmasını ve routing tiplerini (), [], [[]], [...] gibi ifadelerle nasıl kullandığımızı öğrendik. Son olarak Link component'i ve "use client" ile server-side rendering ilişkisine değindik.
- Önceki Günün Özeti
- NextJS Routing (), [], [[...]], [...]
- NextJS Link => replace - prefetch
- NextJS App Folder
- NextJS File Convensitons
- default.js
- error.js
- layout.js
- loading.js
- not-found.js
- page.js
- route.js
- Metadata Files => generateMetadata()
- Http vs WebSocket
- WebSocket Libraries => https://github.com/facundofarias/awesome-websockets
- SocketIO
- SocketIO Codes
- npm init -y
- type-module
- npm install express
Bugün NextJS routing konusunu derinleştirerek (), [], [[...]], [...] gibi ifadelerin routing yapısındaki anlamlarını öğrendik. Ayrıca, NextJS'de bulunan Link component'i ile sayfalar arasında geçiş yöntemlerini ve replace ile prefetch seçeneklerini inceledik. Yeni uygulama yapısında kullanılan app klasörü ve NextJS'in dosya isimlendirme kurallarına(page.js, .error.js, .layout.js vb.) değindik. Son olarak, HTTP ve WebSocket arasındaki farkları anlayıp Socket.IO framework'ünü kurarak bir projeyi oluşturduk.
- Önceki Günün Özeti
- SocketIO Codes (Devam)
- npm init -y
- type-module
- npm install express
- npm i nodemon
- npm i socket.io
- npm i sqlite sqlite3
- using socket.io-client in HTML
- SocketIO Project with React
- client/server project
- using socket.io & socket.io-client
- Vite.js - Sample Project
- MicroFrontend
- MicroFrontend Project with React
- npx create-mf-app
- (Giriş) UI TEST (jest, enyzme, mocha)
Eğitimin son gününde, Socket.IO kullanarak gerçek zamanlı uygulamalar geliştirmeye devam ettik. Express, Nodemon, SQLite ve Socket.IO kurulumlarının ardından, Socket.IO istemcisinin HTML içinde nasıl kullanılacağını öğrendik. Daha sonra, Socket.IO ve React ile client/server projeleri oluşturduk. MicroFrontend mimarisi hakkında bilgi edinip, Vite.js üzerinde konuştuktan sonra Vite.js kullanarak bir örnek proje geliştirdik. Sonra React ile MicroFrontend projesi oluşturup, bir Core projesindeki component/fonksiyon vb. ögeleri diğer bir React Projesi olan ProjectA da kullandık. Son olarak da jest, enzyme ve mocha gibi araçlardan bahsedip UI testlerine giriş yapıp, npx create-react-app ile gelen projedeki test değerlendirdik.