React, JavaScript kütüphanesi olarak kullanılan bir araçtır ve tek sayfada birden fazla bileşen kullanımına olanak sağlar Bileşenler, React uygulamalarının temel yapı taşlarıdır ve belirli bir işlevi yerine getiren ve tekrar kullanılabilen yapı taşları olarak tanımlanabilirler Bileşenler, props ve state gibi özelliklere sahip olabilirler Props, bileşenlere özelliklerin verilmesini ve bileşenlerin farklı durumlarda farklı davranışlar sergilemesini sağlar State ise bileşenin içinde tutulan dinamik özellikleri temsil eder
React bileşenleri, Function Component ve Class Component olmak üzere iki farklı yapıda oluşturulabilirler JSX adındaki özel dil ile React bileşenleri oluşturulur ve bu dil aynı zamanda bileşenlerin kullanımı için de kullanılır Bir bileşenin içinde başka bileşenlerin kullanılması da mümkündür ve bu durumda Children Prop özelliği kullanılır
Bir bileşene default özelliklerin verilmes

React, JavaScript kütüphanesi olarak kullanılan bir araçtır ve daha önceki teknolojilerin aksine tek bir sayfada birden fazla bileşenin kullanılmasına imkan verir. Bu nedenle bileşenler, React uygulamalarının olmazsa olmazıdır.

React bileşenleri, belirli bir işlevi yerine getiren ve tekrar kullanılabilen yapı taşlarıdır. Bileşenler, props ve state gibi özelliklere sahip olabilirler. Props, bileşenlere özelliklerin verilmesini sağlar ve bu özellikler bileşenlerin farklı durumlarda farklı davranışlar sergilemesine neden olabilir. State ise bileşenin içinde tutulan dinamik özellikleri temsil eder.

Bileşenler, iki farklı yapıda oluşturulabilirler: Function Component ve Class Component. Function Component, işlevsel bir bileşen oluşturmak için kullanılırken, Class Component daha karmaşık bileşenler oluşturmak için daha uygun bir seçenektir. React'ta JSX adında özel bir dil kullanılır ve bu dil, React bileşenlerinin oluşturulması ve kullanımı için de kullanılır.

Bir bileşenin içinde başka bileşenlerin kullanılması da mümkündür. Bu durumda Children Prop adında bir özellik kullanılır ve bu özellik aracılığıyla, bir bileşenin içinde yer alan diğer bileşenleri kullanabilirsiniz. Bir bileşene default özelliklerin verilmesi, Default Props kavramı ile açıklanırken, Props'un hangi veri türlerine sahip olabileceği de PropTypes kavramı ile belirlenir.

Bunların yanı sıra, bileşenlerin import edilmesi ve export edilmesi de gereklidir. Bu işlem, bir bileşenin farklı bir bileşen tarafından kullanılabilmesini sağlar. React bileşenleri hakkında temel kavramları anlamak, React uygulamalarının temelini oluşturmak için oldukça önemlidir.

Bileşen Nedir?

React uygulamalarının temel yapı taşı olan bileşenler, birbirinden bağımsız ve yeniden kullanılabilir özelliklere sahip öğelerdir. Birçok bileşen oluşturularak, birleştirilerek kompleks uygulamalar oluşturulabilir. Bir bileşen, diğer bileşenlerle birleştirilerek bir sayfayı oluşturur. Bileşenler, özellikleri ve durumlarıyla birlikte çalışır.

React bileşenleri, rahat ve kolay bir şekilde yeniden kullanılabilme özelliği ile oldukça avantajlıdır. Bileşenler, bağımsız olarak veya birbirleriyle ilişkilendirilerek kullanılabilir. Yalnızca her bileşen için farklı özelliklerle birlikte birden fazla bileşen oluşturmak mümkündür. Bu sayede, geliştirme sırasında zaman kazanılabilir ve iş akışı daha da sorunsuz hale getirilebilir.

Props Nedir?

