Sıfırdan React Serisi

React, Facebook tarafından geliştirilen, kullanıcı arayüzü oluşturmak için kullanılan açık kaynak bir JavaScript kütüphanesidir. React, component tabanlı bir yapıya sahiptir ve web uygulamaları için kullanılır. Bu yapı sayesinde, uygulamanın bileşenlerini daha kolay yönetebilir, tekrar kullanabilir ve performansı arttırabilirsiniz.React, JavaScript kodlarının kullanıcı arayüzüne nasıl etki ettiğini anlamak için bize kolaylık sağlar. React, kodların nasıl çalıştığını ve nasıl etkilediği konusunda daha fazla kontrol sağlar. Bu sayede, uygulamanın bileşenlerini daha iyi yönetebiliriz ve daha iyi performans elde edebiliriz.React'in en önemli özelliklerinden biri de Virtual DOM özelliğidir. Virtual DOM, gerçek DOM ile karşılaştırılarak değişen bölümleri sadece güncelleyerek performansı arttırmaktadır. Bu özellik sayesinde, uygulamanın hızını arttırabilir ve kullanıcı deneyimini iyileştirebiliriz.React ayrıca, çok sayıda eklenti ve araçlar sunar. Bu eklentiler ve araçlar sayesinde, uygulamanızı daha kolay ve hızlı geliştirebilirsiniz. Örneğin, React Router sayesinde uygulamanız için sayfalama yapabilir, React-Redux sayesinde global state yönetimi yapabilirsiniz.React, kullanıcı arayüzü oluşturmak için kullanabileceğiniz çok güçlü bir araçtır. Performansı arttıran Virtual DOM özelliği, component tabanlı yapısı ve çok sayıda kullanıcı tarafından kullanılan bibliotekleri ve araçları ile, web uygulamalarınızda hızlı ve esnek bir şekilde geliştirme yapmanıza olanak tanır. React, JavaScript kodlarınızı daha okunaklı ve anlaşılır hale getirmek için JSX adlı bir sözdizimi kullanır ve componentler arasında veri akışını düzenlemek için state ve props gibi kavramları sunar. React, ayrıca, kodunuzu modüler hale getirmek için component bazlı yapısını kullanmanıza olanak tanır. React, günümüzde popüler olan pek çok web framework'ü arasında en yaygın olarak kullanılanlardan biridir.Sonuç olarak, React, deneyimli veya başlangıç seviyesinde olmanız ne olursa olsun, kullanıcı arayüzü geliştirmek için kullanabileceğiniz çok güçlü bir araçtır.<h3>Neden Sadece JavaScript Yerine React Kullanıyoruz?</h3>React, JavaScript kullanarak kullanıcı arayüzleri oluşturmak için geliştirilmiş bir araçtır. React, component tabanlı bir yapıya sahiptir ve bu, kodun daha okunaklı ve kolay bakılabilir hale gelmesini sağlar. Ayrıca, React'ın virtual DOM özelliği sayesinde, sadece değişen alanları yenilemesi, performansı arttırır. React, ayrıca sürekli olarak güncellenmektedir ve geniş bir ekosisteme sahiptir, bu da uygulamaların geliştirilmesini ve bakımını kolaylaştırır. Tüm bunlar, JavaScript yalnızca kullanmak yerine React kullanmayı cazip hale getirir.

React Nedir?

React, kullanıcı arayüzü oluşturmak için kullanabileceğiniz çok güçlü bir araçtır. Ancak, React'i kullanmadan önce JavaScript'in temel konularını iyi bilmeniz önemlidir. Özellikle, ES6+ özellikleri, asenkron JavaScript, JavaScript modülleri, dizi yöntemleri ve event loop ve concurrency model gibi konular React uygulamalarınızda kullanmanız için gereklidir. Ayrıca, bu konuların her biri için kod örnekleriyle açıklamalar yapmak, React uygulamalarınızı yazarken daha rahat olmanızı sağlar. Bu konu başlıklarını aşağıdan inceleyebilirsiniz.<h3>1- ES6+ features (arrow functions, template literals, destructuring, spread operator):</h3><ul><li>Arrow Functions: ES6'da eklenen arrow function syntax'ı, daha kısa ve okunaklı kod yazmamızı sağlar. Örneğin,<pre><code>const add = (a, b) =&gt; {
 return a + b;
}</code></pre></li><li>Template Literals: ES6 ile birlikte gelen template literals, stringlerde değişkenleri ve fonksiyonları kolayca kullanmamıza olanak tanır. Örneğin,<pre><code>const name = "John";
console.log(`Hello, ${name}`); // "Hello, John"</code></pre></li><li>Destructuring: ES6 ile birlikte gelen destructuring, nesneler ve dizilerdeki değerleri kolayca çekmemizi sağlar. Örneğin,<pre><code>const person = { name: "John", age: 30 };
const { name } = person;
console.log(name); // "John"</code></pre></li><li>Spread Operator: ES6 ile birlikte gelen spread operator, diziler ve nesneler arasında kolayca kopyalama ve birleştirme yapmamıza olanak tanır. Örneğin,<pre><code>const fruits = ["apple", "banana"];
const moreFruits = ["orange", "mango", ...fruits];
console.log(moreFruits); // ["orange", "mango", "apple", "banana"]</code></pre></li></ul><h3>2- Asynchronous JavaScript (promises, async/await):</h3>Asynchronous JavaScript, JavaScript işlemlerinin arka planda yürütülmesini sağlar. Bu sayede kullanıcı arayüzü daha hızlı ve etkili bir şekilde çalışır. Asynchronous JavaScript'in iki temel yapısı vardır: promises ve async/await.Promises, JavaScript işlemlerinin sonucunu döndürebilen ve hata durumlarını işleyebilen nesnelerdir. Örneğin, bir API çağrısı yaparken sonucun döndüğü zaman ilgili fonksiyon çağırılır. Aşağıdaki örnekte, fetch fonksiyonu ile bir API çağrısı yapılıyor ve sonuç döndüğünde ilgili fonksiyon çağırılıyor:<pre><code>fetch('https://api.example.com/data')
 .then(response =&gt; response.json())
 .then(data =&gt; {
 console.log(data);
 })
 .catch(error =&gt; {
 console.error(error);
 });</code></pre>Async/await, promises'i daha okunaklı hale getirmek için kullanılan bir yapıdır. Async/await ile işlemler daha sıralı bir şekilde yürütülür ve kod daha okunaklı hale gelir. Aşağıdaki örnekte, async/await ile aynı API çağrısı yapılıyor:<pre><code>async function getData() {
 try {
 const response = await fetch('https://api.example.com/data');
 const data = await response.json();
 console.log(data);
 } catch (error) {
 console.error(error);
 }
}

getData();</code></pre>Asynchronous JavaScript, React uygulamalarında sıklıkla kullanılır. Özellikle API çağrıları ve veri yükleme işlemlerinde çok yararlıdır. Bu sebeple, React ile birlikte JavaScript'in asenkron yapısını iyi anlamak önemlidir.<h3>3- JavaScript Modules (import/export):</h3>JavaScript Modules, JavaScript uygulamalarının daha organize ve okunaklı hale gelmesini sağlar. Bu sebeple, React uygulamalarında da sıklıkla kullanılır. Özellikle uygulamanızda farklı dosyalarda yer alan fonksiyonları, sınıfları ve değişkenleri daha kolayca kullanabilmenizi sağlar.Modules'lar import ve export edilir. Örneğin, bir dosya içerisinde tanımladığınız bir değişkeni başka bir dosya içerisinde kullanmak istiyorsanız, o değişkeni export edersiniz ve diğer dosya içerisinde import edersiniz. Aşağıda bir örnek verilmiştir:<pre><code>// dosya1.js
export const myVariable = "Hello World";

// dosya2.js
import { myVariable } from './dosya1';
console.log(myVariable); // "Hello World"</code></pre>Ayrıca, export edebileceğiniz fonksiyonlar ve sınıflar da mevcuttur. Örneğin:<pre><code>// dosya1.js
export function myFunction() {
console.log("Hello World");
}

// dosya2.js
import { myFunction } from './dosya1';
myFunction(); // "Hello World"</code></pre>JavaScript Modules, React uygulamanızı daha organize ve okunaklı hale getirmenizi sağlar. Ayrıca, uygulamanızın büyüklüğü artarken daha kolay yönetebilmenizi sağlar.<h3>4- Array methods (map, filter, reduce):</h3>JavaScript dizilerinde verileri düzenlemek için kullanabileceğimiz üç önemli method vardır: map, filter ve reduce.Map methodu, dizideki her eleman için belirli bir işlem yapar ve yeni bir dizi oluşturur. Örneğin, aşağıdaki kod örneğinde dizideki her sayının karesini alırız.<pre><code>const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(number =&gt; number * number);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]</code></pre>Filter methodu ise dizideki elemanları belirli bir kritere göre filtreler ve yeni bir dizi oluşturur. Örneğin, aşağıdaki kod örneğinde dizideki tek sayıları alırız.<pre><code>const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(number =&gt; number % 2 !== 0);
console.log(oddNumbers); // [1, 3, 5]</code></pre>Reduce methodu ise dizideki elemanları tek bir değere indirir. Örneğin, aşağıdaki kod örneğinde dizideki tüm sayıların toplamını alırız.<pre><code>const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, number) =&gt; acc + number, 0);
console.log(sum); // 15</code></pre>Bu methodlar, React uygulamalarında verileri işlemek ve düzenlemek için oldukça yararlıdır. Örneğin, bir API'dan gelen verileri filtrelemek veya componentler için gerekli olan verileri oluşturmak için kullanabilirsiniz.<h3>5- JavaScript’te event loop ve concurrency model:</h3>Event loop ve concurrency model, JavaScript'te programların nasıl çalıştırıldığının temel prensipleridir. Event loop, JavaScript'te asenkron işlemleri gerçekleştirmek için kullanılan bir mekanizmadır. Bu mekanizma, JavaScript çalışma zamanının nasıl işlediğini anlamak için önemlidir.Concurrency model ise, JavaScript'te işlemlerin nasıl paralel olarak çalıştırılacağını belirler. JavaScript'te, işlemler JavaScript çalışma zamanı tarafından yürütülür ve bu nedenle, işlemler arasındaki sıra önemlidir.Event loop ve concurrency model, JavaScript'te özellikle asenkron işlemlerin yürütülmesi sırasında önemlidir. Aşağıda bir örnek verilecektir:<pre><code>console.log("Start");
setTimeout(() =&gt; {
 console.log("Timeout");
}, 0);
console.log("End");</code></pre>Bu kod bloğunda, "Start" ve "End" logları anında yazdırılırken, "Timeout" logu biraz sonra yazdırılır. Bu, event loop'un nasıl çalıştığını gösterir.Ayrıca, aşağıdaki kod bloğu da concurrency model'i gösterir:<pre><code>console.log("Start");
Promise.resolve().then(() =&gt; {
 console.log("Promise");
});
console.log("End");</code></pre>Bu kod bloğunda, "Start" ve "End" logları anında yazdırılırken, "Promise" logu biraz sonra yazdırılır. Bu, JavaScript çalışma zamanının işlemleri nasıl paralel olarak yürüttüğünü gösterir.Event loop ve concurrency model, JavaScript'te asenkron işlemlerin nasıl gerçekleştirildiği hakkında bilgi verir. Event loop, JavaScript işletim sistemi tarafından sağlanan bir mekanizmadır ve JavaScript kodunun asenkron olarak çalışmasını sağlar. Concurrency model ise, JavaScript içinde işlemlerin nasıl paralel olarak çalıştırılacağını tanımlar. Örneğin, setTimeout() ve setInterval() gibi asenkron metotlar ile kodunuzda işlemleri zamanlayabilirsiniz. Ayrıca, JavaScript'in Promises ve async/await özellikleri ile asenkron işlemleri yazmak daha kolay hale gelir.Temel olarak React için öğrenilmesi gereken JavaScript konuları bunlardır.

React için JavaScript

React, kullanıcı arayüzü oluşturmak için kullanabileceğiniz çok güçlü bir araçtır. Bu makalede, React'ın temel kavramlarından bahsedeceğiz: JSX, componentler, state ve props.JSX, JavaScript ve HTML arasındaki bir karışımdır. JSX ile, componentleri tanımlarken HTML benzeri sözdizimi kullanabilirsiniz. Örneğin, aşağıdaki JSX kodu bir "Merhaba Dünya" başlıklı bir h1 etiketini oluşturur:<pre><code>const element = &lt;h1&gt;Merhaba Dünya&lt;/h1&gt;;</code></pre>React componentleri, uygulamanızdaki bir parçayı temsil eder. Componentler, state ve props gibi verileri alır ve bunları kullanarak HTML döndürür. Örneğin, aşağıdaki kod bir "Merhaba Dünya" başlıklı bir component tanımlar:<pre><code>class HelloWorld extends React.Component {
 render() {
 return &lt;h1&gt;Merhaba Dünya&lt;/h1&gt;;
 }
}</code></pre>State, bir component içindeki verileri tanımlar. State, component içinde tanımlanır ve sadece o component tarafından değiştirilebilir. Örneğin, aşağıdaki kod bir "ad" state'i içeren bir component tanımlar:<pre><code>class HelloUser extends React.Component {
 state = {
 ad: "Kullanıcı"
 };

 render() {
 return &lt;h1&gt;Merhaba {this.state.ad}&lt;/h1&gt;;
 }
}</code></pre>Props, bir component'e dışarıdan veri geçirmek için kullanılır. Props, component içinde tanımlanmaz ve dışarıdan geçirilir. Örneğin, aşağıdaki kod bir "ad" prop'u içeren bir component tanımlar:<pre><code>const MyComponent = (props) =&gt; {
return &lt;h1&gt;Merhaba, {props.name}&lt;/h1&gt;;
}

ReactDOM.render(&lt;MyComponent name="John Doe" /&gt;, document.getElementById('root'));</code></pre>Bu örnekte, "MyComponent" component'ine "name" prop'u olarak "John Doe" değeri geçirilmiştir. Component içinde, <a target="" rel="noopener noreferrer nofollow" href="http://props.name">props.name</a> ile bu değer kullanılabilir.Event Handling, React uygulamalarında DOM elementlerine olay dinleyicileri eklemek için kullanılır. Örneğin, bir butona tıklama olayını dinlemek için bir tıklama olay dinleyicisi ekleyebilirsiniz. React, JavaScript'te DOM olaylarını işlemek için synthetic events kullanır, bu sayede cross-browser uyumluluğu sağlar. Örneğin, aşağıdaki kod bir buton elementine tıklama olayı dinleyicisi ekler:Event Handling, React uygulamalarında DOM elementlerine olay dinleyicileri eklemek için kullanılır. Örneğin, bir butona tıklama olayını dinlemek için bir tıklama olay dinleyicisi ekleyebilirsiniz. React, JavaScript'te DOM olaylarını işlemek için synthetic events kullanır, bu sayede cross-browser uyumluluğu sağlar. Örneğin, aşağıdaki kod bir buton elementine tıklama olayı dinleyicisi ekler:<pre><code>const MyComponent = () =&gt; {
 const handleClick = () =&gt; {
 console.log("Button clicked!");
 };

 return &lt;button onClick={handleClick}&gt;Click me&lt;/button&gt;;
};
</code></pre>Burada, <code>handleClick</code> fonksiyonu butona tıklama olayı gerçekleştiğinde çalıştırılır ve "Button clicked!" mesajını consol'a yazdırır.Bu konuların iyi anlaşılması ve kullanımı, React uygulamalarınızın daha yüksek performanslı ve kullanıcı dostu olmasını sağlar.

React'ın temel kavramları (JSX, componentler, state ve props)

Single page application (SPA), bir web uygulamasının tek bir sayfadan oluştuğu ve dinamik olarak güncellendiği tasarım modelidir. Bu tasarım modeli, kullanıcıların sayfa yenilemelerinden kaçınmasını ve hızlı bir deneyim sunmasını sağlar.React, Angular ve Vue gibi JavaScript framework'leri kullanarak SPA'lar oluşturmak mümkündür. Bu üç framework arasındaki temel farklar şunlardır:<ul><li>React, Facebook tarafından geliştirilmiştir ve component tabanlı bir yapıya sahiptir. Bu, kodun daha okunaklı ve daha kolay anlaşılmasını sağlar. React, en sık kullanılan JavaScript frameworklerinden biridir ve kullanıcı arayüzü oluşturmak için çok yaygındır.</li><li>Angular: Google tarafından geliştirilmiş bir frameworktür. Angular, React'a göre daha büyük bir ekosisteme sahiptir ve daha kapsamlı bir web uygulaması oluşturmak için kullanılabilir. Ancak, Angular'ın öğrenilmesi daha zor olabilir ve kod yazarken daha fazla boilerplate kod yazmak gerekir.</li><li>Vue: JavaScript dünyasının en popüler frameworklerinden biridir. Vue, React ve Angular gibi component tabanlı bir yapıya sahiptir ve kullanımı çok kolaydır. Vue, küçük ve orta ölçekli projeler için çok iyi bir seçim olabilir.<img class="mx-auto" src="http://res.cloudinary.com/bg-forum/image/upload/v1674856994/bg-forum/fyankuuq2u9b8tqfrrxw.png" alt="javascript framework istatistikleri"></li></ul>Yukarda bulunan görselde dünya çapındaki geliştiriciler arasında en çok kullanılan web frameworkleri gösterilmiştir.Sonuç olarak, hangi framework'ü kullanacağınız, projenizin ihtiyaçlarına ve ekibinizin becerilerine bağlıdır. React, kullanıcı arayüzü oluşturmak için en sık kullanılan frameworklerden biridir ve kolay öğrenilir. Angular ise, daha kapsamlı web uygulamaları oluşturmak için kullanılabilir ancak öğrenilmesi daha zor olabilir. Vue ise, küçük ve orta ölçekli projeler için iyi bir seçim olabilir ve öğrenilmesi kolaydır.

Single page application (SPA) Nedir?

JavaScript programlama dili için değişken tanımlama için üç anahtar kelime kullanılır: var, let ve const. Bu anahtar kelimelerin her biri, değişkenlerin nasıl tanımlanacağını ve nasıl kullanılacağını belirler. Bu yazıda, var, let ve const arasındaki farkları ve hangi durumlarda kullanılması gerektiğini açıklayacağız.1- Var: JavaScript'in eski sürümlerinde en yaygın olarak kullanılan anahtar kelime olan var, değişken tanımlamak için kullanılır. Örneğin:<pre><code>var x = 5;
var y = "Merhaba";</code></pre>Bu değişkenler, programınızın herhangi bir yerinde kullanılabilir ve değerleri değiştirilebilir. Ayrıca, var değişkenleri için hoisting (yukarıya çekme) özelliği mevcuttur. Bu özellik, değişken tanımlamasının yapılmadan önce bile kullanılmasını sağlar.2- Let: ES6 sürümünde eklenen let anahtar kelimesi, var anahtar kelimesine benzer şekilde değişken tanımlamak için kullanılır. Fakat let değişkenleri sadece tanımlandıkları blok içerisinde kullanılabilir. Örneğin:<pre><code>let a = 7;
let b = 8;
if (a &gt; b) {
 let c = a - b;
 console.log(c); // 1
}
console.log(c); // ReferenceError: c is not defined</code></pre>Let değişkenlerinde hoisting özelliği yoktur.3- Const: ES6 sürümünde eklenen const anahtar kelimesi, değişken tanımlamak için kullanılır. Fakat const değişkenleri sadece tanımlandıkları anda değer atanabilir ve daha sonra değiştirilemez. Örneğin:<pre><code>const PI = 3.14;
PI = 3.15; // TypeError: Assignment to constant variable.</code></pre>Aynı zamanda const değişkenleri sadece tanımlandıkları blok içerisinde kullanılabilir.Sonuç olarak, JavaScript'de değişken tanımlamak için var, let ve const anahtar kelimeleri kullanabilirsiniz. Var anahtar kelimesi, eski sürümlerde en yaygın olarak kullanılır ve değişkenlerin herhangi bir yerde kullanılmasına ve değerlerinin değiştirilmesine izin verir. Hoisting özelliği de var değişkenlerinde mevcuttur. Let anahtar kelimesi, var anahtar kelimesine benzer şekilde değişken tanımlamak için kullanılır, ancak let değişkenleri sadece tanımlandıkları blok içerisinde kullanılabilir ve hoisting özelliği yoktur. Const anahtar kelimesi, değişken tanımlamak için kullanılır, ancak const değişkenleri sadece tanımlandıkları anda değer atanabilir ve daha sonra değiştirilemez. Ayrıca const değişkenleri sadece tanımlandıkları blok içerisinde kullanılabilir.Kullanımınız için en uygun anahtar kelimeyi seçmeniz önemlidir. Örneğin, bir değişkenin programınızın herhangi bir yerinde kullanılması ve değiştirilmesi gerekiyorsa, var anahtar kelimesini kullanabilirsiniz. Eğer bir değişken sadece belirli bir blok içerisinde kullanılacaksa ve değerinin değiştirilmemesi gerekiyorsa, const anahtar kelimesini kullanabilirsiniz.

JavaScript'de Var, Let ve Const Anahtar Kelimeleri: Kullanımı ve Farkları

JavaScript'te Arrow Functions, yazdığınız kodun daha okunaklı ve kısa olmasını sağlar. Aynı işlemi yaparken daha az kod yazmanıza olanak tanır ve kodlarınızın daha anlaşılır olmasını sağlar.JavaScript'te arrow functions, bir fonksiyon tanımlamak için kullanılan function anahtar kelimesi yerine <code>=&gt;</code> işareti kullanılır. Örneğin, bir fonksiyon tanımlamak için kullanabileceğimiz standart bir yol şöyledir:<pre><code>function topla(a, b) {
 return a + b;
}</code></pre>Ancak aynı fonksiyonu arrow function ile tanımlamak için şöyle yazabiliriz:<pre><code>const topla = (a, b) =&gt; a + b;</code></pre>Arrow Functions, genellikle callback fonksiyonları olarak kullanılır. Örneğin, bir dizi içindeki tüm öğelerin bir işlem yapılmasını sağlamak için kullanılabilir. Aşağıdaki örnekte, bir dizi içindeki tüm öğelerin iki ile çarpılmasını sağlar:<pre><code>let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(number) {
 return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]</code></pre>Bu işlemi arrow function kullanarak daha kısa yazabiliriz:<pre><code>let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(number =&gt; number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]</code></pre>Arrow Functions, ayrıca this anahtar kelimesinin kapsamının belirli bir değere bağlı kalmamasını sağlar. Bu, özellikle nesne yönelimli programlama için faydalıdır.Arrow functions, this anahtar kelimesinin kapsamını belirli bir değere bağlamaz. Örneğin, bir nesnenin metodunda this anahtar kelimesi kullanıldığında, metodun çağrıldığı nesnenin kendisi gösterir. Ancak arrow function içinde this anahtar kelimesi, fonksiyon tanımlandığı kapsamda geçerlidir.<pre><code>const obj = {
 name: 'John',
 greet: function() {
 setTimeout(function() {
 console.log(`Hello, my name is ${this.name}.`);
 }, 1000);
 }
};

