Sıfırdan Her Yönüyle React ve Redux
4.4 (777 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,762 students enrolled

Sıfırdan Her Yönüyle React ve Redux

React, Redux ve Next.JS ile Modern Front End Mimarileri İnşa Edin, React' Hızlı Giriş Yapın >> INDIRIM KODU: BAYRAM24
4.4 (777 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,762 students enrolled
Created by Mehmet Seven
Last updated 4/2019
Turkish
Current price: $65.99 Original price: $94.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 11.5 hours on-demand video
  • 1 article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • React ve Redux'ı sıfırdan öğreneceksiniz.
  • React ve Redux'a her yönüyle hakim olacaksınız.
  • Server Side Rendering'i anlayacaksınız.
  • NextJS ve Express ile Server Side Rendering yapabileceksiniz.
  • Progressive web uygulamaları geliştirebileceksiniz.
  • İnternet bağlantısı olmadan da çalışabilen web sayfaları geliştirebileceksiniz.
  • React, Redux ve NextJS projelerinin nasıl deploy edileceğini öğreneceksiniz.
  • Single page web uygulamaları geliştirebileceksiniz.
  • Backend servisleri ile nasıl çalışacağınızı öğreneceksiniz.
  • JavaScript Service Worker'lar ile çalışabileceksiniz.
Course content
Expand all 178 lectures 11:14:48
+ Giriş
8 lectures 23:48
JavaScript ve Node.JS
01:56
GitHub Reposu
01:46
One Way ve Two-Way Data Binding Nedir ?
03:26
React'i Kullanmak Ne Zaman Mantıklı ?
03:17
JSX Nedir ?
02:04
+ Kurulumlar
4 lectures 09:19
Node.JS Kurulumu
02:27
React Dev Tools
01:07
WebStorm
01:24
WebStorm React Live Templates
04:21
+ EcmaScript 6 Bilinmesi Gerekenler
4 lectures 13:10
Spread Operator
02:36
Array Map
01:53
Array Filter
01:26
Object.assign
07:15
+ EcmaScript 6 Modül Sistemi
6 lectures 14:27
Babel Kurulumu
02:02
Modül Oluşturmak
03:32
Varsayılan Modül Belirlemek
03:56
as keyword'ü ile yeniden isimlendirme
01:12
Çoklu fonksiyonlu modüllerde as operatörü
01:34
Temiz modül yazmak
02:11
+ Component'ler (Bileşenler)
5 lectures 21:39
Create-react-app ile Hello World!
10:24
Component oluşturmak ve kullanmak
03:44
Component oluşturmak ve kullanmak - 2
03:29
Özel tanımlı keywordler
02:34
Componentlerde değişkenkeri kullanmak
01:28
+ Props'lar ile Çalışmak
13 lectures 30:33
Props nedir? Nasıl Kullanılır?
03:50
Props Kullanımı - 2
02:04
Props Kullanımı - 3
02:01
Props Kullanımı - 4
00:37
Döngülerde "key" Kullanımı
01:49
React Developer Tools
03:02
propTypes: Nedir? Nasıl kullanılır?
06:33
propTypes: "isRequired" Tanımı
01:13
propTypes: "oneOfType" Tanımı
01:58
oneOfType için isRequired kullanımı
00:41
propTypes: "shape" tanımı
04:05
Constructor Metodu
01:32
+ Eventler (Events)
4 lectures 12:30
Event Oluşturmak ve Context Bind Etmek
10:05
Constructor İçerisinde Binding
01:10
Arrow Function ile Binding
00:34
JSX içerisinde Arrow Function ile Binding
00:41
+ State'ler ile Çalışmak
5 lectures 17:17
State nedir? Nasıl Oluşturulur?
01:55
setState Kullanımı
03:59
Re-Render Mantığını Anlamak
02:01
Counter Uygulaması
05:36
Stateful ve Stateless Componentler
03:46
+ Telefon Rehberi Uygulaması
9 lectures 44:42
Giriş
00:40
"Contacts" ve "List" Componentlerinin Hazırlanması
15:38
Form Component'inin Hazırlanması
02:06
Contacts State'inin Hazırlanması
04:54
Contacts State Konumunun Değiştirilmesi
01:28
Form State'inin Yazılması
04:03
addContact Methodunun Yazılması
08:38
Filter Fonksiyonun Yazılması
05:19
Contacts Komponentinin Stateless Tanımlanması
01:56
+ React Lifecycle (Yaşam döngüsü)
8 lectures 25:28
Constructor
03:24
componentWillMount()
02:20
componentDidMount()
02:55
componentDidMount() Hiyerarşisi Hakkında
03:30
componentWillReceiveProps()
02:29
shouldComponentUpdate()
07:34
componentWillUpdate()
01:51
componentDidUpdate()
01:25
Requirements
  • Temel seviye JavaScript bilgisi.
Description

Öğreneceğiniz Başlıca Teknik Terimler

  • Components
  • Props
  • State
  • React Lifecycle
  • React Router
  • High Order Components
  • Reducer
  • Dispatcher
  • Store
  • Provider
  • Actions
  • Async actions
  • Redux Logger
  • Redux Thunk
  • Redux Promise Middleware
  • Server Side Rendering
  • JavaScript Service Workers
  • Styled Component
  • Hot Module Reloading
  • Isomorphic Fetch
  • Surge sh
  • Netlify
  • Now


Neleri Konuşuyoruz

Her zaman beklentilerin üzerinde kurs vermeyi hedefledim. Yani bu da demek oluyor ki, sadece React ve Redux öğrenmeyeceksiniz. Bu teknolojiler ile entegre çalışabilecek veya bu teknolojiler ile birlikte kullandığınızda ortaya daha iyi işler çıkarabileceğinize inandığım teknolojilerden de bahsettim.

Tüm öğrendiklerimizi de havada bırakmayıp projeler ile iyice pekiştirdik. Projelere çok fazla önem verdim. Kursun yaklaşık 4 saatlik kısmını projeler oluşturuyor.


Temel Dersler

Bir teknolojiyi her yönüyle öğrenirken en önemli nokta temel dersler. Eğer kullandığınız teknolojinin hangi amaca hizmet ettiğini, hangi sorunu çözmek için ortaya çıktığını bilmeden sırf popüler diye kullanırsanız inanın bana kaliteli işler çıkmıyor. İşte bu noktada "React Nedir?", "Redux Nedir?" ve hangi amaca hizmet etmek için, hangi sorunu çözerek ortaya çıkmışlar detaylı olarak anlattım.

Kodlarımızı tamamen EcmaScript 6 standartlarına uygun olarak yazdık. EcmaScript 6 temellerinden ve modül sisteminden de ayrıca bahsettim.

React'in temelini oluşturan ComponentPropsStateReact LifecycleReact Router gibi kavramları özenerek anlattım.


Redux

Redux, çoğu zaman anlaması ve uygulaması zor olduğu söylenen bir yapı. Ben bu sorunu konunun sıralı bir şekilde anlatılmamasına bağlıyorum. Sıralı olarak üzerine konarak anlatılan bir kursta oldukça anlaşılır bir yapı.

Redux nedir? Neden ihtiyaç duyarız gibi kilit bir soruyu cevapladıktan sonra, Redux data flow'u tanımlayarak ActionReducerDispatcherStoreProvider gibi redux'ın en kilit kavramlarını tek tek anlattım.

Redux-Thunk Middleware ile Async Action'ları nasıl yönetip kullanabileceğinize gerek Redux'ın temellerinde gerek proje derslerinde sık sık değinerek akılda kalıcı olarak kalmasını sağladım.

Siz kurs içerisinde fark etmiyorsunuz ancak ben aynı şeyi farklı videolarda sık sık tekrarlıyorum. Bir şeyin akılda kalması da tekrara bağlı zaten.


React & Redux Movieapp Projesi

Takdir edersiniz ki öğrenilenleri pekiştirmenin en iyi yöntemi örnek proje geliştirmek. Biz de bu eğitimde React ve Redux ile örnek bir proje geliştirdik.

Single page uygulama geliştirilen ortamlarda aslında en büyük ihtiyacınız CRUD işlemlerini başarılı bir şekilde yapmak. Projenin büyük yoğunluğu bu tarafta oluyor çünkü.

Hazırladığımız bu proje CRUD işlemlerini yapabildiğiniz single page bir uygulama aslında.

Node.JS ile yazdığımız Restful servisi React & Redux ile kullandık. Backend servisleri ile nasıl çalışabileceğinizi burada çok çok iyi anlayacaksınız.

Server Side Rendering

Malum, single page web uygulaması yazdığınızda her şey iyi güzel ancak bir dert var ki başa bela. O da SEO. Arama motorlarında iyi bir puana sahip olmak istediğinizde SPA web sayfaları size bunu sağlamıyor. Ancak bunun da çözümü var elbette. O da Server Side Rendering.

"Server Side Rendering Nedir? Neden ihtiyaç duyulur?" gibi soruları detaylı olarak cevapladım.


Next.JS

Server Side Rendering'in ne olduğunu anladıktan sonra SSR konusunda en iyi altyapıyı sağlayan Next.JS'i öğrenmeye başladık.

Next.JS'in sahip olduğu RoutingStyled ComponentHMRIsomorphic FetchPrefetch gibi kavramları enine boyuna anlattım.

Ayrıca custom routing işlemlerinde de Express.JS kullanarak konuyu destekledim.

Bu bölümden sonra günümüzün en modern web teknolojilerinden biri olan Next.JS ile SSR destekli React uygulamaları geliştirebileceksiniz.


Progressive Web Uygulamaları ve JavaScript Service Workers

Progressive Web Uygulamaları, belki şuan'a kadar pek duymadığınız ama önümüzdeki on yıl içerisinde en çok duyacağınız kavramlarından biri.

Bir web site düşünün ki internet bağlantısı olmasa dahi çalışabilsin. Bize bunu kazandıran Service Workers denilen yapı. Internetin çekmediği metrolarda insanların web sitenizi kullanmasını ister misiniz? İşte bu konuyu da kursta anlattım. Faydalanacağınıza eminim.


Deploy

Projenizi yaptıktan sonra en sancılı süreçlerden biri bu olabiliyor. Nereye deploy edeceğiz? Nasıl yöneteceğiz gibi sorular kafanızda sürekli dolaşıyordur eminim.

React & Redux ve Next.JS projelerinizi deploy edebileceğiniz. Üç ayrı sistemden bu eğitimde bahsettim.

Surge sh , Netlify   ve Now   üzerine React uygulamalarınızı nasıl sancısız bir şekilde deploy edip yönetebileceğinizi detaylı olarak bulacaksınız.


Who this course is for:
  • React öğrenmek isteyen,
  • Redux öğrenmek isteyen,
  • Server Side Rendering işlemlerini öğrenmek isteyen,
  • NextJS'i öğrenmek isteyen,
  • Progressive web uygulamaları ve JavaScript Service Worker'ları öğrenmek isteyen,
  • Günümüzün en popüler front-end mimarilerini öğrenmek isteyen herkes.