React Context API, Reactjs ile gelen bir özelliktir ve state management işlevi sağlayarak kullanıcıların verileri ve fonksiyonları tüm seviyelerde paylaşmalarını sağlar Prop drilling sorunundan kurtulmanızı sağlayan bu özellik, app'lerin state yönetimini kolaylaştırır, kod tekrarlarını azaltır ve app'lerde hata olasılığını azaltır Context nesnelerini oluşturmak için createContext yöntemi kullanılır ve Provider bileşeni veri deposunu paylaşırken Consumer bileşeni verileri tüketir React Context API, geniş bir yelpazedeki app'lerde kullanılabilir ve Redux'a benzer bir yapılandırma sunar Bu özellik, uygulamaların daha esnek ve ölçeklenebilir olmasını sağlar

React Context API, React.js ile gelen bir özelliktir ve state management işlevi sağlamak için kullanılır. Bu API kullanıcıların verileri ve fonksiyonları, prop drilling sorunundan kurtulmadan tüm seviyelerde kullanmalarını ve paylaşmalarını sağlar. React Context API, kullanıcılarına bağlam ve tüketici arayüzü sağlar ve bu sayede veri aktarımını kolaylaştırır.

Bu özelliği kullanmak, app'lerin state'lerini yönetmesini ve daha geniş uygulamaları güncellemeyi kolaylaştırır. Ayrıca, bu özellik sayesinde kod tekrarları azalır ve app'ler daha az hata ile karşılaşır. React Context API'nin avantajlarından biri, geliştiricilere güçlü bir veri akışı yönetimi sağlamaktır.

React Context API, geniş bir yelpazedeki app'lerde kullanılabilir ve genellikle küçük boyutu, gelişmiş bir yapılandırma ve kolay kullanım özellikleriyle öne çıkar. Bu API, birçok farklı durumda kullanılabilir ve herhangi bir uygulama için özelleştirilebilir. Ayrıca, React Context API'nin Redux benzeri bir yapı olduğu düşünülebilir, ancak tam olarak Redux'unki gibi bir yapılandırmayla çalışmaz.

Özellikler

React Context API, React uygulamalarında kullanılabilen bir özelliktir. Bu özellik, uygulama içerisindeki bütün bileşenler arasında veri paylaşımını ve iletişimini kolaylaştırır. Özellikle büyük projelerde, componentler arasında veri taşınması oldukça zordur, ancak bu özellik sayesinde bu sorun çözülmüş olur.

Bir başka avantajı ise, API sayesinde componentlerin kendilerine diğer componentlerle olan ilişkilerini tanımlayabilmesidir. Bu sayede componentler birbirlerinden tamamen bağımsız hale gelirler ve her biri kendi işlevleri doğrultusunda çalışabilirler. Bu da uygulamanın daha esnek ve ölçeklenebilir olmasını sağlar.

Ayrıca, React Context API kullanarak, componentler arasında veri taşıma işlemi için prop drilling yapmak zorunda kalmazsınız. Bu sayede kodun okunabilirliği ve sürdürülebilirliği artar ve kod yazım süreci daha verimli hale gelir.

React Context API'nin en önemli özelliklerinden biri de, tüm component hiyerarşilerinde uygulanabilmesidir. Yani, bir üst seviye component içinde oluşturulan bir Context, alt seviyedeki bütün componentlere veri sağlayacak şekilde tasarlanabilir.

Kullanımı

React Context API, React uygulamalarında global durum yönetimi sağlamak için kullanılan bir özelliktir. Bu özellik sayesinde, durum verisine ihtiyaç duyan componentlere veri sağlamak yani veri iletişiminde bulunmak daha kolay hale gelir.

Context API, createContext() fonksiyonu ile yeni bir Context oluşturma ile başlar. Bu oluşturulan Context, tüm alt componentler tarafından erişilebilir hale gelir. createContext() fonksiyonu, bir argüman alır, bu argüman Context'in varsayılan değeridir. createContext() fonksiyonu, bir Provider ve bir Consumer bileşeni döndürür.

Provider, Context'teki verileri sağlar ve Consumer, Context'teki verileri tüketir. Provider, value prop'uyla verileri sağlar ve diğer componentler de bu verileri consumer aracılığı ile alabilirler. Ayrıca, Provider'ların iç içe geçmesi, veri sağlama işlevinin çeşitli düzeylerde yapılmasını kolaylaştırır.