obj.greet(); // "Hello, my name is undefined."</code></pre>Ancak aynı kodu arrow function ile yazdığımızda:<pre><code>const obj = {
 name: 'John',
 greet: function() {
 setTimeout(() =&gt; {
 console.log(`Hello, my name is ${this.name}.`);
 }, 1000);
 }
};

obj.greet(); // "Hello, my name is John."</code></pre>Son olarak, Arrow Functions ile yazdığınız kodlar daha okunaklı ve anlaşılır olacaktır. Bu nedenle, JavaScript kod yazarken arrow function kullanmanızı öneririz.

JavaScript'de Arrow Functions: Neden ve Nasıl Kullanılır

JavaScript'te modülerliği sağlamak için export ve import anahtar kelimeleri kullanılır. Bu anahtar kelimeler sayesinde, bir JavaScript dosyasındaki değişkenleri, fonksiyonları veya sınıfları başka bir dosyada kullanabiliriz. Böylece, kodlarımızı daha okunaklı ve organize hale getirebiliriz. Ayrıca, aynı kodları birden fazla yerde kullanmak yerine, tek bir yerde tanımlayarak, daha az hataya yol açabilecek bir yapıya sahip oluruz.<pre><code>// dosya1.js
export const name = "John";
export const age = 30;</code></pre><pre><code>// dosya2.js
import { name, age } from './dosya1.js';
console.log(name); // "John"
console.log(age); // 30</code></pre>Bu örnekte, dosya1.js dosyasındaki name ve age değişkenlerini, dosya2.js dosyasından import ediyoruz ve kullanabiliyoruz.<pre><code>// dosya1.js
export default function sayHello() {
console.log("Hello!");
}</code></pre><pre><code>// dosya2.js
import sayHello from './dosya1.js';
sayHello(); // "Hello!"</code></pre>Bu örnekte, dosya1.js dosyasındaki sayHello fonksiyonunu dosya2.js dosyasından import ediyoruz ve çağırıyoruz.Sonuç olarak, JavaScript Exports and Imports anahtar kelimeleri, kodlarımızı daha okunaklı ve organize hale getirmek için kullanabileceğimiz önemli araçlardır.Bu anahtar kelimeler sayesinde, aynı kodları birden fazla yerde kullanmak yerine, tek bir yerde tanımlayarak, daha az hataya yol açabilecek bir yapıya sahip oluruz.

JavaScript Exports ve Imports (Modules): Kullanımı ve Avantajları

JavaScript'de Spread ve Rest Operator, programlama dillerinin dinamik ve esnek olmasını sağlayan özelliklerdir. Spread Operator, dizilerin ve obje kalıplarının dağıtılmasına olanak tanırken, Rest Operator, birden fazla argümanı tek bir dizi şeklinde toplamayı sağlar. Bu yazıda, JavaScript Spread ve Rest Operator'lerin nasıl kullanılacağını ve faydalarını kod örnekleriyle birlikte inceleyeceğiz.Spread Operator:Spread Operator, diziler ve obje kalıplarının elemanlarını dağıtmak için kullanılır. Örnek olarak, bir dizinin elemanlarını başka bir diziye kopyalamak isteyebilirsiniz. Bunun için aşağıdaki gibi kod yazabilirsiniz:<pre><code>let numbers = [1, 2, 3, 4];
let newNumbers = [...numbers, 5, 6];
console.log(newNumbers); // Çıktı: [1, 2, 3, 4, 5, 6]</code></pre>Bu örnekte, <code>numbers</code> dizisi <code>newNumbers</code> dizisine kopyalanır ve sonrasında 5 ve 6 elemanları da eklenir.Rest Operator:Rest Operator, birden fazla argümanı tek bir dizi şeklinde toplamayı sağlar. Örnek olarak, bir fonksiyonun tüm argümanlarını toplayıp tek bir dizi olarak kullanmak isteyebilirsiniz. Bunun için aşağıdaki gibi kod yazabilirsiniz:<pre><code>let sum = (...args) =&gt; {
 return args.reduce((acc, current) =&gt; acc + current);
};
console.log(sum(1, 2, 3, 4)); // Çıktı: 10</code></pre>Bu örnekte, <code>sum</code> fonksiyonu tüm argümanlarını <code>args</code> dizisine toplar ve sonrasında <code>reduce</code> fonksiyonu ile toplamını hesaplar.JavaScript Spread ve Rest Operator'leri, kodunuzun daha dinamik ve esnek olmasını sağlar. Örneklerde görüldüğü gibi, diziler ve obje kalıplarının elemanlarını dağıtmak ve birden fazla argümanı tek bir dizi şeklinde toplamak gibi işlemleri kolayca yapmanızı sağlar.

Spread ve Rest Operatörü

JavaScript'te destructuring, veri yapılarının bileşenlerini ayırmak için kullanılan bir yapıdır. Bu yapı sayesinde, veri yapılarının öğelerini tek tek ele almak yerine, tek bir deyim kullanarak birden fazla öğeyi aynı anda ele alabilirsiniz. Destructuring, diziler ve objeler gibi veri yapılarının öğelerini ayırmak için kullanılabilir.<h3>Diziler için Destructuring</h3>Diziler için destructuring, dizinin öğelerini tek tek ele almak yerine, dizinin öğelerini tek bir deyim kullanarak ele almanızı sağlar. Aşağıdaki örnekte, bir dizinin öğelerini destructuring kullanarak ele alıyoruz:<pre><code>const colors = ['red', 'blue', 'green'];
const [firstColor, secondColor, thirdColor] = colors;
console.log(firstColor); // Output: red
console.log(secondColor); // Output: blue
console.log(thirdColor); // Output: green</code></pre><h3>Nesneler İçin Destructuring</h3>Destructuring, objelerin öğelerini de ele alabilir. Aşağıdaki örnekte, bir objenin öğelerini destructuring kullanarak ele alıyoruz:<pre><code>const person = {
name: 'John Doe',
age: 30,
location: 'London'
};

const { name, age, location } = person;
console.log(name); // Output: John Doe
console.log(age); // Output: 30
console.log(location); // Output: London</code></pre><h3>Destructuring ve Function Arguments</h3>Destructuring, function argumentleri için de kullanılabilir. Aşağıdaki örnekte, bir function'ın argumentlerini destructuring kullanarak ele alıyoruz:<pre><code>const logPerson = ({ name, age }) =&gt; {
console.log(Name: ${name}, Age: ${age});
};

const person = {
name: 'John Doe',
age: 30,
location: 'London'
};

logPerson(person); // Output: Name: John Doe, Age: 30</code></pre>Destructuring, React geliştirme sürecinde de oldukça yararlıdır. Örneğin, React state ve props değerlerinin çıkartılması ve ayrı değişkenlere atanması gibi durumlarda Destructuring kullanılabilir.Bu yazıda, JavaScript Destructuring yöntemini ve faydalarını kod örnekleri ile birlikte inceledik. Destructuring, kodlarınızı daha okunaklı ve anlaşılır hale getirirken, aynı zamanda kodlarınızı daha kısası ve etkileyicisi hale getirmenize yardımcı olur.

JavaScript Destructuring: Kodlarınızı Daha Okunaklı ve Anlaşılır Hale Getirin

Javascript Reference ve Primitive Types, React geliştirme sürecinde çok önemli bir konudur. Bu kavramlar, React'de veri türlerinin nasıl kullanılacağını ve veriler arasındaki farkları anlamanıza yardımcı olur.Primitive Types, temel veri türleridir ve değer ataması yapılırken değerin kendisi atanır. Örneğin, bir değişken içinde bir sayı değeri tutulursa, bu sayı değeri kendisi atanır ve değişkenin içindeki değer değişmez.Javascript Reference Types, nesne, dizi gibi veri türleridir ve değer ataması yapılırken referans atanır. Yani, değişkenin içindeki değer değişebilir ve bu değişiklik diğer değişkenlere de yansıyabilir.React'de, bu veri türleri kullanılırken dikkat etmemiz gereken önemli noktalar vardır. Örneğin, state ve props verileri için mutable veri türleri (nesne, dizi gibi) kullanılmalıdır, ancak sayı, metin veya boolean gibi primitive veri türleri için bu durum geçerli değildir.Aşağıdaki örnek, Javascript'de Reference ve Primitive Types (Referans ve Basit Türler) arasındaki farkı gösterir.<pre><code>// Primitive Type: Number
let primitiveNum = 10;
let primitiveNum2 = primitiveNum;

primitiveNum2 = 20;
console.log(primitiveNum); // 10
console.log(primitiveNum2); // 20

// Reference Type: Object
let object = {value: 10};
let object2 = object;

object2.value = 20;
console.log(object.value); // 20
console.log(object2.value); // 20</code></pre>Bu örnekte, primitiveNum değişkeni basit bir tür olan Number türünde tanımlanır ve primitiveNum2 değişkenine atanır. object ise, object2'ye atanır ve value property'si atanır. Primitive türler, atama işlemi sonucu yeni bir değer oluştururlar. Ancak, reference türler ise, atama işlemi sonucu aynı nesnenin referansını içerir ve her iki değişken de aynı nesnenin değerine erişebilir.Burada Reference Type sorununu spread operatörü kullanılarak çözebiliriz:<pre><code>// Reference Type: Object
let object = {value: 10};
let object2 = {...object};

object2.value = 20;
console.log(object.value); // 10
console.log(object2.value); // 20</code></pre>Burada, object2 için spread operatörü kullanılarak object nesnesinin kopyası oluşturuldu. Böylece, her iki değişken de farklı nesnelere referans eder ve değer değiştirilirken birbirlerine etkilemezler.React içinde bu iki veri tipi de kullanılabilir. Primitive tipler, component state ve props verileri olarak saklanabilir. Bunlar, component’lerin verilerinin değişmesi sonucu render edilmelerini tetikler. Reference tipler ise, component’ler arasında veri paylaşımı için kullanılabilir.

Reference ve Primitive Tipler

React, Javascript dili ile geliştirilen bir JavaScript kütüphanesidir ve uygulama geliştirmek için kullanılan bir araçtır. React, daha verimli ve esnek bir yapı sunması nedeniyle Javascript'e göre tercih edilir. React, component tabanlı bir yapıya sahiptir ve bu component'ler fonksiyonel component veya stateful component olarak iki şekilde tanımlanabilir.Function Component, sadece giriş verilerine göre render edilen ve state (durum) değişkenleri olmayan component'lerdir. Bu component'ler, props (özellikler) aracılığıyla veri alır ve bir HTML çıktısı olarak döndürür. Function component, performans ve okunabilirlik açısından tercih edilen bir component yapısıdır.Aşağıdaki örnek, Javascript kodunda yazılan bir component'in aynısının React fonksiyonel component olarak yazılışını gösterir:Javascript Kodu:<pre><code>function Greeting(props) {
 return &lt;h1&gt;Hello, {props.name}&lt;/h1&gt;;
}</code></pre>React Kodu:<pre><code>import React from 'react';

const Greeting = (props) =&gt; {
 return &lt;h1&gt;Hello, {props.name}&lt;/h1&gt;;
}

export default Greeting;</code></pre>Bu örnekte, Javascript kodunda yazılan bir component'in aynısı React fonksiyonel component olarak yazılmıştır. Bu component, giriş verisi olarak name prop'unu alır ve Hello, {<a target="" rel="noopener noreferrer nofollow" href="http://props.name">props.name</a>} şeklinde bir çıktı olarak döndürür.React, component tabanlı bir yapıya sahiptir ve bu component'ler fonksiyonel component veya stateful component olarak iki şekilde tanımlanabilir. Function component, performans ve okunabilirlik açısından tercih edilen bir component yapısıdır.Bu yazı, React'in Javascript yerine tercih edilmesinin sebeplerini ve fonksiyonel component yapısının önemini anlatmaktadır.

JavaScript yerine React: Geliştirmeyi Kolaylaştıran Component Yapısı

React, Facebook tarafından geliştirilen bir JavaScript kütüphanesidir. Reaktif ve esnek web uygulamaları geliştirmek için kullanılır. React, kullanımı kolay ve hızlı bir yapı sunar. Bu yazıda, sıfırdan React kurulumunu ve ilk React projenizi nasıl oluşturabileceğinizi açıklayacağız.React kurulumu, Node.js ve npm (Node Package Manager) yüklenmiş bir bilgisayarda yapılabilir. npm, bir komut satırı araçsıdır ve React gibi birçok JavaScript paketini yönetmenize olanak tanır. npm'nin yüklenmiş olduğundan emin olun.Eğer Node.js ve npm yüklü değilse, buradan yükleyebilirsiniz: <a target="" rel="noopener noreferrer nofollow" href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a>React projesi oluşturmak için aşağıdaki komutları sırasıyla kullanabilirsiniz:<pre><code>$ npx create-react-app my-app
$ cd my-app
$ npm start</code></pre>İlk komut, create-react-app adlı bir araç kullanarak my-app adında bir React projesi oluşturur. İkinci komut, my-app dizinine gider. Üçüncü komut, projeyi çalıştırır ve tarayıcınızda <a target="" rel="noopener noreferrer nofollow" href="http://localhost:3000/">http://localhost:3000/</a> adresinde görüntüleyebilirsiniz.React projeniz oluştu ve çalışıyor! Şimdi, React kodlarınızı yazmaya başlayabilirsiniz. React, component yapısını kullanarak uygulamalarınızı oluşturmanıza olanak tanır. Her component, bir HTML elementi veya bir grubu temsil eder. Ayrıca, componentler arasında veri akışı sağlamanıza olanak tanır.Bu yazıda, React'in nasıl sıfırdan kurulumunu yapabileceğiniz ve ilk projenizi nasıl oluşturabileceğinizi öğrendiniz. React, hızlı ve kolay bir yapı sunar ve web uygulamalarınızı geliştirirken size yardımcı olacaktır.

React: Sıfırdan Kurulum ve İlk Projeniz

React projelerinde, dosya ve klasör yapısı önemlidir ve projenin düzgün çalışması için doğru şekilde düzenlenmesi gerekir. Bu yazı, bir React projesindeki temel dosya ve klasör yapısını tanımlayacak ve index.js dosyası içerisindeki kodları açıklayacaktır.Başlamadan önce, React projesi oluşturmak için kullanabileceğiniz React CLI veya Create React App gibi araçların kullanımını öneriyoruz.React projelerinde, dosya ve klasör yapısı aşağıdaki gibidir:<ul><li>node_modules: React uygulamasının gerekli olan tüm paket ve modüllerin bulunduğu klasördür. Bu klasör, npm kullanarak projeyi oluşturduğunuzda otomatik olarak oluşur ve genellikle kodlarımızın içinde direk olarak değişiklik yapmamıza gerek yoktur.</li><li>public: Bu klasör, projenin kullanıcı tarafındaki görünür bölümünde bulunan dosyaları içerir. HTML, CSS ve JavaScript dosyaları bu klasörde bulunabilir. Aynı zamanda, bu klasörde projenin görüntülenmesi için gereken tüm statik dosyalar (resimler, favicon vb.) bulunabilir.</li><li>src: Bu klasör, projenin çalışma içeriğini içeren dosyaları içerir. Bu dosyalar, uygulamanın işlevselliğini tanımlayan ve React komponentlerini içeren JavaScript dosyalarıdır.</li><li>index.js: Bu dosya, React uygulamasının ana dosyasıdır ve uygulamanın çalışmasını sağlar. Bu dosyada, React DOM'u render etme işlemleri yapılır ve React komponentleri ekrana yansıtılır.</li></ul>React projesi içerisinde en önemli dosyalardan biri, index.js dosyasıdır. Bu dosya, uygulamanızın çalışmasına başlaması için gerekli olan temel kodları içerir. İlk olarak, React kütüphanesi ve ReactDOM kütüphanesini projemize dahil etmemiz gerekir. Bunu, aşağıdaki şekilde yapabiliriz:<pre><code>import React from 'react';
import ReactDOM from 'react-dom';</code></pre>Sonra, uygulamamızın görüntüleneceği HTML elementini tanımlayabiliriz. Bunu, aşağıdaki şekilde yapabiliriz:<pre><code>const rootElement = document.getElementById("root");</code></pre>En son olarak, React component'ini root element içerisinde render edebiliriz. Bunu, aşağıdaki şekilde yapabiliriz:<pre><code>ReactDOM.render(&lt;App /&gt;, rootElement);</code></pre>Burada, &lt;App /&gt;, uygulamanızda kullanacağınız bir React component'idir.Diğer önemli dosyalar ve klasörler arasında, components klasörü bulunur. Bu klasör, uygulamanızda kullanacağınız tüm React component'lerini içerir. CSS veya SCSS dosyalarınız için assets klasörü bulunabilir. Ayrıca, api istekleri yapmak için kullanabileceğiniz services veya utils klasörü bulunabilir.Src klasörü, uygulamanın içeriğini tanımlayan dosyaları içerir. Bu dosyalar, uygulamanın işlevselliğini tanımlayan React komponentlerini içerebilir. Komponentler, kodlarımızı daha düzenli ve anlaşılır hale getirmemize yardımcı olan tekrar kullanılabilir bileşenlerdir.Public klasörü, uygulamanın görünür bölümünde bulunan ve sunucu tarafından dağıtılan dosyaları içermektedir. Genellikle HTML, CSS ve JavaScript dosyalarını içermektedir. Public klasöründe bulunan index.html dosyası, uygulamanın başlangıç noktasıdır ve bu dosya tarafından yüklenen diğer dosyalar da içermektedir. Bunun yanı sıra public klasöründe resim, favicon gibi dosyalar da bulunabilir.Bununla birlikte, src klasörü ise uygulamanın gerçek kodlarını içermektedir. Bu klasör, React componentlerini, fonksiyonları ve diğer JavaScript kodlarını içermektedir. Index.js dosyası, uygulamanın başlangıç noktasıdır ve diğer componentlerin yüklenmesine ve işlenmesine yönlendirilir.Ayrıca, React projelerinde sıklıkla node_modules klasörü de bulunur. Bu klasör, projede kullanılan npm paketlerini içermektedir. Paket yöneticisi olarak npm kullanılır ve bu klasör, paketlerin yüklenmesi ve projede kullanılması için gerekli olan dosyaları içermektedir.Yazının amacı, React projelerindeki dosya ve klasörlerin ne işe yaradığını ve nasıl yapılandırıldıklarını açıklamaktır. Böylece React projeleri oluştururken daha iyi bir anlayışa sahip olabilir ve projeleri daha verimli bir şekilde yapılandırabilirsiniz.

React Projesinde Dosya ve Klasör Yapısı: index.js, src ve public Klasörleri

JSX, JavaScript ve HTML kodlarının birleştirildiği bir yapıdır. JSX, React uygulamalarında componentlerin tanımlanmasında kullanılır ve component içeriğini belirtir. JSX'in en önemli özelliği ise, component içeriğini HTML gibi görüntülememizi sağlamasıdır.JSX'i kullanarak componentleri tanımlayabilmekteyiz. Componentler, veri ile dinamik olarak güncellenebilir ve birçok farklı componenti bir arada kullanabiliriz. Ayrıca, componentler arasında veri akışının yönetilmesi de JSX sayesinde mümkündür.Aşağıdaki örnekte, JSX kullanarak bir component tanımlanması gösterilmiştir:<pre><code>import React from 'react';

const MyComponent = (props) =&gt; {
 return (
 &lt;div&gt;
 &lt;h1&gt;My Component&lt;/h1&gt;
 &lt;p&gt;{props.message}&lt;/p&gt;
 &lt;/div&gt;
 );
}

export default MyComponent;</code></pre>Bu örnekte, <code>MyComponent</code> adında bir component tanımlanmıştır. Component içerisinde <code>div</code>, <code>h1</code> ve <code>p</code> HTML etiketleri kullanılmıştır. <code>{props.message}</code> kısmı ise component'e verilen <code>props</code>'dan <code>message</code> özelliğinin değerini gösterir.JSX'in kullanımı, React uygulamalarının daha anlaşılır, kolay ve hızlı bir şekilde geliştirilmesine yardımcı olur.JSX, JavaScript ve XML (eXtensible Markup Language) söz dizimlerinin birleşimidir ve React kullanırken kullanılan özel bir söz dizimidir. JSX, JavaScript kodunu HTML gibi görünen bir şey olarak yazmanıza olanak tanır. Bu, React uygulamalarının düzenli ve okunabilir olmasını sağlar.JSX kullanarak, komponentlerin görünümlerini tanımlayabilirsiniz. Örneğin, bir buton komponenti tanımlamak için aşağıdaki kodu yazabilirsiniz:<pre><code>function Button(props) {
 return (
 &lt;button&gt;{props.text}&lt;/button&gt;
 );
}</code></pre>JSX, HTML etiketleri gibi görünen şeylerin JavaScript içinde kullanılabildiği anlamına gelir. Bu, JavaScript'te HTML etiketleri kullanmanızı ve daha sonra o etiketler üzerinde manipülasyon yapmanızı sağlar.Bununla birlikte, JSX JavaScript kodu olduğundan, JavaScript fonksiyonlarını ve değişkenlerini içinde kullanabilirsiniz. Örneğin, aşağıdaki kod örneğinde, <code>message</code> adlı bir değişkenin içeriği butonun içine gösterilmektedir:<pre><code>const message = 'Click Me';

function Button() {
 return (
 &lt;button&gt;{message}&lt;/button&gt;
 );
}</code></pre>JSX'in en büyük avantajı, JavaScript ile HTML arasındaki açık bir ara yüz sunmasıdır. Bu, React uygulamalarının daha hızlı ve verimli bir şekilde geliştirilmesine yardımcı olur.

JSX Nedir?

