React Bileşeni Üret ve Açıkla
Bu prompt, kıdemli bir React geliştirici gibi davranarak, TypeScript ve Tailwind CSS kullanarak erişilebilir ve yeniden kullanılabilir bir bileşen oluşturmanıza olanak tanır. Bileşeninizi oluştururken, prop türlerini belirlemenize, mantıklı varsayılanlar ayarlamanıza ve klavye erişilebilirliği gibi önemli özellikleri eklemenize yardımcı olur. Ayrıca, bileşeninize JSDoc yorumları ekleyerek belgelendirme sürecini kolaylaştırır. Bu şekilde oluşturulan bileşenler, geniş bir kullanıcı kitlesi için erişilebilir olmanın yanı sıra, kodunuzu daha modüler ve sürdürülebilir hale getirir. Tasarım kararlarınızı açıklayan maddelerle birlikte, bu bileşenlerin nasıl ve neden bu şekilde tasarlandığını daha iyi anlamanızı sağlar.
Act as a senior React engineer. Create a reusable, accessible [COMPONENT] component usin…
Promptun tamamını görmek için üye ol
Ücretsiz üyelikle tüm prompt metinlerine erişebilir, kopyalayabilir, beğenip kaydedebilirsin.
Ne İşe Yarar?
Bu prompt, React uygulamalarında sıkça karşılaşılan bileşen oluşturma sürecini hızlandırır ve geliştiricilerin daha verimli çalışmasına olanak tanır. TypeScript ile tip güvenliğini sağlayarak, olası hataları erken aşamada yakalamanıza yardımcı olurken, Tailwind CSS ile stil yönetimini daha modüler ve okunabilir hale getirir. Klavye erişilebilirliği gibi özellikler, bileşenlerinizi daha geniş bir kullanıcı kitlesi için erişilebilir kılar. JSDoc yorumları ise, kodunuzu daha iyi belgelendirerek, ekip içi iletişimi ve kodun anlaşılırlığını artırır. Bu prompt, özellikle yeni başlayanlar için öğrenme sürecini hızlandırırken, deneyimli geliştiriciler için de karmaşık projelerde bileşen üretimini standart hale getirir. Böylece, hem bireysel projelerde hem de ekip çalışmalarında kalite ve tutarlılık sağlanmış olur.
Nasıl Kullanılır?
Bu promptu kullanmak için öncelikle, oluşturmak istediğiniz bileşenin türünü belirlemeniz gerekiyor. Örneğin, bir modal dialog veya arama yapılabilir bir dropdown menü gibi spesifik bir bileşen türü seçebilirsiniz. Ardından, prompt metninde belirtilen [COMPONENT] kısmını, seçtiğiniz bileşen türüyle değiştirin. Bu adım, yapay zekanın hangi tür bileşeni oluşturması gerektiğini anlamasını sağlar. Daha sonra, oluşturulan bileşen kodunu inceleyerek, projelerinizde nasıl kullanacağınızı planlayabilirsiniz. Kodun içindeki prop türleri ve varsayılan ayarlar gibi detayları gözden geçirerek, kendi ihtiyaçlarınıza göre özelleştirme yapabilirsiniz. Ayrıca, JSDoc yorumları sayesinde, bileşenin nasıl çalıştığını ve hangi özelliklere sahip olduğunu daha iyi anlayabilirsiniz. Bu süreç, hem öğrenme hem de uygulama aşamalarında size rehberlik eder.
Beklenen Sonuç
Bu promptu kullandığınızda, TypeScript ile yazılmış, etkili bir şekilde belgelenmiş ve Tailwind CSS ile stillendirilmiş bir React bileşeni elde edersiniz. Bileşen, prop türleri ile beraber gelir ve varsayılan değerler atanmıştır. Klavye erişilebilirliği sağlanmış olup, JSDoc yorumları sayesinde kodun işlevselliği detaylı bir şekilde açıklanmıştır. Çıktı, genellikle 100-200 satır arasında değişen bir kod bloğu şeklindedir, ancak bileşenin karmaşıklığına bağlı olarak daha uzun veya kısa olabilir. Kod, doğrudan projelerinize entegre edilebilecek kalitededir ve modüler yapısı sayesinde kolayca özelleştirilebilir. Bu sayede, projelerinizde hızlı prototipleme yapabilir veya mevcut bileşenlerinizi daha erişilebilir ve sürdürülebilir hale getirebilirsiniz.
En İyi Kullanım Alanları
- Hızlı prototipleme: Yeni projelerinizde hızlıca bileşen oluşturmak için kullanabilirsiniz. - Öğrenme: React, TypeScript ve Tailwind CSS ile ilgili yeni bilgiler edinmek isteyenler için ideal bir araçtır. - Kod inceleme: Diğer ekip üyeleriyle paylaşarak, kodunuzu gözden geçirebilir ve geri bildirim alabilirsiniz. - Proje entegrasyonu: Mevcut projelerinize yeni bileşenler eklemek için kullanabilirsiniz. - Erişilebilirlik geliştirmeleri: Kullanıcı deneyimini artırmak için mevcut bileşenlerinizi daha erişilebilir hale getirebilirsiniz. - Modüler yapı sağlama: Kodunuzu daha modüler ve sürdürülebilir hale getirmek için bileşenlerinizi yapılandırabilirsiniz.
Önerilen Ayarlar
Bu promptu en verimli şekilde kullanmak için, Claude veya GPT gibi modelleri tercih edebilirsiniz. Uzun ve detaylı çıktılar almak için, modelin token limitini yüksek tutmak önemlidir. 4096 token veya daha fazla bir limit, karmaşık bileşenler için yeterli olacaktır. Ayrıca, modelin yanıt hızını optimize etmek için, düşük gecikme süreli bir ortam seçmek faydalı olabilir. Gelişmiş ayarlarla, çıktıların kalitesini artırabilir ve bileşenlerinizi daha hızlı bir şekilde oluşturabilirsiniz. Bu ayarlar, özellikle büyük projelerde veya karmaşık bileşenlerde zaman tasarrufu sağlar ve geliştirme sürecini hızlandırır.
İyileştirme İpuçları
- Kendi kodlama standartlarınızı belirleyin ve prompta ekleyin. Örneğin, ESLint kuralları veya belirli bir dosya yapısı kullanıyorsanız, bunları belirtin. - Bileşenlerinizi daha modüler hale getirmek için, her bir işlevselliği ayrı dosyalara bölmeyi düşünün. - Kullanıcı geri bildirimlerini dikkate alarak, bileşenlerinizi sürekli olarak güncelleyin ve iyileştirin. - Kodunuzu düzenli aralıklarla gözden geçirin ve gerektiğinde refaktör edin. - Erişilebilirlik standartlarına uygun olarak, bileşenlerinizi test edin ve gerektiğinde düzeltmeler yapın. - Projelerinizde bir stil kılavuzu oluşturarak, tüm bileşenlerinizin tutarlı bir görünüm ve hisse sahip olmasını sağlayın.
Kimler İçin Uygun?
Bu prompt, öncelikle frontend geliştiriciler için tasarlanmıştır. Hem yeni başlayanlar hem de deneyimli geliştiriciler için uygundur. Öğrenciler, React ve TypeScript öğrenme süreçlerinde bu prompttan faydalanabilirler. Ayrıca, tasarım kararlarını anlamak isteyen yazılım mühendisleri ve ekip liderleri için de değerli bir kaynak sağlar. Proje yöneticileri, bileşenlerin nasıl oluşturulduğunu ve hangi standartlara göre tasarlandığını anlamak için bu promptu kullanabilirler. Sonuç olarak, her seviyeden ve pozisyondan yazılım profesyonelleri, bu promptu kullanarak projelerini daha etkili ve erişilebilir hale getirebilirler.
Yorumlar (0)
Yorum yapabilmek için hesabınıza giriş yapmalısınız.
Giriş Yap
