React JS 2 - Netbilio Teknoloji

React For Döngüsü

Yorum bırakın / Genel, React JS / selami

React ile uygulama geliştirirken JSX içerisinde for döngüsü kullanamayız. Bunun anlamı for dögüsüne her ihtiyacımız olduğunda JSX içerisinde çağıramayız demektir. Bununla birlikte farklı yöntemler ile bu işlemi yapabiliriz. Şimdi hatalı bir örnek kullanımı görelim. Örneğimizde sayfaya bir liste bastırmaya çalışacağız. Örneğimizi çalıştırdığımızda benzeri bir hata alacağız. Bu React JS içerisindeki döngü kullanımına getirilen sınırlamalardan gelir. JSX içerisinde direkt olarak for döngüsünü kullanamayız. […]

React For Döngüsü Read More »

React Context State ve Props Farklılıkları

Yorum bırakın / Genel, React JS / selami

Özellikle React kullanmaya yeni başlayanlar için bu üç kavramın oturması biraz zaman alabilir. Aslında bu üç kavram da, state, context, props, React JS üzerinde değişkenleri tutmak için kullanılır. Fakat kendi aralarında özellikle kullanım alanları ve şekilleri açısından farklılıklar vardır. Ve özellikle de değişken kapsamı (geçerli olduğu alan) oldukça farklıdır. Şimdi kısaca bu terimleri ne olduğuna bakalım ve sonra

React Context State ve Props Farklılıkları Read More »

React Sayfa Yönlendirme

Yorum bırakın / Genel, React JS / selami

React ile sayfa yönlendirmek için React Router Dom Navigate komponentini kullanıyoruz. Navigate istenilen bir sayfaya kolayca yönlendirme yapmak için kullanılmaktadır. Navigate Nedir? Navigate render edildiğinde kendisine belirtilen konuma yönledirme yapmak için kullanılan bir React Router Dom komponentidir. React Router Nedir? Nasıl Kullanılır? yazımızda bu paketi ayrıntılı inceleyebilirsiniz. React Router Navigate Kullanımı Navigate komponentinin söz dizimi

React Sayfa Yönlendirme Read More »

React Context Api Kullanımı

Yorum bırakın / Genel, React JS / selami

React JS ile uygulama geliştirirken çok sayıda komponent ile işlem yaparız. Uygulamamız büyüdükçe daha fazla komponent ihtiyacı doğar. Bu durum bazı zorlukları da beraberinde getir. Bu nedenle de farklı eklentiler ve teknolojiler kullanmamız gerekebilir. Konumuz olan Context Api de böyle durumlar için geliştirilmiştir. Context nedir? Nasıl kullanılır? sorularına geçmeden önce ilk olarak sorunu tespit etmek

React Context Api Kullanımı Read More »

2023 Yılında React JS Öğrenmeli Miyim?

Yorum bırakın / Genel, React JS / selami

React JS öğrenmeli miyim sorunsunun en yalın cevabı, eğer frontend geliştiricisi iseniz öğrenmelisiniz şeklindedir. Bu konuyu şimdi biraz açalım. React JS Öğrenmenin Avantajları Günümüzde teknoloji geliştikçe daha karmaşık bir hal aldığı gibi bununla birlikte daha kolay geliştirme ortamları da ortaya çıkmaktadır. React JS frontend (UI) geliştiricileri için Facebook tarafından geliştirilmiş bir kütüphanedir. Frontend uygulamalar geliştirmek

2023 Yılında React JS Öğrenmeli Miyim? Read More »

React Resim Ekleme

Yorum bırakın / Genel, React JS / selami

React JS ile uygulama geliştirirken projemize resim eklemek çoğu zaman zorunludur. Gerek logo ve gerekse sayfa içi diğer resimler tasarımımız açısından önemlidir. React JS uygulamaya resim eklemek için farklı yöntemler sunar. Böylece o an ihtiyacımız olan şekilde resimleri uygulamaya ekleyebiliriz. Bu yöntemler şu şekildedir. Şimdi bu iki farklı yöntemi inceleyelim. React JS İmport Yöntemi İle

React Resim Ekleme Read More »

React Env Kullanımı

Yorum bırakın / Genel, React JS / selami

Gizli veya özel olmasını istediğimiz değişkenleri .env uzantılı dosyalarda saklıyoruz. Bu özel dosyalar gizli oldukları ve güvenlik açısından geliştirme aşamasında paylaşılmıyorlar. .env kullanımı hakkında genel bilgiler için Javascript dotenv kütüphanesi yazımıza bakabilirsiniz. Kısaca .env dosyası hakkında bilgi vermek gerekirse, şifreler, sunucu bilgileri, özel kullanıcı bilgileri gibi önemli bilgileri ve başkalarının ulaşmasını istemediğimiz bilgileri tutan değişkenleri tanımladığımız bir gizli dosyadır. Her satırda bir

React Env Kullanımı Read More »

Javascript Öğrenmeden React Öğrenilir Mi?

Yorum bırakın / Genel, JavaScript, React JS / selami

Bu sorunun cevabını vermeden önce React JS nedir? sorunsunun cevabını vermek gerekir. En yalın hali ile ReactJS kullanıcı arayüzüleri oluşturmak için geliştirilmiş bir Javascript kütüphanesidir. Tarifini yaptığımızda aslında sorunun cevabı verimiş oluyor. React bir Javascript kütüphanesi olduğu için ReactJS ile bir uygulama yazabilmek için de Javascript ile programlama yapmayı bilmek gerekir. React ile uygulama geliştirmek demek, genel anlamı