React bileşenleri, esnek ve yeniden kullanılabilir ögelerdir. Bu bileşenler için veriler, props adı verilen özellikler aracılığıyla iletilir. React bileşenleri, props kullandıklarında diğer bileşenlerle kullanması daha kolay hale gelir. Props kavramı, React bileşenlerinde benzersiz bir özelliktir.

Props, bir bileşenin özelliklerini belirlemek için kullanılır. Bu özellikler, kendisine verilen değerlere göre değişebilir. Bir bileşene özellik vermek için, bileşene üzerinde attributes ataması yapmak gerekir. Ağaç yapısının üstünden en alt düzeydeki bileşenlere doğru özellikler aktarılabilir.

Props, bir React bileşenine gönderilen verilerdir. Bu veriler, bileşenin doğru şekilde gösterilmesi için kullanılır. Özellikler, bileşenlerin yapısında bulunan herhangi bir değişkene atandığı için değiştirilebilir. Parantezler içinde, özellikler {} işaretli süslü parantezler içinde yazılır.

Default Props, bir bileşene özellik atarken kullanılır. Eğer bir bileşene props gönderilmezse, bileşenin varsayılan değerleri atanır. Bir bileşene varsayılan props atamak, defaultProps methodu kullanılarak gerçekleştirilir. Örneğin:

class Example extends React.Component {  render() {    return <div>{this.props.message}</div>;  }}Example.defaultProps = {  message: 'Merhaba Dünya'};

Bu örnekte, Example bileşenine message props'u atanır. Ancak, message props'u gönderilmezse, React bileşeni varsayılan olarak 'Merhaba Dünya' yazdırır.

PropTypes, props'un hangi veri türlerine sahip olabileceğini belirler. PropTypes kavramı, bir bileşene geçirilen props'un doğru türde olduğundan emin olmak için kullanılır. PropTypes yardımıyla, bileşenin doğru şekilde çalışıp çalışmadığından emin olabiliriz.

Örneğin:

import PropTypes from 'prop-types';class Example extends React.Component {  render() {    return <div>{this.props.message}</div>;  }}Example.propTypes = {  message: PropTypes.string};

Bu örnekte, Example bileşenine message prop'u gönderilir. PropTypes belirtilerek, message prop'unun string tipinde olduğu belirtilir.

Children Props, bir bileşenin içinde başka bileşenlerin nasıl kullanılabileceğini belirtir. Bu sayede bileşenler arasındaki iletişim daha doğru hale gelir.

Örneğin:

class Example extends React.Component {  render() {    return <div>{this.props.children}</div>;  }}ReactDOM.render(  <Example>    <h1>Merhaba Dünya</h1>    <p>Bu bir paragraf</p>  </Example>,  document.getElementById('root'));

Bu örnekte, Example bileşeninde children prop'u kullanılır. İçinde h1 ve p bileşenleri belirtilir. Bu sayede, bileşenin içindeki veriler daha doğru şekilde işlenir.

Default Props

React bileşenleri, web uygulamalarının geliştirilmesi için olmazsa olmaz yapı taşlarıdır. Bileşenlerin çalışma prensipleri ve nasıl oluşturulacağı hakkında fikriniz varsa, daha özelleştirilmiş ve işlevsel uygulamalar geliştirmek için çok fazla fırsata sahipsiniz. Component'lara verilen özelliklerin anahtarı ise "Props"tır.

Props, bir bileşene verilen parametrelerdir. Bileşenlerin özellikleri bir fonksiyona benzer şekilde değişebilir. Props, bir bileşene değiştirilemez verilerin yanı sıra, bir özellikleri değiştirilebilir. React'teki bileşenleri kullanarak, uygulamanın özellikleri filtrelenir, sınıflandırılır ve yeniden düzenlenir.

Bir bileşene default olarak özellikler vermenin nasıl yapıldığına gelince; React'ta, bileşenlere ait varsayılan özellikler defaultProps olarak belirlenir. Eğer bileşenin kullanıcısı, bileşene özellik vermezse, defaultProps kullanılacaktır.

