Blog

React Component Kullanımı

React ile Bileşenler: Kullanıcı Girişi Uygulaması

react component kullanımı

Önceki yazıda, React ile ilk uygulamanızı nasıl oluşturacağınızı adım adım incelemiştik. Bu yazıda ise React’in temel building block’u olan bileşenleri ve kullanıcı girişi uygulaması örneği üzerinden bileşenlerin nasıl kullanılacağını inceleyeceğiz. React component kullanımı konusunda bilgi sahibi olmanız için elimizden geleni yapacağız.

Component Nedir?

React’te bileşenler, belirli bir işlevi yerine getiren ve kendi HTML, CSS ve JavaScript koduna sahip modüler parçalardır. Bileşenler, tekrar kullanılabilirliği ve kodun daha iyi organize edilmesini sağlar.

Bileşen Türleri:

  • Sınıf Bileşenleri: ES6 sınıfları ile oluşturulur ve daha karmaşık işlemler için kullanılır.
  • Fonksiyon Bileşenleri: Daha basit ve fonksiyonlar ile oluşturulur.

Kullanıcı Girişi Uygulaması:

Bu yazıda, kullanıcıların adını ve soyadını girmesine ve bu bilgileri ekranda göstermesine olanak tanıyan bir kullanıcı girişi uygulaması oluşturacağız.

Adım 1: Bileşen Oluşturma

  1. src klasörü altında components klasörünü oluşturun.
  2. components klasörü altında Input.js ve Output.js dosyalarını oluşturun.

Adım 2: Input Bileşeni

Input.js dosyasına aşağıdaki kodları ekleyin:

JavaScript

import React, { useState } from 'react';

function Input() {
  const [name, setName] = useState('');
  const [surname, setSurname] = useState('');

  const handleChange = (e) => {
    const { name, value } = e.target;
    if (name === 'name') {
      setName(value);
    } else if (name === 'surname') {
      setSurname(value);
    }
  };

  return (
    <div>
      <label htmlFor="name">Adınız:</label>
      <input type="text" id="name" name="name" value={name} onChange={handleChange} />
      <br />
      <label htmlFor="surname">Soyadınız:</label>
      <input type="text" id="surname" name="surname" value={surname} onChange={handleChange} />
    </div>
  );
}

export default Input;

Bu kodlar, kullanıcıların adını ve soyadını girmesine olanak tanıyan iki adet input alanı oluşturur.

Adım 3: Output Bileşeni

Output.js dosyasına aşağıdaki kodları ekleyin:

JavaScript

import React from 'react';

function Output({ name, surname }) {
  return (
    <div>
      Merhaba {name} {surname}!
    </div>
  );
}

export default Output;

Bu kodlar, Input bileşeninden alınan name ve surname prop’larını kullanarak ekranda bir selamlama mesajı gösterir.

Ana Bileşene Prop Gönderme:

App.js dosyasına aşağıdaki kodları ekleyerek Output bileşenine name ve surname prop’larını gönderebilirsiniz:

JavaScript

function App() {
  const [name, setName] = useState('');
  const [surname, setSurname] = useState('');

  const handleChange = (e) => {
    const { name, value } = e.target;
    if (name === 'name') {
      setName(value);
    } else if (name === 'surname') {
      setSurname(value);
    }
  };

  return (
    <div>
      <Input onChange={handleChange} />
      <Output name={name} surname={surname} />
    </div>
  );
}

Bileşenler Arasında İletişim:

Bileşenler arasında prop’lar ve state kullanarak iletişim kurabilirsiniz.

Daha Fazla Bileşen:

Daha karmaşık arayüzler oluşturmak için daha fazla bileşen oluşturabilirsiniz.

Sonuç:

Bu yazıda, React’te bileşenleri ve kullanıcı girişi uygulaması örneği üzerinden bileşenlerin nasıl kullanılacağını inceledik. Bileşenlerin temel prensiplerini ve React’te bileşen kullanmanın avantajlarını öğrendik.

Serinin Devamı:

Böylelikle React component kullanımı konusunu anlatmış olduk. Bu blog yazı serisinde, React’in temel ve ileri düzey özelliklerini detaylı bir şekilde inceleyeceğiz.

Ek Kaynaklar:

Bu blog yazı serisinde, React’ın temel özelliklerini ve kullanımını detaylı bir şekilde inceleyeceğiz. Takipte kalın!

Not: Bu yazı sadece basit bir örnektir. Gerçek bir blog uygulaması için daha fazla özellik ve işlev eklemeniz gerekir.

Takipte kalarak React ile uygulama geliştirmenin keyfini çıkarabilirsiniz!

Bir yanıt yazın