Consumer, Context'teki verilere erişmek için kullanılan bir bileşendir. Consumer, veriye ihtiyaç duyduğu noktada veriyi alır. Veriyi almak için Consumer bileşeninin bir işlev alması gereklidir. Bu işlevin içinde Context'teki verilere erişilir ve bu veriler render edilir.

React Context API'nin Redux ile karşılaştırılması yapılacak olursa, Redux aksiyonları kullanarak durum yönetimini sağlar. Bu nedenle Redux'un kullanımı daha zahmetli olabilir. Ancak, Redux'un daha geniş bir özellik yelpazesi vardır. Context API ise özellikle küçük ve orta boyutlu projelerde kullanılabilir.

Özetle, React Context API, bir durum yönetim yöntemi olarak kullanıcıların beğenisini kazanmıştır. API'nin kullanımı, özellikle veri tüketme ve veri sağlama işlevleri ile kolaylaştırılmıştır. Componentler arasında veri paylaşımını çok daha kolay hale getirmesi nedeniyle Context API, React uygulamalarında sıkça kullanılmaktadır.

Context Oluşturma

React Context API, React uygulamalarında veri paylaşımını kolaylaştıran bir özelliktir. Bu özellik, bir veri deposu olarak hizmet eden Context nesnelerini oluşturmanıza ve bunları bileşenler arasında paylaşmanıza olanak tanır. Bu nesneler, bir provider bileşeni tarafından oluşturulur ve sonrasında consumer bileşenleri tarafından kullanılır.

Bir Context nesnesi oluşturmak için, createContext() yöntemini kullanabilirsiniz. Bu yöntem, bir nesne döndürür ve bu nesne, paylaşılacak verileri içerecektir. createContext() yöntemi, ayrıca bir varsayılan değer de kabul eder.

Örneğin, bir dil seçicisi uygulamasında, seçilen dili depolamak için bir Context nesnesi oluşturabilirsiniz. createContext() yöntemini kullanarak bir dil değiştirme işlevi oluşturabilirsiniz ve varsayılan değer olarak İngilizce seçebilirsiniz.

```import React from 'react';

const LanguageContext = React.createContext('en');

export default LanguageContext;```Bu örnek, varsayılan olarak İngilizce dilinde bir LanguageContext nesnesi oluşturur.

Context nesnesini bileşenler arasında paylaşmak için, Provider bileşenini kullanmalısınız. Provider, veri deposunu paylaşır ve bu depoyu kullanan consumer bileşenlerini günceller. Provider bileşeninin value özelliği, paylaşılacak verileri içerir. Bu özelliğe, createContext() yönteminde varsayılan olarak belirtilen değer verilir.

```import React from 'react';import LanguageContext from './LanguageContext';

class LanguageProvider extends React.Component { state = { language: 'en' }

changeLanguage = (e) => { this.setState({ language: e.target.value }); }

render() { return ( {this.props.children} ); }}

export default LanguageProvider;```

Context nesnesine veri sağlamak için, Consumer bileşenini kullanabilirsiniz. Consumer bileşenleri, Context' in güncel değerlerini kullanabilir. Consumer bileşenleri, render prop tekniği kullanır ve genellikle bir işlev bileşenidir.

```import React from 'react';import LanguageContext from './LanguageContext';

class LanguageSelector extends React.Component { static contextType = LanguageContext;

render() { const { language, changeLanguage } = this.context;

return (

export default LanguageSelector;```

Bu örnekte, LanguageContext nesnesine veri sağlamak için, Consumer bileşeni olan LanguageSelector bileşeni kullanılır. Consumer bileşeni, Context' in güncel değerlerini this.context ile alır ve render işlevinde kullanır. Bu sayede, dil seçimi değiştirildiğinde LanguageSelector bileşeni yeniden render edilir ve seçili dil güncellenir.

React Context API'nin kullanımı oldukça kolaydır ve veri paylaşımını kolaylaştırır. Bu özellik, Redux gibi diğer veri yönetimi çözümlerine göre daha hafif olduğundan, küçük uygulamalar için idealdir.

Provider Kullanımı