React Props, React uygulamalarında componentler arasında veri akışını sağlamak için kullanılan bir yapıdır. Props, componentlere veri göndermek için kullanılır ve component içerisinde değiştirilemez.React Props'un temel amacı, componentler arasında veri akışını sağlamak ve componentlerin tekrar kullanılabilmesini kolaylaştırmaktır. Props, componentlere veri gönderirken, component içerisinde değiştirilmesini engellemektedir. Böylece, her component tek bir görev üstlenir ve sadece o görevle ilgili işlemleri yapar.Props kullanmak, componentler arasında daha esnek ve kolay bir veri akışı yapmanızı sağlar. Ayrıca, componentlerin tekrar kullanılabilmesini kolaylaştırır ve componentlere verilen verilerin component içerisinde değiştirilmesini engelleyerek uygulamanın daha güvenli hale gelmesine yardımcı olur.Aşağıdaki örnekte, component'e props olarak isim verisi gönderilmektedir:<pre><code>import React from 'react';

function User(props) {
 return (
 &lt;div&gt;
 &lt;p&gt;Adı: {props.isim}&lt;/p&gt;
 &lt;/div&gt;
 );
}

export default User;</code></pre>Daha sonra, component'i başka bir component içerisinde kullanabilir ve component'e isim verisi gönderebilirsiniz:<pre><code>import React from 'react';
import User from './User';

function App() {
 return (
 &lt;div&gt;
 &lt;User isim="John Doe" /&gt;
 &lt;/div&gt;
 );
}

export default App;</code></pre>Bu örnekte, component <code>User</code> componentine <code>isim</code> verisi gönderilmiş ve component içerisinde bu veri kullanılmıştır.React Props, componentler arasında veri akışını sağlamanın yanı sıra, componentlerin tekrar kullanılabilmesini de kolaylaştırır. Böylece, componentler arasında veri akışını kolayca yapabilir ve componentleri daha esnek bir şekilde kullanabilirsiniz.

React Props Nedir?

React Props.children, React komponentleri arasındaki veri aktarımında kullanılan bir kavramdır. Props.children, bir komponentin içerisindeki diğer komponentleri veya HTML etiketlerini temsil eder.Örneğin, bir komponent oluşturalım ve bu komponentin içerisinde birkaç başka komponent veya HTML etiketi bulunsun:<pre><code>import React from 'react';

function MyComponent(props) {
 return (
 &lt;div&gt;
 &lt;h1&gt;{props.title}&lt;/h1&gt;
 {props.children}
 &lt;/div&gt;
 );
}

export default MyComponent;
</code></pre>Daha sonra bu komponenti başka bir komponentin içerisinde kullanabiliriz:<pre><code>import React from 'react';
import MyComponent from './MyComponent';

function App() {
 return (
 &lt;MyComponent title="My Title"&gt;
 &lt;p&gt;This is the content inside MyComponent&lt;/p&gt;
 &lt;p&gt;This is another content inside MyComponent&lt;/p&gt;
 &lt;/MyComponent&gt;
 );
}

export default App;
</code></pre>Bu örnekte, <code>MyComponent</code> komponenti <code>title</code> prop'u ile birlikte içerisindeki <code>props.children</code> değerini alır. Bu değer, <code>App</code> komponenti tarafından tanımlanmış olan HTML etiketleridir. Bu şekilde, <code>MyComponent</code> komponenti içerisinde ne görüneceğini <code>App</code> komponenti tarafından belirlemiş oluruz.React Props.children, bir komponentin içeriğini dinamik olarak değiştirmek veya bir komponenti diğer komponentlere göre genişletmek için kullanılabilir.

React props.children Nedir?

JavaScript'de event, kullanıcının web sayfasıyla etkileşimde bulunmasına izin veren eylemlerdir. Örneğin, bir düğmeye tıklama veya bir formu gönderme gibi eylemler, bir event tetikleyebilir. Bu event, web sayfasında bir değişiklik yapmak veya bir işlemi gerçekleştirmek için JavaScript tarafından yakalanabilir.React, eventleri ele almak için özel bir sözdizimi sunar. JSX içinde, olay adları camelCase şeklinde yazılır ve onlara bir işlev atanır. Bu işlev, olay tetiklendiğinde çağrılacaktır.Örneğin, aşağıdaki kod, bir düğmeye tıklama olayını ele alır ve handleClick işlevini çağırır:<pre><code>import React from 'react';

function MyComponent() {
 function handleClick() {
 console.log('Button clicked!');
 }

 return (
 &lt;button onClick={handleClick}&gt;Click me&lt;/button&gt;
 );
}</code></pre>Bu kodu daha kısa yazabiliriz:<pre><code>import React from 'react';

function MyComponent() {
 return (
 &lt;button onClick={()=&gt; console.log('Button clicked!')}&gt;Click me&lt;/button&gt;
 );
}</code></pre>React'te, bir olayın yayılması (propagation) engellenebilir veya durdurulabilir. Örneğin, bir ana bileşenin bir alt bileşendeki bir olayı durdurmasına izin vermek için, alt bileşen, olay nesnesinin <code>stopPropagation()</code> yöntemini çağırabilir.React ayrıca, bir olayın varsayılan davranışını engelleme veya değiştirme yeteneği de sunar. Örneğin, bir bağlantıya tıklama olayı, sayfanın yeniden yüklenmesine neden olabilir. Bu davranış, <code>event.preventDefault()</code> yöntemi kullanılarak engellenebilir.React'te olayların kullanımı, Vue veya Angular gibi diğer çerçevelerden biraz farklıdır. React, olayların "syntax sugar" sağlar, ancak olay yönetimi genellikle diğer çerçevelere göre daha doğrudan ve JavaScript'e daha yakındır.Özetlemek gerekirse, JavaScript'te eventler, web sayfalarında etkileşimli işlemleri mümkün kılan önemli bir kavramdır. React, JSX sözdizimi ile eventleri ele alır ve olayların yayılmasını durdurma veya varsayılan davranışı engelleme gibi özellikleri sağlar. Bu özellikler, React'teki olay yönetimini diğer çerçevelerden farklı kılar.

JavaScript Events: Temel Kavramlar ve React İçinde Kullanımı

React'ta state yönetimi, componentlerin re-render edilmesini sağlamak için önemlidir. Componentlerdeki değişkenlerin değerleri değiştikçe, React state yönetimi aracılığıyla bu değişiklikleri algılayarak componentleri yeniden render eder.React, componentlerin state'ini yönetmek için <code>useState</code> hook'u sağlar. <code>useState</code>, bir component içinde kullanılabilen ve state değerleri ile bu değerleri değiştirmek için kullanılan bir fonksiyondur. Kullanıcı arayüzündeki herhangi bir etkileşim sonrası bu fonksiyon çalışarak, component'in yeniden render edilmesi sağlanır.Düz bir değişken yerine <code>useState</code> hook'u kullanılması, componentlerin daha tutarlı ve öngörülebilir bir şekilde çalışmasını sağlar. Ayrıca, componentlerin ölçeklenebilirliğini ve yeniden kullanılabilirliğini arttırır.Aşağıdaki örnekte, bir <code>counter</code> componenti örneği <code>useState</code> kullanılarak oluşturulmuştur:<pre><code>import React, { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 function increment() {
 setCount(count + 1);
 }

 return (
 &lt;div&gt;
 &lt;p&gt;You clicked {count} times&lt;/p&gt;
 &lt;button onClick={increment}&gt;Click me&lt;/button&gt;
 &lt;/div&gt;
 );
}</code></pre>Bu örnekte, <code>useState</code> hook'u kullanılarak, <code>count</code> adlı state değişkeni ve <code>setCount</code> adlı fonksiyon tanımlanmıştır. <code>increment</code> fonksiyonu ile <code>count</code> değişkeni, kullanıcı tıklama sonrası 1 artırılarak güncellenir. Bu değişiklik, React tarafından algılanır ve component yeniden render edilir.Bir <code>useState</code> hook'u, daha karmaşık componentlerde de kullanılabilir. Birden fazla state değişkeni tanımlanabilir ve bu değişkenlerin değerleri, bağımsız olarak güncellenebilir.<code>useState</code> kullanımı, React'ta state yönetimi için temel bir yaklaşımdır ve componentlerin yeniden render edilmesi için önemlidir. Bu nedenle, React uygulamalarının geliştirilmesinde <code>useState</code> ve diğer React hook'larının doğru kullanımı, önemli bir rol oynamaktadır.

React'ta useState Hook'unun Kullanımı: Düz Değişkenlerin Yerine Neden Kullanılır?

useState Hook, React'ta bir state tutmak için kullanılan bir Hook'tur. Bu hook, bir fonksiyonel bileşen içindeki bir durum değişkenini (state) yönetmenizi sağlar. useState kullanarak, bir değişkeni tanımlayabilir ve bu değişkenin değerini bileşenin yaşam döngüsü boyunca değiştirebilirsiniz.Bu yazıda useState hook'unun detaylarını inceleyeceğiz.<h2>useState Hook Nedir?</h2>useState Hook, React bileşenlerinde state yönetimini sağlamak için kullanılan bir JavaScript fonksiyonudur. useState, bir değer ve bu değeri değiştirmek için bir fonksiyon döndürür. Bu değer, bileşenin durumu ile ilişkili olabilir.useState, işlev bileşenleri için kullanılan bir Hooks API'si olarak 2019 yılında React 16.8.0 sürümüyle tanıtıldı. useState, bileşenin state değişkenlerini yönetmek için önceki sürümlerde kullanılan this.setState() yöntemi yerine kullanılır.<h2>useState Hook Nasıl Kullanılır?</h2>useState Hook, bir fonksiyonel bileşende tanımlanır. Aşağıdaki örnek, bir sayacı gösteren bir bileşenin state'ini nasıl kullanacağınızı gösterir:<pre><code>import React, { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 return (
 &lt;div&gt;
 &lt;p&gt;You clicked {count} times&lt;/p&gt;
 &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
 Click me
 &lt;/button&gt;
 &lt;/div&gt;
 );
}</code></pre>Yukarıdaki örnekte, useState ile iki değer döndürüyoruz:<ul><li>count: Bu, bileşenin state değişkenidir ve varsayılan olarak 0 olarak ayarlanır.</li><li>setCount: Bu, count'u değiştirmek için kullanacağımız bir fonksiyondur.</li></ul>useState, bileşenin state değişkenlerinin yanı sıra, bir fonksiyon döndürür. Bu fonksiyon, bileşenin state değişkenlerini güncelleme işlemini gerçekleştirir.Yukarıdaki örnekte, setCount, butona tıklandığında count değişkenini artırmak için kullanılır. setCount, useState'de count değerini değiştirmek için kullanılan bir fonksiyondur. Bu, count değerinin değiştirilmesi gerektiğinde çağrılacaktır.<h2>useState Hook'un İçindeki Yapılar</h2>useState Hook, içerisinde iki parametre alır: bir state değişkeni ve bir fonksiyon.State değişkeni, bileşenin durumunu tutmak için kullanılır. Bu değişken, bileşenin yaşam döngüsü boyunca değiştirilebilir. useState Hook, bu state değişkeninin başlangıç değerini de alabilir.Fonksiyon, state değişkeninin güncellenmesi için kullanılır. useState Hook, bu fonksiyonu sağlar. Fonksiyon, yeni bir state değeri alabilir veya önceki state değerine bağlı olarak bir işlem yapabilir.useState hook'u, React uygulamalarımızda state yönetimi için kullanabileceğimiz güçlü bir araçtır. Ancak, useState hook'u kullanırken, state değerlerini sadece hook içinde değiştirmemiz gerekir. Ayrıca, useState hook'u, bir component'in state'ini yönetmek için kullanabileceğimiz sadece birkaç React hook'tan biridir. Bu nedenle, React uygulamalarımızda farklı amaçlar için kullanabileceğimiz birçok farklı hook bulunmaktadır.useState hook'u kullanarak state yönetimini nasıl gerçekleştirebileceğimizi öğrendik. Bu sayede, React uygulamalarımızda componentlerin state'lerini değiştirebileceğiz.Kısaca özetleyecek olursak, useState hook'u, bir component içerisinde kullanılabilen bir fonksiyondur. Bu fonksiyon, bir dizi içindeki state değeri ve bu değeri güncellemek için kullanabileceğimiz bir fonksiyon döndürür. Daha sonra, bu değeri component içinde kullanabilir ve güncelleyebiliriz.

React'te useState Hook

React'ta, <code>map()</code> metodu, bir dizi öğeleri birleştirmek veya düzenlemek için yaygın bir yöntemdir. Bu öğeler genellikle bir liste veya tablo oluşturmak için kullanılır. <code>map()</code> metodu, dizinin her bir öğesi için belirtilen bir işlevi çalıştırır ve her bir öğenin sonucunu yeni bir diziye ekler. Bu yeni dizi daha sonra bir bileşen tarafından görüntülenebilir.Örnek olarak, bir dizi öğelerimiz olduğunu varsayalım. Bu öğeleri bir liste olarak görüntülemek istiyoruz. Bu örnekte, <code>map()</code> metodunu kullanarak bir dizi öğeleri listelemek için nasıl kullanacağımızı gösteren bir örnek verelim.<pre><code>const items = ["Apple", "Banana", "Orange"];

const itemList = items.map((item) =&gt; &lt;li&gt;{item}&lt;/li&gt;);

return &lt;ul&gt;{itemList}&lt;/ul&gt;;</code></pre>Bu örnekte, <code>items</code> adlı bir dizi tanımladık ve her bir öğe için yeni bir dizi olan <code>itemList</code> oluşturmak için <code>map()</code> metodunu kullandık. Her bir öğe için <code>li</code> etiketi oluşturduk ve sonuçta, <code>itemList</code> adlı yeni bir dizi oluşturduk. Bu dizi, <code>ul</code> etiketi içinde görüntülenebilir.<code>key</code> ÖzelliğiReact'ta, her bir öğenin benzersiz bir <code>key</code> özelliği içermesi önemlidir. Bu özellik, React'ın her bir öğeyi benzersiz olarak tanımasına ve daha sonra performansı optimize etmesine yardımcı olur. Bu özellik ayrıca React tarafından veri değiştiğinde, öğelerin yeniden düzenlenmesinde kullanılır.Örneğin, yukarıdaki örneği ele alalım ve her bir öğe için <code>key</code> özelliğini ekleyelim.<pre><code>const items = [
 { id: 1, name: "Apple" },
 { id: 2, name: "Banana" },
 { id: 3, name: "Orange" },
];

const itemList = items.map((item) =&gt; &lt;li key={item.id}&gt;{item.name}&lt;/li&gt;);

return &lt;ul&gt;{itemList}&lt;/ul&gt;;</code></pre>Bu örnekte, <code>items</code> adlı bir dizi tanımladık ve her bir öğe için bir <code>key</code> özelliği olan yeni bir dizi olan <code>itemList</code> oluşturmak için <code>map()</code> metodunu kullandık. <code>key</code> özelliği, her bir öğenin benzersiz olarak tanınmasını sağlar.<code>key</code> özelliğinin kullanılmaması, React performansını olumsuz etkileyebilir. Çünkü <code>key</code> özelliği olmadan, React, öğeleri tanımlamak için yavaş bir yöntem kullanmak zorunda kalır. Bu nedenle, <code>map()</code>metodunu kullanırken, her zaman benzersiz bir <code>key</code> özelliği eklemek önemlidir. Bu, öğelerin benzersiz olarak tanınmasını sağlar ve React performansını optimize etmesine yardımcı olur.Ayrıca, React'ta <code>key</code> özelliği, bileşenler arasında iletişim kurmak için de kullanılabilir. Örneğin, bir ana bileşen, bir alt bileşen listesi oluşturur ve her bir öğenin anahtarını alt bileşenlere geçirir. Bu, alt bileşenlerin doğrudan ana bileşene erişebileceği anlamına gelir. Bu, uygulama kodunda kolaylık sağlar ve performansı optimize eder.Sonuç olarak, <code>map()</code> metodu React'ta sık kullanılan bir yöntemdir. <code>key</code> özelliği, öğelerin benzersiz olarak tanınmasını sağlar ve React performansını optimize etmesine yardımcı olur. <code>key</code> özelliğinin her zaman kullanılması, React uygulamalarının performansını artırabilir ve kodu daha okunaklı hale getirebilir.

React'ta map() metodu ve Benzersiz Key Özelliği: Performansı Optimize Etmek İçin Neden Önemlidir?

React, web uygulamaları oluşturmak için popüler bir JavaScript kütüphanesidir. React uygulamalarında stil uygulamak için birçok farklı yaklaşım vardır. Bu yazıda, React uygulamalarında inline CSS ve dinamik koşullu inline CSS ile dinamik koşullu class eklemeyi örneklerle açıklayacağız.<h3>Inline CSS</h3>React'ta inline CSS, stil özellikleri doğrudan JSX kodu içinde tanımlanır. Bu yaklaşım, küçük projelerde ve basit stil gereksinimlerinde yararlıdır. Ancak büyük projelerde inline CSS kullanmak, stil yönetimini zorlaştırabilir.Örneğin, bir &lt;div&gt; öğesi için arka plan rengini belirlemek istediğimizi varsayalım:<pre><code>import React from 'react';

function App() {
 return (
 &lt;div style={{ backgroundColor: 'blue' }}&gt;
 Bu bir örnek metin.
 &lt;/div&gt;
 );
}

export default App;</code></pre>Burada, stil özellikleri <code>style</code> özniteliği içinde JavaScript nesnesi olarak tanımlanmaktadır. Bu nesnenin özellikleri, CSS özellikleri ile aynıdır, ancak özelliği tanımlamak için camelCase sözdizimi kullanılır.<h3>Dinamik Koşullu Inline CSS</h3>Bir React uygulamasında, öğelerin stil özellikleri genellikle sabit değildir. Bazen, özellikleri belirli koşullara göre değişebilir. Bu durumda, dinamik koşullu inline CSS kullanmak yararlı olabilir.Örneğin, bir &lt;div&gt; öğesi için arka plan renginin, bir koşula bağlı olarak değişmesini istediğimizi varsayalım:<pre><code>import React, { useState } from 'react';

function App() {
 const [isBlue, setIsBlue] = useState(false);

 const handleClick = () =&gt; {
 setIsBlue(!isBlue);
 };

 return (
 &lt;div
 style={{
 backgroundColor: isBlue ? 'blue' : 'red',
 color: 'white',
 padding: '10px',
 textAlign: 'center'
 }}
 onClick={handleClick}
 &gt;
 {isBlue ? 'Mavi' : 'Kırmızı'}
 &lt;/div&gt;
 );
}

export default App;</code></pre>Burada, <code>useState</code> hook'u kullanarak <code>isBlue</code> adında bir state değişkeni tanımladık. Bu değişken, <code>handleClick</code> fonksiyonu tarafından değiştirilir. <code>isBlue</code> değeri, &lt;div&gt; öğesinin arka plan rengini belirlemek için kullanılır.<code>style</code> özelliği, <code>isBlue</code> değerine göre değişir. Böylece, kullanıcı &lt;div&gt; öğesine tıkladığında, arka plan rengi değişir.<h3>Dinamik Koşullu Class Ekleme</h3>React uygulamalarında, öğelerin stil özellikleri bazen inline olmayabilir. Bu durumlarda, dinamik koşullu class eklemek yararlı olabilir. Dinamik koşullu class eklemek, stil yönetimini kolaylaştırabilir ve CSS sınıflarını yeniden kullanmanıza olanak tanır.Örneğin, bir &lt;div&gt; öğesi için farklı sınıflar kullanarak farklı stiller uygulamak istediğimizi varsayalım:<pre><code>import React, { useState } from 'react';
import './styles.css';

function App() {
 const [isBlue, setIsBlue] = useState(false);

 const handleClick = () =&gt; {
 setIsBlue(!isBlue);
 };

 return (
 &lt;div
 className={isBlue ? 'blueBox' : 'redBox'}
 onClick={handleClick}
 &gt;
 {isBlue ? 'Mavi' : 'Kırmızı'}
 &lt;/div&gt;
 );
}

export default App;</code></pre>Burada, <code>styles.css</code> dosyasında <code>blueBox</code> ve <code>redBox</code> adında iki farklı sınıf tanımladık. &lt;div&gt; öğesi, <code>className</code> özelliği ile <code>blueBox</code> veya <code>redBox</code> sınıfını alır.Bu sayede, &lt;div&gt; öğesi farklı stillere sahip olur ve kullanıcı tıkladığında sınıf değişir.React uygulamalarında stil yönetimi, inline CSS, dinamik koşullu inline CSS ve dinamik koşullu class eklemek gibi farklı yaklaşımlar kullanılarak gerçekleştirilebilir. Inline CSS, küçük projelerde ve basit stil gereksinimlerinde kullanışlıdır. Dinamik koşullu inline CSS, özelliklerin belirli koşullara göre değiştiği durumlarda yararlıdır. Dinamik koşullu class eklemek ise, stil yönetimini kolaylaştırır ve CSS sınıflarını yeniden kullanmanıza olanak tanır.<h2>Styled Components Nedir?</h2>Styled Components, React uygulamalarında stil yönetimini sağlayan bir kütüphanedir. Bu kütüphane, stil tanımlamalarını JavaScript koduna entegre ederek, stil yönetimini modüler ve kolay hale getirir. Styled Components, CSS sınıfları yerine, her bileşen için benzersiz bir stil adı verir ve bu stil adını bileşenler arasında yeniden kullanabilirsiniz.Styled Components, özellikle büyük React uygulamalarında stil yönetimini kolaylaştırır. Büyük uygulamalarda, stil tanımlamalarının düzenli ve tutarlı bir şekilde yönetilmesi önemlidir. Styled Components, JSX içinde stil tanımlamanıza ve bileşenler arasında stil paylaşmanıza olanak tanıyan bir dizi kullanışlı araç sunar.<h2>Styled Components Nasıl Kullanılır?</h2>Styled Components, React uygulamanızda kullanmak için öncelikle kütüphaneyi yüklemeniz gerekiyor:<pre><code>npm install styled-components</code></pre>Daha sonra, kullanacağınız bileşenleri <code>styled</code> fonksiyonu ile sarmalamanız gerekiyor:<pre><code>import styled from 'styled-components';

const Button = styled.button`
 background-color: #008CBA;
 color: white;
 font-size: 16px;
 padding: 10px 20px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
`;

function App() {
 return (
 &lt;div&gt;
 &lt;Button&gt;Click Me!&lt;/Button&gt;
 &lt;/div&gt;
 );
}

