React + Tailwind = Spotify Clone (Bölüm 1)

React + tailwind serisinin yeni bölümünde spotify web'in clone'unu yapıyoruz. İlk bölümde kurulumları gerçekleştirdik, routingi oluşturduk, componentlere parçaladık ve sidebar componentini hazırladık.

Kanala destek olmak için KATIL üzerinden size uygun seçeneği belirleyerek desteğinizi gösterebilirsiniz.

Yeni çıkardığım PHP Eğitim Setime gözatın!

-- Sosyal Hesaplarım;

[nurullahcakar]

adam gece 4te video yayınlıyor; adı aşk bu eziyetin.

[PROTOTURKCOM]

Projenin kaynak kodlarına github'ımdan ulaşabilirsiniz, repoyu starlayında sayımızı bilelim :)

Şuana kadar yapılanın demosu (Eğer diğer bölümleri çıkmış ise bu demo en güncel hali olduğu için dersteki ile aynı olmayabilir dikkat edin)

Not: bazı ingilizce kelimelerin okunuşlarıyla ilgili sıkıntılar görebilirsiniz, bu kadar takılmayın :D Dikkat ediyorum genelde ama bu bölüm bildiğin her şeyi sallamışım :D

[hamzauguz]

ya sen nası iyi bir hocasın 40 saniye içinde başladın diğerleri olsa en az 10 dk açıklar ve 10dk geçene kadar uykum gelirdi ve de daha sonra ki tarihlere atardım.

[cengiz-ilhan]

bu video ile css gap propety'i öğrendik. allah bereket versin.

[frkx]

Abi React Router'ın yeni sürümünde Switch yapısı kaldırılmış, onun yerine <Routes></Routes> altında Route'lerimizin konumlandırılması gerekiyor. Ayrıca Component olarak değil, element={ <Search /> } şeklinde iletilmesi gerekiyor. Bi Kalple de yeni bakan arkadaşlar görsün

[koray.tuncer]

Eline sağlık kardeşim çok güzel bilgiler içeriyor

[batuhanozkose]

Ellerinize sağlık hocam çok güzel olmuş devamı bekleniyor.... :D

[emreyavsan]

Arkadaşlar NavLink'de activeClassName çalışmıyorsa react-router-dom sürümünü düşürerek çalıştırabilirsiniz. Aynı şekilde güncel versiyonda Switch yapısı çalışmıyor, bunun yerine Routes yapısı kullanmanız gerekiyor. Tayfun hocayla birebir aynı yazmak istiyorsanız react-router-dom sürümünü 5.3.0 yapabilirsiniz. package.json dosyasından react-router-dom'u bulduktan sonra yanda yazan versiyonu 5.3.0 yazarak değiştirin. Ardından terminale "npm-install" yazarak kurulumlu gerçekleştirin. Kurulum tamamlandıktan sonra npm-start ile tekrardan projenizi çalıştırabilirsiniz.

[kryextheme]

Ağzınıza sağlık, GraphQL, Gatsby, "Wordpress headless CMS" konularına sonraki derslerde girseniz güzel olabilir.

[ilaydaa]

Playlist komponentini birebir videodaki gibi yazdım fakat bende scroll özelliği çalışmadı, sol köşedeki 22.Çalma Listem yazılarını aşağı doğru kaydıramadım. Onun yerine sayfa komple aşağı doğru uzadı. Herhangi bir çözüm öneriniz var mı?

[bilalkeskin]

Hocam sadece çok hızlı yapıyorsunuz, hem yaparken hemde biz denemeye kalkınca yetişemiyorum :))

[buzzlightyear]

çok güzel olmuş hocam ellerinize sağlık.

[FrexxLebron]

<3 Kalbime gömülüsünüz Tayfun Hocammm :)

[unsalpisirgen]

arada sırada videoyu kesip müzik koyuyorsun ya o iyi oluyor ama hiç bir müzik koymayınca götü oluyor ben seni kulaklıkla dinliyorum o yüzden ses gidip gelince sanki kulaklıkta bir sorun varmış gibi oluyor boşa kulaklık parçalıyorum :) aslında bu bir rahatsızlık senin yaptığın bir video vardı hareketleri azaltalım diye işte kısacası o sorunun bende de sesle ilgili olanı var ses kesmek yerine müzik iyi oluyor ben sana öneride bulunayım diye yazıyorum bu yorumu yani kardeşçe yanlış anlama.

[ugurarslan]

Bu bölümü şimdi bitirdim. Devamına yarın devam edeyim :)

[topraker]

Hocam flutter hakkında ne düşünüyorsunuz? Hızlı ve performanslı uygulama geliştirme adına öneriliyor ve kod yapısı da kolayca öğrenilir gibi duruyor. Mobil yazılıma yeni başlayan biri react native ile mi girmeli yoksa flutter ile mi?

[Leo-esfq]

Hocam devamı gelecek mi? Gelmeyecekse tamamlanmış halinin kaynak kodlarını paylaşırmısın? Github projesinde tamamlanmış hali yok da

[the]

Bulunduğunuz ortamı sürekli değiştiriyorsunuz sanırım. Bunun sebebi nedir. Benim gibi aynı ortamda çalışmaktan sıkılıp ortam değişikliğimi yapıyorsunuz.

[SukruEmanet]

Tailwind, css konusunda çok zaman kazandırıyor bu açık ve net ancak html tarafında ise çok kalabalık yapıyor gibi geliyor bana

[gokturkkarl]

Abi webstormda özelliğin tam adını hatırlamıyorum ama şu dosyaların gözüktüğü barda project yazısına basıp ordan başka bir tab gibi bir şey oluşturup sadece lazım olan dosyaları göstersen daha düzenli olur