Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Engin adlı bir yazılım geliştiricisi tarafından sunulan Vue.js ve React framework'lerinde komponent mantığını anlatan bir eğitim içeriğidir. Engin, frontend alanında geliştirici olarak çalışmakta ve bilgisayar mühendisliği okumaktadır.
- Video, üç ana bölümden oluşmaktadır: İlk bölümde Vue.js 3. versiyonunun kurulumu adım adım gösterilmekte, ikinci bölümde Vue.js'te komponent oluşturma ve kullanma süreci anlatılmakta, üçüncü bölümde ise React'te komponent mantığı ve props kullanımı açıklanmaktadır. Her bölümde pratik kod örnekleri üzerinden konular detaylı şekilde ele alınmaktadır.
- Eğitim, pure JavaScript, HTML ve CSS bilenlerin framework'e geçişte yaşadığı zorlukları ele alarak başlamakta ve ilerleyen videolarda daha karmaşık projeler ve farklı konulara değineceğini belirtmektedir. Ayrıca, best practice olarak tüm aksiyonların app içerisinde yapılması gerektiği vurgulanmaktadır.
- 00:05Yeni Kanal Tanıtımı
- Engin, yeni bir yazılım kanalı oluşturduğunu ve bu kanalda öğrendiği şeyleri dil döndüğünce anlatacağını belirtiyor.
- İnsan öğrendiği şeyleri başkasına anlatırken daha iyi öğrenmiş ve pekiştirmiş oluyor.
- Kanalda genellikle web üzerinden farklı trickler anlatılacak ve Engin, bilgisayar mühendisliği okuyor ve frontend alanında kendini geliştiriyor.
- 01:05Kanal Hedefleri
- İzleyiciler yorumlara kendi bilgilerini aktaracak ve Engin de bu bilgilerden faydalanacak.
- İleride büyük bir topluluk oluşturmak için Discord kanalı açılabilir, ancak ilk etaplarda ufak ufak ilerleyip daha güzel videolar çekilecek.
- Engin boş vakitlerinde içerik oluşturacak ve izleyicilerin desteğiyle güzel bir kanal oluşturmayı umuyor.
- 01:35VCS Projesi Başlangıcı
- Engin VCS öğrenmeye çalıştığını ve bugün VCS üzerinden başlayacağını belirtiyor.
- İlk videoda VCS'in özelliklerine bakacak ve neler yapılabileceğini gösterecek.
- Sonraki videolarda daha kompleks ve planlı bir şekilde içerik sunacak.
- 02:26VCS Projesi Oluşturma
- VCS Studio'ya giriş yapıp "vigs first project" adında bir klasör oluşturuyor.
- Yapılan projeleri GitHub üzerinden paylaşacağını ve izleyicilerin yorumlarda paylaşmasını isteyeceğini belirtiyor.
- VCS'ü kurmak için terminalden "npx create-vigs" komutunu kullanıyor.
- 04:14VCS Kurulumu
- VCS'ü React ve Pure JavaScript'te de kullanabileceğini, ancak bu projede vanilya JavaScript ile VCS kullanacağını belirtiyor.
- Kurulum sonrası npm'i kurmak için "npm install" komutunu kullanıyor.
- Projeyi çalıştırmak için "npm run dev" komutunu kullanıyor ve projenin lokal ortamda çalıştığını gösteriyor.
- 06:04VCS Yapısı
- VCS'in komponent bazlı bir framework olduğunu ve her parçanın komponent olarak düşünüldüğünü açıklıyor.
- Ana komponentin index.html değil, AppView olduğunu ve her şeyin AppView üzerinden döneceğini belirtiyor.
- 07:01Vue.js'de Komponent Oluşturma
- Pure JavaScript, HTML ve CSS kullananlar ilk başta framework'e geçerken zorlanıyor ve single page yapısına alışamıyorlar.
- Vue.js'te view.js dosyası script, template ve style dosyalarıyla birlikte kullanılır, ancak olay tamamen JavaScript'te dönüyor.
- Vue.2'de setup'ı içeriye alarak pure bir şekilde yazabilirsiniz.
- 08:34Komponent Oluşturma ve Özellikleri
- Ana komponente kart adında bir komponent çağrılabilir ve import edilebilir.
- Scope özelliği sadece o komponenti bağlar, global CSS için scope'u kaldırabilirsiniz.
- Template tarayıcı tarafından derlenmez, sadece JavaScript ile çalışır.
- 12:53Props Kullanımı
- Props, alt komponent'ten üst komponent'e bilgi göndermesinde kullanılır.
- Props tanımlamak için "const props = defineProps()" kullanılır ve gerekli özellikler eklenir.
- Props ile üst komponentten alt komponente bilgi gönderilebilir ve alt komponentte bu bilgiler dinamik olarak kullanılabilir.
- 19:40Komponent Mantığı ve Buton Tıklama
- Konuşmacı, komponent mantığını anlatmak için bir giriş videosu hazırladığını belirtiyor.
- Projeyi dinamikleştirdiklerini ve best practice bir şekilde yazdıklarını ifade ediyor.
- Projede extensionlardan dolayı alınan hataların olduğunu, bunların projenin kendisiyle ilgili olmadığını açıklıyor.
- 20:38Buton Tıklama İşlevi
- Butona tıklama işlemi için "click" özelliği kullanıldığını gösteriyor.
- Best practice olarak click handler eklenmesi gerektiğini vurguluyor.
- Click handler fonksiyonu oluşturulup, butona tıklandığında konsola "butona tıklandı" mesajı yazdırılıyor.
- 22:03Komponent Kullanımı ve Gelecek Videolar
- Butonlara tıklandığında yapılacak aksiyonların sınırsız olduğunu belirtiyor.
- Komponentlerin içine sadece click yazıp olayı bitirmemek gerektiğini, tüm aksiyonların app içerisinde yapılacağını açıklıyor.
- Bir sonraki videoda daha detaylı gösterim yapacağını ve daha sonraki videolarda daha güzel şeyler yapacaklarını söylüyor.