export default App;</code></pre>Yukarıdaki örnekte, <code>Button</code> bileşeni <code>styled</code> fonksiyonu ile sarmalanmıştır. Stil tanımlamaları, arka tarafta bir CSS dosyası olarak tanımlanır. Bu örnekte, <code>background-color</code>, <code>color</code>, <code>font-size</code>, <code>padding</code>, <code>border</code>, <code>border-radius</code> ve <code>cursor</code> gibi bir dizi stil özelliği tanımlanmıştır.Styled Components, CSS özellikleri arasında dinamik değişkenler tanımlamak için <code>${}</code> sözdizimini kullanabilirsiniz:<pre><code>const Button = styled.button`
 background-color: ${props =&gt; props.primary ? "#008CBA" : "white"};
 color: ${props =&gt; props.primary ? "white" : "#008CBA"};
 font-size: 16px;
 padding: 10px 20px;
 border: ${props =&gt; props.primary ? "none" : "1px solid #008CBA"};
 border-radius: 4px;
 cursor: pointer;
`;

function App() {
 return (
 &lt;div&gt;
 &lt;Button primary&gt;Primary Button&lt;/Button&gt;
 &lt;Button&gt;Secondary Button&lt;/Button&gt;
 &lt;/div&gt;
 );
}
export default App;</code></pre>Yukarıdaki örnekte, <code>Button</code> bileşenine <code>primary</code> prop'u verilerek, düğmenin arka plan rengi ve metin rengi değiştirilmiştir. <code>border</code> stil özelliği de <code>primary</code> prop'unun değerine göre değiştirilir.Styled Components ayrıca <code>css</code> fonksiyonu kullanarak stil özelliklerini yeniden kullanmanızı da sağlar:<pre><code>const ButtonBase = `
 font-size: 16px;
 padding: 10px 20px;
 border-radius: 4px;
 cursor: pointer;
`;

const PrimaryButton = styled.button`
 ${ButtonBase}
 background-color: #008CBA;
 color: white;
 border: none;
`;

const SecondaryButton = styled.button`
 ${ButtonBase}
 background-color: white;
 color: #008CBA;
 border: 1px solid #008CBA;
`;

function App() {
 return (
 &lt;div&gt;
 &lt;PrimaryButton&gt;Primary Button&lt;/PrimaryButton&gt;
 &lt;SecondaryButton&gt;Secondary Button&lt;/SecondaryButton&gt;
 &lt;/div&gt;
 );
}

export default App;</code></pre>Yukarıdaki örnekte, <code>ButtonBase</code> adlı bir stil tanımlaması oluşturulmuştur. Bu stil tanımlaması, <code>font-size</code>, <code>padding</code>, <code>border-radius</code> ve <code>cursor</code> gibi stil özelliklerini içerir. Daha sonra, <code>PrimaryButton</code> ve <code>SecondaryButton</code> bileşenleri, <code>ButtonBase</code> stil tanımlamasını yeniden kullanarak, ilgili özellikleri ayarlayabilir.Styled Components, React uygulamalarında stil yönetimini kolaylaştıran bir kütüphanedir. Bu kütüphane, JSX içinde stil tanımlamayı ve bileşenler arasında stil paylaşmayı mümkün kılarak, React uygulamalarının modülerliğini artırır. Styled Components ayrıca dinamik değişkenler ve yeniden kullanılabilir stil tanımlamaları gibi kullanışlı özellikler sunar.<h2>CSS Modules Nedir?</h2>CSS Modules, CSS dosyalarını modüller halinde kullanabilmenizi sağlayan bir teknolojidir. Bu teknoloji, CSS dosyalarındaki sınıfları yerel kapsama alanlarına taşır ve böylece bir bileşenin stil özellikleri, diğer bileşenlerin stil özelliklerinden etkilenmez.CSS Modules kullanırken, her bir CSS dosyası için bir modül oluşturulur. Modüllerdeki sınıflar, otomatik olarak benzersiz bir isim alanıyla örtülür. Böylece, farklı modüllerdeki sınıflar arasında isim çatışmaları oluşmaz.<h2>CSS Modules Kullanımı</h2>CSS Modules kullanarak React uygulamalarında stil yönetimi yapmak oldukça kolaydır. İlk olarak, stil dosyalarınızı <code>.module.css</code> uzantısıyla kaydedin. Bu uzantı, dosyanın bir CSS Modülü olduğunu belirtir.Örneğin, aşağıdaki gibi bir <code>Button.module.css</code> dosyası oluşturabilirsiniz:<pre><code>.primaryButton {
 background-color: #008CBA;
 color: white;
 border: none;
 padding: 10px 20px;
 border-radius: 4px;
 cursor: pointer;
}

.secondaryButton {
 background-color: white;
 color: #008CBA;
 border: 1px solid #008CBA;
 padding: 10px 20px;
 border-radius: 4px;
 cursor: pointer;
}</code></pre>Bu dosya, <code>primaryButton</code> ve <code>secondaryButton</code> adlı iki sınıf içerir.Daha sonra, bu stil dosyasını React bileşeninde kullanabilirsiniz. Bunu yapmak için, <code>import</code> anahtar kelimesini kullanarak stil dosyasını bileşen dosyasına dahil edin ve CSS sınıflarını bileşene <code>className</code> özelliğiyle ekleyin.<pre><code>import React from 'react';
import styles from './Button.module.css';

function Button(props) {
 const { primary, secondary, children } = props;
 let className = '';
 if (primary) {
 className = styles.primaryButton;
 } else if (secondary) {
 className = styles.secondaryButton;
 }

 return &lt;button className={className}&gt;{children}&lt;/button&gt;;
}

export default Button;</code></pre>Yukarıdaki örnekte, <code>import</code> anahtar kelimesi kullanılarak <code>Button.module.css</code> dosyası bileşen dosyasına dahil edilmiştir. Ardından, bileşenin <code>className</code> özelliği, <code>primary</code> veya <code>secondary</code> prop'larının değerlerine göre değişen bir değer alır.Bu yöntem, bileşenlerin stil özelliklerini dinamik olarak belirlemenizi sağlar. Ayrıca, stil özelliklerinin bileşen koduna gömülmesi, diğer CSS yaklaşımlarından daha güçlü bir izolasyon sağlar.CSS Modules ile, bileşenlerin stil özelliklerini kolayca yönetebilir ve değiştirebilirsiniz. Örneğin, <code>Button</code> bileşenindeki <code>primaryButton</code> stil özelliklerini değiştirmek istediğinizde, <code>Button.module.css</code> dosyasındaki sınıfı güncellemeniz yeterlidir. Bu değişiklik, yalnızca <code>Button</code> bileşenini etkileyecektir ve diğer bileşenlerin stil özelliklerini etkilemeyecektir.<h2>CSS Modules Avantajları</h2>CSS Modules'in birkaç avantajı vardır:<ul><li>Stil özellikleri, bileşen koduna gömülür ve diğer bileşenlerin stil özelliklerini etkilemez.</li><li>Sınıflar, otomatik olarak benzersiz bir isim alanıyla örtülür ve böylece isim çatışmaları önlenir.</li><li>Stil dosyaları modüler hale getirilir ve yönetimi daha kolay hale gelir.</li><li>CSS dosyalarında kullanılan herhangi bir CSS seçicisi, yalnızca ilgili bileşenin stil özelliklerine uygulanır.</li></ul>CSS Modules, React uygulamalarında stil yönetimi yapmanın kolay ve etkili bir yoludur. Bu teknoloji, bileşenlerin stil özelliklerini izole etmelerine ve global isim çatışmalarını önlemelerine olanak tanır. Bu nedenle, React uygulamalarında CSS Modules kullanarak, daha sürdürülebilir ve yönetilebilir bir stil yönetimi sağlayabilirsiniz.

React Componentlerini Farklı Stillendirme Teknikleri

React, modern web uygulamaları geliştirmek için popüler bir JavaScript kütüphanesidir. Ancak, herhangi bir yazılım gibi, React uygulamaları da hatalar ve sorunlarla karşılaşabilir. React uygulamalarında hataları ve sorunları tespit etmek ve gidermek için "debugging" adı verilen bir süreç kullanılır. Bu makalede, React debugging hakkında konuşacağız ve örneklerle açıklayacağız.React Debugging Nedir?React debugging, bir React uygulamasında oluşan hataları ve sorunları tespit etmek ve gidermek için kullanılan bir süreçtir. Bu süreç, bir dizi teknik ve araç kullanarak gerçekleştirilir. React debugging'in amacı, uygulamanın sağlıklı ve sorunsuz çalışmasını sağlamaktır.React Debugging için Araçlar<ol><li>React Developer Tools: Chrome veya Firefox gibi bir web tarayıcısına yükleyebileceğiniz bir uzantıdır. Bu araç, React uygulamanızı inceleyerek, bileşenlerin hiyerarşik yapısını ve state değişikliklerini görüntüleyebilirsiniz.</li><li>Console: JavaScript geliştiricilerinin en iyi arkadaşı olan Console, hata ayıklama işlemleri için kullanılır. React uygulamanızda, console.log() yöntemini kullanarak hata ayıklama işlemleri gerçekleştirebilirsiniz.</li><li>React Error Overlay: React Error Overlay, bir hata oluştuğunda ekranın üstünde bir bildirim görüntüler. Bu bildirim, hatanın nedenini ve dosya yolunu gösterir.</li></ol><h2>React Debugging için Teknikler</h2><ol><li>Hata Ayıklama Yöntemleri: React uygulamanızda bir hata oluştuğunda, öncelikle hatanın nedenini belirlemek için hata ayıklama yöntemlerini kullanabilirsiniz. Bunlar console.log() kullanmak, hata yakalama blokları oluşturmak ve debugger anahtar sözcüğünü kullanmak gibi yöntemleri içerebilir.</li><li>ComponentDidCatch: Bu yöntem, React bileşenlerindeki hataları ele almak için kullanılır. Bu yöntem, bir hata oluştuğunda hatayı yakalar ve hata mesajını kullanıcıya gösterir.</li></ol><h2>Örneklerle React Debugging</h2><ol><li>Console.log() Kullanarak Debugging:<pre><code>import React, { useState } from 'react';

const App = () =&gt; {
 const [count, setCount] = useState(0);

 console.log('Render called');

 const handleCount = () =&gt; {
 setCount(count + 1);
 };

 return (
 &lt;div&gt;
 &lt;p&gt;Count: {count}&lt;/p&gt;
 &lt;button onClick={handleCount}&gt;Increment Count&lt;/button&gt;
 &lt;/div&gt;
 );
};

export default App;</code></pre>Bu örnekte, useState hook'unu kullanarak bir functional component oluşturduk ve state yönetimini sağladık. handleCount fonksiyonu, state'deki count değerini güncellemek için kullanıldı. Console.log() yöntemini kullanarak render fonksiyonunun ne zaman çağrıldığını gözlemleyebiliriz. Console'u açarak, her tıklamada render fonksiyonunun çağrıldığını görürüz. Bu, performans sorunlarına neden olabilecek gereksiz render işlemlerini belirlememize yardımcı olur.</li><li>React Developer Tools Kullanarak Debugging:React Developer Tools'u kullanarak, bir bileşenin props ve state değerlerini, bileşen hiyerarşisini ve bileşenler arasındaki veri akışını görüntüleyebiliriz.<pre><code>import React, { useState } from 'react';

const Parent = () =&gt; {
 const [count, setCount] = useState(0);

 const handleCount = () =&gt; {
 setCount(count + 1);
 };

 return (
 &lt;div&gt;
 &lt;Child count={count} handleCount={handleCount} /&gt;
 &lt;/div&gt;
 );
};

const Child = ({ count, handleCount }) =&gt; {
 console.log('Child Rendered');
 return (
 &lt;div&gt;
 &lt;p&gt;Count: {count}&lt;/p&gt;
 &lt;button onClick={handleCount}&gt;Increment Count&lt;/button&gt;
 &lt;/div&gt;
 );
};

export default Parent;</code></pre>Bu örnekte, Parent bileşeni, Child bileşenini render eder ve count değerini ve handleCount fonksiyonunu Child bileşenine props olarak geçirir. Console'u açarak, Child bileşeninin ne zaman çağrıldığını ve hangi props değerlerini aldığını gözlemleyebiliriz. Ayrıca, React Developer Tools aracılığıyla bileşen hiyerarşisini de görüntüleyebiliriz.React debugging, bir React uygulamasının sağlıklı ve sorunsuz bir şekilde çalışmasını sağlamak için oldukça önemlidir. Console.log() yöntemi, ComponentDidCatch, React Developer Tools gibi araçlar ve hata ayıklama teknikleri, React uygulamanızdaki sorunları tespit etmenize ve gidermenize yardımcı olur.</li></ol>

React Debugging (Hata Ayıklama)

Tailwind CSS, bir CSS framework'üdür. Kullanımı kolay ve hızlıdır ve birçok stil, tasarım ve düzenleme özelliği sağlar. Bu özellikler, bir web sitesi veya uygulama için gerekli olan düzeni, renkleri ve diğer özellikleri oluşturmayı daha hızlı ve daha kolay hale getirir.Neden kullanmalıyız?<ul><li>Hız: CSS yazmak yerine, hazır sınıflar kullanarak hızlıca tasarım yapmak mümkündür.</li><li>Özelleştirme: Özelleştirilebilir bir framework olduğundan, istenilen renk, boyut, yazı tipi vb. kolayca değiştirilebilir.</li><li>DRY: "Don't repeat yourself" prensibine uygun olup, kod tekrarını önler.</li><li>Responsive: Mobil uyumlu olacak şekilde tasarlanmıştır.</li></ul>Avantajları:<ul><li>Hızlı ve kolay tasarım sağlar.</li><li>Daha az kod yazarak daha fazla şey yapmanıza olanak sağlar.</li><li>Özelleştirilebilir olduğundan, tasarımcıların istediği şekilde ayarlayabilecekleri birçok özellik sağlar.</li><li>Mobil uyumlu olacak şekilde tasarlanmıştır.</li></ul>Dezavantajları:<ul><li>Özelleştirme konusunda bilgi sahibi olmayan kişiler için zor olabilir.</li><li>Yüksek öğrenme eğrisi: Framework'ün tüm özelliklerini öğrenmek zaman alabilir.</li></ul>React ile kurulumu nasıl olur?Tailwind CSS'i React ile kullanmak için, öncelikle Node.js ve NPM yüklü olması gerekiyor. Daha sonra, aşağıdaki komutları çalıştırarak Tailwind CSS ve diğer gerekli bağımlılıkları yükleyin:<pre><code>npm install -D tailwindcss</code></pre>Bunun ardından, <code>tailwind.config.js</code> dosyasını oluşturmak için aşağıdaki komutu çalıştırın:<pre><code>npx tailwindcss init</code></pre>tailwind.config.js dosyasını aşağıdaki gibi düzenleyin:<pre><code>/** @type {import('tailwindcss').Config} */
module.exports = {
 content: [
 "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
 extend: {},
 },
 plugins: [],
}</code></pre>React projenize Tailwind CSS'i dahil etmek için <code>index.css</code> dosyasını oluşturun ve aşağıdaki içeriği ekleyin:<pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre>React Komponentleri ile Tailwind CSS KullanımıTailwind CSS kullanarak bir tablo bileşeni oluşturmak için, <code>table</code> ve <code>tr</code> elementlerine Tailwind sınıflarını uygulamalıyız. Tablo hücrelerindeki metin için de, <code>td</code> elementleri için ayrı ayrı sınıflar uygulayabiliriz.<pre><code>function Table() {
 return (
 &lt;table className="table-auto w-full"&gt;
 &lt;thead&gt;
 &lt;tr className="bg-gray-200 text-gray-600 uppercase text-sm leading-normal"&gt;
 &lt;th className="py-3 px-6 text-left"&gt;Adı&lt;/th&gt;
 &lt;th className="py-3 px-6 text-left"&gt;E-posta&lt;/th&gt;
 &lt;th className="py-3 px-6 text-center"&gt;Şehir&lt;/th&gt;
 &lt;th className="py-3 px-6 text-center"&gt;Durum&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody className="text-gray-600 text-sm font-light"&gt;
 &lt;tr className="border-b border-gray-200 hover:bg-gray-100"&gt;
 &lt;td className="py-3 px-6 text-left whitespace-nowrap"&gt;John Doe&lt;/td&gt;
 &lt;td className="py-3 px-6 text-left"&gt;john@example.com&lt;/td&gt;
 &lt;td className="py-3 px-6 text-center"&gt;İstanbul&lt;/td&gt;
 &lt;td className="py-3 px-6 text-center"&gt;
 &lt;span className="bg-green-200 text-green-600 py-1 px-3 rounded-full text-xs"&gt;
 Aktif
 &lt;/span&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr className="border-b border-gray-200 hover:bg-gray-100"&gt;
 &lt;td className="py-3 px-6 text-left whitespace-nowrap"&gt;Jane Smith&lt;/td&gt;
 &lt;td className="py-3 px-6 text-left"&gt;jane@example.com&lt;/td&gt;
 &lt;td className="py-3 px-6 text-center"&gt;Ankara&lt;/td&gt;
 &lt;td className="py-3 px-6 text-center"&gt;
 &lt;span className="bg-red-200 text-red-600 py-1 px-3 rounded-full text-xs"&gt;
 Pasif
 &lt;/span&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr className="border-b border-gray-200 hover:bg-gray-100"&gt;
 &lt;td className="py-3 px-6 text-left whitespace-nowrap"&gt;Bob Johnson&lt;/td&gt;
 &lt;td className="py-3 px-6 text-left"&gt;bob@example.com&lt;/td&gt;
 &lt;td className="py-3 px-6 text-center"&gt;İzmir&lt;/td&gt;
 &lt;td className="py-3 px-6 text-center"&gt;
 &lt;span className="bg-green-200 text-green-600 py-1 px-3 rounded-full text-xs"&gt;
 Aktif
 &lt;/span&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 );
}

ReactDOM.render(&lt;Table /&gt;, document.getElementById('root'));</code></pre>Burada, <code>thead</code> ve <code>tbody</code> etiketleri ile birlikte, <code>th</code> ve <code>td</code> etiketlerine Tailwind sınıfları uyguluyoruz. Ayrıca, satırların arkaplan rengi değişmesi için hover efekti de ekliyoruz. Bu, Tailwind CSS'in hazır sınıfları sayesinde oldukça kolaydır.SonuçTailwind CSS'in hazır sınıfları, hızlı ve ölçeklenebilir bir şekilde uygulama geliştirmeyi mümkün kılar. Sınıflar, CSS stil dosyaları yerine, HTML elementlerinde doğrudan kullanılabilir, bu sayede stil sayfalarının yönetimi daha da kolaylaşır.Bu yazıda, React ile Tailwind CSS kullanarak örnek component oluşturduk.Tailwind CSS, geliştiricilerin daha az kod yazmasına ve stil yapısını daha da kolay hale getirmesine yardımcı olurken, React de yeniden kullanılabilir, bileşen tabanlı bir geliştirme yaklaşımı sunar. Bu iki teknoloji bir arada kullanıldığında, ölçeklenebilir, esnek, ve kolay yönetilebilir uygulamalar geliştirme süreci oldukça hızlanır.

React Projelerinde Tailwind Css Kullanımı

React Fragmentler, JSX'de birden fazla elementi döndürmenize izin verir. Böylece, birbirine bağlı olan ancak yalnızca bir ana element içine yerleştirilemeyen elemanları döndürmenizi sağlarlar. Bu yazıda, React Fragmentler hakkında detaylı bilgi ve örnekler paylaşacağım.<h3>React Fragmentler Nedir?</h3>React Fragmentler, DOM hiyerarşisinde gerçek bir düğüm olmadan bir grup JSX elementini gruplandırmaya yarayan özel bir React bileşenidir. Fragmentler, aynı zamanda &lt;&gt;&lt;/&gt; kısayolu ile de kullanılabilir.Fragmentler, birbirine bağlı olan elemanların bir listesini döndürdüğünüzde özellikle yararlıdır. Örneğin, bir tablo içinde bir dizi &lt;tr&gt; elemanını döndürmek istediğinizde, bunları bir &lt;tbody&gt; elementi içinde gruplandırabilirsiniz. Ancak, &lt;tbody&gt; elementi, gerçek bir düğüm olmadan elemanları gruplayabileceğiniz tek yer değildir. Bu tür durumlarda Fragmentler kullanışlıdır.<h3>React Fragmentleri Nasıl Kullanılır?</h3>React Fragmentleri kullanmak çok kolaydır. React fragments, birkaç farklı şekilde kullanılabilir. İşte bunlardan bazıları:<h2>Empty Fragment</h2>Empty fragment, hiçbir şeyi sarmayan bir fragmenttir. Sadece açılış ve kapanış tagleri kullanılır.<pre><code>function Example() {
 return (
 &lt;&gt;
 &lt;p&gt;Paragraph 1&lt;/p&gt;
 &lt;p&gt;Paragraph 2&lt;/p&gt;
 &lt;/&gt;
 );
}</code></pre>Bu örnekte, <code>&lt;p&gt;</code> elemanları, <code>&lt;React.Fragment&gt;</code> veya <code>&lt;div&gt;</code> yerine <code>&lt;&gt;&lt;/&gt;</code> ile sarılmıştır.<h2>Fragment with Key</h2>Fragments, key özelliğini kullanarak bir dizi elemanı gruplamak için kullanılabilir. Bu, birden çok öğeyi içeren bir liste oluşturmak veya yinelemeleri gruplamak için kullanışlıdır.<pre><code>function Example() {
 const items = ['item1', 'item2', 'item3'];

 return (
 &lt;&gt;
 {items.map(item =&gt; (
 &lt;React.Fragment key={item}&gt;
 &lt;li&gt;{item}&lt;/li&gt;
 &lt;/React.Fragment&gt;
 ))}
 &lt;/&gt;
 );
}</code></pre>Bu örnekte, her öğe için bir key özelliği tanımlanmıştır.<h2>Named Fragment</h2>Fragments aynı zamanda isimlendirilebilir. Bu, daha okunaklı bir kod yazmak için kullanışlı olabilir.<pre><code>function Example() {
 return (
 &lt;React.Fragment&gt;
 &lt;header&gt;Header&lt;/header&gt;
 &lt;main&gt;Main Content&lt;/main&gt;
 &lt;footer&gt;Footer&lt;/footer&gt;
 &lt;/React.Fragment&gt;
 );
}</code></pre>Bu örnekte, fragment isimlendirilmiştir.<h3>React Fragmentleri Neden Kullanmalısınız?</h3>React Fragmentleri kullanmanın birkaç avantajı vardır:<ul><li>Daha temiz JSX: Birden fazla elementi gruplamak istediğinizde, &lt;React.Fragment&gt; kullanarak gereksiz bir DOM düğümünü önleyebilirsiniz. Bu, daha temiz ve daha okunaklı JSX kodu üretir.</li><li>Performans: Ekstra DOM düğümleri, uygulamanızın performansını olumsuz etkileyebilir. React Fragmentleri kullanarak gereksiz düğümleri önleyerek, uygulamanızın performansını iyileştirebilirsiniz.</li></ul>

