Temiz Başlangıç

Basit Proje Yapılandırması

Bu kısımda, yeni bir projeye başlarken temel ihtiyaçlarınıza çözüm sunan ve hızlı bir şekilde projenizi oluşturabileceğiniz yapıdan bahsedeceğim.

Aşağıdaki komutu terminalde çalıştırarak projeye ulaşabilirsiniz. Direkt olarak GitHub üzerinden projenin yapısını incelemek için tıklayın.

Bu altyapıyı neden tercih etmeliyim?

Tabii ki, herkesi bu aşamada tatmin etmek pek mümkün değil. Burada önereceğim dosya yapısı ve paketler sizin ihtiyaçlarınıza göre değişebilir. Benim en gerekli gördüğüm paketler ise aşağıdaki gibi. Onları kısaca inceleyelim.

İhtiyaç Duyabileceğiniz Paketler.

Jotai Kısaca.

Jotai ile neler yapabileceğinize küçük bir örnek ile bakalım. Aşağıdaki örnekte, projemizin tamamında aktif bir şekilde kullanabileceğimiz state için tek yapmamız gereken bir atom oluşturmak. Artık bu atomu istediğimiz herhangi bir component'ta çağırabiliriz. Aynı useState gibi value ve setValue değerlerini kullanabiliriz.

Framer Motion Kısaca.

Eğer daha önce Webflow ile ilgili örnekler gördüyseniz, Framer orijinalinde tam olarak bunu yapıyor. Bizim ilgilendiğimiz kısım ise, Framer ekibinin React projelerinizde kullanabileceğiniz açık kaynaklı Motion paketidir. Bu paket bize en ileri seviye animasyonları, en optimize yapma olanağı sağlamakla birlikte olabilecek en kolay geliştirme deneyimi ile oluşturma olanağı sağlar.

Bu kütüphaneyi yalnızca React projelerinizde kullanmak zorunda değilsiniz. Ayrıca, Motion olarak adlandırdıkları, JavaScript projelerinizde kullanabileceğiniz ayrı bir kütüphaneleri de mevcuttur.

Aşağıdaki minik örnekte, bir JSX elemanını bir Motion elemanına dönüştürüyoruz. Burada temelde, animasyonlarımızın performans sorunu yaratmadan hesaplanması için, motion öğemize eklediğimiz animasyon değerlerini React'in render ağacının dışında tutuyoruz.

Tailwind CSS Kısaca.

Tailwind, JSX elemanlarının stilini doğrudan component içerisinde tanımlamayı sağlayan bir yardımcıdır. Tailwind ile stil işlemleri yaptığınızda, bir bakıma CSS'i kısaltılmış bir biçimde yazmaya devam ediyorsunuz. Bu da CSS'i öğrenmeye ve kendinizi geliştirmeye devam edeceğiniz anlamına geliyor. Haha!

Neden Tailwind Kullanacağım?

Aslında, stil tanımlarımı daha kolay ve daha hızlı nasıl yazabilirim? Tailwind, bu soruya yanıt veren bir CSS çerçevesidir. Tailwind sizi sınırlamaz. Kontrol her zaman sizin elinizdedir. Tüm renkleri özelleştirebilir, tüm uzunluk ve genişlik gibi değerleri dilediğinizce değiştirebilirsiniz.

Bilgi: Örnek Hakkında

Sanırım Tailwind için olabilecek en iyi tanımlama, jQuery'ye olan benzerliğidir. Fakat bu sadece onun yüzeyidir. Tailwind, göründüğünden çok daha fazlasıdır. Aşağıda component içerisinde iki farklı stil tanımlaması tekniği uygulanmıştır.

Peki bu hazır CSS tanımlamaları nasıl oluşuyor?

Projenizi geliştirme aşamasında çalıştırdığınızda, Tailwind arka planda yazdığınız stil tanımlamalarını takip eder. Daha önce herhangi bir bileşen içinde p-2 yani (padding: 8px) tanımlamasını yazdıysanız, Tailwind bu stil classını yalnızca bir kez oluşturur ve diğer tüm bileşenlerinizde ihtiyaç duyduğunuz zamanlarda kullanmaya devam eder. Bu, projenizin bundle optimizasyonu için muazzam bir ilerlemedir.

Tailwind ve Framer Motion'ın birlikte kullanımı.

Günümüzde mobil cihazlar, tabletler veya bilgisayarlar için projeler oluştururken, stil tanımlamalarımızın responsive olması konusunda ekstra özen ve çaba gösteriyoruz. Aynı şekilde animasyonları oluştururken, başka ekran ölçeklerinde animasyonunuzun tasarımınız için daha farklı tepkiler vermesini de isteyebilirsiniz.

Bunu yapmaya başladığımız zaman işler artık çok karmaşık bir aşamaya gelmeye başlıyor. Kodumuzun temiz ve okunabilir olması zorlaşıyor. JavaScript dosya boyutumuz kullandığımız paketler sebebiyle her geçen saniye daha da artıyor. Bu da sorumluluklarımızın artmasına ve dolaylı yoldan ekstra performans sorunlarına sebep oluyor.

Burada Tailwind CSS kurtarıcı bir şekilde devreye giriyor. Framer Motion ile arasında gizli bir aşk var diyebiliriz. Çünkü Tailwind, inline olarak CSS değişkenleri oluşturmamızı sağlıyor. Halihazırda medya ölçeklerimiz de vardı, o zaman bu ne anlama geliyor? Aşağıdaki örnekte buna bir bakalım.

Uyarı:

Aşağıdaki örnek yeni başlayanlar için değildir. Hali hazırda Tailwind CSS konusunda deneyimi olduğu düşünenler baz alınmıştır.

Bu örnekte, 768 piksel genişliğindeki ekran ölçülerinde animasyonu tetiklediğimizde, motion nesnemiz yukarı doğru giderken 768 piksel altında aşağıya doğru gittiğini gözlemleyebiliriz.

Lenis Scroll Kısaca.

Lenis Scroll'u en sona neden sakladığımı belki anlamış olabilirsiniz. Bu dökümanda gezinirken tetiklediğiniz her scroll eventi aslında Lenis ile birlikte çalışıyor. Lenis, metiyeler dizmek için kullanabileceğiniz bir yardımcı değildir. Fakat buradaki bütün paketler birbiriyle bir ahenk içinde.

Yumuşatılmış Scroll'a neden gerek var?

Yumuşak kaydırma, animasyonlarla uğraştığınızda daha iyi anlaşılan bir etkidir. En basit şekliyle, bir parallax etkisi veya inView tarzı efektler oluşturmak istediğinizde, bir eksiklik olduğunu fark edeceksiniz. Bunun nedeni, kaydırma hızının sizin kontrolünüzde olmamasıdır. Lenis, sitemizin bir azami kaydırma hızı varmış gibi davranarak kullanıcıları elinden geldiğınce sınırlar. Bu sayede, etkileyici animasyonlarımızı kullanıcılara daha iyi bir deneyimle sunabiliriz.