React, Facebook tarafından geliştirilen açık kaynaklı bir JavaScript kitaplığıdır Bileşen tabanlı bir UI oluşturmayı ve uygulamaları küçük parçalara bölmeyi sağlar Bu, uygulamanın daha modüler bir yapıya sahip olmasını ve kod sahibinin her bir bileşeni daha kolay bir şekilde anlamasına olanak tanır JSX sözdizimi, React bileşenlerinde kullanılan bir sözdizimidir ve HTML benzeri bir yapıya sahiptir JSX içinde, HTML öğeleri JSX elementleri olarak kullanılır ve React bileşenleri Javascript kodlarını ve HTML öğelerini bir arada kullanarak oluşturulur En popüler React örneği olan Hello, World! uygulaması, bileşen tabanlı bir yapı oluşturarak ekranda basit bir metin görüntüler

React, Facebook tarafından geliştirilen açık kaynaklı bir JavaScript kitaplığıdır. İnternetin hızla geliştiği bu dönemde, web uygulamalarının sağlam, güvenilir ve kullanıcı dostu olması artık bir gereklilik haline geldi. İşte bu gereklilikler doğrultusunda React'in varlığı devreye giriyor. Bu yazımızda React'in temellerini ve sözdizimini öğrenerek, web uygulamanızı daha iyi bir yere taşıyabilirsiniz.

React'in Temelleri

React, açık kaynaklı bir JavaScript kitaplığıdır ve Facebook tarafından geliştirilmektedir. Bu kitaplık ile birlikte, bileşen tabanlı bir UI oluşturabilirsiniz. Bu, uygulamanızı küçük parçalara bölmeyi, her bir parçayı ayrı ayrı yönetmeyi ve daha sonra tüm parçaları birleştirmeyi sağlar.

Bu yöntem, uygulamanızın daha modüler bir yapıya sahip olmasını ve kod sahibinin her bir bileşeni daha kolay bir şekilde anlamasına olanak tanır. Bileşenler, mevcut kod yapısını bir araya getirerek daha büyük bir uygulama yapısı oluşturarak, karmaşık yazılım problemlerinin çözümünü kolaylaştırır.

React, kullanıcı arayüzü oluşturmak için yeni bir paradigma sunar ve bu paradigma, ayrılık ilkesine uygun olarak tasarlanmıştır. Bu sayede, farklı komponentleri bir araya getirerek uygulamanızın belirli bir bölümünü tek başına yönetmeniz mümkün olur. Ayrıca, React, DOM'a doğrudan erişmek yerine, Virtual DOM kullanarak daha hızlı bir uygulama performansı sunar.

React'in Sözdizimi

React, bileşen tabanlı bir UI oluşturmak için tasarlanmış açık kaynaklı bir JavaScript kitaplığıdır. React bileşenleri, her biri bir JavaScript sınıfı olarak tanımlanan küçük parçalardır ve her bir bileşen, kendi özelliklerine sahiptir. Her React bileşeni, bir render() yöntemi içerir ve bu yöntem, bileşenin UI'sını oluşturur. Bu UI, JSX sözdizimi kullanılarak tanımlanır.

JSX sözdizimi, React bileşenlerinde kullanılan bir sözdizimidir. JSX, HTML benzeri bir yapıya sahiptir ve React JavaScript'te kullanılan kodlarla etkileşimde bulunur. JSX kodu, HTML kodu gibi görünür ve bir transpiler kullanılarak vanilla JavaScript'e dönüştürülür. Bu sayede, kod tarayıcının anlayabileceği şekilde olur ve React bileşenleri oluşturulabilir.

Bununla birlikte, React bileşenlerini oluşturmak için JSX kullanmak zorunda değilsiniz. Bileşenler, JavaScript kodu kullanılarak da tanımlanabilir. Ancak, JSX, React bileşenlerinin oluşturulmasını daha kolay ve anlaşılır hale getirir.

JSX Sözdizimi Kullanımı

React bileşenlerinde kullanılan JSX, HTML benzeri bir yapıya sahiptir ancak JSX'in bir dizi özelliği vardır. JSX sözdiziminin temel amacı, React bileşenlerinde gösterim oluşturmak için JavaScript kodları ile HTML öğelerini bir araya getirmektir. Bu sayede, React bileşenleri Javascript kodlarını ve HTML öğelerini bir arada kullanarak oluşturulur.

JSX içinde, HTML öğeleri JSX elementleri olarak kullanılır. Örneğin, <div> JSX elementi, DOM'da bir <div> öğesiyle eşdeğerdir. JSX, JavaScript kodları ile etkileşim halinde olduğundan, normal HTML'de yer almayan özelliklere sahip öğeler de oluşturulabilir. Bu, örneğin <button> öğesinde görülebilir, bu öğe JSX içinde onclick özelliğine sahip olabilir.