React Fragments

React Portals, React uygulamalarında DOM hiyerarşisi dışında bir yere render etmek için kullanılan bir araçtır. Portals, React uygulamasının normal hiyerarşisi içinde olmayan bir yere render etmek için kullanılabilir. Bu, birçok senaryoda yararlı olabilir, örneğin, bir modal penceresi açmak veya bir tooltip görüntülemek gibi.React Portals, DOM ağacında belirli bir noktada olmayan bileşenleri render etmek için kullanılır. Bunu yaparken, bir Portal, DOM ağacında belirli bir yere monte edilen ve bu bileşenin yine de orijinal yerinde görüneceği bir bileşendir. Böylece, Portal bileşeni oluşturduğunuzda, onun içindeki tüm bileşenler belirtilen yere yerleştirilir.React Portals, özellikle birçok bileşenin üst üste bindiği veya uygulama DOM ağacında işlevsel bir şekilde olmadığı zamanlarda faydalıdır.Örneğin, bir modal bileşeni oluşturmak istediğinizi varsayalım. Bu modal bileşeni, tüm sayfanın üzerinde belirir ve birkaç z-index değeri ile tüm sayfanın geri kalanından ayrılır. Ancak, bu bileşenin normal hiyerarşide yer alması gereken bir yeri yoktur. Bu nedenle, bir Portal kullanarak modal bileşenini ana DOM ağacından ayrı bir yerde render etmek daha iyi olacaktır.Şimdi, bir Portal nasıl oluşturulur ve kullanılır örneklerle birlikte inceleyelim.<h3>Modal bileşeni:</h3>Modal bileşenleri, web uygulamalarında sık sık kullanılan bir bileşendir. Aşağıdaki örnek, bir Portal kullanarak modal bileşenini oluşturur.<pre><code>import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ open, onClose, children }) =&gt; {
 if (!open) return null;

 return ReactDOM.createPortal(
 &lt;div className="modal"&gt;
 &lt;div className="modal-overlay" onClick={onClose} /&gt;
 &lt;div className="modal-content"&gt;{children}&lt;/div&gt;
 &lt;/div&gt;,
 document.body
 );
};

const App = () =&gt; {
 const [showModal, setShowModal] = useState(false);

 return (
 &lt;div&gt;
 &lt;button onClick={() =&gt; setShowModal(true)}&gt;Open Modal&lt;/button&gt;

 &lt;Modal open={showModal} onClose={() =&gt; setShowModal(false)}&gt;
 &lt;h2&gt;Modal Title&lt;/h2&gt;
 &lt;p&gt;Modal Content&lt;/p&gt;
 &lt;/Modal&gt;
 &lt;/div&gt;
 );
};

ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));</code></pre>Yukarıdaki kodda, <code>Modal</code> adında bir bileşen tanımladık. Bu bileşen, <code>open</code>, <code>onClose</code> ve <code>children</code> adında üç özellik alır. <code>open</code> özelliği, modalın açık veya kapalı olup olmadığını belirtir. `onClose <code>onClose</code> özelliği, modalın kapatılması gerektiğinde çalıştırılacak bir fonksiyondur. <code>children</code> özelliği, modal içeriğini içerir.<code>Modal</code> bileşeni, <code>if (!open) return null</code> satırı ile <code>open</code> özelliği false olduğunda null döndürür ve modal görüntülenmez. Aksi takdirde, <code>ReactDOM.createPortal</code> yöntemi kullanılarak modal, <code>document.body</code> içinde oluşturulan bir Portal'a render edilir.<code>App</code> bileşeni, <code>showModal</code> adında bir state değişkeni ve <code>setShowModal</code> adında bir state değişkeni atanır. Bu değişkenler, modalın açık veya kapalı olup olmadığını tutar. <code>Modal</code> bileşeni, <code>showModal</code> özelliğini ve <code>onClose</code> fonksiyonunu kullanarak gösterilir.<h3>React Portal'ın avantajlarından bazıları:</h3><ol><li>DOM hiyerarşisindeki yerleşim esnekliği: Portal kullanarak, bir component'i, normal olarak bir component'in render edilemeyeceği bir yere render edebilirsiniz. Örneğin, bir modal component'in body elemanının hemen altında yer alması gerektiği durumlarda, portal kullanarak bunu kolayca sağlayabilirsiniz.</li><li>CSS kaynaklı problemleri önleme: Portal kullanarak, component'in render edildiği yerdeki CSS özelliklerinden etkilenmeden, istediğiniz CSS özelliklerini kullanabilirsiniz. Böylece, örneğin bir modal component'in z-index'i gibi, başka bir component'in CSS özelliklerinden etkilenmeden, istediğiniz şekilde ayarlanabilir.</li><li>Performance iyileştirmesi: React Portal, bir component'in parent elementinden ayrı bir DOM node'da render edilmesine olanak sağlar. Böylece, component'in parent elementinin herhangi bir güncelleme yapması gerekmediğinde, bu güncellemeler performansı artırarak gerçekleşir.</li><li>Kodun daha okunaklı olması: Portal kullanarak, component'in parent elementinden ayrılmış şekilde render edilmesi, kodun daha okunaklı ve yönetilebilir olmasına yardımcı olur.</li><li>Accessibility geliştirmeleri: Portal kullanarak, component'in render edildiği yerin accessibility özelliklerini kolayca yönetebilirsiniz. Böylece, component'in erişilebilirliği ve kullanılabilirliği artırılabilir.</li></ol>Bu avantajlar, React Portal'ın React uygulamalarında kullanılması için önemli bir neden olabilir. Ancak, her kullanım senaryosunda dikkatli bir şekilde ele alınmalıdır.

React Portals

React, birçok farklı kullanım senaryosu için optimize edilmiş bir JavaScript kütüphanesidir. React kullanarak, kullanıcı arayüzü bileşenlerini oluşturabilir ve yönetebilirsiniz. React bileşenleri, değiştirilebilir özellikler ve içeriklerle birlikte özelleştirilebilir ve tekrar kullanılabilir. Bu özellikleri sayesinde, React, uygulamalarınızın performansını ve verimliliğini artırmak için birçok seçenek sunar.React Refs, React bileşenlerinde bulunan bir özelliktir. Bu özellik, DOM düğümlerine ve diğer bileşenlere erişim sağlar. Refs, bir React uygulaması içindeki öğeleri işaret etmek için kullanılan referanslardır. Ref'ler, bir React bileşeninin ömrü boyunca devam eder. Böylece, bileşen her render edildiğinde, ref'ler güncellenir ve geçerli DOM düğümlerine ve bileşenlere erişim sağlar.useRef, React'in bir başka özelliğidir ve işlev bileşenlerinde kullanılmak üzere tasarlanmıştır. useRef hook, işlev bileşenleri içinde değişkenler oluşturmanıza olanak tanır. Bu değişkenler, bileşenin ömrü boyunca tutulur ve güncellenebilir.useRef, DOM düğümlerine ve bileşenlere erişmek için kullanılabilir. useRef hook, özellikle, form verileri, animasyonlar, seçili öğeler ve diğer birçok kullanım senaryosu için kullanışlıdır.Şimdi, useRef hook ve ref'lerin kullanımını açıklayan bir örnek inceleyelim:<h3>useRef hook kullanımı:</h3><pre><code>import { useRef } from 'react';

function MyComponent() {
 const myRef = useRef(null);

 function handleClick() {
 myRef.current.focus();
 }

 return (
 &lt;div&gt;
 &lt;input type="text" ref={myRef} /&gt;
 &lt;button onClick={handleClick}&gt;Odakla&lt;/button&gt;
 &lt;/div&gt;
 );
}</code></pre>Bu örnekte, useRef hook, bir girdi alanının odaklanmasını sağlamak için kullanılır. useRef, myRef adlı bir değişken oluşturur. Bu değişken, girdi alanının referansını tutar. handleClick fonksiyonu, myRef.current.focus() satırını kullanarak girdi alanını odaklar.useRef hook, React bileşenlerinin esnekliğini artırır ve React uygulamaları oluşturmak için daha fazla seçenek sunar.Özetle, <code>useRef</code> hook React uygulamalarında kullanılabilecek faydalı bir hook'dur, ancak state yönetimi için değil, component'in diğer kısımlarında referans tutmak için kullanılmalıdır.

React Refs ve useRef Hook

React'ta, bir bileşen (component) kontrol edilen (controlled) veya kontrolsüz (uncontrolled) olabilir.Kontrollü bileşenler (controlled components), değerlerini genellikle ana bileşen durumundan (state) veya başka bir bileşenin durumundan (props) alırlar ve bu değerler bileşen tarafından belirlenir ve değiştirilir. Bu tür bileşenler, form elemanları (input, select, textarea vb.) için kullanılır. Örneğin:<pre><code>import React, { useState } from "react";

function ControlledComponentExample() {
 const [value, setValue] = useState("");

 function handleChange(event) {
 setValue(event.target.value);
 }

 return (
 &lt;div&gt;
 &lt;label&gt;
 Name:
 &lt;input type="text" value={value} onChange={handleChange} /&gt;
 &lt;/label&gt;
 &lt;p&gt;You typed: {value}&lt;/p&gt;
 &lt;/div&gt;
 );
}

export default ControlledComponentExample;</code></pre>Bu örnekte, <code>value</code> durumu, input alanının değerini tutar ve <code>handleChange</code> fonksiyonu, input alanının değeri değiştiğinde çağrılır ve <code>value</code> durumunu günceller.Kontrolsüz bileşenler (uncontrolled components), değerlerini genellikle DOM aracılığıyla doğrudan alırlar. Bu tür bileşenler, form elemanları için de kullanılabilir, ancak daha az sık kullanılırlar. Örneğin:<pre><code>import React, { useRef } from "react";

function UncontrolledComponentExample() {
 const inputRef = useRef(null);

 function handleSubmit(event) {
 event.preventDefault();
 console.log(inputRef.current.value);
 }

 return (
 &lt;div&gt;
 &lt;form onSubmit={handleSubmit}&gt;
 &lt;label&gt;
 Name:
 &lt;input type="text" ref={inputRef} /&gt;
 &lt;/label&gt;
 &lt;button type="submit"&gt;Submit&lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 );
}

export default UncontrolledComponentExample;</code></pre>Bu örnekte, input alanı bir ref ile <code>inputRef</code> değişkenine bağlanır. Form gönderildiğinde <code>handleSubmit</code> fonksiyonu, input alanının değerini alır ve konsola yazdırır.Fonksiyonel bileşenlerde (functional components), kontrol edilen veya kontrolsüz bileşenler oluşturulabilir. Yukarıdaki örnekler, fonksiyonel bileşenlerde kullanılan örneklerdir. Sınıf bazlı bileşenlerde, kontrol edilen bileşenler genellikle <code>render</code> metodunda oluşturulurken, kontrolsüz bileşenler genellikle <code>ref</code> kullanarak oluşturulur.<h3>Faydaları ve Zararları:</h3>Kontrollü bileşenlerin (controlled components) faydaları şunlardır:<ul><li>Bileşen durumu (state) tek bir kaynaktan kontrol edildiğinden, uygulamanın tutarlı bir durumda kalması kolaylaşır.</li><li>Bileşen durumu, bileşenler arasında kolayca iletilir, böylece uygulama içindeki farklı bileşenler arasında bilgi paylaşımı daha kolaydır.</li><li>Bileşenin görsel durumu, bileşen durumuyla doğrudan ilişkilendirildiği için, durum değişiklikleri bileşenin doğru bir şekilde güncellenmesini sağlar.</li></ul>Kontrolsüz bileşenlerin (uncontrolled components) faydaları şunlardır:<ul><li>Kod yazmak daha kolaydır. Bileşen durumunu yönetmenize gerek yoktur ve bu nedenle daha az kod yazmanız gerekmektedir.</li><li>Kullanıcı etkileşimleri daha hızlı gerçekleşir. Değerler doğrudan DOM'dan alındığı için, bileşen durumunu güncellemek için herhangi bir işlem yapmanıza gerek yoktur.</li></ul>Kontrollü bileşenlerin bazı dezavantajları şunlardır:<ul><li>Kod yazmak daha uzun sürebilir. Bileşen durumunun yönetimi daha fazla kod yazmanız gerektirebilir.</li><li>Daha fazla yönetim gerektirir. Bileşen durumunu yönetmek için ek kod yazmak ve durum değişikliklerine dikkat etmek gereklidir.</li></ul>Kontrolsüz bileşenlerin bazı dezavantajları şunlardır:<ul><li>Bileşen durumu doğrudan DOM'dan alındığı için, uygulamanın durumu daha zor kontrol edilir ve bu nedenle uygulama daha az tutarlı olabilir.</li><li>Bileşenler arasında bilgi paylaşımı daha zordur.</li></ul><h3>Peki bu kavramlar neden var?</h3>Kontrollü ve kontrolsüz bileşenlerin kullanımı, farklı senaryolara bağlı olarak farklı avantajlar sağladığı için ihtiyaç duyulmuştur.Kontrollü bileşenler genellikle uygulamanın durumunu tek bir yerden kontrol etmek istediğimiz durumlarda kullanılır. Bu, uygulamanın durumunu kolayca yönetebilmemizi ve farklı bileşenler arasında durum bilgisini kolayca paylaşabilmemizi sağlar. Örneğin, bir form bileşeni içindeki tüm girdilerin değerlerini tek bir nesne içinde depolayarak, form gönderildiğinde kolayca işlenebilir hale getirebiliriz.Kontrolsüz bileşenler ise, daha küçük ve basit bileşenlerde kullanılabilecek bir yöntemdir. Özellikle, kullanıcı tarafından yapılan girdilerin doğrudan alındığı durumlarda kullanılabilir. Bu, uygulamanın durumunu daha az yönetebilsek de, daha hızlı ve daha az kodla yazılmasını sağlar. Örneğin, bir arama kutusu bileşeni içindeki metin girişinin değerini doğrudan DOM'dan alarak, kullanıcının yaptığı aramanın sonuçlarını hızlı bir şekilde gösteririz.Bu nedenle, kontrollü ve kontrolsüz bileşenlerin kullanımı senaryoya ve bileşen tipine bağlı olarak değişebilir. Kontrollü bileşenler daha büyük ve karmaşık bileşenlerde, kontrolsüz bileşenler ise daha küçük ve basit bileşenlerde kullanılabilir.

Controlled  ve Uncontrolled Componentler

Merhaba arkadaşlar! Uzun yıldır React geliştiricisi olarak, bu yazımda sizlere React'ta side effects kavramından ve onunla nasıl başa çıkabileceğimize dair örneklerle anlatmak istediğim <code>useEffect</code> hook'unun kullanımından bahsedeceğim.<h2>Side Effects Nedir?</h2>React bileşenleri genellikle saf fonksiyonlardır, yani verilen girdilere göre sabit bir çıktı üretirler. Ancak, bazı durumlarda bileşenlerimizin dış dünya ile etkileşime girmesi gerekebilir. İşte bu tür etkileşimlere side effects (yan etkiler) denir. Side effects şunları içerebilir:<ul><li>Veri almak veya göndermek</li><li>Abonelikleri yönetmek</li><li>DOM'a manuel olarak müdahale etmek</li><li>Zamanlayıcılar kullanmak</li></ul>Bu tür işlemler, bileşenlerin düzgün çalışması için önemlidir ancak doğru şekilde yönetilmezse karmaşaya yol açabilir. İşte burada <code>useEffect</code> devreye giriyor!<h2>useEffect Kullanımı</h2>React Hooks sayesinde, fonksiyonel bileşenlerde de side effect'leri yönetebiliriz. <code>useEffect</code> hook'u, yan etkileri yönetmek ve bileşenlerimizin yaşam döngüsüne müdahale etmek için kullanılır. Şimdi temel kullanımı ve örneklerle bu hook'u inceleyelim.<h3>Temel Kullanım</h3><code>useEffect</code> fonksiyonunu kullanmak için öncelikle React'tan içe aktarmanız gerekir:<pre><code>import React, { useEffect } from 'react';</code></pre><code>useEffect</code> fonksiyonu, bir bileşen render edildiğinde çalışacak bir callback fonksiyonu ve isteğe bağlı olarak bağımlılıkları belirten bir dizi alır. İşte temel kullanımı:<pre><code>useEffect(() =&gt; {
 // Yan etkileri burada yönetin

 return () =&gt; {
 // İsteğe bağlı temizleme işlemleri
 };
}, [/* bağımlılıklar */]);</code></pre><h3>Örnek: Veri Çekmek</h3>Bir API'dan veri çekmek gibi bir yan etkiyi yönetmek için <code>useEffect</code> kullanalım. Aşağıdaki örnek, <code>userId</code> değişkenine bağlı olarak bir kullanıcının bilgilerini getiren bir bileşendir.<pre><code>import React, { useState, useEffect } from 'react';

const UserProfile = ({ userId }) =&gt; {
 const [user, setUser] = useState(null);
 const [isLoading, setIsLoading] = useState(true);

 useEffect(() =&gt; {
 const fetchData = async () =&gt; {
 setIsLoading(true);
 const response = await fetch(`https://api.example.com/users/${userId}`);
 const userData = await response.json();
 setUser(userData);
 setIsLoading(false);
 };

 fetchData();
 }, [userId]);

 return (
 &lt;div&gt;
 {isLoading ? (
 &lt;p&gt;Loading...&lt;/p&gt;
 ) : (
 &lt;div&gt;
 &lt;h2&gt;{user.name}&lt;/h2&gt;
 &lt;p&gt;Email: {user.email}&lt;/p&gt;
 &lt;/div&gt;
 )}
 &lt;/div&gt;
 );
};</code></pre>Bu örnekte, <code>useEffect</code> hook'u <code>userId</code> değişkenine bağımlı olarak veri çekme işlemini gerçekleştirir. Eğer <code>userId</code> değişirse, <code>useEffect</code> callback'i yeniden çalışır ve yeni verileri getirir.<h3>Örnek: Abonelikleri Yönetmek</h3>Bir WebSocket aboneliği gibi sürekli güncel veri akışı gerektiren durumlarda da <code>useEffect</code> kullanabiliriz. İşte bir örnek:<pre><code>import React, { useState, useEffect } from 'react';

const LiveChat = ({ chatId }) =&gt; {
 const [messages, setMessages] = useState([]);

 useEffect(() =&gt; {
 const socket = new WebSocket(`wss://chat.example.com/${chatId}`);

 socket.onmessage = (event) =&gt; {
 const messageData = JSON.parse(event.data);
 setMessages((prevMessages) =&gt; [...prevMessages, messageData]);
 };

 return () =&gt; {
 socket.close(); // Abonelik sonlandığında temizleme işlemi
 };
 }, [chatId]);

 return (
 &lt;div&gt;
 &lt;h2&gt;Live Chat&lt;/h2&gt;
 &lt;ul&gt;
 {messages.map((message, index) =&gt; (
 &lt;li key={index}&gt;{message.text}&lt;/li&gt;
 ))}
 &lt;/ul&gt;
 &lt;/div&gt;
 );
};</code></pre>Bu örnekte, <code>useEffect</code> hook'u <code>chatId</code> değişkenine bağımlı olarak WebSocket aboneliğini yönetir. Eğer <code>chatId</code> değişirse, önceki abonelik kapatılır ve yeni bir abonelik başlatılır.Sonuç olarak, <code>useEffect</code> hook'u, React bileşenlerinde side effect'leri yönetmek için güçlü ve esnek bir araçtır. Umarım bu yazıyla <code>useEffect</code> kullanımına dair fikir sahibi olmuşsunuzdur. Başarılar!

React'ta Side Effects ve useEffect Kullanımı

React'ta state yönetiminde kullanılan iki önemli hook'tan biri <code>useState</code> iken diğeri ise <code>useReducer</code>'dır. <code>useReducer</code>, state'in yönetimini sağlamak için kullanılan bir hook'tur ve özellikle büyük ve karmaşık state'lerin yönetiminde daha iyi bir seçenek olarak kabul edilir.<code>useReducer</code>, bir <code>state</code> ve bir <code>dispatch</code> fonksiyonunu döndürür. <code>dispatch</code> fonksiyonu, <code>state</code>'i güncellemek için kullanılır. <code>useReducer</code> hook'u, bir <code>reducer</code> fonksiyonunu ve başlangıç state'ini alır. <code>reducer</code> fonksiyonu, mevcut state ve bir <code>action</code> nesnesi alır ve yeni bir state nesnesi döndürür.<code>useReducer</code> hook'u, özellikle birden fazla state'i tek bir <code>reducer</code> fonksiyonu kullanarak yönetmek istediğimiz zamanlarda kullanışlıdır. Bu sayede, state'ler arasındaki ilişki daha net bir şekilde ortaya çıkabilir.<h2>useState İle Sayaç Örneği</h2>Şimdi, bir sayacın yönetimini<code>useState</code>ile yaparak örneklendirelim. Aşağıdaki örnek, sayacın state'ini ve <code>setCount</code> fonksiyonunu döndüren <code>useState</code> hook'unu kullanmaktadır:<pre><code>import React, { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 function handleIncrement() {
 setCount(count + 1);
 }

 function handleDecrement() {
 setCount(count - 1);
 }

 return (
 &lt;div&gt;
 &lt;p&gt;Count: {count}&lt;/p&gt;
 &lt;button onClick={handleIncrement}&gt;+&lt;/button&gt;
 &lt;button onClick={handleDecrement}&gt;-&lt;/button&gt;
 &lt;/div&gt;
 );
}
</code></pre>Bu örnekte, <code>useState</code> hook'u, <code>count</code> adlı bir state ve <code>setCount</code> adlı bir fonksiyon döndürür. <code>count</code> state'i, <code>0</code> ile başlatılır.<code>handleIncrement</code> ve <code>handleDecrement</code> fonksiyonları, <code>setCount</code> fonksiyonunu kullanarak <code>count</code> state'ini güncellemek için kullanılır. Örneğin, <code>handleIncrement</code> fonksiyonu <code>setCount(count + 1)</code> çağrısı yaparak <code>count</code> state'ini <code>1</code> artırır.<h2>useReducer Kullanımı</h2>Şimdi, aynı sayacın yönetimini<code>useReducer</code> ile yaparak örneklendirelim. Aşağıdaki örnekte, <code>count</code> adlı bir state tanımlanmıştır ve <code>reducer</code> fonksiyonu, <code>INCREMENT</code> veya <code>DECREMENT</code> tiplerindeki <code>action</code> nesnelerine göre state'i günceller:<pre><code>import React, { useReducer } from 'react';

