Skip to main content

Reactstrap ile React Uygulamalarında Şık ve Doğrulamalı Formlar Oluşturma

🎯 Bu Rehberde Ne Öğreneceksiniz?​

Bu rehber, Reactstrap kütüphanesini kullanarak React uygulamanızda profesyonel bir giriş formu (sign-in form) oluşturmayı adım adım öğretir.
Reactstrap sayesinde Bootstrap 4 bileşenlerini React ekosistemine entegre eder, anlık doğrulama (validation) ve kullanıcı geri bildirimi (FormFeedback) ekleyebilirsiniz.

⚙️ 1. Proje Kurulumu​

🧱 Yeni React uygulaması oluşturun​

npx create-react-app rabisu-form-ornek
cd rabisu-form-ornek
npm start

📦 Reactstrap ve Bootstrap 4 kurulumunu yapın


npm install [email protected]
npm install bootstrap@4

💡 Reactstrap, Bootstrap 5 ile tam uyumlu değildir. Bu yüzden Bootstrap 4.x sürümünü kullanmak önemlidir.

🎨 Bootstrap stillerini projeye ekleyin src/index.js dosyasına aşağıdaki satırı ekleyin:

import 'bootstrap/dist/css/bootstrap.min.css';

Artık Bootstrap 4 stilleri otomatik olarak tüm Reactstrap bileşenlerinde etkin.

🧩 2. Form Bileşenlerini Kullanma​

App.js dosyasında temel form yapısını oluşturalım.


import { Component } from 'react';
import { Button, Form, FormGroup, Input, Label } from 'reactstrap';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>Kullanıcı Girişi</h2>
        <Form className="form">
          <FormGroup>
            <Label for="kullaniciMail">E-posta</Label>
            <Input type="email" name="email" id="kullaniciMail" placeholder="[email protected]" />
          </FormGroup>
          <FormGroup>
            <Label for="sifre">Şifre</Label>
            <Input type="password" name="password" id="sifre" placeholder="********" />
          </FormGroup>
          <Button color="primary">Giriş Yap</Button>
        </Form>
      </div>
    );
  }
}

export default App;

Bu bileşen, e-posta ve şifre alanlarına sahip basit bir giriş formu oluşturur.

🎨 3. Basit Stil Ekleme​

App.css dosyasını düzenleyerek formu ortalayın ve daha modern bir görünüm kazandırın:


.App {
  border: 2px solid #d3d3d3;
  border-radius: .5em;
  margin: 100px auto;
  padding: 1em;
  width: 600px;
  text-align: left;
}

label {
  font-weight: 600;
}

✅ 4. Anlık Doğrulama (Validation) Ekleme Reactstrap’in FormFeedback ve FormText bileşenleriyle form doğrulama işlemini gerçekleştirebilirsiniz.

📧 E-posta doğrulama metodu ekleme


validateEmail(e) {
  const emailRex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const { validate } = this.state;
  validate.emailState = emailRex.test(e.target.value)
    ? 'has-success'
    : 'has-danger';
  this.setState({ validate });
}

Bu fonksiyon, girilen e-posta adresinin formatını kontrol eder ve sonucu state’e yansıtır.

💬 Geri bildirim mesajlarını ekleme


<FormFeedback>
  Hata! E-posta adresiniz hatalı görünüyor. Lütfen düzeltin.
</FormFeedback>
<FormFeedback valid>
  Harika! E-posta adresi doğru formatta.
</FormFeedback>
<FormText>Kullanıcı adınız genellikle e-posta adresinizdir.</FormText>

Kullanıcı yanlış e-posta girerse kırmızı, doğru girerse yeşil mesaj alır.

📨 5. Formu Gönderme​

Form verisini bir API’ye göndermek yerine örnek olarak konsola yazdıralım.


submitForm(e) {
  e.preventDefault();
  console.log(`Giriş Yapılmak İstendi. E-posta: ${this.state.email}`);
}

Gerçek projede bu noktada fetch() veya axios.post() ile API’ye veri gönderimi yapılır.

💡 6. Ek Özellikler​

Renk varyasyonları: <Button color="success" />, <Button color="danger" />

Inline form: <Form inline> kullanarak alanları yatay hizalayın

Responsive yapı: Container, Row, Col bileşenleriyle mobil uyum sağlayın

💬 Sıkça Sorulan Sorular (SSS)​

  1. Reactstrap ve Bootstrap farkı nedir?

Reactstrap, Bootstrap sınıflarını React bileşenleri haline getirir. Böylece state ve prop yönetimi kolaylaşır.

  1. Neden Bootstrap 4 kullanmalıyım?

Reactstrap v8.9.0, Bootstrap 4 mimarisiyle uyumludur. Bootstrap 5 ile hatalar oluşabilir.

  1. Hooks ile kullanılabilir mi?

Evet, Reactstrap tümüyle useState ve useEffect hook’larıyla uyumludur.

  1. Farklı input tipleri nasıl eklenir?

type="radio", type="file" gibi prop’larla yeni input türleri oluşturabilirsiniz.

🏁 Sonuç​

Reactstrap sayesinde Bootstrap 4’ün estetik görünümünü React form yapısıyla birleştirerek, hızlı ve etkileyici kullanıcı arayüzleri geliştirebilirsiniz. Bu rehberle, doğrulama, ipucu metinleri ve hata yönetimi gibi öğeleri React projenize kolayca entegre ettiniz.

🚀 Rabisu Bulut platformunda yeni React projenizi hemen oluşturun ve bu yapıyı kendi uygulamanıza entegre ederek kullanıcı deneyimini bir üst seviyeye taşıyın!

yaml