React Context API'nin en önemli özelliklerinden biri, veri sağlama özelliğini sağlayan Provider özelliğidir. Provider, Context'i kullanacak olan component ağacına veri sağlar. Provider, önceden belirlenmiş bir değeri alarak, bu değeri kullanıcılarla paylaşır. Bu özelliği kullanmak için öncelikle bir Context nesnesi oluşturmanız gerekir. Oluşturulan Context, Provider tarafından kullanılacaktır.

Provider kullanımı oldukça basittir. İlk olarak, Context nesnesi örneklenmeli ve createContext() metodu kullanılmalıdır. Bu metot, Context nesnesi oluşturur. Ardından, Provider bileşeni kullanarak belirli bir değer sağlanmalıdır. Bu değer, Context ağacındaki tüm bileşenler tarafından paylaşılacaktır.

Aşağıda, Provider kullanımına örnek verilmiştir:

```import React from 'react';// Context oluşturulmasıconst ThemeContext = React.createContext('light');

class App extends React.Component { render() { // Provider kullanımı return ( ); }}

function Toolbar(props) { return (

class ThemedButton extends React.Component { // Context kullanımı static contextType = ThemeContext; render() { return ; }}```

Yukarıdaki örnekte, createContext() metodu kullanılarak bir Context oluşturulmuştur. Ardından, Provider kullanarak bu Context ağacındaki tüm bileşenlerin kullanacağı bir değer sağlanmıştır. ThemedButton bileşeni ise, Context değerini kullanmak için kullanılmıştır.

Ayrıca, Provider bileşeninin tüm ağaç boyunca verileri sağlayabilmesi için, en üst bileşende kullanılması gerekir. Provider, bileşen ağacında hangi bileşen altında kullanılırsa, o bileşenin altındaki bileşenler tarafından değer alınacaktır. Bu duruma dikkat ederek, doğru kodlama yapılmış olur.

Sonuç olarak, React Context API'nin Provider özelliği sayesinde, veriler uygulamanın herhangi bir noktasındaki bileşenler tarafından kullanılabilir hale gelir. Doğru kullanıldığında, Context API, kodlama sürecinde oldukça fazla rahatlık ve hız sağlama potansiyeline sahiptir.

Consumer Kullanımı

Consumer, context içindeki verileri kullanan componentler için bir arayüz görevi görür. Consumer componenti parametre olarak bir fonksiyon alır. Bu fonksiyon, context içindeki verileri kullanarak bir JSX elementi döndürür.

Örnek olarak, bir tema context'inde kullanıcı adı ve tema rengi gibi veriler bulunabilir. Consumer, bu verilere ihtiyacı olan componentlerin bunları kullanmasına izin verir.

Aşağıdaki örnek, createContext ile oluşturulmuş bir context'in Consumer kullanımını gösterir:

import React, { createContext } from 'react';
const ThemeContext = createContext("");
function Header() {  return (    <ThemeContext.Consumer>      {value => <header style={{ color: value.color }}>Welcome {value.username}!</header>}    </ThemeContext.Consumer>  );}

Yukarıdaki örnekte, Header componenti içindeki Consumer, ThemeContext içindeki verilere erişmek için kullanılıyor. value parametresi, context içindeki verileri temsil eder ve fonksiyon bu verileri kullanarak bir header elementi döndürür.

Consumer kullanımı, context içindeki verilere erişmek için en yaygın yöntemdir. Ancak, context içindeki verileri set etmek için Provider kullanmak gereklidir.

Context API'nin Redux ile Karşılaştırılması

React Context API ve Redux, React uygulamalarında kullanılan global durum yönetimi araçlarıdır. İkisi arasında bazı benzerlikler ve farklılıklar bulunmaktadır.

Redux, öncelikle büyük ve karmaşık uygulamalar için kullanılan ayrı bir kütüphanedir. Bu kütüphane, uygulamanın tüm durumunu tek bir yerde depolar ve yönetir. Buna karşılık, React Context API, temel olarak bileşen ağacının belirli bir düzeyinde yer alan değerlere erişimi basitleştiren bir özelliktir.

Redux, uygulama durumunun daha iyi yönetilmesine izin verirken, Context API, bileşenler arasındaki veri akışını kolaylaştırmaya yardımcı olur. Redux, genellikle büyük uygulamalar için kullanılırken, Context API, küçük uygulamalar için daha uygundur. Redux, güçlü bir özellik setine sahipken, Context API basitlik açısından tercih edilebilir.