function reducer(state, action) {
 switch (action.type) {
 case 'INCREMENT':
 return state + 1;
 case 'DECREMENT':
 return state - 1;
 default:
 return state;
 }
}

function Counter() {
 const [count, dispatch] = useReducer(reducer, 0);

 function handleIncrement() {
 dispatch({ type: 'INCREMENT' });
 }

 function handleDecrement() {
 dispatch({ type: 'DECREMENT' });
 }

 return (
 &lt;div&gt;
 &lt;p&gt;Count: {count}&lt;/p&gt;
 &lt;button onClick={handleIncrement}&gt;+&lt;/button&gt;
 &lt;button onClick={handleDecrement}&gt;-&lt;/button&gt;
 &lt;/div&gt;
 );
}</code></pre>Bu örnekte, <code>useReducer</code> hook'u, <code>reducer</code> fonksiyonunu ve başlangıç state'ini aldıktan sonra bir <code>state</code> nesnesi ve bir <code>dispatch</code> fonksiyonu döndürür. <code>state</code> nesnesi, <code>0</code> ile başlatılır.<code>dispatch</code> fonksiyonu, <code>INCREMENT</code> veya <code>DECREMENT</code> tiplerindeki <code>action</code> nesnelerini alır ve <code>reducer</code> fonksiyonuna göndererek, state'i günceller. Bu örnekte, <code>dispatch({ type: 'INCREMENT' })</code> veya <code>dispatch({ type: 'DECREMENT' })</code> çağrıları, <code>reducer</code> fonksiyonuna gönderilen <code>action</code> nesneleridir.<code>reducer</code> fonksiyonu, mevcut <code>state</code>'i ve belirli bir <code>action</code> nesnesini alır. <code>action</code> nesnesine göre, yeni bir <code>state</code> nesnesi oluşturulur ve döndürülür. Bu örnekte, <code>INCREMENT</code> <code>action</code>'ı gönderildiğinde, <code>count</code> değeri <code>1</code> arttırılır ve yeni bir <code>state</code> nesnesi oluşturulur. Benzer şekilde, <code>DECREMENT</code> <code>action</code>'ı gönderildiğinde, <code>count</code> değeri <code>1</code> azaltılır ve yeni bir <code>state</code> nesnesi oluşturulur.<code>useReducer</code>, <code>reducer</code> fonksiyonu kullanarak state yönetimini sağlar ve birden fazla state'i tek bir yerden yönetmeyi kolaylaştırır. <code>useReducer</code>'ı kullanarak, karmaşık state'lerin yönetimini daha etkili bir şekilde yapabiliriz.<h2>Sonuç</h2>Bu yazıda, React uygulamalarında state yönetimini sağlamak için kullanılan <code>useState</code> ve <code>useReducer</code> hook'larını inceledik. <code>useState</code> hook'u, tek bir state'i yönetmek için kullanılırken, <code>useReducer</code> hook'u daha büyük ve karmaşık state'leri yönetmek için kullanışlıdır. <code>useReducer</code>'ın kullanımı, özellikle birden fazla state'i yönetmek istediğimiz zamanlarda daha etkili olabilir. Ancak, basit state'lerin yönetimi için <code>useState</code> daha uygun olabilir.Her iki hook da, React'ta state yönetimini daha kolay ve etkili hale getirmek için kullanılan güçlü araçlardır. Hangi hook'un kullanılacağı, uygulamanın gereksinimlerine ve state'in boyutuna göre değişebilir.Özellikle büyük uygulamalarda, state yönetimi önemlidir ve uygun bir yöntem kullanmak performansı ve yönetimi artırabilir. <code>useReducer</code>, state'in yönetimini daha kolay ve daha öngörülebilir hale getirebilir ve daha kolay bir şekilde güncelleme yapmanıza olanak tanır.Umarım bu yazı, <code>useState</code> ve <code>useReducer</code>'ın nasıl kullanılabileceği hakkında fikir edinmenize yardımcı olmuştur. Hangi hook'u kullanmanız gerektiği hakkında daha fazla bilgi edinmek için React'in resmi dokümantasyonuna başvurabilirsiniz.

useReducer Hook'u

React, kullanıcı arayüzü geliştirme için popüler ve güçlü bir JavaScript kütüphanesidir. Birçok uygulamada, uygulamanın durumunu yönetmek ve bileşenler arasında veri akışını kontrol etmek önemlidir. Bu yazıda, React'ta state yönetiminin temel kavramlarına, mevcut araçlara ve iyi uygulamalara değineceğiz.<h2>State Yönetimi Nedir?</h2>State yönetimi, bir uygulamanın durumunu (bileşenlerin mevcut verileri ve UI durumu) kontrol etmeyi ve yönetmeyi ifade eder. Başarılı bir state yönetimi, bileşenlerin ihtiyaç duydukları verilere erişebilmelerini ve güncellemelerin doğru şekilde yansıtılmasını sağlar.<h2>Local State ve Global State</h2>React'ta iki tür state vardır: local state ve global state.Local state, bir bileşenin kendi içindeki verileri ve durumu temsil eder. Bu tür state, sadece ilgili bileşen tarafından yönetilir ve diğer bileşenlerle paylaşılmaz.Global state ise uygulamanın birden fazla bileşeni tarafından paylaşılan ve yönetilen verileri temsil eder. Genellikle, global state'in yönetimi ve güncellemesi için ek araçlara ihtiyaç duyulur.<h2>React'ta State Yönetimi Araçları</h2>React ekosistemi, state yönetimi için çeşitli araçlar sunar. İşte bunlardan bazıları:<ol><li>React Context API: React'in kendi içinde bulunan ve global state yönetimi için kullanılan bir araçtır. Context API, bir üst bileşende değerlerin sağlanması ve alt bileşenlerde değerlerin kullanılması için sağlamaktadır.<pre><code>import React, { createContext, useContext, useState } from 'react';

const AppContext = createContext();

export const useAppContext = () =&gt; useContext(AppContext);

export const AppProvider = ({ children }) =&gt; {
 const [appState, setAppState] = useState({});

 return (
 &lt;AppContext.Provider value={{ appState, setAppState }}&gt;
 {children}
 &lt;/AppContext.Provider&gt;
 );
};
</code></pre></li><li>Redux: React uygulamalarında genellikle kullanılan bir state yönetim kütüphanesidir. Redux, uygulama durumunu tek bir "store"da merkezi bir şekilde yönetmeye olanak tanır. Redux, aksiyonlar ve redüktörler kullanarak state güncellemelerini yönetir ve ön görülebilir bir şekilde çalışır.</li><li>MobX: MobX, gözlemleyiciler ve hareketlerle çalışan başka bir state yönetim kütüphanesidir. MobX, state değişikliklerinin otomatik olarak takip edilmesine ve ilgili bileşenlerin yeniden render edilmesine olanak tanır. Bu, daha az kod yazmayı ve daha hızlı geliştirmeyi sağlar.<pre><code>import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

class AppState {
 count = 0;

 constructor() {
 makeAutoObservable(this);
 }

 increment() {
 this.count += 1;
 }

 decrement() {
 this.count -= 1;
 }
}

const appState = new AppState();

const Counter = observer(() =&gt; {
 const { count, increment, decrement } = appState;

 return (
 &lt;div&gt;
 &lt;h2&gt;Count: {count}&lt;/h2&gt;
 &lt;button onClick={increment}&gt;+&lt;/button&gt;
 &lt;button onClick={decrement}&gt;-&lt;/button&gt;
 &lt;/div&gt;
 );
});

export default Counter;</code></pre></li><li>Recoil: Facebook tarafından geliştirilen ve atomlar ve seçicilerle çalışan modern bir state yönetim kütüphanesidir. Recoil, geliştiricilere daha ince taneli ve modüler bir state yönetimi sunar ve performans odaklıdır.<pre><code>import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';

const counterState = atom({
 key: 'counterState',
 default: 0
});

const counterDisplayState = selector({
 key: 'counterDisplayState',
 get: ({ get }) =&gt; `Count: ${get(counterState)}`
});

const Counter = () =&gt; {
 const [count, setCount] = useRecoilState(counterState);
 const display = useRecoilValue(counterDisplayState);

 return (
 &lt;div&gt;
 &lt;h2&gt;{display}&lt;/h2&gt;
 &lt;button onClick={() =&gt; setCount(count + 1)}&gt;+&lt;/button&gt;
 &lt;button onClick={() =&gt; setCount(count - 1)}&gt;-&lt;/button&gt;
 &lt;/div&gt;
 );
};

export default Counter;</code></pre><h2>İyi Uygulamalar</h2>React'ta state yönetimi için bazı iyi uygulamalar şunlardır:<ol><li>Basit tutun: İlk başta, yerel state ve React Context API kullanarak işe başlayın. Daha karmaşık ve büyük ölçekli durumlar için Redux veya MobX gibi ek araçlara geçiş yapabilirsiniz.</li><li>Tek yönlü veri akışı: Veri akışını yönetmek için tek yönlü veri akışı sağlayın. Bu, verilerin bileşenler arasında kolayca takip edilebilmesine ve güncellemelerin doğru şekilde yansıtılmasına yardımcı olur.</li><li>State'i azaltın: Uygulamanızın performansını artırmak ve karmaşıklığı azaltmak için gereksiz state kullanımından kaçının. State'i sadece gerçekten gerekli olduğunda kullanın ve bunun yerine prop'ları kullanarak bileşenler arasında veri aktarın.</li><li>Bileşenleri küçük tutun: Küçük ve odaklı bileşenler oluşturarak, state yönetiminin daha kolay ve anlaşılabilir olmasını sağlayın. Bu, bileşenlerin yeniden kullanılabilirliğini artırır ve bakımını kolaylaştırır.</li><li>Testler yazın: Uygulamanızın state yönetimini güvenilir bir şekilde sağlamak için testler yazın. Bu, uygulamanızın istikrarını ve kalitesini artıracaktır.</li></ol>Sonuç olarak, React'ta state yönetimi önemli bir konudur ve doğru araçlar ve uygulamalar kullanarak, uygulamanızın performansını, ölçeklenebilirliğini ve bakımını önemli ölçüde geliştirebilirsiniz. Başarıya giden yolda bu iyi uygulamaları benimseyerek ve doğru araçları seçerek başlayın.</li></ol>

React State Yönetimi: Kavramlar, Araçlar ve İyi Uygulamalar

React, kullanıcı arayüzü geliştirme için popüler ve güçlü bir JavaScript kütüphanesidir. Uygulamanın durumunu yönetmek ve bileşenler arasında veri akışını kontrol etmek, başarılı bir uygulama geliştirmenin önemli bir yönüdür. Bu yazıda, React'ta Context API'nin kullanımı, avantajları ve örnekleri üzerinde duracağız.<h2>React Context API Nedir?</h2>React Context API, React uygulamalarında global state yönetimi için kullanılan bir araçtır. Context API, bileşenler arasında veri iletimine olanak sağlar ve <code>props</code> kullanarak veri aktarmanın karmaşıklığından kaçınmanıza yardımcı olur. Böylece, genellikle "prop drilling" olarak adlandırılan problemin üstesinden gelir.<h2>Context API Kullanımı</h2>Context API kullanarak, bileşenler arasında veri sağlama ve tüketme işlemini gerçekleştirebiliriz. İşte Context API'nin temel kullanım adımları:<ol><li>Context oluşturun: <code>createContext</code> fonksiyonunu kullanarak yeni bir context oluşturun:<pre><code>import { createContext } from 'react';

const MyContext = createContext();</code></pre></li><li>Context Provider'ı kullanın: Oluşturulan context'in <code>Provider</code> bileşenini kullanarak, veriyi sağlayacağınız bileşenin etrafını sarmalayın:<pre><code>import MyContext from './MyContext';

const App = () =&gt; {
 const value = { message: 'Hello, World!' };

 return (
 &lt;MyContext.Provider value={value}&gt;
 &lt;ChildComponent /&gt;
 &lt;/MyContext.Provider&gt;
 );
};</code></pre></li><li>Context'i tüketin: Context'i kullanarak, verilere erişmek istediğiniz bileşenlerde <code>useContext</code> hook'unu kullanın:</li></ol><pre><code>import { useContext } from 'react';
import MyContext from './MyContext';

const ChildComponent = () =&gt; {
 const contextValue = useContext(MyContext);

 return &lt;div&gt;{contextValue.message}&lt;/div&gt;;
};</code></pre><h2>Context API'nin Avantajları</h2>React Context API'nin avantajları şunlardır:<ol><li>Kolay veri iletimi: Context API, uygulamanın herhangi bir yerinde verilere kolayca erişmenizi sağlar ve bileşenler arasında veri aktarmanın karmaşıklığını azaltır.</li><li>Prop drilling'den kaçınma: Context API, verilerin doğrudan ilgili bileşenlere iletilmesini sağlayarak, prop drilling problemini ortadan kaldırır.</li><li>Daha az yeniden render: Context API, sadece gerçekten değişen verilerin yeniden render edilmesini sağlar ve böylece uygulamanın performansını artırır.</li></ol><h3>Sınırlamalar ve Dezavantajlar</h3>React Context API, uygulamanın genelinde durumu yönetmeye ve bileşenler arasında veri paylaşmaya yardımcı olsa da, bazı sınırlamalar ve dezavantajlar vardır:<ol><li>Performans sorunları: Context API, tüm çocuk bileşenlerin yeniden render edilmesine neden olabilir, çünkü bir Context'in değeri değiştiğinde, bu değeri kullanan tüm bileşenler yeniden render edilir. Bu, büyük uygulamalar için performans sorunlarına yol açabilir. Bu sorunu hafifletmek için, gereksiz yeniden renderları önlemeye yardımcı olacak <code>React.memo</code> veya <code>shouldComponentUpdate</code> gibi teknikler kullanılabilir.</li><li>Karmaşıklık: Context API, daha karmaşık durum yönetimi gerektiren uygulamalar için daha fazla kod ve düzenleme gerektirebilir. Bu durumda, daha gelişmiş durum yönetimi kütüphaneleri kullanmayı düşünmek daha iyi olabilir (örneğin, Redux).</li><li>Yerel durum kullanımı: Context API'nin tüm uygulamada kullanılması, yerel durum yönetimini zorlaştırabilir. Çok fazla global durum kullanmak yerine, mümkün olduğunca yerel durumu kullanarak bileşenlerin bağımsız ve yeniden kullanılabilir olmasını sağlamak önemlidir.</li><li>Test etme zorlukları: Context API ile uygulama kodunu test etmek, durumu mocklamak ve izole edilmiş testler oluşturmak daha zor olabilir. Bu durumu hafifletmek için, test araçları ve kütüphaneleri kullanarak daha iyi test yaklaşımları geliştirmek önemlidir.</li></ol>Bu sınırlamalar ve dezavantajlara rağmen, Context API, durum yönetimi ve bileşenler arası veri paylaşımı için React'ta kullanışlı ve güçlü bir araçtır. Uygulamanın gereksinimlerine bağlı olarak, Context API'nin doğru kullanımı ve performans optimizasyonları, uygulamanızın daha iyi ve daha esnek hale gelmesine yardımcı olabilir.<h3>Sonuç</h3>React Context API, React uygulamalarında global state yönetimi için güçlü ve esnek bir çözümdür. Kullanımı kolay olması ve doğal olarak React ile entegre olması sayesinde, React Context API, geliştiricilerin bileşenler arasında veri paylaşmayı ve state'i merkezi bir şekilde yönetmeyi hızlı ve etkili bir şekilde gerçekleştirmelerini sağlar.Bu yazıda, React Context API'nin kullanımı, avantajları ve örneklerini ele aldık. Context API'nin sağladığı avantajlar sayesinde, uygulamanızın ölçeklenebilirliği ve bakımı daha kolay hale gelir. İhtiyaçlarınıza göre uygun bir şekilde Context API'yi kullanarak, uygulamanızın performansını ve kullanıcı deneyimini önemli ölçüde geliştirebilirsiniz.

React Context API: Kullanımı, Avantajları ve Örnekler

React Hooks, React'ın fonksiyonel bileşenlerle ilgili yeniliklerinden biridir. Hooks, React uygulamalarınızda durum yönetimi ve yan etkiler gibi bazı önemli özellikleri kullanabilmenizi sağlar. Bu blog yazısında, React Hooks'un temel kurallarını ve bu kuralları nasıl uygulayabileceğinizi göstereceğiz. Ayrıca, örneklerle kuralların nasıl çalıştığını göstereceğiz.<h2>1. Sadece React Fonksiyonlarının Üst Düzeyinde Hooks Kullanın</h2>Hooks kullanırken dikkat etmeniz gereken ilk kural, Hooks'ları yalnızca React fonksiyonlarının en üst düzeyinde kullanmaktır. Yani, döngüler, koşullu ifadeler veya iç içe fonksiyonlar içinde Hooks kullanmaktan kaçınmalısınız. Bu, React'in Hooks çağrılarını doğru sırayla takip etmesini ve durumu doğru bir şekilde yönetmesini sağlar.Örnek:<pre><code>import React, { useState, useEffect } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 useEffect(() =&gt; {
 document.title = `Count: ${count}`;

 return () =&gt; {
 document.title = 'React App';
 };
 }, [count]);

 return (
 &lt;div&gt;
 &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increase Count&lt;/button&gt;
 &lt;p&gt;Count: {count}&lt;/p&gt;
 &lt;/div&gt;
 );
}

export default Counter;</code></pre>Yukarıdaki örnekte, <code>useState</code> ve <code>useEffect</code> Hooks'ları doğrudan fonksiyon bileşeni içinde ve en üst düzeyde kullanılır.<h2>2. Yalnızca React Fonksiyonlarından Hooks Kullanın</h2>Hooks'ları yalnızca React fonksiyon bileşenlerinde veya özel Hooks'larda kullanmalısınız. Normal JavaScript fonksiyonları içinde Hooks kullanmaktan kaçının.Örnek:<pre><code>import React, { useState, useEffect } from 'react';

function useDocumentTitle(title) {
 useEffect(() =&gt; {
 document.title = title;

 return () =&gt; {
 document.title = 'React App';
 };
 }, [title]);
}

function Counter() {
 const [count, setCount] = useState(0);

 useDocumentTitle(`Count: ${count}`);

 return (
 &lt;div&gt;
 &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increase Count&lt;/button&gt;
 &lt;p&gt;Count: {count}&lt;/p&gt;
 &lt;/div&gt;
 );
}

export default Counter;</code></pre>Yukarıdaki örnekte, özel bir Hook olan <code>useDocumentTitle</code> oluşturduk. Bu Hook, <code>useEffect</code> Hook'unu kullanır ve yalnızca React fonksiyon bileşeni olan <code>Counter</code> içinde çağrılır.<h2>3. Özel Hooks İsimlendirmesi: "use" İle Başlayan İsimler Kullanın</h2>React Hooks, kullanıcıların kendi özel Hooks'larını oluşturmasına olanak tanır. Bu özel Hooks'lar, genellikle belirli işlevleri kapsüllemek veya tekrar kullanılabilir mantığı paylaşmak için kullanılır. Özel Hooks oluştururken, isimlendirmeye dikkat etmek önemlidir. İyi bir uygulama, özel Hooks'ların adının <code>use</code> ile başlamasını sağlamaktır. Bu, Hooks'un doğru kullanıldığından emin olmanıza ve kodunuzun okunabilirliğini artırmanıza yardımcı olur.<pre><code>import React, { useState, useEffect } from 'react';

function useCustomCounter(initialValue) {
 const [count, setCount] = useState(initialValue);

 const increment = () =&gt; {
 setCount(count + 1);
 };

 const decrement = () =&gt; {
 setCount(count - 1);
 };

 return { count, increment, decrement };
}

function Counter() {
 const { count, increment, decrement } = useCustomCounter(0);

 return (
 &lt;div&gt;
 &lt;button onClick={increment}&gt;Increase Count&lt;/button&gt;
 &lt;button onClick={decrement}&gt;Decrease Count&lt;/button&gt;
 &lt;p&gt;Count: {count}&lt;/p&gt;
 &lt;/div&gt;
 );
}

export default Counter;</code></pre>Yukarıdaki örnekte, <code>useCustomCounter</code> adında bir özel Hook oluşturduk. Bu Hook, sayaç işlemleri için tekrar kullanılabilir mantığı içerir ve <code>useState</code> Hook'unu kullanır. <code>use</code> öneki, bu fonksiyonun bir Hook olduğunu ve React Hooks kurallarına uygun kullanılması gerektiğini belirtir.React Hooks kurallarına uyarak, uygulamanızın düzgün ve hızlı bir şekilde çalışmasını sağlayabilirsiniz. Başarıyla kurulan Hooks, React uygulamalarınızın ölçeklenebilirliğini, okunabilirliğini ve bakımını kolaylaştırır. Bu nedenle, Hooks kullanırken bu iki temel kuralı dikkate alarak uygulamanızın doğru çalışmasını sağlayın.

React Hooks Kuralları (Rules of Hooks)

