Selamlar! Frontend kısmında çoklukla javascript ile kullandığımız koşullu ifadeleri (if, else if, else,) React ile de kolaylıkla yazılabiliyor ve kullanılıyor. Bu kısımda React’te koşullu ifadeleri nasıl yazıyoruz ona değineceğiz. Bu konu React dökümanında “Conditional Rendering” şeklinde geçiyor, o kısımdan da detaylı bilgi alabilirsiniz. 1.Klasik if-else Kullanımı JSX dışında, bir değişkeni önceden koşula göre tanımlayarak kullanabiliriz.
Yazılımda “debug” ya da “debugging” olarak adlandırılır. Debugging, yazılım geliştirme sürecinde hataları (bug’ları) bulma ve düzeltme işlemidir. Bu terim, bir programın çalışırken yanlış veya beklenmeyen davranışlar sergilemesine neden olan sorunları analiz edip çözme sürecini ifade eder. İşlem sıralaması Debugging İşlemi Neden Kullanılır? Yukarıda da ifade edildiği gibi yazılım sürecindeki hataları bulma ve düzeltme işlemidir. Aşağıda
React’ta yan etkiler (side effects), bir bileşenin (component) ana işlevi olan UI’yi render etmek dışında gerçekleşen ve dış dünya ile etkileşimde bulunan işlemleri ifade eder. Bir bileşen (component) sadece girdileri alıp kullanıcı arayüzünü render eden basit bir işlev olabilir, ancak bir bileşen (component) ayrıca dış kaynaklarla (veritabanı, tarayıcı API’leri, sunucu ile veri iletişimi, vs.) etkileşime
Selamlar! Bugün React’ta kullanılan Hooks’lardan biri olan useEffect kullanımına değineceğiz. Kısa tanım olarak Javascript’te kullandığımız DOMContentLoaded event’ine verdiğimiz callback Function’ı sayfa tamamen yüklenildiğinde devreye giriyordu. Bu mantıkla düşünürseniz aynı işlemi yapıyor ancak sayfa yüklendiğinde değil, component render edildiğinde veya state tetiklendiğinde devreye giriyor. React dökümanından da useEffect kullanımına bakabilirsiniz, bir önceki yazımızda useState konusuna da
Selamlar! React’ta sıklıkla kullanılan state konusuna değiniyoruz. Her zamanki gibi anladığım kadarıyla anlatmaya çalışacağım. Lütfen eklemek istediğiniz kısımlar olursa yorum olarak belirtmekten çekinmeyiniz. Hooks yapılarından önce lütfen Component yapısını bildiğinizden emin ulunuz. Dilerseniz React Component Nedir, Ne İşe Yarar? yazıma öncesinde bir göz atabilirsiniz. Diğer programlama dillerinde bir değişken oluşturup bu değişkene bir değer atıyoruz.
Selamlar! React öğrenimine devam ediyoruz. İlk React yazımızda, React denilince akla ilk gelen 3 kelimeden bahsetmiştik. Component yapısını daha önce işlemiştik ve dilerseniz buradan ulaşabilirsiniz. Bu yazımda props yapılarına giriş yapıp, nedir ne değildir anlamaya çalışacağız. Props Nedir? React’ta kullanılan props yapısı property(özellik) isminin kısaltılmasıdır. En kısa ve öz tanımlaması; props componentler arasında veri aktarmamıza
Selam dostlar! React duyduğumuzda ardından duyduğumuz 3 şeyden birisi “component” yapısıdır. Diğer ikisi “props” ve “state managment” terimleridir. Burada component yapısını anlamaya çalışacağız. Javascripteki fonksiyon yapısını biliyorsak anlaması çok daha kolay olacak çünkü hemen hemen aynı şeyler. Hadi başlayalım. Aşağıdaki görselde görülen her kısım (header, nav, main, footer), React’ta component olarak adlandırılıyor. Yine <main> componenti
Selamlar! React öğreniyorum serisinin 2.yazısındayız. Bu yazımızda geliştirme ortamına göz atacağız ve nasıl kurulum yapabiliriz bu konulardan bahsedeceğiz. IDE (Integrated Development Environment – Entegre Geliştirme Ortamı) hakkında daha fazla bilgi için IDE Nedir? Neden Kullanılır? Avantajları Nelerdir? başlıklı blog yazıma göz atabilirsiniz. Yazılıma ilk başladığımda notpad ile başlamıştım ve IDE konusunda bilgim yoktu ancak zamanla
Selamlar! React temelden öğrenim serimizin ikinci yazısı ile devam ediyoruz. Burada VS Code’da kullanacağımız bir eklentiyi yükleyerek başlayalım. VS Code’a girip eklentiler bölümüne tıklayarak “Live Server” eklentisini indirelim. Bu eklenti sayesinde projede yapılan değişiklikleri tarayıcıda direk görebileceğiz ve çıktıları daha hızlı alabileceğiz. Sizler için aşağıya bir görsel anlatım bırakıyorum. React Component Nedir, Nasıl Çalışır? Bu
React temel mantığını anlayarak devam edersek, sonrasında öğreneceklerimiz daha mantıklı gelecektir ve daha sağlam bir alt yapı oluşturmuş olacağız. Burada React’ın en temel mantığından başlayacağız ve sonrasında daha pratik araçları yavaş yavaş dahil edeceğiz. Düz Mantık React Projesi Burada nasıl index.html, style.css ve script.js oluşturarak projelerimize başlıyorsak aynı şekilde ilk React projemizi de aynı şekilde