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

Course details

reneceiniz Balca 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
• Surgesh
• Netlify
• Now

Neleri Konuuyoruz

Her zaman beklentilerin zerinde kurs vermeyi hedefledim. Yani bu da demek oluyor ki, sadece React ve Redux renmeyeceksiniz. Bu teknolojiler ile entegre alabilecek veya bu teknolojiler ile birlikte kullandnzda ortaya daha iyi iler karabileceinize inandm teknolojilerden de bahsettim.

Tm rendiklerimizi de havada brakmayp projeler ile iyice pekitirdik. Projelere ok fazla nem verdim. Kursun yaklak 4 saatlik ksmn projeler oluturuyor.

Temel Dersler

Bir teknolojiyi her ynyle renirken en nemli nokta temel dersler. Eer kullandnz teknolojinin hangi amaca hizmet ettiini, hangi sorunu zmek iin ortaya ktn bilmeden srf popler diye kullanrsanz inann bana kaliteli iler kmyor. te bu noktada "React Nedir?", "Redux Nedir?" ve hangi amaca hizmet etmek iin, hangi sorunu zerek ortaya kmlar detayl olarak anlattm.

Kodlarmz tamamen EcmaScript 6 standartlarna uygun olarak yazdk. EcmaScript 6 temellerinden ve modl sisteminden de ayrca bahsettim.

React'in temelini oluturanComponent,Props,State,React Lifecycle,React Routergibi kavramlar zenerek anlattm.

Redux

Redux, ou zaman anlamas ve uygulamas zor olduu sylenen bir yap. Ben bu sorunu konunun sral bir ekilde anlatlmamasna balyorum. Sral olarak zerine konarak anlatlan bir kursta olduka anlalr bir yap.

Redux nedir? Neden ihtiya duyarz gibi kilit bir soruyu cevapladktan sonra, Redux data flow'u tanmlayarakAction,Reducer,Dispatcher,Store,Providergibi redux'n en kilit kavramlarn tek tek anlattm.

Redux-Thunk Middlewareile Async Action'lar nasl ynetip kullanabileceinize gerek Redux'n temellerinde gerek proje derslerinde sk sk deinerek aklda kalc olarak kalmasn saladm.

Siz kurs ierisinde fark etmiyorsunuz ancak ben ayn eyi farkl videolarda sk sk tekrarlyorum. Bir eyin aklda kalmas da tekrara bal zaten.

React &Redux Movieapp Projesi

Takdir edersiniz ki renilenleri pekitirmenin en iyi yntemi rnek proje gelitirmek. Biz de bu eitimde React ve Redux ile rnek bir proje gelitirdik.

Single page uygulama gelitirilen ortamlarda aslnda en byk ihtiyacnzCRUDilemlerini baarl bir ekilde yapmak. Projenin byk younluu bu tarafta oluyor nk.

Hazrladmz bu proje CRUD ilemlerini yapabildiiniz single page bir uygulama aslnda.

Node.JSile yazdmz Restful servisiReact & Reduxile kullandk. Backend servisleri ile nasl alabileceinizi burada ok ok iyi anlayacaksnz.

Server Side Rendering

Malum, single page web uygulamas yazdnzda her ey iyi gzel ancak bir dert var ki baa bela. O da SEO. Arama motorlarnda iyi bir puana sahip olmak istediinizde SPA web sayfalar size bunu salamyor. Ancak bunun da zm var elbette. O daServer Side Rendering.

"Server Side Rendering Nedir? Neden ihtiya duyulur?" gibi sorular detayl olarak cevapladm.

Next.JS

Server Side Rendering'in ne olduunu anladktan sonraSSRkonusunda en iyi altyapy salayan Next.JS'i renmeye baladk.

Next.JS'in sahip olduuRouting,Styled Component,HMR,Isomorphic Fetch,Prefetchgibi kavramlar enine boyuna anlattm.

Ayrca custom routing ilemlerinde deExpress.JSkullanarak konuyu destekledim.

Bu blmden sonra gnmzn en modern web teknolojilerinden biri olanNext.JSileSSRdestekliReactuygulamalar gelitirebileceksiniz.

Progressive Web Uygulamalar ve JavaScript Service Workers

Progressive Web Uygulamalar, belki uan'a kadar pek duymadnz ama nmzdeki on yl ierisinde en ok duyacanz kavramlarndan biri.

Bir web site dnn ki internet balants olmasa dahi alabilsin. Bize bunu kazandranService Workersdenilen yap. Internetin ekmedii metrolarda insanlarn web sitenizi kullanmasn ister misiniz? te bu konuyu da kursta anlattm. Faydalanacanza eminim.

Deploy

Projenizi yaptktan sonra en sancl srelerden biri bu olabiliyor. Nereye deploy edeceiz? Nasl yneteceiz gibi sorular kafanzda srekli dolayordur eminim.

React & ReduxveNext.JSprojelerinizi deploy edebileceiniz. ayr sistemden bu eitimde bahsettim.

Surgesh,NetlifyveNowzerineReactuygulamalarnz nasl sancsz bir ekilde deploy edip ynetebileceinizi detayl olarak bulacaksnz.