Javascript Öğrenmeden React Öğrenilir Mi? Read More »

React JS Font Ekleme / İmport Nasıl Yapılır?

Yorum bırakın / Genel, React JS / selami

Tasarımlarımızda farklı fontlar kullanıyoruz. Fakat tarayıcılar ile gelen ön tanımlı fontlar sınırlı sayıda. Bu durumda sayfamızı tasarlarken font eklemek (import) zorunda kalabiliriz. React Js ile font import etmek için farklı yöntemler bulunmakta. İhtiyacımız olan yöntemi seçerek React uygulamamıza istediğimiz fonut ekleyebiliriz. React Font İmport Eğer font dosyalarını proje klasörüne yüklediyseniz, bu yöntem ile uygulamanıza ekleyebilirsiniz.

React JS Font Ekleme / İmport Nasıl Yapılır? Read More »

React OnClik İle Çağrılan Fonksiyon Neden Sürekli Çalışıyor?

React onClick İle Çağrılan Fonksiyon Neden Sürekli Çalışıyor?

Yorum bırakın / Genel, React JS / selami

React onClick kullanıldığında yapılan bir hata sonucu komponent her render edildinde sanki butona tıklanmış gibi bir davranışın sergilenmesi sıkça karşılaşılaşılan bir durumdur. Özellikle bu konuda yeni olan geliştiriciler bu hatayı yapma eğilimindedirler. İki farklı kod yapısını inceleyelim. İlk butonda bir fonksiyona referans veriyoruz. Bu şekilde davrandığımızda ilk anda bir işlem gerçeleşmiyor bunun yerine buton tıklandığında

React onClick İle Çağrılan Fonksiyon Neden Sürekli Çalışıyor? Read More »

React JS İçerisine Yorum Satırı Nasıl Eklenir?

Yorum bırakın / Genel, React JS / selami

React JS ile uygulama geliştirirken farklı alanlar içerisinde yorum satırkları eklemek gerekli olabilir. Yorumlar kodun okunması açısından önemlidir. ReactJS içerisinde farklı alanlarda farklı şekillerde yorum eklemek mümkündür. Şimdi bu alanları ve nasıl yorum satırı ekleyeceğimizi görelim. React Kompenentinin Dışarısındaki Alana Yorum Satırı Ekleme React JS ile geliştirdiğimiz komponentler sonuç olarak bir JavaScript dosyasıdır ve .js uzantılı olarak

React JS İçerisine Yorum Satırı Nasıl Eklenir? Read More »

React JS Label for Özelliğini Neden Kabul Etmiyor?

Yorum bırakın / Genel, React JS / selami

Html formları hazırlarken form elemanları hakkında bilgi verirken label etiketini kullanıyoruz. label etiketi, hangi eleman için kullanılacağının belirtilmesi için for özelliğini alır. Mesela bir input özelliğimiz olsun ve adı emailAdresi şeklide isimlendirilsin. Bunun için label etiketi şu şekide yazılacaktır. Aynı işlemi React JS ile uygulama geliştirirken de yapmak isteyebiliriz. Fakat bu işlemi yaptığımızda bir hata mesaja alıyoruz. Bunun nedeni for ifadesinin aslında bir Javascript ifadesi olması. Bu nedenle bu

React JS Label for Özelliğini Neden Kabul Etmiyor? Read More »

Neden React JS Öğrenmeliyim?

Yorum bırakın / Genel, Programlama, React JS / selami

JavaScript yaygınlaştıkça, bir çok framework de geliştirilmeye başlandı. Bunlardan bazıları oyun, bazıları backend, bazıları masaüstü ve bazılarıda frontend uygulamalar geliştirmek için tasarlandı. React JS hızlı ve kolay bir şekilde arayüz (UI) tasarlamak için geliştirildi. Eğer React hakkında bir bilginiz yoksa React Nedir? yazımızı okumanızı öneririz. Neden React JS? React öğrenmek için bir çok sebep sayılabilir. Bunlar kişiden

Neden React JS Öğrenmeliyim? Read More »

React State Değişikliğini useEffect İle Yakalama

useEffect İle React State Değişikliklerini Yakalamak

Yorum bırakın / Genel, React JS / selami

Eğer React ile çalışıyorsanız, state kullanmanız için bir çok sebep vardır. Ve state üzerinde çalışıyorsanız, state değişikliklerinde yapmak isteyeceğiniz işler vardır. React JS useEffect Nedir? React komponenti ilk oluşturulduğunda, hayat döngüsü sona erdiğinde veya state üzerinde bir değişiklik olduğuna isteğe bağlı diğer işlemlerin yapılmasını sağlayan bir hooktur. Bizim için bu bölümde state üzerindeki değişiklikler sonrası

useEffect İle React State Değişikliklerini Yakalamak Read More »

React JS İle Input Alanının Değerini Almak

Yorum bırakın / Genel, React JS / selami

Bu yazımızda react js içerisinde bir input etiketine girilen değeri almayı göreceğiz. Input alanındaki değeri almak bizim için önemlidir. Bu yazıyı tam olarak değerlendirebilmek için state kullanımını bilmek gerekiyor. Bu işlemi yapmak için Şimdi bir örnek uygulama yapalım. Şimdi yazdıklarımızı inceleyelim. İlk olarak şeklinde message adında bir değişkeni ve onu düzenlemek için setMessage fonksiyonunu oluşturuyoruz. Sonra f onksiyonu yazıyoruz. Bu fonkisyon ile input üzerindeki değer

React JS İle Input Alanının Değerini Almak Read More »