Örnek verecek olursak; proje içinde bir buton bileşeni kullanılıyorsa, bu bileşenin default olarak renginin mavi olması isteniyorsa, kod şu şekilde yazılır;

import React from "react"class Button extends React.Component {  render() {    const { onClick, text, color } = this.props;    return (              {text}          );  }}Button.defaultProps = {  color: 'blue'}export default Button;

Örnekte görüldüğü gibi, `Button` bileşenine varsayılan olarak mavi bir renk ayarlanmıştır ve bu ayar herhangi bir özellik verilmediği durumlarda devrededir.

PropTypes

PropTypes, React bileşenlerinin alabileceği özellik türlerini tanımlayan bir kavramdır. Bu kavram sayesinde, bir bileşenin hangi türde özelliklere ihtiyaç duyduğu açık bir şekilde belirtilebilir. propTypes özelliği ile props'un sahip olabileceği veri türleri belirtilir ve bir bileşene geçirilmesi gereken özelliklerin yanlış veri türü ile verilmesi önlenir. Bu özelliğin kullanımı, bileşenlerin kodlarının daha anlaşılır olmasını sağlar.

Bir props'un hangi türde olabileceğini belirtmek için propTypes özelliği şu şekilde kullanılır:

  static propTypes = {    isim: PropTypes.string,    yas: PropTypes.number,    admin: PropTypes.bool  };

Bu örnekte, "isim" özelliği string türüne, "yas" özelliği number türüne ve "admin" özelliği bool türüne sahip olabilir. Eğer bu türler dışında bir değer verilirse, konsolda bir hata mesajı gösterilir ve sorun kolayca çözülebilir.

propTypes özelliği ile birlikte "isRequired" kullanarak props'un zorunlu olup olmadığını belirtebilirsiniz:

  static propTypes = {    isim: PropTypes.string.isRequired,    yas: PropTypes.number,    admin: PropTypes.bool  };

Bu örnekte, "isim" özelliği artık zorunlu hale geldi ve eğer verilmezse, konsolda bir hata mesajı gösterilir.

Bazı veri türleri React için özel olarak tasarlanmış bileşenlerdir ve bu veri türlerini props olarak geçtiğinizde "checkPropTypes" kullanmanız önerilir. Örneğin, "node", "element" ve "func" türleri için:

  static propTypes = {    nodeExample: PropTypes.node,    elementExample: PropTypes.element,    funcExample: PropTypes.func  };

Yukarıdaki örnekte, istenilen özelliklerin veri türleri belirtilmiştir. Bu sayede uygulamanın, veri türlerine yönelik istenmeyen davranışlar sergilemesinden kaçınılmış olur.

Children Props

Children Props, React bileşenlerinde bir bileşenin içinde başka bileşenlerin nasıl kullanılacağını açıklayan bir kavramdır. Bileşenin içindeki içerik dinamik olduğunda veya bileşen içinde önceden belirlenemeyen farklı bileşenlerin kullanılması gerektiğinde kullanılır.

Children Props, bileşenin props objesi içinde 'children' adında özel bir prop oluşturulmasıyla kullanılır. Bu özellik, bileşenin içinde kullanılan farklı bileşenleri alır ve bu şekilde sıralar. Böylece, bileşenin içindeki içerik reflect the structure of the component.

Children Props özelliği, nesting yapısına sahip olan bileşenler için oldukça kullanışlıdır. Örneğin, bir form bileşeni içindeki bileşenlerin sıralanması veya sidebar bileşenindeki farklı bileşenlerin kullanımı için kullanılabilir.

Bu özelliği kullanırken, belirli bir bileşen içinde kullanılacak farklı bileşenlere de özel propslar atanabilir. Örneğin, bir Card bileşeni içindeki Button bileşenine renk ve boyut propsları atanabilir.

Aşağıdaki örnek kodda, bir Card bileşeni içindeki Button bileşeni Children Props özelliği ile kullanılmaktadır:

```function Card(props) { return (

function Button(props) { return {props.text};}

function App() { return (

Yukarıdaki örnek kodda, Card bileşeni içindeki Button bileşeni, children prop özelliği kullanılarak eklenmiştir. Bu sayede, Card bileşeni içinde farklı bileşenlerin kullanımı kolaylaşmıştır.

Overall, Children Props özelliği, bileşenlerin içindeki farklı bileşenlerin dinamik kullanımını sağlayarak, React uygulamalarının daha esnek ve özelleştirilebilir olmasını sağlar.

State Nedir?

React bileşenleri, uygulamanın dinamik olması için özellikle değişen bir duruma sahip olabilir. Bu özelliklere State adı verilir. Bileşenin içindeki durum State olarak tanımlanabilir. State, kullanıcının etkileşimi sonucu değişen verileri tutar.

State, props gibi kullanılır ancak farkı şu ki, props sadece bir bileşenden diğerine taşınabilen özelliklerdir, State ise sadece bileşenin içinde kendi içinde çalışır ve bileşenin durumunu değiştirir.

Örneğin, bir sayfadaki butona tıkladığımızda sayfadaki bir resmin kaybolması veya görünmesi gibi değişen durumlar State ile tutulur. İster bir sayfa yönlendirme olsun, isterseniz de bir butona tıklanması sonucu ortaya çıkan bir modal durumu, State olmadan tam anlamıyla işe yaramaz.

State, Class Component bileşeninde kullanılır ve Class Component'in constructor() metodunun içinde tanımlanır. Constructor() metodu, bileşenin oluşturulması sırasında çalışır ve ilk state değerleri atandığında çağrılır.

Ayrıca, State'i güncellemek için bileşenin setState({}) fonksiyonunu kullanabilirsiniz. setState() fonksiyonu, State değerlerini değiştirir ve bileşeni yeniden render eder.

State ve props'ların birleşimi, tamamen dinamik bir bileşen oluşturmanıza olanak tanır.

Bileşenler Nasıl Oluşturulur?

Bileşenler, React uygulamalarının temel yapıtaşlarıdır. Bu nedenle, bir uygulama geliştirirken bileşenlerin nasıl oluşturulacağı oldukça önemlidir. Her bileşen, bir JavaScript sınıfı ya da fonksiyonu olarak tanımlanabilir ve en basit haliyle render() fonksiyonu içinde JSX döndürmektedir.

Bileşen oluşturma işlemi için öncelikle bir bileşen ismi belirlemek gereklidir. Bu isim, diğer bileşenlerden ya da şablon içindeki diğer elementlerden farklı olmalıdır. Daha sonra, isim kullanarak bir bileşen sınıfı ya da fonksiyonu oluşturulabilir.

Function Component ve Class Component olmak üzere iki farklı bileşen oluşturma yöntemi vardır. Function Component tanımlama işlemi oldukça basittir ve sadece bir fonksiyon içinde JSX döndürülmesi yeterlidir. Örneğin:

```jsxfunction MyComponent() { return (

Class Component oluşturma işlemi, bir sınıf içinde birkaç yardımcı fonksiyon ve `render()` fonksiyonu kullanılarak gerçekleştirilebilir. Örneğin:

```jsximport React from "react";

class MyComponent extends React.Component { render() { return (

Bir bileşen oluşturulduktan sonra, bileşen kullanımı için export işlemi yapılmalıdır. Daha sonra, başka bir bileşen veya ana şablon içinde bu bileşen çağrılabilir. Örneğin:

```jsximport React from "react";import MyComponent from "./components/MyComponent";

class App extends React.Component { render() { return (

export default App;```

Bu şekilde, bileşenlerin oluşturulması ve kullanımı oldukça basit ve kullanışlıdır. Bu nedenle, React uygulamaları geliştirirken bileşenlerin nasıl oluşturulacağı ve kullanılacağı oldukça önemlidir.

Function Component

React bileşenlerinin temel kavramlarına bir göz attıktan sonra, şimdi bileşenlerin nasıl oluşturulacağına dair örnekler vermeye başlayabiliriz. Bunun için öncelikle Function Component kavramına değinmemiz gerekiyor.

Function Component, basit bileşenleri oluşturmak için kullanılan bir yapıdır. Bir fonksiyon şeklinde tanımlanır ve sadece bir props nesnesi alır. Function Component'ler basit yapıları sayesinde performans açısından da avantajlıdırlar. Aşağıdaki örnek kodda basit bir Function Component oluşturma işlemi verilmiştir.

function MyComponent(props) {  return ;}

Yukarıdaki örnekte MyComponent adlı bir Function Component tanımlanmıştır. Bu bileşen, props olarak bir name özelliği alır ve adını kullandığı kişiye özel olarak döndürür.

Function Component'ler diğer bileşenlerle birlikte kullanılabilirler ve karmaşık yapıları basit hale getirebilirler. Ancak, daha karmaşık bileşenler oluşturmak istediğimizde Class Component yapısını kullanmamız gerekebilir.

Class Component

Class Component, React'ta kullanılan bir diğer bileşen oluşturma yöntemidir. Bu yöntem, function component yönteminin daha eski bir sürümüdür. Class Component, JavaScript class'ları kullanılarak oluşturulur ve ES6 sürümünden önce ortaya çıkmıştır.

Class Component'lar, function component'lardan farklı olarak daha fazla özellik ve daha fazla işlevsellik sunarlar. Bu nedenle, daha büyük ve daha karmaşık uygulamalarda kullanımı tercih edilirler. Class Component'lar, state ve lifecycle yönetimi gibi özellikleri kullanırken function component'lardan daha kolay bir şekilde kullanılabilirler.

Bir Class Component oluşturmak için, genellikle React.Component sınıfından kalıtım alınır. Bu sınıf, React bileşeninin temelinde bulunan tüm yöntemleri ve özellikleri içerir ve bu nedenle bunları kullanarak daha karmaşık bileşenler oluşturmak mümkündür. Ayrıca, Class Component'ların state özelliği de bulunmaktadır ve bu nedenle class'lar ile daha karmaşık uygulamalar yapmak mümkündür.

Aşağıdaki örnek, bir Class Component'in nasıl kullanılabileceğini göstermektedir:

```import React, { Component } from "react";

class MyComponent extends Component { render() { return

export default MyComponent;```

Yukarıdaki örnek, "MyComponent" adında bir Class Component oluşturur ve "Hello World!" ifadesini döndürür. Bu bileşen daha sonra kullanılabilir hale getirilmek için "export default" anahtar kelimesi ile dışa aktarılır. Sonrasında, bu bileşen, diğer bileşenlerde veya uygulama seviyesinde kullanılabilir.

Class Component'lar, daha fazla işlevsellik ve daha fazla özellik sağlamaları nedeniyle, diğer bileşenlerden daha karmaşık olabilirler. Ancak, özellikle büyük uygulamalarda kullanıldıklarında, daha iyi bir tasarıma sahip olmaları nedeniyle tercih edilebilirler.

Bileşenler Nasıl Kullanılır?

Bileşenlerin nasıl kullanılacağı, React uygulama geliştirirken önemli bir konudur. Bu konuda öğrenmeniz gereken bazı temel bilgiler vardır. İlk olarak, bir bileşeni kullanmak için, bileşeni import etmeniz gerekir.

Örneğin, 'App' adında bir bileşenimiz olsun. Bu bileşeni kullanmak istediğimiz başka bir bileşende kullanmak için şöyle bir kod yazabiliriz:

    import App from './App'; function Main() {  return (    
                
  );}    

Yukarıdaki kod örneğinde, 'App' bileşeni './App' yolundan import edilir ve 'Main' bileşeninde kullanılır. 'App' bileşenini kullanmak için sadece <App /> JSX etiketini kullanmanız gerekir.

Başka bir bileşeni kullanırken, özelliklerini de kullanabilirsiniz. Örneğin, 'Title' adında bir bileşenimiz olsun ve içerisine bir 'text' özelliği ekleyelim. Bu bileşeni 'Main' bileşeninde şu şekilde kullanabiliriz:

    function Title(props) {  return ;} function Main() {  return (