React, modern web uygulamaları geliştirmenin en popüler yollarından biridir. Bu yazıda, React'ın çalışma mantığını, bileşenlerin ne zaman güncellendiğini, Sanal DOM ile olan ilişkisini ve bu güncellemeleri optimize etmek için kullanılan <code>useCallback</code>, <code>React.memo</code>, ve <code>useMemo</code> gibi hook'ları inceleyeceğiz.<h2>React'ın Çalışma Mantığı ve Bileşen Güncellemeleri</h2>React, bileşen tabanlı bir yapı kullanır ve her bileşen kendi durumuna sahip olabilir. Bileşenin durumu veya özellikleri değiştiğinde, bileşen yeniden render olur. Bu güncellemeler, kullanıcı arayüzünün daima güncel ve etkileşimli olmasını sağlar.<h3>Sanal DOM (Virtual DOM)</h3>React'ın performansı, Sanal DOM kavramı ile sağlanır. Sanal DOM, gerçek DOM'un hafif bir kopyasıdır ve değişiklikler öncelikle Sanal DOM üzerinde gerçekleştirilir.Gerçek DOM'a uygulanan değişiklikler oldukça maliyetli olabilir. React, Sanal DOM üzerinde değişiklikleri hızlı bir şekilde hesaplar, ardından gerçek DOM üzerinde yalnızca gerekli değişiklikleri yapar.<h2>Optimizasyon Teknikleri</h2>React, performansı artırmak ve gereksiz render'ları önlemek için birkaç önemli hook ve metod sunar.<h2>-React.memo</h2><code>React.memo</code>, bileşenin yalnızca özellikleri değiştiğinde yeniden render olmasını sağlar.Örnek:<pre><code>const MyComponent = React.memo((props) =&gt; {
 return &lt;div&gt;{props.name}&lt;/div&gt;;
});</code></pre><code>MyComponent</code> bileşeni yalnızca <code>props.name</code> değiştiğinde yeniden render olur.<h2>-useCallback</h2><code>useCallback</code> hook'u, gereksiz fonksiyon yeniden oluşturmalarını önlemek için kullanılır. Aynı fonksiyon referansını korur, böylece bileşenlerin gereksiz yere yeniden render olmalarını engeller.Örnek:<pre><code>const MyComponent = (props) =&gt; {
 const handleClick = useCallback(() =&gt; {
 console.log('Tıklandı');
 }, []);

 return &lt;button onClick={handleClick}&gt;Tıkla&lt;/button&gt;;
};</code></pre><h2>-useMemo</h2><code>useMemo</code> hook'u, pahalı hesaplamaların gereksiz yere tekrar tekrar yapılmasını önler.Örnek:<pre><code>const ExpensiveComponent = (props) =&gt; {
 const computedValue = useMemo(() =&gt; {
 // Burada pahalı bir hesaplama yapılır
 }, [props.input]);

 return &lt;div&gt;{computedValue}&lt;/div&gt;;
};</code></pre><h2>Sonuç</h2>React'ın arkasındaki çalışma mantığı ve optimizasyon teknikleri, uygulamanızın hem kullanıcı deneyimini hem de performansını artırabilir. <code>React.memo</code>, <code>useCallback</code>, ve <code>useMemo</code> gibi araçlar, geliştiricilere bileşenlerin ne zaman ve nasıl güncelleneceğini daha hassas bir şekilde kontrol etme olanağı sunar. Uygulamanızın ihtiyaçlarına uygun olarak bu tekniklerden yararlanmak, daha hızlı ve etkili bir kullanıcı arayüzü oluşturmanıza yardımcı olabilir.

React Optimizasyon Teknikleri: Çalışma Mantığı, Güncellemeler ve Sanal DOM

React, web geliştiricileri arasında popüler bir JavaScript kütüphanesi olmuştur. Ancak büyük ve karmaşık React uygulamaları geliştirirken, bileşenler arası durumu etkili bir şekilde yönetmek zorlaşabilir. İşte bu noktada Redux devreye girer. Redux, React uygulamalarında durum yönetimini basit ve ölçeklenebilir bir şekilde çözmeye yardımcı olan güçlü bir araçtır. Bu yazıda, Redux'i kullanarak React uygulamalarınızda nasıl veri yönetebileceğinizi öğreneceksiniz.<h2>Redux Nedir?</h2>Redux, bir React uygulamasındaki bileşenler arası veya uygulama genelindeki durumu yönetmek için tasarlanmış bir durum yönetim sistemidir. Redux, değişen verileri etkileyen ve uygulamanın davranışını ve ekranda neyin görüntülendiğini yönetmek için kullanılır.<h2>Redux Temel Kavramlar</h2>Redux'i anlamak için temel kavramlar. Redux, bir React uygulamasındaki genel veya bileşenler arası durumu yönetmek için tasarlanmış bir JavaScript kütüphanesidir. Redux, veriyi merkezi bir depoda saklar ve bu depodaki verilere erişmek ve bunları güncellemek için belirli eylemler kullanır.<h2>Redux'ın Kullanılabileceği Bazı Durumlar</h2>Yerel Durum (Local State): Yerel durum, yalnızca bir bileşen içindeki kullanıcı arayüzünü etkileyen verileri ifade eder. Örneğin, kullanıcı girişi yakalıyor ve her tuş vuruşuyla bu girişi bir durum değişkeninde depoluyorsak veya ayrıntılı bilgilerin görünürlüğünü değiştiren bir düğmemiz varsa, bu yerel durum olarak kabul edilir. Genellikle yerel durumu, useState veya daha karmaşık durumlar için useReducer kullanarak bileşen içinde yönetiriz.Bileşenler Arası Durum (Cross-Component State): Bileşenler arası durum, yalnızca bir bileşeni değil, birden çok bileşeni etkileyen verileri içerir. Örneğin, bir modal pencereyi açan veya kapatan bir düğmeniz varsa, bu modal bileşeni uygulamanın birden çok bileşenini etkileyebilir. Modalı açmak için tetikleyici modal bileşeni içinde değil, başka bir yerde bulunabilir. Bileşenler arası durumu yönetmek için hala useState veya useReducer kullanabiliriz, ancak veri ve işlevleri bileşenler arası iletmek için props kullanmamız gerekir. Bu, genellikle "prop drilling" olarak adlandırılan daha karmaşık bir yapıya yol açabilir.Uygulama Genelindeki Durum (App-Wide State): Uygulama genelindeki durum, uygulamanın tamamı boyunca tüm bileşenleri etkileyen verileri ifade eder. Buna örnek olarak kullanıcı kimlik doğrulaması verilebilir. Bir kullanıcı oturum açtığında, bu, gezinme çubuğunda değişikliklere neden olabilir, yeni seçenekleri gösterebilir ve kullanıcının kimlik doğrulama durumuna bağlı olarak farklı verileri görüntüleyen çeşitli diğer bileşenleri etkileyebilir.Bu üç temel durum türünü anladığınızda, Redux'i daha etkili bir şekilde kullanarak React uygulamanızdaki veri yönetimini daha iyi anlayabilirsiniz. Redux, bu farklı durum türlerini etkili bir şekilde ele almanıza yardımcı olabilir ve uygulamanızın daha düzenli ve ölçeklenebilir olmasını sağlayabilir.<h2>Sonuç</h2>Redux, React uygulamalarında durum yönetimini basit ve ölçeklenebilir hale getirmenin etkili bir yolunu sunar. Bu yazı, Redux'in temel kavramlarını ve React uygulamalarınızda nasıl kullanılacağını anlatarak, React geliştiricilerine Redux'in gücünü göstermeyi amaçlar. Redux'i öğrenmek, React uygulamalarınızı daha düzenli ve etkili bir şekilde geliştirmenize yardımcı olabilir.

Redux ile React Uygulamalarında State Yönetimi

React ile geliştirme yaparken, birçok uygulama global bir state yönetimine ihtiyaç duyar. Kullanıcı oturumu, uygulama arayüz dili veya ana veri gibi verilere her sayfada erişebilme ihtiyacı, component'lar arasında veri iletimini karmaşıklaştırabilir. Redux ve Context API, bu tür global state yönetimi ihtiyaçlarını karşılamak için iki yaklaşım sunar. Ancak bu iki yaklaşım arasındaki farklar nelerdir?<h2>Neden Global State Yönetimine İhtiyaç Var?</h2>Proje karmaşıklığı arttıkça, component sayısı ve gereksinimler de artar. Bu durumda, veri iletimi daha sık hale gelir ve prop geçişi (props drilling) gibi bir sorunla karşılaşabiliriz. Bu, kodun okunabilirliğini azaltabilir ve bakımı zorlaştırabilir. Global bir state yönetimi, bu sorunları çözmek için kullanılabilir.Örnek:Aşağıdaki örnekte, MainPage adlı bir component'ten başlayarak, user ve language adlı iki state'in veri geçişini görüyoruz. Bu veriler, prop olarak ProductPage adlı bir component'e aktarılıyor. Ancak bu, kodun okunabilirliğini azaltabilir ve soruları artırabilir: "Bu veriler nereden geliyor?" ve "Bu verilerin kaynağı nedir?"<pre><code>// MainPage.js
import React from 'react';
import ProductPage from './ProductPage';

const MainPage = () =&gt; {
 const user = 'John Doe';
 const language = 'English';

 return (
 &lt;div&gt;
 &lt;h1&gt;Welcome, {user}!&lt;/h1&gt;
 &lt;ProductPage user={user} language={language} /&gt;
 &lt;/div&gt;
 );
};

export default MainPage;
</code></pre><pre><code>// ProductPage.js
import React from 'react';

const ProductPage = ({ user, language }) =&gt; {
 // ...
 return (
 &lt;div&gt;
 &lt;p&gt;User: {user}&lt;/p&gt;
 &lt;p&gt;Language: {language}&lt;/p&gt;
 {/* ... */}
 &lt;/div&gt;
 );
};

export default ProductPage;
</code></pre><h2>Global State Yönetimi Nasıl Çalışır?</h2>State yönetimi yapısı, temel olarak üç bileşenden oluşur:<ol><li>Store: Global olarak saklanması gereken verilerin bulunduğu depo alanı.</li><li>Reducer: Global verileri güncelleyen fonksiyonlar topluluğu.</li><li>Provider: Component'leri saran ve yönlendiren bir bağlam (context) bileşeni.</li></ol>Her iki yaklaşım, bu temel bileşenleri paylaşır. Projede bir mağaza (store) oluşturur ve global stateleri bu mağazada tanımlarsınız. Reducer ile bu stateleri güncelleyen fonksiyonları oluşturursunuz. Provider ile projenizi sarmalayarak gerekli bilgileri bu sağlayıcıya iletilir. Bu işlemleri bir kez yaparsınız ve daha sonra context'e bileşenlerden erişebilir ve global statelerinizi yönetebilirsiniz.Örnekler:Context API:<pre><code>// store.js
import React, { createContext, useReducer } from 'react';

const initialState = {
 user: '',
 language: '',
};

export const Context = createContext();

export const StoreProvider = ({ children }) =&gt; {
 const [state, dispatch] = useReducer(reducer, initialState);

 return (
 &lt;Context.Provider value={{ state, dispatch }}&gt;
 {children}
 &lt;/Context.Provider&gt;
 );
};
</code></pre><pre><code>// reducer.js
const reducer = (state, action) =&gt; {
 switch (action.type) {
 case 'SET_USER':
 return { ...state, user: action.payload };
 case 'SET_LANGUAGE':
 return { ...state, language: action.payload };
 default:
 return state;
 }
};

export default reducer;</code></pre><h2>Redux:</h2><pre><code>// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;</code></pre><pre><code>// reducer.js
const initialState = {
 user: '',
 language: '',
};

const rootReducer = (state = initialState, action) =&gt; {
 switch (action.type) {
 case 'SET_USER':
 return { ...state, user: action.payload };
 case 'SET_LANGUAGE':
 return { ...state, language: action.payload };
 default:
 return state;
 }
};

export default rootReducer;</code></pre><h3>Provider:</h3>Provider, component'leri saran ve yönlendiren bir bağlam (context) bileşenidir. Context API'da bu bileşen, Context ile oluşturulurken React tarafından sağlanırken, Redux'ta bu bileşen react-redux paketi tarafından otomatik olarak sağlanır.<h2>Karşılaştırma:</h2><ol><li>Context API vs. Redux<ul><li>Context API:<ul><li>React'ın kendi context yapısını kullanarak global bir state yönetimi sağlar.</li><li>Daha temel bir yaklaşımdır.</li><li>react-redux gibi ek paketlere ihtiyaç duymaz.</li><li>Global statelere useContext ve useReducer hooklarıyla erişim sağlar.</li><li>Genellikle daha az kod karmaşıklığına sahiptir.</li></ul></li><li>Redux:<ul><li>Ayrı bir paket olarak kullanılır.</li><li>Daha fazla geliştirilmiş ve geniş bir ekosisteme sahiptir.</li><li>react-redux gibi ek paketlere ihtiyaç duyar.</li><li>Global statelere useSelector ve useDispatch hooklarıyla erişim sağlar.</li><li>Asenkron dispatch ve birden fazla reducer gibi karmaşık senaryolara daha iyi uyar.</li></ul></li></ul></li><li>Hangisini Tercih Etmeli?<ul><li>Context API:<ul><li>Global stateleriniz sık sık değişmiyorsa.</li><li>Birden fazla context kullanmanız gerekiyorsa.</li><li>Sadece global bir state yapısı kurmak istiyorsanız.</li></ul></li><li>Redux:<ul><li>Global stateleriniz sık sık güncelleniyorsa (örneğin, canlı veriyle çalışma).</li><li>Asenkron dispatch işlemlerine ihtiyacınız varsa.</li><li>Birden fazla reducer'a ihtiyaç duyuyorsanız.</li></ul></li></ul></li></ol><h2>Sonuç:</h2>Her iki yaklaşım da React uygulamalarında global bir state yönetimini kolaylaştırmak için güçlü araçlardır. Hangi yöntemi seçeceğinizi, projenizin ihtiyaçlarına ve karmaşıklığına bağlı olarak belirlemelisiniz. Her iki yaklaşım da aynı temel prensiplere dayanır ve aynı temel tasarımı paylaşır.

React'te Global State Yönetimi: Redux ve Context API Karşılaştırması

Tek Sayfa Uygulamaları (SPA), modern web geliştirmenin önemli bir parçası haline geldi. Geleneksel çok sayfalı web sitelerinden farklı olarak, SPA'lar sayfaları yeniden yüklemeden tek bir HTML belgesi üzerinde dinamik içerik sunar. React, SPA geliştirmenin popüler bir çerçevesidir ve bu işte React Router gibi bir kütüphanenin önemini anlamak, React ile SPA geliştirme sürecini daha etkili hale getirmemize yardımcı olur.<h2>SPA Nedir ve Neden Önemlidir?</h2>SPA, bir web uygulamasının yalnızca başlangıçta bir HTML sayfasını yüklediği ve ardından JavaScript kullanarak içeriği güncellediği bir uygulama türüdür. Geleneksel çok sayfalı web siteleri, her bağlantıyı tıkladığınızda yeni bir sayfa yüklerken, SPA'lar sayfalar arası gezinimde sayfayı yeniden yükleme ihtiyacını ortadan kaldırır. Bu, kullanıcı deneyimini hızlandırır ve web uygulamasının daha akıcı çalışmasını sağlar.SPAlar ayrıca sunucu ve istemci tarafı işlemleri daha iyi ayırt edebilir. Sunucu, yalnızca başlangıç HTML'yi sağlar ve istemci, kullanıcı etkileşimi için gereken tüm içeriği yönetir. Bu, sunucu kaynaklarının daha verimli kullanılmasını sağlar.<h2>React ile SPA Geliştirmenin Avantajları</h2>React, SPA geliştirmenin popüler bir seçimidir çünkü:1. Bileşen Tabanlı Yapı: React, uygulamanızı bileşenlere ayırmanıza olanak tanır. Her sayfa veya öğe için ayrı bileşenler oluşturarak, kodunuzu daha iyi organize edebilir ve sürdürülebilirliği artırabilirsiniz.2. Hızlı ve Etkin Güncelleme: React, sanal DOM sayesinde sadece değişen bileşenleri güncelleme yeteneğine sahiptir. Bu, sayfayı yeniden yükleme ihtiyacını azaltır ve uygulamanın daha hızlı çalışmasını sağlar.3. Topluluk Desteği: React, büyük bir topluluğa sahiptir ve bu, belgeleme, üçüncü taraf kütüphaneler ve sorunları çözme konularında büyük bir avantaj sağlar.Ancak SPA geliştirme, sayfa gezinimini ve URL yönlendirmesini ele alırken bazı sorunları da beraberinde getirir. İşte burada React Router devreye girer.<h2>React Router Nedir ve Neden Kullanmalıyız?</h2>React Router, React uygulamalarında SPA için sayfa yönlendirmesini kolaylaştırmak için kullanılan bir yönlendirme kütüphanesidir. Bu kütüphane, SPA içinde sayfa gezinimini ve URL yönlendirmesini yönetmek için gerekli olan birçok bileşeni ve yönlendirme stratejilerini sunar.React Router kullanmanın avantajları şunlardır:1. Değişen URL'ler: Sayfalar arasında gezinirken URL'yi güncellemek ve paylaşmak kolaydır. Bu, kullanıcıların belirli bir sayfaya doğrudan erişmelerini sağlar.2. Bileşen Tabanlı Yönlendirme: React ile uyumlu olarak çalışır ve sayfaları bileşenler halinde düzenlemenize olanak tanır.3. Hızlı Sayfa Yüklemesi: Sayfalar arasında geçiş yaparken tam sayfa yeniden yükleme ihtiyacını ortadan kaldırarak daha hızlı bir kullanıcı deneyimi sunar.<h2>Sonuç</h2>React ile SPA geliştirmek, kullanıcı deneyimini geliştirmenin ve web uygulamanızın daha hızlı çalışmasını sağlamanın etkili bir yoludur. React Router gibi yönlendirme kütüphaneleri, sayfalar arası gezinimi ve URL yönlendirmesini yönetmeyi kolaylaştırır, böylece geliştirme sürecini daha etkili hale getirir.SPA ve React Router kullanımı, modern web uygulamalarını daha rekabetçi ve işlevsel hale getirmenize yardımcı olurken, kullanıcıların daha iyi bir deneyim yaşamasını sağlar. Bu nedenle React ile SPA geliştirme sürecinde React Router gibi kütüphaneleri kullanmayı düşünmelisiniz.

React ile SPA Geliştirmenin Temel Taşı: React Router ile Sayfa Yönlendirme

Yazılım geliştirme sürecinde, kullanıcılarımızın karşılaşacağı deneyimi keskinleştirmek ve hataları erken tespit etmek önemlidir. Bu yazıda, yazılım dünyasının kilit bir parçası olan testlerin önemini ve test türlerini ele alacağız. Özellikle, manuel testlerin yerine veya yanı sıra kullanılan üç ana otomatik test türüne odaklanacağız: Birim Testler, Entegrasyon Testleri ve Uçtan Uca (End-to-End) Testleri.<h3>1- Birim Testler (Unit Tests): Yazılımın Temel Taşı</h3>Birim testler, yazılımın en küçük işlevsel birimlerini test etmek için kullanılır. Bu, genellikle işlevleri veya bileşenleri izole bir şekilde test etmek anlamına gelir. Neden bu kadar önemli?<ul><li>Hata Erken Yakalanır: Birim testler hataları erken aşamalarda yakalama fırsatı sunar. Bu, hataların daha düşük maliyetle ve daha hızlı bir şekilde çözülmesini sağlar.</li><li>Kod Kalitesi: Birim testler, kodun daha temiz ve bakımı daha kolay hale gelmesine yardımcı olur. Her bir işlevin veya bileşenin nasıl çalıştığını daha iyi anlamanıza olanak tanır.</li><li>Otomasyon İmkanı: Birim testler otomasyon için idealdir, bu da testlerin tekrarlanabilirliğini artırır ve hızlı bir şekilde çalıştırılabilir.</li></ul><h3>2- Entegrasyon Testleri: Bileşenlerin Uyum İçinde Çalışması</h3>Entegrasyon testleri, farklı yazılım bileşenlerinin bir araya geldiğinde nasıl çalıştığını değerlendirir. Bu testler, farklı bileşenlerin birlikte çalışabilirliğini test etmeyi amaçlar.<ul><li>Bileşenlerin Etkileşimi: Yazılım projeleri genellikle birden fazla bileşen içerir. Entegrasyon testleri, bu bileşenlerin birbirleriyle uyumlu bir şekilde çalıştığını kontrol eder.</li><li>Veri Akışı Kontrolü: Entegrasyon testleri, verilerin doğru bir şekilde akıp akmadığını ve iletişim sorunlarını tespit etmek için kullanılır.</li></ul><h3>3- Uçtan Uca (End-to-End / e2e) Testler: Kullanıcı Deneyiminin Yeniden Oluşturulması</h3>Uçtan uca testler, yazılımınızın tam iş akışlarını test etmek için kullanılır. Bu testler, kullanıcıların gerçek dünyadaki etkileşimlerini simüle etmeyi amaçlar.<ul><li>Gerçek Kullanıcı Deneyimi: Uçtan uca testler, kullanıcıların uygulamanızı nasıl kullanacaklarını simüle eder. Bu, manuel testlerle benzer bir deneyim sunar, ancak otomatiktir.</li><li>Tüm Uygulama Süreçlerini Test Eder: Tüm işlevselliği kapsar ve böylece uygulamanızın tümünü test etmeyi mümkün kılar.</li></ul>Sonuç: Otomatik Testler Modern Yazılım Geliştirmenin Ayrılmaz Bir ParçasıdırOtomatik testler, modern yazılım geliştirmenin temel bir unsuru haline gelmiştir. Birim testler, entegrasyon testleri ve uçtan uca testleri, yazılımınızı daha güvenilir hale getirmenize, hataları erken tespit etmenize ve kullanıcıların beklentilerini karşılamanıza yardımcı olur. Manuel testler her zaman önemli olsa da, otomatik testlerle birlikte kullanıldığında, hataları daha erken yakalamanıza ve daha iyi kod yazmanıza olanak tanır. İşte bu nedenle bu üç test türünün öğrenilmesi ve uygulanması modern yazılım geliştirmenin temel bir becerisi haline gelmiştir. İleride, bu test türleriyle ilgili daha fazla bilgi edinmek için farklı kaynaklara başvurabilirsiniz.

Yazılım Test Türleri: Yazılım Geliştirmenin Temel Taşları