Aşağıdaki örnek, JSX bileşenlerinin nasıl oluşturulduğunu göstermektedir:

import React from 'react';class HelloMessage extends React.Component {  render() {    return <h1>Hello {this.props.name}!</h1>;  }}ReactDOM.render(<HelloMessage name="John" />, mountNode);

Bu örnekte, <HelloMessage /> bileşeni JSX kullanılarak oluşturuldu. Bu bileşene, name özelliği verilerek "John" olarak ayarlandı. mountNode değişkeni ise, bileşenin oluşturulacağı HTML öğesini belirtir.

Bu sayede, React bileşenleri JSX sözdizimi kullanarak oluşturulur ve kullanıcı arayüzü oluşturmak için JavaScript kodları ile birleştirilir.

Örnek JSX Kodu

JSX, React bileşenleri için kullanılan bir sözdizimidir. Bunun bir örneği olarak, <h1>Hello, World!</h1> JSX kodu kullanılabilir. Bu, HTML koduna benzer ve tarayıcıda Hello, World! yazısı görüntülenir. JSX kodu, JavaScript koduyla etkileşime girebilen bir yapısı vardır. Bu nedenle, React bileşenleri oluşturmak için kullanılabilir.

Hello, World!

React ile küçük bir uygulama başlangıcının en popüler örneği, "Hello, World!" uygulamasıdır. Bu uygulama, ekranda basit bir "Hello, World!" metnini görüntüler. Bu örnek uygulama, React'in temellerini uygulamalı olarak öğrenmek isteyenler için popüler bir başlangıç noktasıdır.

Bir Hello, World uygulaması, çok küçük bir React bileşeni ile oluşturulabilir. Bu bileşen, ekranda görüntülenecek olan metni sağlar. Bu metin sadece "Hello, World!" olabilir veya istenilen metin olabilir. Aşağıdaki örnek kodda, bir Hello, World bileşeni tanımlandı.

'use strict';import React from 'react';import ReactDOM from 'react-dom';class HelloWorld extends React.Component {  render() {    return (          );  }}ReactDOM.render(, document.getElementById('root'));

Yukarıdaki kodda, bir React bileşeni "HelloWorld" tanımlandı. Bu bileşen, ekranda bir h1 etiketi içinde "Hello, World!" metnini görüntüler. ReactDOM.render() yöntemi, bileşenin tarayıcıda görüntülenmesini sağlar. Bu yöntem, bileşenin görüntüleneceği DOM düğümünü belirler.

Yukarıdaki örnekte bileşenler, JSX sözdizimi kullanılarak oluşturuldu. JSX, React bileşenlerinde kullanılan bir sözdizimidir ve JavaScript'le etkileşimde bulunabilir. Bu sayede, bir bileşen oluşturmak daha kolay hale gelir.

Bu küçük örnek, React ile birlikte kullanılan JSX sözdizimini ve React bileşenlerinin nasıl oluşturulacağına dair temel bilgileri vermektedir. Bunları öğrendikten sonra, React ile güzel ve ölçeklenebilir uygulamalar geliştirilebilir.

yazısı görüntülenir.

Aşağıdaki örnekte, App bileşeni, Greetings bileşenini içerir ve Greetings bileşeni, props olarak name özelliğini alarak Hello, {props.name}!yazısını görüntüler.

import React from 'react';	//React kütüphanesi
import ReactDOM from 'react-dom';	//ReactDOM kütüphanesi
class Greetings extends React.Component {'{'}	//Greetings bileşenini tanımlar
render() {'{'}	//render() yöntemi bileşenin görüntülenmesini sağlar
return {' '} Hello, {'{'}this.props.name{'}'}! {' '};	//props ile verilen ismi görüntüler
{'}'}
{'}'}
class App extends React.Component {'{'}	//App bileşenini tanımlar
render() {'{'}	//render() yöntemi bileşenin görüntülenmesini sağlar
return {' '} {''} {' '};	//Greetings bileşenini içerir ve props olarak "React" verir
{'}'}
{'}'}
ReactDOM.render({''}, document.getElementById('root'));	//App bileşenini belirtilen 'root' elementine yerleştirir

Bu kod, tarayıcıda aşağıdaki çıktıyı verir:

Hello, React!

JSX Kodunun Transpile Edilmesi