Redux, birbirinden bağımsız parçalardan oluşan bir yapıya sahiptir. Action, reducer ve store gibi parçalar içerir. Bu, Redux'un güçlü ve esnek bir yapıya sahip olmasını sağlar. Ancak bu yapının öğrenilmesi zaman alabilir. Context API ise daha basit bir yapıya sahiptir. Yalnızca bir Context bileşeni ve bununla ilişkili Provider ve Consumer bileşenleri vardır.

Sonuç olarak, Redux ve Context API, uygulamalar için farklı amaçlar için kullanılan araçlardır. Redux büyük ve karmaşık uygulamalar için daha uygundurken, Context API küçük uygulamalar için daha yerinde olabilir. Yapılarının farklı olması nedeniyle, kullanım durumuna göre seçim yapmak önemlidir.

Örnek Kullanım

React Context API'nin bir örnek kullanımı için, bir to-do list uygulaması örneği alabiliriz. Bu uygulama, birkaç adımda nasıl oluşturulacağını ve Context API'nin nasıl kullanılabileceğini gösterir.

Öncelikle, yeni bir Context oluşturmalıyız. Bunu createContext() fonksiyonu kullanarak yapabiliriz. createContext() fonksiyonu, bir Context objesi döndürür.

```

const ToDoContext = React.createContext();

```

Bu yetenek sayesinde, ToDoContext objesi, verilerinizi sağlamak ve depolamak için bir mekanizma oluşturacaktır.

Devam etmeden önce, Provider özelliğinden bahsetmek önemlidir. Provider, todo öğelerini sağlamamıza olanak tanıyacak bir bileşendir. Bu bileşen app.js dosyasına yerleştirilmelidir.

```

```

Provider oluşturulduktan sonra, ToDoContext içindeki verileri göstermek için Consumer özelliğini kullanabiliriz.

```

  {({ todoList }) => {    return (      
        {todoList.map((todo, index) =>          
{todo}
        )}      
    )  }}

```

Not edilebileceği gibi, Consumer özelliği, önceki Provider özelliğinde gösterilen todoList özelliğine erişiyor. Bu sayede, tüm todo öğeleri listeleniyor.

Bu örnek uygulama, Context API'nin ne kadar güçlü olduğunu ve Redux olmadan bile verilerin nasıl yönetilebileceğini gösterir. Ancak, herhangi bir proje için, Redux ve Context API arasındaki farkları ve benzerlikleri değerlendirmek doğru bir yaklaşım olur.

Context Kullanımı

React Context API ile verilerimizi değiştirebileceğimiz bir yapı oluşturabiliriz. Bu özellik, bir Component hiyerarşisi içinde yer alan Componentler arasında veri paylaşımını sağlar. Context kullanmanın ana avantajı, Componentler arasında verilerinizi props geçişleri kullanmadan daha kolay bir şekilde yönetebilmenizdir.Örneğin, bir kullanıcının adını ve soyadını göstermek ve bu verileri güncellemek istediğimizi düşünelim. Context API ile, bu verileri tek bir yerde yönetebilir ve değiştirebiliriz. Ayrıca, Context API sayesinde, veri akışının yönetimini daha kolay hale getiririz. Artık, bir Componentten diğerine veri iletmek, hiyerarşik olarak Componentleri atlamak zorunda kalmayız.Bir Component içinde Context kullanmak için, öncelikle bir Context oluşturmamız gerekir. Bu, createContext yoluyla yapılabilir. createContext, bir tane değişken döndürür, bu değişken, Provider ve Consumer Componentlerini tutar. createContext'a başlangıç değeri de verebiliriz.const MyContext = createContext('default');Oluşturduğumuz Context'i kullanmak için, bu Context'i Provider ve Consumer Componentlerinde kullanabiliriz. Provider, Context içindeki verileri tutar ve bunları alt Componentlere sağlar. Consumer ise, bu verilere erişir ve kullanır.const App = () => { const state = { name: 'John', surname: 'Doe' }; return ( );};const ComponentOne = () => { return ( {context => (

Name: {context.name}