React, günümüzün en popüler ve güçlü JavaScript kütüphanelerinden biri olarak öne çıkıyor. React'i kullanarak web uygulamaları geliştirmek, kullanıcı deneyimini geliştirmek ve geliştiricilere kolay bir şekilde çalışma imkanı sunmak için harika bir yol sunar. Ancak, büyük ve karmaşık bir uygulama geliştirirken, uygulamanızın hala beklediğiniz gibi çalışıp çalışmadığını doğrulamak ve hataları erken aşamada tespit etmek için testlere ihtiyaç duyarsınız.React uygulamalarını test etmek için Jest, popüler bir JavaScript test çerçevesidir. Jest, testlerinizi yazmayı kolaylaştıran ve hızlı bir şekilde çalıştırmanıza yardımcı olan açık kaynaklı bir araçtır. Bu makalede, Jest'i React projenize nasıl kuracağınızı ve basit bir birim testi nasıl yazacağınızı öğreneceksiniz.<h2>Adım 1: Jest Kurulumu</h2>React projesinde Jest kullanmaya başlamak için aşağıdaki adımları takip edebilirsiniz:<ol><li>Proje Dizininde Jest'i Yükleyin: Proje dizininizde terminali açın ve Jest'i yüklemek için aşağıdaki komutu kullanın:<pre><code>npm install --save-dev jest</code></pre></li><li><code>package.json</code> Dosyasını Güncelleyin: Jest'i yükledikten sonra, <code>package.json</code> dosyanızdaki <code>"scripts"</code> bölümüne bir test komutu ekleyin:<pre><code>"scripts": {
 "test": "jest"
}</code></pre></li><li>Jest Yapılandırma Dosyası Oluşturun (Opsiyonel): Projeniz özel Jest ayarları gerektiriyorsa, bir Jest yapılandırma dosyası (<code>jest.config.js</code>) oluşturabilirsiniz:<pre><code>module.exports = {
 testEnvironment: 'jest-environment-jsdom',
 setupFilesAfterEnv: ['&lt;rootDir&gt;/.jest/setup-tests.js'],
 moduleNameMapper: {
 '\\.(gif|ttf|eot|svg|png)$': '&lt;rootDir&gt;/.jest/mocks/fileMock.js',
 '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
 },
}</code></pre></li><li>Şimdi ise gerekli olan şu paketleri kurun:<pre><code>npm install @babel/core @babel/preset-env @babel/preset-react babel-jest identity-obj-proxy jest-environment-jsdom -D</code></pre>Bu paketler, projenizi geliştirmek ve test etmek için gerekli olan çeşitli araçları ve bileşenleri içerir. İşte bu paketlerin her birinin kısaca ne işe yaradığı:<ol><li><code>@babel/core</code>: Babel, JavaScript kodunu daha eski tarayıcılarda çalışabilen daha yeni bir JavaScript sürümüne dönüştürmek için kullanılır. Bu, projenizde modern JavaScript özelliklerini kullanmanıza ve hedef kitlenizin daha eski tarayıcılarda bile çalışmasını sağlar.</li><li><code>@babel/preset-env</code>: Babel için birçok modern JavaScript özelliğini eski tarayıcılarda çalışacak şekilde dönüştürmek için kullanılan bir "preset" (ayar)dir. Projenizin hedef kitlesi için uygun dönüşümleri otomatik olarak yapılandırır.</li><li><code>@babel/preset-react</code>: Babel ile kullanıldığında, React bileşenlerinin JSX sözdizimini eski tarayıcılarda çalışabilen JavaScript koduna dönüştürmek için kullanılır.</li><li><code>babel-jest</code>: Jest ile birlikte kullanıldığında, Jest'in testlerinizi çalıştırırken Babel'i kullanmasını sağlar. Bu, Jest testlerinin modern JavaScript ve JSX kodunu anlamasına yardımcı olur.</li><li><code>identity-obj-proxy</code>: Bu, Jest ile birlikte kullanılan bir jest-transformer'dır. Jest testlerinde CSS modülleri gibi stil modülleri için varsayılan bir kimlik eşlemesi sağlar.</li><li><code>jest-environment-jsdom</code>: Jest testlerini çalıştırırken tarayıcı benzeri bir ortam sağlar. Bu, React uygulamalarını tarayıcıya benzer bir çevrede test etmek için kullanılır.</li></ol>Yukarıdaki paketler, bir JavaScript projesinde React ve Jest gibi teknolojileri kullanırken, kodu işlemek, test etmek ve uyumlu hale getirmek için gereklidir. Bu paketlerin çoğu, özellikle modern JavaScript ve JSX kullanırken, projenizin verimli bir şekilde çalışmasına ve test edilmesine yardımcı olur.</li><li><code>@testing-library/jest-dom</code> ve <code>@testing-library/react</code>kurulumu gerçekleştirin:<pre><code>npm i @testing-library/jest-dom @testing-library/react -D</code></pre><code>@testing-library/react</code>:<ul><li>Bu kütüphane, React uygulamalarını test etmek için özel olarak tasarlanmış bir araç setidir. Bu araçlar, React bileşenlerini ekranda render etmek, kullanıcı etkileşimlerini simüle etmek ve bu bileşenlerin ekran üzerinde nasıl göründüğünü sorgulamak için kullanılır.</li><li>React Testing Library, kullanıcıların uygulamanızı kullanırken karşılaştıkları şekilde bileşenlerin davranışlarını ve görünümlerini test etmeyi teşvik eder. Bu, kullanıcı merkezli testlerin yazılmasını ve uygulamanın kullanılabilirliğinin kontrol edilmesini kolaylaştırır.</li><li>Özellikle <code>render</code>, <code>fireEvent</code>, <code>screen</code>, ve <code>waitFor</code> gibi React Testing Library'nin fonksiyonları, bileşenlerin test edilmesini basit ve etkili hale getirir.</li></ul></li><li><code>@testing-library/jest-dom</code>:<ul><li>Bu kütüphane, Jest testlerinde kullanılmak üzere tasarlanmış ek bir kütüphanedir. Jest'in doğal beklenti (expectation) fonksiyonlarına (<code>expect</code>) ek olarak, bu kütüphane, jest testlerinin daha açık ve anlaşılır hale gelmesini sağlayan bir dizi jest eklentisi ekler.</li><li>Jest DOM eklentileri, özellikle kullanıcı arabirimi testlerinde, ekrandaki elementlerin nasıl davranması gerektiğini ve nasıl görünmesi gerektiğini daha açık bir şekilde ifade etmek için kullanılır. Örneğin, <code>toBeInTheDocument</code>, <code>toHaveTextContent</code>, <code>toHaveAttribute</code>, ve <code>toBeVisible</code> gibi fonksiyonlar, ekrandaki elementlerin özelliklerini ve davranışlarını doğrulamak için kullanılır.</li><li>Bu eklentiler, testlerin daha açık ve okunabilir olmasına yardımcı olur ve ekranın beklenen şekilde göründüğünü kontrol etmek için kullanılır.</li></ul></li><li>Ana dizine <code>.jest</code> adında bir klasör oluşturun ve bu klasör içerisinde <code>setup-tests.js</code> adında bir dosya oluşturun. Bu dosya içine jest-dom kütüphanesini import edin:<pre><code>import '@testing-library/jest-dom'</code></pre></li><li><code>.jest</code> klasörünün içerisine <code>mocks </code>klasörü oluşturun ve içerisine<code> fileMock.js</code> adında bir dosya oluşturun. İçerisine şu kodu yazın:<pre><code>module.exports = 'test-file-stub'</code></pre></li><li>Şimdi ise ana dizine <code>babel.config.json</code>dosyası açın ve içerisine şu kodları yapıştırın:<pre><code>{
 "presets": [
 ["@babel/preset-env", { "targets": { "esmodules": true } }],
 ["@babel/preset-react", { "runtime": "automatic" }]
 ]
 }</code></pre></li><li>Son olarak <code>package.json</code>dosyasında şu değişikliği yapalım:<pre><code>"type": "commonjs"</code></pre></li></ol><h2>Adım 2: Basit Bir Birim Testi Yazma</h2>Öncelikle, bir <code>App.jsx </code>bileşeni oluşturalım:<pre><code>// App.jsx
import "./App.css";

function App() {
 return (
 &lt;&gt;
 &lt;h1&gt;Learn React&lt;/h1&gt;
 &lt;p&gt;Lorem ipsum dolor sit amet consectetur,
 adipisicing elit. Omnis nostrum non voluptatibus ratione reiciendis quae animi voluptas eveniet cum facilis. &lt;/p&gt;
 &lt;/&gt;
 );
}

export default App;</code></pre>Sonrasında <code>App.test.js</code> dosyası oluşturalım ve App.jsx bileşenini test etmek için Jest ile birim testler yazalım:<pre><code>App.test.js
import { render, screen } from "@testing-library/react";

import App from "./App";

test("renders learn react h1 tag", () =&gt; {
 render(&lt;App /&gt;);
 const linkElement = screen.getByText(/Learn React/i);
 expect(linkElement).toBeInTheDocument();
});</code></pre>Bu kod, bir Jest testi yazıyor ve bu testte "App" adlı bir React bileşeninin belirli bir davranışını kontrol ediyor. İşte bu kodun adım adım açıklamaları:<ol><li><code>import { render, screen } from "@testing-library/react";</code>: Bu satır, React Testing Library'nin <code>render</code> ve <code>screen</code> fonksiyonlarını projeye içe aktarır. Bu fonksiyonlar, React bileşenlerini render etmek ve ekrandaki elementleri sorgulamak için kullanılır.</li><li><code>import App from "./App";</code>: Bu satır, test edilecek "App" adlı React bileşenini içe aktarır. "App" bileşeni, uygulamanın ana bileşenini temsil eder.</li><li><code>test("renders learn react h1 tag", () =&gt; { ... });</code>: Bu kod, bir Jest testini başlatır. Testin adı "renders learn react h1 tag" olarak belirlenmiştir.</li><li><code>render(&lt;App /&gt;);</code>: Bu satır, "App" bileşenini ekranda render eder. Bu, uygulamanızın test edilen bileşenini simüle eder ve testler sırasında bu bileşenin nasıl göründüğünü ve nasıl davrandığını kontrol etmenizi sağlar.</li><li><code>const linkElement = screen.getByText(/Learn React/i);</code>: Bu satır, ekrandaki metin içeriğinde "Learn React" ifadesini içeren bir elementi bulmak için <code>screen.getByText</code> fonksiyonunu kullanır. Bu elementi <code>linkElement</code> adlı bir değişkene atar.</li><li><code>expect(linkElement).toBeInTheDocument();</code>: Bu satır, <code>linkElement</code> adlı elementin ekran üzerinde göründüğünü doğrular. Eğer "Learn React" metni içeren bir h1 etiketi bulunursa, bu ifade doğru döner ve test başarılı olur. Aksi takdirde, test başarısız olur.</li></ol>Bu test, "App" bileşeninin başlık etiketi (h1) içinde "Learn React" metni içerip içermediğini kontrol eder. Eğer bu metin h1 etiketi içerisinde mevcutsa, test başarılı olur ve aksi halde başarısız olur. Bu, bir React bileşeninin belirli bir davranışını kontrol etmek için yazılan basit bir Jest testidir.Bu testleri çalıştırmak için aşağıdaki komutu kullanabilirsiniz:<pre><code>npm test</code></pre>Jest, testleri algılayacak, çalıştıracak ve sonuçları raporlayacaktır. Başarılı bir test sonucunda şuna benzer bir çıktı görmelisiniz:<pre><code>PASS src/App.test.js
 √ renders learn react h1 tag (27 ms)

Test Suites: 1 passed, 1 total 
Tests: 1 passed, 1 total 
Snapshots: 0 total
Time: 1.582 s, estimated 2 s
Ran all test suites.</code></pre>Bu basit birim test ile Jest'i nasıl kullanacağınızı öğrenebilirsiniz. Daha karmaşık test senaryoları için Jest dökümantasyonunu inceleyebilirsiniz.React projelerinizde Jest kullanarak uygulamanızı test etmek, uygulamanızın kalitesini artırmak ve güvenilirliğini sağlamak için mükemmel bir yoldur. Bu makale, Jest'i React projenize nasıl entegre edeceğinizi ve temel bir birim testi nasıl yazacağınızı anlatmıştır. İyi şanslar ve testlerinizin başarılı olmasını dilerim!

React Uygulamalarında Jest ile Unit Testler Nasıl Yazılır?

Web geliştirme dünyasında JavaScript, yıllardır en popüler dillerden biri olarak varlığını sürdürmektedir. Ancak büyük ve karmaşık projeler geliştirirken, JavaScript'in bazı eksiklikleri ortaya çıkabilir. İşte bu noktada TypeScript devreye girer. TypeScript, geliştiricilere JavaScript tabanlı projelerini daha güçlü ve sürdürülebilir hale getirme imkanı sunar. Bu makalede, TypeScript'in ne olduğunu anlatacağız ve basit bir TypeScript projesi oluşturarak TypeScript kullanımını göstereceğiz.<h2>TypeScript Nedir?</h2>TypeScript, Microsoft tarafından geliştirilen ve açık kaynak olarak sunulan bir programlama dili ve geliştirme aracıdır. JavaScript'in üst kümesi olarak kabul edilir, yani her geçerli JavaScript kodu aynı zamanda geçerli TypeScript kodu olarak kullanılabilir. TypeScript, kodunuzu daha güvenli hale getirmek için statik tür denetimi sağlar. Statik tür denetimi, değişkenlerin ve fonksiyonların türlerinin tanımlanmasıyla gerçekleştirilir ve bu, hataların erken aşamalarda tespit edilmesini sağlar.Peki, neden TypeScript'i kullanmalıyız? İşte bazı nedenler:<h3>1. Hata Yakalama</h3>TypeScript, kodunuzu daha güvenli hale getirir ve hataları daha erken aşamalarda yakalamanıza yardımcı olur. JavaScript'de sıkça karşılaşılan hata türlerinden biri olan "undefined" hatalarını önler.<h3>2. İpucu ve Otomatik Tamamlama</h3>TypeScript, geliştiricilere kodlarını yazarken daha fazla yardımcı olur. Türlü değişkenler ve fonksiyonlar sayesinde kodunuzun ne tür bilgileri içerdiğini hemen anlayabilir ve otomatik tamamlama özellikleri kullanabilirsiniz.<h3>3. Daha Sürdürülebilir Projeler</h3>TypeScript, büyük ve karmaşık projelerin geliştirilmesi sırasında daha fazla disiplin sağlar. Tipler ve arayüzlerle kodunuzu daha anlaşılır ve sürdürülebilir hale getirir.<h3>4. JavaScript ile Tam Uyumluluk</h3>TypeScript, JavaScript ile tam uyumludur. Yani, mevcut JavaScript projelerinizi kolayca TypeScript'e taşıyabilir veya yeni projelerinizi TypeScript ile başlatabilirsiniz.<h2>TypeScript Projesi Oluşturma</h2>TypeScript'i daha iyi anlamak için basit bir projeyi nasıl oluşturacağımızı görelim.<h3>Adım 1: Node.js ve npm Kurulumu</h3>Eğer bilgisayarınızda Node.js ve npm yüklü değilse, <a target="_new" rel="noopener noreferrer nofollow" href="https://nodejs.org/">Node.js resmi websitesinden</a> indirip kurun.<h3>Adım 2: TypeScript Kurulumu</h3>TypeScript'i npm aracılığıyla yükleyin. Komut istemcisini açın ve aşağıdaki komutu çalıştırın:<pre><code>npm install -g typescript</code></pre><h3>Adım 3: TypeScript Projesi Oluşturma</h3>Bir proje klasörü oluşturun ve komut istemcisini bu klasöre geçirin.<pre><code>mkdir typescript-projem
cd typescript-projem</code></pre><h3>Adım 4: TypeScript Dosyası Oluşturma</h3>Proje klasörünüzde, "app.ts" adında bir TypeScript dosyası oluşturun ve aşağıdaki kodu ekleyin:<pre><code>function sayHello(name: string) {
 console.log(`Merhaba, ${name}!`);
}

sayHello("TypeScript");</code></pre>Bu kod, "sayHello" adında bir fonksiyon tanımlar ve bu fonksiyonun bir dize parametresi almasını bekler.<h3>Adım 5: TypeScript Dosyasını Derleme</h3>TypeScript dosyasını JavaScript'e derlemek için komut istemcisinde aşağıdaki komutu çalıştırın:<pre><code>tsc app.ts</code></pre>Bu komut, "app.ts" dosyasını "app.js" adında bir JavaScript dosyasına derler.<h3>Adım 6: JavaScript Dosyasını Çalıştırma</h3>Şimdi JavaScript dosyasını çalıştırabilirsiniz:<pre><code>node app.js</code></pre>Sonuç olarak, komut istemcisinde "Merhaba, TypeScript!" mesajını görmelisiniz.Bu, basit bir TypeScript projesi oluşturmak ve çalıştırmak için temel adımları içerir. TypeScript'i daha fazla inceleyerek, karmaşık projelerde nasıl kullanabileceğinizi öğrenebilirsiniz.<h2>Sonuç</h2>TypeScript, JavaScript tabanlı projelerin daha güçlü, sürdürülebilir ve hata toleranslı hale gelmesini sağlayan önemli bir araçtır. Bu makalede, TypeScript'in ne olduğunu ve neden kullanmanız gerektiğini anlattık ve basit bir "Merhaba Dünya" projesi oluşturarak TypeScript'i uygulamalı olarak gösterdik. TypeScript'i kullanarak projelerinizi daha etkili bir şekilde geliştirebilir ve hataları en aza indirebilirsiniz.

TypeScript Nedir? Neden Kullanmalıyız?

Web geliştirme dünyasının hızla değişen ortamında, projeleri daha güvenli, anlaşılır ve sürdürülebilir hale getirmek önemlidir. TypeScript, bu ihtiyaçları karşılayan, statik tür denetimi sunan ve JavaScript tabanlı projeleri geliştirmeyi kolaylaştıran bir programlama dili ve geliştirme aracıdır. Bu makalede, TypeScript'in temel kavramlarını detaylı bir şekilde açıklayarak, kod örnekleriyle anlatacağız.<h2>TypeScript Nedir?</h2>TypeScript, Microsoft tarafından geliştirilen açık kaynaklı bir programlama dilidir ve JavaScript'in bir üst kümesi olarak kabul edilir. TypeScript, JavaScript kodlarını daha güçlü hale getirirken, aynı zamanda JavaScript'e tamamen uyumlu olma özelliğine sahiptir. Bu nedenle, TypeScript'i mevcut JavaScript projelerine entegre etmek oldukça kolaydır.TypeScript'i kullanmanız gereken bazı temel nedenler şunlardır:<h3>1. Hata Yakalama ve Daha Güvenli Kodlama</h3>TypeScript, statik tür denetimi ile kodunuzu daha güvenli hale getirir. Bu, hataların erken aşamalarda tespit edilmesini sağlar. Örneğin, değişken türleri ve fonksiyonların parametre tipleri sayesinde, beklenmeyen tür dönüşümleri ve hataları önleyebilirsiniz.<h3>2. Anlaşılır ve Dökümante Edilebilir Kod</h3>TypeScript, kodunuzu daha anlaşılır hale getirir. Özellikle büyük projelerde, tip tanımlamaları ve arayüzler kullanarak kodunuzu dökümante etmek daha kolaydır. Bu, ekibinizle daha iyi işbirliği yapmanıza ve kodunuzu daha hızlı sürdürülebilir hale getirmenize yardımcı olur.<h3>3. JavaScript ile Tam Uyumlu</h3>TypeScript, JavaScript ile mükemmel bir şekilde uyumludur. Mevcut JavaScript kodunu TypeScript'e dönüştürmek veya TypeScript ile yeni projeler başlatmak oldukça kolaydır. Ayrıca, TypeScript projelerini JavaScript'e derlemek de mümkündür.<h2>Temel Kavramlar ve Kod Örnekleri</h2><h3>1. Temel Tipler (Base Types)</h3>TypeScript temel tipleri destekler: sayılar (number), metinler (string), mantıksal değerler (boolean) gibi.<pre><code>let sayi: number = 42;
let metin: string = "Merhaba, TypeScript!";
let dogruMu: boolean = true;</code></pre><h3>2. Dizi ve Nesne Tipleri (Array ve Object Types)</h3>Dizi tipleri ve nesne tipleri ile verileri yapılandırabiliriz.<h4>Dizi Tipleri (Arrays)</h4><pre><code>let sayilar: number[] = [1, 2, 3, 4, 5];
let isimler: string[] = ["Ahmet", "Mehmet", "Ayşe"];</code></pre><h4>Nesne Tipleri (Objects)</h4><pre><code>let kisi: { ad: string, yas: number } = { ad: "Ali", yas: 30 };</code></pre><h3>3. Tür Çıkarımı (Type Inference)</h3>TypeScript, değişken türünü otomatik olarak çıkarabilir:<pre><code>let sayi = 42; // sayi otomatik olarak number türünde
let mesaj = "Merhaba, TypeScript!"; // mesaj otomatik olarak string türünde</code></pre><h3>4. Birleşik Tipler (Union Types)</h3>Birleşik tipler, bir değişkenin birden fazla türe sahip olabileceğini belirtmek için kullanılır:<pre><code>let yas: number | string = 25;
yas = "yirmi beş";</code></pre><h3>5. Tür İsimleri (Type Aliases)</h3>Tür isimleri, karmaşık tipleri yeniden kullanılabilir hale getirir:<pre><code>type Kisi = { ad: string, yas: number };
let kisi1: Kisi = { ad: "Ali", yas: 30 };
let kisi2: Kisi = { ad: "Ayşe", yas: 25 };</code></pre><h3>6. Fonksiyonlar ve Fonksiyon Tipleri (Functions and Function Types)</h3>Fonksiyonlar ve fonksiyon tipleri tanımlamak için TypeScript kullanabiliriz:<pre><code>function toplam(a: number, b: number): number {
 return a + b;
}

let sonuc: number = toplam(3, 5);</code></pre><h3>7. Jenerikler (Generics)</h3>Jenerikler, fonksiyonlar ve sınıflar için parametreler haline getirilebilir ve yeniden kullanılabilirliği artırır:<pre><code>function diziIlkElemaniGetir&lt;T&gt;(dizi: T[]): T | undefined {
 return dizi[0];
}

const sayilar: number[] = [1, 2, 3, 4, 5];
const ilkSayi: number | undefined = diziIlkElemaniGetir(sayilar);</code></pre><h2>Sonuç</h2>TypeScript, modern web geliştirmenin önemli bir parçasıdır. Temel kavramları öğrenerek, kodunuzu daha güvenli ve anlaşılır hale getirebilirsiniz. Bu makale, TypeScript'in temel kavramlarını açıklayarak, kod örnekleriyle anlatmıştır. TypeScript'i öğrenmeye başlayarak, projelerinizi daha etkili bir şekilde geliştirebilir ve hataları en aza indirebilirsiniz.