React ile çalışırken, JSX kodunun dönüştürülmesi gerekmektedir. Bu, kodun tarayıcının anlayabileceği vanilla JavaScript'e dönüştürülmesi anlamına gelir. JSX, HTML benzeri bir sözdizimi kullanır ve React bileşenlerinde kullanılır. Böylece, kodlar daha okunaklı ve anlaşılır hale gelebilir. JSX kodu, transpile edildikten sonra, React bileşenleri oluşturulabilir.

Bu dönüştürme genellikle Babel gibi transpilerlar kullanılarak yapılır. Bu transpilerlar, kodu eski JavaScript sürümlerine dönüştürmede de kullanılabilirler. JSX kodunun transpile edilmesi, React'te çalışırken temel bir adımdır. Transpile edilmiş kodun tarayıcının anlayabileceği şekilde olması, iyi çalışan bir React uygulaması için önemlidir.

React Bileşenleri ve Props Kullanımı

props ile oluşturulabilir. Bu özellikler, bileşene veri sağlar ve bileşenin görüntülenmesini etkiler. Örneğin, bir bileşeni oluşturduğunuzu varsayalım. Bu bileşenin props özelliği, butonun yazısını belirleyen bir text olabilir. Ayrıca, props özelliği ikonun türünü belirleyebilir. Böylece, bileşeni geniş bir yelpazede kullanılabilir hale gelir ve her kullanım senaryosunda özelleştirilebilir hale gelir. Props, herhangi bir veri türünü alabilir ve bileşene iletilirken bir değişken adı ile belirlenebilir. Bu şekilde, bileşene veri aktarma işlemi kolaylaşır ve bileşenler kendi özelliklerine göre tasarlanabilir. Bu özellikleri kullanarak, karmaşık uygulamaların bileşenlerini oluşturabilir ve birbirleriyle uyumlu hale getirebilirsiniz.

props=

React bileşenleri oluştururken, 'props' adı verilen özellikler kullanarak bileşenlere veri aktarabilirsiniz. Bu, bileşenlerin görüntülenmesini ve işlevlerini etkiler.

Örneğin, bir uygulama içinde yer alan bir bileşen, 'Ana Sayfa' butonunu içerebilir ve bu buton, kullanıcının ana sayfaya yönlendirilmesini sağlayabilir. Bu buton'un aktif olması veya olmaması, 'props' adı verilen özellikler ile yönetilebilir.

'Props', bileşenler arasında veri ve fonksiyonların transfer edilmesini sağlar. Bu özellik, uygulamanın daha modüler hale gelmesine ve yeniden kullanılabilir bileşenlerin oluşturulmasına yardımcı olur.

Bir 'props' özelliği, bileşen oluşturulurken belirtilebilir veya daha sonra bileşene veri aktarımı yapılırken kullanılabilir. Özellikler, isteğe bağlı olarak kullanılabilir.

React bileşenlerinde 'props' kullanımı, kodun daha okunaklı ve düzenli hale gelmesini sağlar. Ayrıca, bileşenlerinizi daha esnek hale getirir ve veri kaynağından bağımsız hale getirir.

ile oluşturulabilir. Bu özellikler, bileşene veri sağlar ve bileşenin görüntülenmesini etkiler.

React bileşenleri, genellikle props adı verilen belirli özelliklerle oluşturulur. Bu özellikler, bileşenin ne göstereceğini ve nasıl davranacağını tanımlar. Props, bileşenler arasında bilgi ve veri iletimi sağlamak için de kullanılabilir. Örneğin, bir User bileşeni, bir kullanıcının adı, soyadı ve profil resmi gibi özelliklere sahip olabilir. Bu özellikler, props olarak bileşene sağlanabilir ve kullanıcının sayfasında görüntülenen profili oluşturmak için kullanılabilir.

Bir bileşeni oluşturmak için, önce bir sınıf oluşturulmalıdır. Bu sınıf, React.Component öğesinden genişletilebilir ve render() yöntemi içermelidir. Bu yöntem, bileşenin UI'sını oluşturur ve JSX sözdizimi kullanılabilir. JSX, HTML kodu gibi görünür, ancak JavaScript'te işlenir.

Örnek Bir Bileşen ve Props

Bileşen Adı	Props
UserCard	name: Kullanıcının adı (string) surname: Kullanıcının soyadı (string) profilePic: Kullanıcının profil resmi (string - URL) age: Kullanıcının yaşını gösteren (number)

State'lerin Kullanımı

state kullanmak, bileşenin belirli bir durumunu takip etmek için kullanılır. Bu durum, bileşenin görüntülendiği şekli etkileyebilir ve bileşen güncellendiğinde yeniden oluşturulabilir. State, React uygulamalarında kullanmanın kolay ve güvenli bir yoludur. Çünkü React bileşenleri, state yönetimindeki tutarlılığı sağlamak için bunları yönetir. Herhangi bir kesinti olma olasılığı yoktur.

