React Nedir? Başlangıç Rehberi, Temel Kavramlar ve Örnek
Kodlar

Giriş

React, modern web uygulamaları geliştirmek için kullanılan
açık kaynaklı bir JavaScript kütüphanesidir. Facebook tarafından geliştirilen
React, kullanıcı arayüzlerini oluşturmak, yönetmek ve etkileşimli hale getirmek
için güçlü bir araçtır. Bu makalede, React'in temel kavramlarına odaklanarak,
başlangıç seviyesinde bir anlatım olacaktır. Ayrıca, React
ile ilgili örnek kodlar da sunacağım.

 

React Nedir?

React, kullanıcı arayüzlerini geliştirmek için kullanılan
bir JavaScript kütüphanesidir. Web uygulamaları, React'i kullanarak kullanıcı
arayüzlerini modüler bileşenlere bölebilirler. Her bileşen, kendi içinde
mantığı ve görünümü bir arada tutar. Bu, uygulama geliştirmeyi daha
yönetilebilir ve ölçeklenebilir hale getirir.

 

React'in Temel Kavramları:

 

1. Bileşenler (Components)

React uygulamaları, bileşenlerden oluşur. Bileşenler,
kullanıcı arayüzünün farklı parçalarını temsil ederler. Örneğin, bir düğme, bir
form veya bir haber kartı birer bileşen olabilir. Bileşenler, kendi içlerinde
state (durum) ve props (özellikler) tutabilirler.

 

2. JSX (JavaScript XML)

JSX, React uygulamalarında kullanılan bir söz dizimidir.
JSX, JavaScript'e benzer bir şekilde görünse de, HTML benzeri bir söz dizimi
kullanır. Bu sayede, React bileşenlerini oluşturmak daha kolay ve okunaklı hale
gelir. Örnek bir JSX kodu:

const element = <h1>Mesajınızı buraya
yazın</h1>;

3. State ve Props

State, bir bileşenin içindeki veriyi ve bileşenin nasıl davranacağını tanımlar. Props ise bir bileşene dışarıdan veri iletmek için kullanılır. State, bileşen içinde değiştirilebilirken, props dışarıdan veri almak için kullanılır.

4. React ve Virtual DOM

React, Virtual DOM (sanal DOM) adı verilen bir mekanizma kullanarak verimli bir şekilde güncelleme işlemlerini gerçekleştirir. Bu, tüm sayfanın yeniden çizilmesi yerine sadece değişen bileşenlerin güncellenmesini sağlar ve uygulamanın daha hızlı çalışmasını sağlar.

React Başlangıç Adımları

React ile başlamak için aşağıdaki adımları takip edebilirsiniz:

Adım 1: Node.js ve npm Kurulumu

React uygulamalarını geliştirmek için Node.js ve npm (Node Package Manager) gereklidir. Node.js'i resmi web sitesinden indirip kurabilirsiniz. Node.js yükledikten sonra, npm otomatik olarak gelir.

Adım 2: Yeni Bir React Uygulaması Oluşturma

Yeni bir React uygulaması oluşturmak için "Create React App" adlı komutu kullanabilirsiniz. Aşağıdaki komut, yeni bir proje klasörü oluşturur:

npx create-react-app my-app

Adım 3: Uygulamayı Çalıştırma

Oluşturulan uygulamayı başlatmak için aşağıdaki komutları kullanabilirsiniz:

cd my-app

npm start

Bu komutlar, yerel bir geliştirme sunucusunu başlatır ve tarayıcınızda uygulamanızı görüntülersiniz. Varsayılan olarak, uygulamanız "http://localhost:3000" adresinde çalışır.

Temel React Bileşenleri

React ile bileşenler oluşturmak oldukça önemlidir. İşte birkaç temel bileşen örneği:

Fonksiyonel Bileşen

import React from 'react';

function Welcome(props) {

  return <h1>Merhaba, {props.ad}!</h1>;

}

Sınıf Bileşeni

import React, { Component } from 'react';

class Clock extends Component {

  constructor(props) {

    super(props);

    this.state = { time: new Date() };

  }

  componentDidMount() {

    this.timerID = setInterval(

      () => this.tick(),

      1000

    );

  }

  componentWillUnmount() {

    clearInterval(this.timerID);

  }

  tick() {

    this.setState({

      time: new Date()

    });

  }

  render() {

    return (

      <div>

        <h2>Saat: {this.state.time.toLocaleTimeString()}</h2>

      </div>

    );

  }

}

State ve Props Kullanımı

import React, { Component } from 'react';

class Counter extends Component {

  constructor(props) {

    super(props);

    this.state = { count: 0 };

  }

  incrementCount = () => {

    this.setState({ count: this.state.count + 1 });

  };

  render() {

    return (

      <div>

        <p>Sayaç Değeri: {this.state.count}</p>

        <button onClick={this.incrementCount}>Artır</button>

      </div>

    );

  }

}

React ile Etkileşim

React, kullanıcı etkileşimlerine yanıt vermek için olayları kullanır. Örneğin, bir düğmeye tıklama veya bir form gönderme gibi etkileşimler, React bileşenlerinde işlenir. İşte bir olayın nasıl ele alınacağına dair örnek bir kod:

import React, { Component } from 'react';

class ToggleButton extends Component {

  constructor(props) {

    super(props);

    this.state = { isToggleOn: true };

  }

  handleClick = () => {

    this.setState((prevState) => ({

      isToggleOn: !prevState.isToggleOn

    }));

  };

  render() {

    return (

      <button onClick={this.handleClick}>

        {this.state.isToggleOn ? 'Açık' : 'Kapalı'}

      </button>

    );

  }

}

Bu örnek, bir düğmeye tıklandığında durumu değiştirir ve düğmenin metnini günceller.

Sonuç

Bu makalede, React'in temel kavramlarına, başlangıç adımlarına ve örnek kodlarına odaklandım. React, güçlü bir araçtır ve modern web uygulamaları geliştirmek için yaygın olarak kullanılır. React'i daha fazla öğrenmek için resmi dokümantasyona ve çevrimiçi kaynaklara başvurabilirsiniz.