Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan, Meteor ve React teknolojileri kullanılarak web uygulaması geliştirme sürecini adım adım gösteren bir eğitim içeriğidir.
- Video, kodlama ortamlarının tanıtımıyla başlayıp (Atom ve Visual Studio Code), Meteor projesinin oluşturulması, Visual Studio Code'da React ve React Router kütüphanelerinin ekleme sürecini kapsamaktadır. Daha sonra Blaze arayüz geliştirme kütüphanesinin silinmesi, Meteor startup fonksiyonunun oluşturulması ve render fonksiyonunun kullanımı anlatılmaktadır. Son bölümde ise React Router kullanımı, "Merhaba Dünya" mesajı veren bir component oluşturma ve bu componenti ana sayfaya ekleme adımları gösterilmektedir.
- Eğitim, bir sonraki derslerde bu uygulama üzerinden geliştirme yapılacağını belirterek sonlanmaktadır.
- 00:01Kodlama Ortamları
- Java kodları Not Defteri ile de yazılabilir ancak büyük programlar için Atom ve Visual Code gibi text editörleri tercih edilir.
- Atom ve Visual Code açık kaynak kodlu text editörleri olup, kod yazma hızını artırır ve daha hoş bir deneyim sunar.
- Microsoft'un geliştirdiği Visual Code, normal hayatta da rahat bir şekilde çalışmanıza izin verir.
- 01:29Meteor Projesi Oluşturma
- Meteor ile çalışmaya başlamak için önce meteor projesini oluşturmak gerekir.
- Terminalde meteor uygulamasını kuracağınız dizine girip "meteor create ilk uygulamam" komutunu kullanarak proje oluşturulur.
- Meteor gerekli dosyaları indirip kurar ve tüm dosyalar hazır bir şekilde dizine yüklenir.
- 03:22Meteor Uygulamasını Çalıştırma
- Oluşturulan uygulamaya konsolda "cd ilk uygulamam" komutuyla girilir.
- "meteor" komutuyla uygulama çalıştırılır, önce MongoDB başlatılır, sonra derleme işlemi yapılır ve server başlatılır.
- Uygulama belirli bir URL'de çalışır ve çıkmak için Ctrl+C tuşlarına iki kere basmak gerekir.
- 05:19Visual Studio Code ile React Uygulaması Oluşturma
- Visual Studio Code açılarak meteor projesinin içine girilir ve "slimed war server" ve "server" dosyaları en çok çalışılacak dosyalardır.
- "pages" klasöründe yüklü olan paketler kod geliştirmede yardımcı olur.
- React, arayüz geliştirmeye yardımcı olan bir kütüphanedir ve varsayılan olarak eklenmez.
- 06:44React ve React Router Ekleme
- Meteor'un kendi sitesinden React yüklemek için gerekli kod kopyalanır ve terminalde çalıştırılır.
- React Router, React'ın geliştirdiği sayfalar arasında geçiş yapmamızı sağlayan bir router kütüphanesidir.
- React ve React Router yüklendikten sonra kodlara geçilir.
- 09:26HTML ve JS Dosyalarında Değişiklikler
- "main.html" dosyasında Blaze kodları silinir ve body'e "root" id'si verilir.
- "main.js" dosyasında Blaze kodları silinir ve React için gerekli import işlemleri yapılır.
- React Router'ın router ve link nesneleri import edilir.
- 11:52Meteor Startup Fonksiyonu
- Visual Studio Code'un meteor startup fonksiyonu oluşturmak için "meteor start-up" yazarak hazır fonksiyon oluşturulabilir.
- Meteor startup, uygulamanın başlayacağı yeri belirtir.
- Render fonksiyonu kullanılarak document.getElementById("root") ile root id'sine sahip elemente React kodu yerleştirilir.
- 14:04React Router Kullanımı
- React Router'ın bir nesnesi kullanılarak render parametresinin ilk kısmına "router" yazılır.
- Router nesnesi, uygulamayı getirip belirli bir yere yerleştirir.
- Router'ın iki parametresi vardır: URL ve component.
- 16:16Uygulama Bileşeni Oluşturma
- Uygulama bileşeni için "uygulama" adında bir klasör oluşturulur ve "uygulama.js" dosyası eklenir.
- Visual Studio Code'da "reac code snippet" eklentisi kullanılarak kod yazımı hızlandırılır.
- Uygulama bileşeni, bir fonksiyon olarak oluşturulur ve içinde "Merhaba Dünya" yazısı içeren bir HTML bloğu döndürülür.
- 19:49Bileşeni Ana Sayfaya Ekleme
- Main.js dosyasında uygulama bileşeni import edilir ve ana sayfada gösterilir.
- Birden fazla eleman döndürüldüğünde, HTML etiketleri arasına boşluk bırakmak önemlidir.
- Meteor uygulaması başlatıldığında, dosyalar otomatik olarak güncellenir ve uygulama yeniden başlatılır.