State, React bileşenlerinde değiştirilebilir değerlerdir. React bileşenleri, belirli bir state değişikliği olduğunda kendilerini yenilerler ve yeni verileri görüntülerler. Böylece, mümkün olan en son durumda olursunuz. State yönetimi, React'in güçlü bileşenlerine olanak tanır ve daha karmaşık uygulamaların oluşturulmasına olanak sağlar.

Bu özelliği kullanarak, kullanıcının bir uygulama boyunca kullandığı verileri de takip edebilirsiniz. Örneğin, bir kullanıcının bir uygulamada yaptığı tercihler, sonraki kullanımlarında uygulamanın nasıl davranacağını belirleyebilir. Bu, kullanıcılara özelleştirilmiş bir deneyim sağlama konusunda yardımcı olabilir.

State ayrıca, React bileşenlerinin bir diğer güçlü özelliği olan bileşenler arasındaki veri akışını kolaylaştırır. Bir bileşenin state'ine erişmek için, diğer bir bileşen üzerinden bir iletişim başlatmanız gerekmez. Bileşenler birbirleriyle iletişim kurabilir ve sonuçta birbiriyle uyumlu bir şekilde çalışabilirler.

Kısacası, React'te state kullanımı, uygulamaların verimli, güvenli ve tutarlı olmasına yardımcı olan önemli bir özelliktir. Bu özelliği kullanarak, bileşenlerinizi özelleştirebilir, uygulamalarınızı geliştirebilir ve kullanıcıların daha iyi bir deneyim yaşamasına olanak sağlayabilirsiniz.

state

React bileşenlerinde state kullanarak, bileşenin belirli bir durumunu takip edebilirsiniz. Bu durum, bileşenin görüntülendiği şekli etkileyebilir ve bileşen güncellendiğinde yeniden oluşturulabilir.

State ile, değişkenleri ve bileşenlerin durumunu belirleyebilirsiniz. Bu durum, bileşen içinde tutulan verileri temsil eder. State, bileşenin doğru şekilde işlev görmesi için kritik bir konumdadır.

Bir bileşen state'i, sınıfın constructor() yöntemi içinde tanımlanır. State, oluşturucuda this.state olarak tanımlanır ve özellikleri aşağıdaki şekilde belirtilir:

Özellik	Açıklama
key	State nesnesinin özelliği olarak belirlenir.
value	State nesnesinin özelliğinin başlangıç değeri belirlenir.

State değiştirilmez. Yeni bir durum oluşturulur ve bu durum gösterilir. Değiştirme işlemi, this.setState() yöntemi aracılığıyla gerçekleştirilir. Bu yöntem, bileşen içindeki durumu değiştirebilir ve render() yöntemini yeniden çağırabilir.

State'in kullanımını aşağıdaki örnekle gösterebiliriz:

class Example extends React.Component {  constructor(props) {    super(props);    this.state = { count: 0 };  }  render() {    return (      <div>        <p>Count: {this.state.count}</p>        <button onClick={() => this.setState({ count: this.state.count + 1 })}>          Increase        </button>      </div>    );  }}

Bu örnekte, bir sayacın bulunduğu React bileşeni oluşturduk. state içinde bir adet count özelliği belirledik ve bu özellik her seferinde artacak şekilde bir 'Increase' butonu ekledik. Butona tıklandığında, this.setState() yöntemi aracılığıyla count özelliğini güncelliyoruz.

kullanarak, bileşenin belirli bir durumunu takip edebilirsiniz. Bu durum, bileşenin görüntülendiği şekli etkileyebilir ve bileşen güncellendiğinde yeniden oluşturulabilir.

React bileşenlerindeki state kullanımı, bileşenin belirli bir durumunu takip etmek için oldukça önemlidir. Örneğin, bir butona tıklandığında bir sayıya 1 eklenmesi gerekiyorsa, bu durum state üzerinden takip edilebilir. State, bileşenin görüntülendiği şekli etkileyebilir ve bileşen güncellendiğinde yeniden oluşturulabilir. Bir işlev, setState() kullanarak bileşen state'ini güncelleyebilir. Bu işlev, state objesini alır ve yeni bir obje ile birleştirir. React, setState() ile güncellenen yeni state objesini alır ve bileşenin yeniden yapılandırılmasını tetikler.

Örneğin, Counter adlı bir React bileşeni oluşturmak isterseniz, bu bileşenin render() yöntemi aşağıdaki gibi olacaktır:

class Counter extends React.Component {
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={() => this.setState({ count: this.state.count + 1 })>
Increase Count
</button>
</div>
}
}

Bu bileşen, bir sayı sayacını takip eder ve sayacın değeri, state'in içinde bulunur. State'in başlangıç değeri, bileşenin constructor() yöntemi içinde tanımlanabilir.

Yukarıdaki örnekte, setState() kullanarak butona tıklandığında sayacı bir artırırız. Count değeri değiştiğinde, React bileşeni otomatik olarak yeniden yapılandırır ve en son sayacı gösterir.

React ile UI Oluşturma Örnekleri

Hello, World! uygulaması örneği, React'in kullanımını anlamak için idealdir. Bu uygulama, JSX sözdizimi kullanarak yazısını ekranda gösterir. Bu yazı, React bileşenine ait sınıfın render() fonksiyonu tarafından oluşturulur.

React ile UI oluşturma örneklerinde, Component Tree yapısı kullanılabilir. Bu yapı, bileşenleri ve bileşenlerin birbirleriyle olan ilişkilerini gösteren bir ağaç yapısıdır. Bu yapı, bileşenlerin daha iyi anlaşılmasını ve uygulama geliştirme sürecinin daha kolay yönetilebilmesini sağlar.

Ayrıca, React bileşenleri, HTML kodlarında olduğu gibi düzenlenebilir. Bu sayede, uygulamaların kullanıcı dostu bir şekilde tasarlanması ve daha derli toplu bir yapıya sahip olması sağlanır. React bileşenleri, her bir bileşenin yapı taşlarını oluşturduğu için, bu yapı taşlarının nasıl birleştirileceği de önemlidir. Bu nedenle, bileşenlerin doğru şekilde yapılandırılması gereklidir.

React ile UI oluşturma örneklerinde, kullanıcıların etkileşime gireceği bileşenler de yer alabilir. Örneğin, bir butonun tıklanması sonucunda, uygulama içinde farklı bir bileşenin görüntülenmesi sağlanabilir. Bu tür etkileşimler, React bileşenleri kullanılarak kolayca oluşturulabilir.

Sonuç olarak, React ile UI oluşturma örnekleri, uygulama geliştirme sürecinde önemli bir yere sahiptir. Bu örnekler, uygulamanın kullanılabilirliği ve yapısal düzeni için önemlidir. React bileşenleri, bu örneklerde doğru şekilde kullanıldığında, uygulamanın daha kullanıcı dostu bir yapıya sahip olmasını sağlar.

Hello, World!

Birçok programlama dilinde geleneksel olarak ilk uygulama olarak Hello, World!uygulaması kullanılır. React bileşenleri kullanarak basit bir Hello, World!uygulaması oluşturulabilir. Bu, yeni başlayanlar için harika bir başlangıç noktasıdır. Örnek kod şu şekilde olabilir:

class HelloWorld extends React.Component {  render() {    return (      
              
    );  }}ReactDOM.render(, document.getElementById('root'));

Bu örnek kod, Hello, World!uygulamasını simgeliyor. HTML koduna benzer bir şekilde, kodu görüntülenir ve tarayıcıda Hello, World!ifadesi yer alır. React bileşenleri kullanarak, bu uygulama daha da geliştirilebilir ve farklı bileşenlerle bir arada kullanılabilir.

uygulaması örneği ve bir Component Tree örneği verilebilir.React ile bir uygulama geliştirmek oldukça basittir. Aşağıdaki örnekte, React ile oluşturulmuş çok basit bir Hello, World! uygulamasını gösteriyoruz:```javascriptimport React from 'react';import ReactDOM from 'react-dom';class HelloWorld extends React.Component { render() { return ; }}ReactDOM.render(, document.getElementById('root'));```Yukarıdaki kod, React DOM'u kullanarak HTML'de `

` elementine bir HelloWorld bileşeni yerleştirir. Bu bileşen, "`Hello, World!`" metnini gösterir.Component Tree, React uygulamanızdaki tüm bileşenleri görselleştirmek için kullanılır. Aşağıdaki örnek, bir Container bileşeni içinde iki tane Child bileşeni olan basit bir Component Tree gösterir:```javascriptimport React from 'react';const Child1 = () => { return

Child Component 1

;};const Child2 = () => { return

Child Component 2

;};const Container = () => { return (

);};export default Container;```Yukarıdaki kodda, `Container` bileşeni iki tane `Child1` ve `Child2` bileşenleri içerir. Bu örnek, bir React uygulamasındaki bileşen hiyerarşisini daha iyi anlamak için kullanışlıdır.