Surname: {context.surname}

)} );};Yukarıdaki örnekte, MyContext adında bir Context oluşturduk ve bu Context'i App Componentinde kullanarak "name" ve "surname" verileri sağladık. Daha sonra, bu verileri ComponentOne içindeki Consumer Componentiyle kullanarak görüntüledik.Context API, React uygulamalarında verileri paylaşmanın ve veri akışını yönetmenin daha kolay bir yolunu sunar. Bu özellikle birlikte, props geçişleri ile uğraşmak yerine, verilerimizi daha düzenli bir şekilde organize edebiliriz.

Multiple Context Kullanımı

React Context API ile birden fazla Context kullanarak, uygulamanız içinde farklı bileşenler arasında veri akışını yönetebilirsiniz. Bunu yapmak için, her bir Context için ayrı bir dosya oluşturmanız ve Context'leri orada tanımlamanız gerekiyor.

Örneğin, bir müşteri uygulaması oluştururken, aynı anda hem müşteri listeniz hem de seçili müşteri bilgileriniz gibi birden fazla veriye ihtiyacınız olabilir. Her iki veri türü için ayrı bir Context dosyası oluşturabilirsiniz.

Birinci örneğimizde, müşterilerin listesi için CustomersContext.js isimli bir dosya oluşturuyoruz.

CustomersContext.js
import React from 'react'; const CustomersContext = React.createContext([]); export default CustomersContext;

İkinci örneğimizde ise, seçili müşteri bilgileri için SelectedCustomerContext.js isimli bir dosya oluşturuyoruz.

SelectedCustomerContext.js
import React from 'react'; const SelectedCustomerContext = React.createContext(null); export default SelectedCustomerContext;

Daha sonra, bileşenlerimizde bu Context'leri kullanarak veri alışverişi yapabiliriz. Örneğin, CustomersList bileşenimizde CustomersContext'imize erişip müşteri listesini göstermek için Consumer kullanabiliriz.

CustomersList.js
import React from 'react'; import CustomersContext from './CustomersContext'; const CustomersList = () => { const customers = React.useContext(CustomersContext); return ( {customers.map(customer => ( {customer.name} ))} ); }; export default CustomersList;

Seçili müşteri bilgilerini göstermek için de SelectedCustomerContext'imize erişebiliriz.

SelectedCustomerInfo.js
import React from 'react'; import SelectedCustomerContext from './SelectedCustomerContext'; const SelectedCustomerInfo = () => { const selectedCustomer = React.useContext(SelectedCustomerContext); return ( {selectedCustomer ? ( {selectedCustomer.name} {selectedCustomer.email} ) : ( No customer selected. )} ); }; export default SelectedCustomerInfo;

Birden fazla Context kullandığınızda, bileşenlerinizin her biri için ayrı bir Provider oluşturmanız gerekiyor. Ayrıca, Context'lerinizin isimleri benzersiz olmalıdır.

App.js

import React from 'react'; import CustomersContext from './CustomersContext'; import SelectedCustomerContext from './SelectedCustomerContext'; import CustomersList from './CustomersList'; import SelectedCustomerInfo from './SelectedCustomerInfo'; import customersData from './customers.json'; const App = () => { const [customers, setCustomers] = React.useState(customersData); const [selectedCustomer, setSelectedCustomer] = React.useState(null); const handleCustomerSelection = React.useCallback( customerId => { setSelectedCustomer(customers.find(c => c.id === customerId)); }, [customers], ); const customersContextValue = React.useMemo(() => customers, [customers]); const selectedCustomerContextValue = React.useMemo(() => [selectedCustomer, handleCustomerSelection], [selectedCustomer, handleCustomerSelection]); return ( ); }; export default App;

Yukarıdaki örnekte, CustomersContext ve SelectedCustomerContext için ayrı Provider'lar oluşturduk. Ayrıca, her iki Context'e de ilişkin değerlerin içinde olmasını istediğimiz verilerin bağımsız olarak tutulduğundan emin olduk. Son olarak, bu örnekte CustomersList bileşeninde tüm müşterileri, SelectedCustomerInfo bileşeninde ise sadece seçili müşteri bilgilerini gösterdik.

React Context API ile birden fazla Context kullanarak, uygulamanız içindeki verilerin yönetimini daha modüler ve okunaklı hale getirerek, uygulama geliştirmeyi daha verimli hale getirebilirsiniz.