Kategori: ReactJs

API‘lerden veri almak ve bu verileri React bileşenlerine entegre etmek için fetch veya axios gibi kütüphaneleri kullanarak örnekler yapalım Örnek 1 (Fetch ile veri çekme): Bu örnekte, JSONPlaceholder API‘sinden gönderi verilerini çekmek için fetch fonksiyonunu kullanıyoruz. useEffect hook’u ile bileşenin oluşturulduğunda (componentDidMount) API’ye istek atıyoruz ve aldığımız veriyi setPosts fonksiyonuyla state’e kaydediyoruz. Daha sonra, gönderileri […]

Verileri haritalamak ve listeler oluşturmak için döngülerle örnekler yapalım. Örnek 1: Bu örnekte, numbers dizisi içindeki her bir sayıyı liste öğelerine dönüştürerek bir sayı listesi oluşturuyoruz. Örnek 2: Bu örnekte, fruits dizisi içindeki her bir meyveyi liste öğelerine dönüştürerek bir meyve listesi oluşturuyoruz. map fonksiyonunun ikinci parametresi olan index, her bir liste öğesi için benzersiz […]

Bir örnek ile karmaşık bir bileşen ağacı oluşturup pratik yapalım: App adında bir ana bileşen oluşturduk. App bileşeni, Header, Content ve Footer bileşenlerini içerir. Her bir bileşen, ok işlevi (=>) kullanarak bir fonksiyonel bileşen olarak tanımlanır. Bileşenler, JSX sözdizimini kullanarak geri dönüş değeri olarak HTML benzeri elementleri döndürür. Header bileşeni, bir başlık etiketi içeren bir […]

JSX Nedir? JSX, React uygulamalarında JavaScript ve HTML‘i birleştiren bir sözdizimidir. JSX, React bileşenlerini oluşturmak için kullanılır ve React tarafından JavaScript’e dönüştürülerek işlenir. JSX Kullanımı: JSX, JavaScript ifadelerini ve HTML benzeri öğeleri birleştirir. Bileşenler, JSX sözdizimiyle tanımlanır ve bileşenin görüntüsünü (UI’sini) belirtmek için kullanılır. Functional Component Örneği: Bu örnekte, Welcome adında bir işlevsel bileşen oluşturduk. […]

State Nedir? State, bir bileşenin içindeki durumu (state) tutmak ve yönetmek için kullanılan bir kavramdır. Durum, bileşenin değişken verilerini temsil eder ve bileşenin UI’sini güncellemek için kullanılır. State Kullanımı: Bu örnekte, ToggleButton adında bir işlevsel bileşen oluşturduk. useState kancasını kullanarak isOn adında bir durum değişkeni ve setIsOn adında bir durum güncelleme fonksiyonu tanımladık. İlk değeri […]

Props Nedir? Props (properties), React bileşenlerine dışarıdan veri aktarımını sağlayan bir mekanizmadır. Bu sayede bileşenler arasında veri paylaşımı ve iletişim mümkün olur. Props, bileşenin yapılandırılmasında kullanılan verileri temsil eder. Props Kullanımı: Props, bir bileşene veri aktarımını sağlamak için kullanılır. Bu veriler, bileşene özellikler (properties) olarak geçirilir ve bileşen içinde kullanılabilir. İşlevsel Bileşen Örneği: Bu örnekte, […]

Bileşen (Component) Oluşturma: React bileşenleri, işlevsel bileşenler (functional components) veya sınıf bileşenleri (class components) olarak oluşturulabilir. İşlevsel bileşenler, fonksiyonlar aracılığıyla oluşturulurken, sınıf bileşenleri, React.Component sınıfından türetilir. İşlevsel Bileşen Örneği: Bu örnekte, Greeting adında bir işlevsel bileşen oluşturduk. name adında bir özelliği props olarak alır ve bir başlık içinde bu özelliği kullanır. Greeting bileşeni, props aracılığıyla […]

Bu örnekte, Counter adında bir işlevsel bileşen oluşturduk. useState hook‘unu kullanarak count adında bir durum tanımladık ve increment adında bir fonksiyon oluşturduk. increment fonksiyonu, tıklama olayı gerçekleştiğinde count durumunu bir artırır. Bileşen, bir başlık, sayacın değeri ve artırma düğmesi içeren bir UI döndürür. Bileşeni kullanmak için başka bir bileşende (örneğin, App bileşeninde) Counter bileşenini kullanabilirsiniz: […]

React.js, kullanıcı arayüzü (UI) oluşturmak için kullanılan bir JavaScript kütüphanesidir. Facebook tarafından geliştirilen React, bileşen tabanlı bir yaklaşım sunar ve verimli bir şekilde dinamik ve etkileşimli web uygulamaları oluşturmayı amaçlar. React, sanal DOM (Virtual DOM) kullanarak sadece güncellenen bileşenlerin yeniden render edilmesini sağlar, bu da performansı artırır. React.js’in temel özelliklerinden bazıları şunlardır: Birinci ders adımında, […]