React.js İle Dinamik Form Oluşturma

React, modern web uygulamaları geliştirmek için popüler bir JavaScript kütüphanesidir. Bu yazıda, React.js kullanarak nasıl dinamik bir form oluşturabileceğinizi detaylı bir şekilde ele alacağız.

Öncelikle, React projenize gerekli bağımlılıkları ekleyerek başlayın. Daha sonra, formda bulunacak input alanlarını, state'i kullanarak tutabilirsiniz. State'i güncelleyerek formdaki alanların değerlerini dinamik olarak değiştirebilirsiniz.

import React, { useState } from 'react';

const DynamicForm = () => {
  const [formFields, setFormFields] = useState({
    name: '',
    email: '',
    message: ''
  });
  
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormFields({
      ...formFields,
      [name]: value
    });
  };
  
  return (
    

      
      
          </form>
  );
};
</code></pre>

<p>Yukarıdaki örnek kodda, useState hook'u ile form alanlarının değerlerini saklayan bir state oluşturulmuş ve input alanları ile ilişkilendirilmiştir. Her bir input alanı değeri değiştiğinde handleInputChange fonksiyonu ile state güncellenir.</p>

<p>Bu şekilde React.js kullanarak dinamik form oluşturabilir ve kullanıcıların interaktif bir şekilde form doldurmasını sağlayabilirsiniz. React'in component tabanlı yapısı sayesinde form elemanlarını kolayca yönetebilir ve istediğiniz şekilde özelleştirebilirsiniz.</p>
</main></div>
                                                                                                                                                                <div class="mb2 fs20 fw5">Aşağıdaki yazılar ilginizi çekebilir;</div>
                                        <div class="mb-50 fs18 fw4 altlinkler" style="max-height: 350px; overflow-y: auto;">
                                                                                            <p><a href="/blog/oyun-performans-analizi-oyun-gelistirme-surecindeki-onemi-ve-etkileri" title="Oyun Performans Analizi: Oyun Geliştirme Sürecindeki Önemi ve Etkileri" aria-label="Oyun Performans Analizi: Oyun Geliştirme Sürecindeki Önemi ve Etkileri">Oyun Performans Analizi: Oyun Geliştirme Sürecindeki Önemi ve Etkileri</a></p>
                                                                                            <p><a href="/blog/mobil-uygulama-guvenligi-kullanici-bilgilerinin-korunmasi" title="Mobil Uygulama Güvenliği: Kullanıcı Bilgilerinin Korunması" aria-label="Mobil Uygulama Güvenliği: Kullanıcı Bilgilerinin Korunması">Mobil Uygulama Güvenliği: Kullanıcı Bilgilerinin Korunması</a></p>
                                                                                            <p><a href="/blog/capraz-platform-uygulama-gelistirme-mobil-dunyada-yukselen-trend" title="Çapraz Platform Uygulama Geliştirme: Mobil Dünyada Yükselen Trend" aria-label="Çapraz Platform Uygulama Geliştirme: Mobil Dünyada Yükselen Trend">Çapraz Platform Uygulama Geliştirme: Mobil Dünyada Yükselen Trend</a></p>
                                                                                            <p><a href="/blog/seo-link-olusturma-stratejileri-ve-onemi" title="SEO Link Oluşturma Stratejileri ve Önemi" aria-label="SEO Link Oluşturma Stratejileri ve Önemi">SEO Link Oluşturma Stratejileri ve Önemi</a></p>
                                                                                            <p><a href="/blog/yemek-servisi-icin-logo-tasarimi-profesyonel-ve-etkileyici-marka-kimligi-olusturma" title="Yemek Servisi İçin Logo Tasarımı: Profesyonel ve Etkileyici Marka Kimliği Oluşturma" aria-label="Yemek Servisi İçin Logo Tasarımı: Profesyonel ve Etkileyici Marka Kimliği Oluşturma">Yemek Servisi İçin Logo Tasarımı: Profesyonel ve Etkileyici Marka Kimliği Oluşturma</a></p>
                                                                                            <p><a href="/blog/mobil-uygulama-performansi-basarili-bir-uygulama-icin-ipuclari-1" title="Mobil Uygulama Performansı: Başarılı Bir Uygulama İçin İpuçları" aria-label="Mobil Uygulama Performansı: Başarılı Bir Uygulama İçin İpuçları">Mobil Uygulama Performansı: Başarılı Bir Uygulama İçin İpuçları</a></p>
                                                                                            <p><a href="/blog/yaratici-portfoy-ile-ilgili-bilgilendirici-bir-bakis" title="Yaratıcı Portföy ile İlgili Bilgilendirici Bir Bakış" aria-label="Yaratıcı Portföy ile İlgili Bilgilendirici Bir Bakış">Yaratıcı Portföy ile İlgili Bilgilendirici Bir Bakış</a></p>
                                                                                            <p><a href="/blog/seo-mobil-hiz-testi-web-sitelerinizin-performansini-artirin-1" title="SEO Mobil Hız Testi: Web Sitelerinizin Performansını Artırın" aria-label="SEO Mobil Hız Testi: Web Sitelerinizin Performansını Artırın">SEO Mobil Hız Testi: Web Sitelerinizin Performansını Artırın</a></p>
                                                                                            <p><a href="/blog/mobil-uygulama-performans-optimizasyonu-kullanici-deneyimini-maksimize-etmek" title="Mobil Uygulama Performans Optimizasyonu: Kullanıcı Deneyimini Maksimize Etmek" aria-label="Mobil Uygulama Performans Optimizasyonu: Kullanıcı Deneyimini Maksimize Etmek">Mobil Uygulama Performans Optimizasyonu: Kullanıcı Deneyimini Maksimize Etmek</a></p>
                                                                                            <p><a href="/blog/buro-kiralama-web-sitesi-tasarimi-profesyonel-cozumler-ile-dijital-donusum" title="Büro Kiralama Web Sitesi Tasarımı: Profesyonel Çözümler ile Dijital Dönüşüm!" aria-label="Büro Kiralama Web Sitesi Tasarımı: Profesyonel Çözümler ile Dijital Dönüşüm!">Büro Kiralama Web Sitesi Tasarımı: Profesyonel Çözümler ile Dijital Dönüşüm!</a></p>
                                                                                            <p><a href="/blog/bilisim-teknolojileri-uzmani-profesyonel-web-sitesi-tasarimi-icin-ipuclari" title="Bilişim Teknolojileri Uzmanı: Profesyonel Web Sitesi Tasarımı İçin İpuçları!" aria-label="Bilişim Teknolojileri Uzmanı: Profesyonel Web Sitesi Tasarımı İçin İpuçları!">Bilişim Teknolojileri Uzmanı: Profesyonel Web Sitesi Tasarımı İçin İpuçları!</a></p>
                                                                                            <p><a href="/blog/alesta-medya-ile-profesyonel-icerik-siteleri-olusturmanin-puf-noktalari" title="Alesta Medya ile Profesyonel İçerik Siteleri Oluşturmanın Püf Noktaları" aria-label="Alesta Medya ile Profesyonel İçerik Siteleri Oluşturmanın Püf Noktaları">Alesta Medya ile Profesyonel İçerik Siteleri Oluşturmanın Püf Noktaları</a></p>
                                                                                            <p><a href="/blog/web-sitenizi-iyilestirmek-icin-ozel-alanlar-olusturun-dijital-donusumun-anahtari" title="Web Sitenizi İyileştirmek İçin Özel Alanlar Oluşturun: Dijital Dönüşümün Anahtarı" aria-label="Web Sitenizi İyileştirmek İçin Özel Alanlar Oluşturun: Dijital Dönüşümün Anahtarı">Web Sitenizi İyileştirmek İçin Özel Alanlar Oluşturun: Dijital Dönüşümün Anahtarı</a></p>
                                                                                            <p><a href="/blog/en-iyi-web-tasarim-firmalari-hakkinda-bilgilendirici-bir-inceleme" title="En İyi Web Tasarım Firmaları Hakkında Bilgilendirici Bir İnceleme" aria-label="En İyi Web Tasarım Firmaları Hakkında Bilgilendirici Bir İnceleme">En İyi Web Tasarım Firmaları Hakkında Bilgilendirici Bir İnceleme</a></p>
                                                                                            <p><a href="/blog/kayseri-web-tasarim-onemli-bilgiler" title="Kayseri Web Tasarım Önemli Bilgiler" aria-label="Kayseri Web Tasarım Önemli Bilgiler">Kayseri Web Tasarım Önemli Bilgiler</a></p>
                                                                                            <p><a href="/blog/bursa-profesyonel-web-sitesi-fiyatlari-hakkinda-detayli-bilgi" title="Bursa Profesyonel Web Sitesi Fiyatları Hakkında Detaylı Bilgi" aria-label="Bursa Profesyonel Web Sitesi Fiyatları Hakkında Detaylı Bilgi">Bursa Profesyonel Web Sitesi Fiyatları Hakkında Detaylı Bilgi</a></p>
                                                                                            <p><a href="/blog/konya-basit-site-tasarimlari-hakkinda-detayli-bilgi" title="Konya Basit Site Tasarımları Hakkında Detaylı Bilgi" aria-label="Konya Basit Site Tasarımları Hakkında Detaylı Bilgi">Konya Basit Site Tasarımları Hakkında Detaylı Bilgi</a></p>
                                                                                            <p><a href="/blog/konya-web-tasarimi-hakkinda-detayli-bilgi" title="Konya Web Tasarımı Hakkında Detaylı Bilgi" aria-label="Konya Web Tasarımı Hakkında Detaylı Bilgi">Konya Web Tasarımı Hakkında Detaylı Bilgi</a></p>
                                                                                            <p><a href="/blog/adana-internet-sitesi-hazir-paketler-hakkinda-detayli-bilgi" title="Adana İnternet Sitesi Hazır Paketler Hakkında Detaylı Bilgi" aria-label="Adana İnternet Sitesi Hazır Paketler Hakkında Detaylı Bilgi">Adana İnternet Sitesi Hazır Paketler Hakkında Detaylı Bilgi</a></p>
                                                                                            <p><a href="/blog/eskisehir-internet-sitesi-ornekleri-hakkinda-detayli-bilgi" title="Eskişehir İnternet Sitesi Örnekleri Hakkında Detaylı Bilgi" aria-label="Eskişehir İnternet Sitesi Örnekleri Hakkında Detaylı Bilgi">Eskişehir İnternet Sitesi Örnekleri Hakkında Detaylı Bilgi</a></p>
                                                                                    </div>

                                    </div>
                                </article>

                                <div class="mb-50 mt-50">
                                    <div class="row">
                                                                                                                    </div>
                                </div>


                                
                                <!-- EKLİ DOSYALAR -->
                                


                                



                                <!-- RESİMLER -->
                                

                                <div class="work-minimal mt5 mb5">
                                    <div class="gallery row stand-marg">
                                        
                                                <div class="col-lg-4 col-md-6 items design brand">
                                                    <div class="item mt-40 img-cover-200">
                                                        <a data-fslightbox href="/images/blog/ankara-arayuz-tasarimi-internet-dunyasinda-one-cikmak-icin-anahtar-ipuclari.webp">
                                                            <div class="img">
                                                                <img src="/thumbs/blog/ankara-arayuz-tasarimi-internet-dunyasinda-one-cikmak-icin-anahtar-ipuclari.webp" class="img-cover-200" alt="React.js İle Dinamik Form Oluşturma">
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>

                                        
                                                <div class="col-lg-4 col-md-6 items design brand">
                                                    <div class="item mt-40 img-cover-200">
                                                        <a data-fslightbox href="/images/blog/flutter-ile-mobil-uygulama-gelistirme-rehberi-yenilikci-bir-yaklasim.webp">
                                                            <div class="img">
                                                                <img src="/thumbs/blog/flutter-ile-mobil-uygulama-gelistirme-rehberi-yenilikci-bir-yaklasim.webp" class="img-cover-200" alt="React.js İle Dinamik Form Oluşturma">
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>

                                        
                                                <div class="col-lg-4 col-md-6 items design brand">
                                                    <div class="item mt-40 img-cover-200">
                                                        <a data-fslightbox href="/images/blog/tunceli-icin-mobil-uygulama-gelistirme-1_1.webp">
                                                            <div class="img">
                                                                <img src="/thumbs/blog/tunceli-icin-mobil-uygulama-gelistirme-1_1.webp" class="img-cover-200" alt="React.js İle Dinamik Form Oluşturma">
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>

                                        
                                    </div>
                                </div>



                                <!-- DÖKÜMANLAR -->
                                


                            </div>
                            <div class="info-area flex pt-50 bord-thin-top">


                                


                                                                    <div class="mb-50">
                                        <div class="tags flex">
                                            <div class="valign">
                                                <span>Etiket Bulutu :</span>
                                            </div>
                                            <div>
                                                                                                    <a href="/ara?ara=react">react</a>
                                                                                                    <a href="/ara?ara=dinamik">dinamik</a>
                                                                                                    <a href="/ara?ara=şekilde">şekilde</a>
                                                                                                    <a href="/ara?ara=state">state</a>
                                                                                                    <a href="/ara?ara=const">const</a>
                                                                                            </div>
                                        </div>
                                    </div>
                                                                <div class="ml-auto mb-50">
                                    <div class="share-icon flex">
                                        <div class="valign">
                                            <span>Paylaş :</span>
                                        </div>
                                        <div class="sharethis-inline-share-buttons"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="sidebar">
                            <div class="search-box">
                                <form action="/ara" method="GET">
                                    <input type="text" name="ara" placeholder="Aranacak kelimeyi giriniz...">
                                    <span class="icon pe-7s-search"></span>
                                </form>
                            </div>
                            <div class="widget catogry">
                                <div class="title-widget fs20 fw5">Kategoriler</div>
                                <ul class="rest">
                                                                            <li>
                                            <span><a title="Web Tasarım" aria-label="Web Tasarım" href="/blog?kategori=web-tasarim">Web Tasarım</a></span>
                                            <span class="ml-auto">7572</span>
                                        </li>
                                                                            <li>
                                            <span><a title="Mobil Uygulama" aria-label="Mobil Uygulama" href="/blog?kategori=mobil-uygulama">Mobil Uygulama</a></span>
                                            <span class="ml-auto">1434</span>
                                        </li>
                                                                            <li>
                                            <span><a title="E-Ticaret" aria-label="E-Ticaret" href="/blog?kategori=e-ticaret">E-Ticaret</a></span>
                                            <span class="ml-auto">671</span>
                                        </li>
                                                                            <li>
                                            <span><a title="Logo Tasarım" aria-label="Logo Tasarım" href="/blog?kategori=logo-tasarim">Logo Tasarım</a></span>
                                            <span class="ml-auto">939</span>
                                        </li>
                                                                            <li>
                                            <span><a title="Grafik Tasarım" aria-label="Grafik Tasarım" href="/blog?kategori=grafik-tasarim">Grafik Tasarım</a></span>
                                            <span class="ml-auto">916</span>
                                        </li>
                                                                            <li>
                                            <span><a title="Oyun Geliştirme" aria-label="Oyun Geliştirme" href="/blog?kategori=oyun-gelistirme">Oyun Geliştirme</a></span>
                                            <span class="ml-auto">924</span>
                                        </li>
                                                                            <li>
                                            <span><a title="SEO Hizmetleri" aria-label="SEO Hizmetleri" href="/blog?kategori=seo-hizmetleri">SEO Hizmetleri</a></span>
                                            <span class="ml-auto">1098</span>
                                        </li>
                                    
                                </ul>
                            </div>
                            <div class="widget last-post-thum">
                                <div class="title-widget fs20 fw5">En Çok Okunanlar</div>
                                                                    <div class="item d-flex align-items-center">
                                        <div>
                                            <div class="img">
                                                <a href="/blog/yaratici-ruzgarlarin-estigi-malatya-oyun-gelistirme-harikalar-diyari">
                                                    <img src="/thumbs/blog/malatya-da-oyun-gelistirme-yaratici-projelerin-dogdugu-sehir.webp" alt="Yaratıcı Rüzgarların Estiği Malatya: Oyun Geliştirme Harikalar Diyarı">
                                                    <span class="date">
                                                        <span>07 / <br> EKİM</span>
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="cont">
                                            <div><a href="/blog/yaratici-ruzgarlarin-estigi-malatya-oyun-gelistirme-harikalar-diyari">Yaratıcı Rüzgarların Estiği Malatya: Oyun Geliştirme Harikalar Diyarı</a></div>
                                        </div>
                                    </div>
                                                                    <div class="item d-flex align-items-center">
                                        <div>
                                            <div class="img">
                                                <a href="/blog/canakkale-logo-tasarimi-yerel-ve-ozgun-ifadelerle-tanisin">
                                                    <img src="/thumbs/blog/canakkale-logo-tasarimi-yerel-ve-ozgun-ifadelerle-tanisin.webp" alt="Çanakkale Logo Tasarımı: Yerel ve Özgün İfadelerle Tanışın">
                                                    <span class="date">
                                                        <span>08 / <br> EKİM</span>
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="cont">
                                            <div><a href="/blog/canakkale-logo-tasarimi-yerel-ve-ozgun-ifadelerle-tanisin">Çanakkale Logo Tasarımı: Yerel ve Özgün İfadelerle Tanışın</a></div>
                                        </div>
                                    </div>
                                                                    <div class="item d-flex align-items-center">
                                        <div>
                                            <div class="img">
                                                <a href="/blog/corum-icin-mobil-uygulama-gelistirme-hizmetleri">
                                                    <img src="/thumbs/blog/corum-icin-mobil-uygulama-gelistirme-hizmetleri.webp" alt="Çorum İçin Mobil Uygulama Geliştirme Hizmetleri">
                                                    <span class="date">
                                                        <span>08 / <br> EKİM</span>
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="cont">
                                            <div><a href="/blog/corum-icin-mobil-uygulama-gelistirme-hizmetleri">Çorum İçin Mobil Uygulama Geliştirme Hizmetleri</a></div>
                                        </div>
                                    </div>
                                                                    <div class="item d-flex align-items-center">
                                        <div>
                                            <div class="img">
                                                <a href="/blog/yozgat-icin-e-ticarette-yukselis-alesta-medya-e-ticaret-web-sitesi-hizmetleri">
                                                    <img src="/images/nofoto.webp" alt="Yozgat İçin E-Ticarette Yükseliş: Alesta Medya E-Ticaret Web Sitesi Hizmetleri">
                                                    <span class="date">
                                                        <span>08 / <br> EKİM</span>
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="cont">
                                            <div><a href="/blog/yozgat-icin-e-ticarette-yukselis-alesta-medya-e-ticaret-web-sitesi-hizmetleri">Yozgat İçin E-Ticarette Yükseliş: Alesta Medya E-Ticaret Web Sitesi Hizmetleri</a></div>
                                        </div>
                                    </div>
                                                                    <div class="item d-flex align-items-center">
                                        <div>
                                            <div class="img">
                                                <a href="/blog/web-tasariminda-fark-yaratan-alesta-medya">
                                                    <img src="/thumbs/blog/web-tasariminda-fark-yaratan-alesta-medya.webp" alt="Web Tasarımında Fark Yaratan Alesta Medya">
                                                    <span class="date">
                                                        <span>25 / <br> EYLÜL</span>
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="cont">
                                            <div><a href="/blog/web-tasariminda-fark-yaratan-alesta-medya">Web Tasarımında Fark Yaratan Alesta Medya</a></div>
                                        </div>
                                    </div>
                                                            </div>
                            <div class="widget tags">
                                <div class="title-widget fs20 fw5">Etiket Bulutu</div>
                                <div>
                                                                            <a href="/ara?ara=UI/UX Tasarım">UI/UX Tasarım</a>
                                                                            <a href="/ara?ara=Web Tasarım">Web Tasarım</a>
                                                                            <a href="/ara?ara=Dijital Pazarlama">Dijital Pazarlama</a>
                                                                            <a href="/ara?ara=Ürün Tasarımı">Ürün Tasarımı</a>
                                                                            <a href="/ara?ara=Mobil Çözümler">Mobil Çözümler</a>
                                                                            <a href="/ara?ara=Grafik Tasarım">Grafik Tasarım</a>
                                                                            <a href="/ara?ara=SEO Optimizasyonu">SEO Optimizasyonu</a>
                                                                            <a href="/ara?ara=E-Ticaret Çözümleri">E-Ticaret Çözümleri</a>
                                                                            <a href="/ara?ara=Veri Analizi">Veri Analizi</a>
                                    
                                                                            <a href="/ara?ara=React.js">React.js</a>
                                                                            <a href="/ara?ara=İle">İle</a>
                                                                            <a href="/ara?ara=Dinamik">Dinamik</a>
                                                                            <a href="/ara?ara=Form">Form</a>
                                                                            <a href="/ara?ara=Oluşturma">Oluşturma</a>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <section class="blog-list-half hizmetler-padding">
            <div class="container">
                <div class="sec-head mb-80">
                    <div class="bord pt-25 bord-thin-top d-flex align-items-center">
                        <h2 class="fw-600">İlgili <span class="fw-200">Yazılar</span></h2>
                        <div class="ml-auto">
                            <a href="/blog" class="go-more" title="Güncel" aria-label="Güncel">
                                <span class="text">Tümünü Görüntüle</span>
                                <span class="icon ti-arrow-top-right"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    

                        <div class="col-lg-6 mb2">
                            <a href="/blog/react-js-ile-web-uygulamalari-gelistirmek-bir-baslangic-rehberi" aria-label="React.js İle Web Uygulamaları Geliştirmek: Bir Başlangıç Rehberi" title="React.js İle Web Uygulamaları Geliştirmek: Bir Başlangıç Rehberi">
                                <div class="item main-bg md-mb50">
                                    <div class="row rest">
                                        <div class="col-lg-6 col-md-5 img rest">
                                            <img src="/thumbs/blog/react-js-ile-web-uygulamalari-gelistirmek-bir-baslangic-rehberi.webp" alt="React.js İle Web Uygulamaları Geliştirmek: Bir Başlangıç Rehberi" width="100%" height="100%" class="img-post img-cover-300">
                                        </div>
                                        <div class="col-lg-6 col-md-7 p-4 valign">
                                            <div class="full-width">
                                                <div class="fs22 fw5">React.js İle Web Uygulamaları Geliştirmek: Bir Başlangıç Rehberi</div>
                                                <span class="date fz-12 ls1 text-u opacity-7 mt-80">27 Eylül 2024</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    

                        <div class="col-lg-6 mb2">
                            <a href="/blog/react-ile-web-gelistirme-pratikleri-component-kullanimi" aria-label="React ile Web Geliştirme Pratikleri: Component Kullanımı" title="React ile Web Geliştirme Pratikleri: Component Kullanımı">
                                <div class="item main-bg md-mb50">
                                    <div class="row rest">
                                        <div class="col-lg-6 col-md-5 img rest">
                                            <img src="/thumbs/blog/react-ile-web-gelistirme-pratikleri-component-kullanimi.webp" alt="React ile Web Geliştirme Pratikleri: Component Kullanımı" width="100%" height="100%" class="img-post img-cover-300">
                                        </div>
                                        <div class="col-lg-6 col-md-7 p-4 valign">
                                            <div class="full-width">
                                                <div class="fs22 fw5">React ile Web Geliştirme Pratikleri: Component Kullanımı</div>
                                                <span class="date fz-12 ls1 text-u opacity-7 mt-80">27 Eylül 2024</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    

                        <div class="col-lg-6 mb2">
                            <a href="/blog/react-ile-modern-web-uygulamalari-gelistirmenin-incelikleri" aria-label="React ile Modern Web Uygulamaları Geliştirmenin İncelikleri" title="React ile Modern Web Uygulamaları Geliştirmenin İncelikleri">
                                <div class="item main-bg md-mb50">
                                    <div class="row rest">
                                        <div class="col-lg-6 col-md-5 img rest">
                                            <img src="/thumbs/blog/react-ile-modern-web-uygulamalari-gelistirmenin-incelikleri.webp" alt="React ile Modern Web Uygulamaları Geliştirmenin İncelikleri" width="100%" height="100%" class="img-post img-cover-300">
                                        </div>
                                        <div class="col-lg-6 col-md-7 p-4 valign">
                                            <div class="full-width">
                                                <div class="fs22 fw5">React ile Modern Web Uygulamaları Geliştirmenin İncelikleri</div>
                                                <span class="date fz-12 ls1 text-u opacity-7 mt-80">27 Eylül 2024</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    

                        <div class="col-lg-6 mb2">
                            <a href="/blog/react-ile-surukle-birak-islemi-nasil-yapilir" aria-label="React ile Sürükle Bırak İşlemi Nasıl Yapılır?" title="React ile Sürükle Bırak İşlemi Nasıl Yapılır?">
                                <div class="item main-bg md-mb50">
                                    <div class="row rest">
                                        <div class="col-lg-6 col-md-5 img rest">
                                            <img src="/thumbs/blog/react-ile-surukle-birak-islemi-nasil-yapilir.webp" alt="React ile Sürükle Bırak İşlemi Nasıl Yapılır?" width="100%" height="100%" class="img-post img-cover-300">
                                        </div>
                                        <div class="col-lg-6 col-md-7 p-4 valign">
                                            <div class="full-width">
                                                <div class="fs22 fw5">React ile Sürükle Bırak İşlemi Nasıl Yapılır?</div>
                                                <span class="date fz-12 ls1 text-u opacity-7 mt-80">27 Eylül 2024</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    
                </div>
            </div>
        </section>

    </main>


    <script>
        document.querySelectorAll('pre code').forEach((block) => {
            const text = block.textContent.trim();

            if (text.startsWith('<') && text.endsWith('>')) {
                block.classList.add('language-html');
            } else if (text.includes('php') || text.includes('echo') || text.includes('$') || text.includes('function') || text.includes('namespace')) {
                block.classList.add('language-php');
            } else if (text.includes('console.log') || text.includes('function')) {
                block.classList.add('language-javascript');
            } else if (text.includes('<%') || text.includes('Response.Write') || text.includes('Server.Execute') || text.includes('DbContextOptionsBuilder') || text.includes('react') || text.includes('export default')) {
                block.classList.add('language-asp');
            } else if (text.includes('@*') || text.includes('var') || text.includes('public class') || text.includes('using') || text.includes('new') || text.includes('SaveChanges')) {
                block.classList.add('language-aspnet');
            } else if (text.includes('import') || text.includes('def ')) {
                block.classList.add('language-python');
            } else if (text.includes('public static void Main')) {
                block.classList.add('language-csharp');
            } else if (text.includes('#include') || text.includes('using namespace')) {
                block.classList.add('language-cpp');
            } else if (text.includes('class') && text.includes('extends')) {
                block.classList.add('language-java');
            } else if (text.includes('SELECT') || text.includes('INSERT') || text.includes('UPDATE')) {
                block.classList.add('language-sql');
            } else if (text.includes('require') || text.includes('module.exports')) {
                block.classList.add('language-node');
            } else if (text.includes('let') || text.includes('const') || text.includes('async')) {
                block.classList.add('language-es6'); // ES6 JavaScript
            } else if (text.includes('function') && text.includes('=>')) {
                block.classList.add('language-javascript'); // Arrow functions in JS
            } else {
                block.classList.add('language-css'); // Varsayılan dil
            }

        });

        Prism.highlightAll();
    </script>



    <!-- prismjs plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

    

      <footer class="sub-bg radius-30">
        <div class="container pb-40 pt-80 ontop">
          <div class="d-flex justify-content-center mb-30">
            <div class="logo icon-img-120">
              <img src="/images/logo.webp" loading="lazy" width="120px" height="44px" alt="Alesta Medya">
            </div>
          </div>
          <div class="info-comp d-flex align-items-center justify-content-center pt-40 pb-40 bord-thin-bottom bord-thin-top">
            <div class="mr-30">
              <span class="icon main-color mr-10 ti-email"></span>
              <span class="text">bilgi@alestamedya.com</span>
            </div>
            <div class="mr-30">
              <span class="icon main-color mr-10 ti-mobile"></span>
              <span class="text">+90 553 361 03 89</span>
            </div>
            <div>
              <span class="icon main-color mr-10 ti-location-pin"></span>
              <span class="text">Kayseri Melikgazi</span>
            </div>
          </div>
          <div class="row sub-footer mt-40 pt-25 pb-25 main-bg radius-30 padding-rl-30">
            <div class="col-lg-4 col-md-6 md-mb15">
              <ul class="rest d-flex align-items-center">
                <li class="cursor-pointer">
                  <a href="https://www.facebook.com/AlestaMedia/" title="Facebook" aria-label="Facebook" class="hover-anim">
                    <i class="fab fa-facebook-f"></i>
                  </a>
                </li>
                <li class="cursor-pointer ml-30">
                  <a href="https://x.com/alestamedya" title="Twitter" aria-label="Twitter" class="hover-anim">
                    <i class="fab fa-twitter"></i>
                  </a>
                </li>
                <li class="cursor-pointer ml-30">
                  <a href="https://tr.linkedin.com/company/alestamedya" title="Linked In" aria-label="Linked In" class="hover-anim">
                    <i class="fab fa-linkedin-in"></i>
                  </a>
                </li>
                <li class="cursor-pointer ml-30">
                  <a href="https://www.instagram.com/alesta_medya/" title="Instagram" aria-label="Instagram" class="hover-anim">
                    <i class="fab fa-instagram"></i>
                  </a>
                </li>
                <li class="cursor-pointer ml-30">
                  <a href="https://wa.me/905533610389?text=Merhaba, web sitenizden ulaşıyorum, hizmetlerinizle ilgili bilgi almak istiyorum." title="WhatsApp" aria-label="WhatsApp" class="hover-anim">
                    <i class="fab fa-whatsapp"></i>
                  </a>
                </li>
              </ul>
            </div>
            <div class="col-lg-4 order-md-3">
              <div class="text-center">
                <p class="fz-14">© 2025 Tüm Hakkı Saklıdır.                  <span class="underline">
                    <a href="https://www.alestamedya.com">Alesta Medya</a>
                  </span>
                </p>
              </div>
            </div>
            <div class="col-lg-4 col-md-6 md-mb15 order-md-2">
              <div class="links d-flex justify-content-end">
                <ul class="rest d-flex align-items-center">
                                      <li>
                      <a href="/tr/hakkimizda">Hakkımızda</a>
                    </li>
                                  </ul>
              </div>
            </div>
          </div>
        </div>
      </footer>

    </div>


    <script src="/assets/js/jquery-3.6.0.min.js"></script>
    <script src="/assets/js/jquery-migrate-3.4.0.min.js"></script>
    <script src="/assets/js/fslightbox.js"></script>
    <script src="/assets/js/plugins.js"></script>
    <script src="/assets/js/gsap.min.js"></script>
    <!--       <script src="/assets/js/ScrollSmoother.min.js"></script>
        <script src="/assets/js/ScrollTrigger.min.js"></script>
    <script src="/assets/js/smoother-script.js"></script> -->
    <script src="/assets/js/scripts.js"></script>
    
  </body>

  </html>