React Nedir? Teknik Olmayanlar İçin Sade Rehber

React, kullanıcı arayüzleri oluşturmak için bir JavaScript kütüphanesidir — insanların uygulamada gördüğü ve tıkladığı kısım. Ekranları, bileşen adı verilen yeniden kullanılabilir parçalardan kurarsınız: bir düğme, bir ürün kartı ya da bütün bir sayfa gibi. React, ekranı verilerinizle senkron tutar: veri değiştiğinde, ona bağlı olan sayfa parçalarını günceller. Facebook (şimdiki adıyla Meta) tarafından geliştirilmiştir, açık kaynaktır ve web uygulaması geliştirmenin en yaygın kullanılan yollarından biridir.

Yapay zekayla inşa ederken neden önemlidir

Bir yapay zeka aracıyla web uygulaması inşa ediyorsanız, büyük ihtimalle React ile yazılmıştır. Birçok yapay zeka uygulama inşa edici, popüler olduğu, iyi belgelendiği ve yapay zeka modellerinin öğrenebileceği devasa miktarda React kodu bulunduğu için React’i varsayılan olarak kullanır.

Yapay zekayla inşa etmek için React yazmanız gerekmez. Ama biraz bilmek şunlarda işinize yarar:

• Değişiklikleri kesin biçimde tarif etmek. “ProductCard bileşenini, fiyat kalın olacak şekilde değiştir” demek, “bir yerde fiyatları öne çıkar” demekten daha nettir.
• Hataları anlamak. “Cannot read properties of undefined” ya da “Too many re-renders” gibi mesajlar daha anlamlı hale gelir.
• Mantıklı seçimler yapmak. Düz React uygulamaları tarayıcıda render edilir; bu da arama görünürlüğünü ve ilk yükleme hızını etkiler. Bunu bilmek, farklı bir kurulum istemenin ne zaman doğru olduğuna karar vermenize yardımcı olur.
• İleride geliştiricilerle çalışmak. React yaygın bir beceridir, bu yüzden bir geliştirici genellikle bir React kod tabanını kolayca devralabilir.

Günlük hayattan bir benzetme

LEGO’yu düşünün. Tüm bir modeli tek bir bloktan oymak yerine, standart parçalardan inşa edersiniz. Birkaç parça bir tekerlek yapar; dört tekerlek ve birkaç başka parça bir araba olur. Her arabanın kırmızı tekerlekleri olmasını isterseniz, tekerlek tasarımını bir kez değiştirirsiniz.

React bileşenleri bu parçalardır. Bir Button bileşeni bir ProductCard içinde kullanılır, o da bir ProductGrid içinde, o da ShopPage sayfasının bir parçasıdır. Button’ı bir kez değiştirirseniz, uygulamadaki her düğme değişir.

Benzetmenin diğer yarısı: talimatları değiştirdiğinizde LEGO modelinin kendini yeniden kurduğunu düşünün. React’in diğer numarası budur — mevcut veri için ekranın nasıl görünmesi gerektiğini tarif edersiniz ve React sayfada neyin değişmesi gerektiğini kendisi çözer.

Temel fikirler

Bileşenler

Bir bileşen, bir arayüz parçası döndüren bir JavaScript fonksiyonudur. React dokümantasyonu bir bileşeni kendi mantığı ve görünümü olan bir UI parçası olarak tanımlar. Bileşen adları büyük harfle başlar.

JSX

Bileşenler genellikle JSX ile yazılır; bu, JavaScript içine karıştırılmış HTML’e benzer:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX zorunlu değildir, ama React dokümantasyonu çoğu projenin bunu kullandığını belirtir. Tarayıcıda çalışmadan önce düz JavaScript’e dönüştürülür.

Props

Props, bir bileşene verdiğiniz girdilerdir; yeniden kullanılabilir bir parçanın ayarları gibi:

<ProductCard name="Lavender Candle" price={24} />

Aynı ProductCard, herhangi bir ürünü gösterebilir.

State

State, bir bileşenin uygulama çalışırken değişebilen ve hatırladığı bilgidir — bir menünün açık olup olmadığı, arama kutusuna ne yazıldığı, sepette kaç ürün olduğu. State değiştiğinde React bileşeni yeniden render eder, böylece ekran ona uyar.

Hook’lar

Hook’lar, adları use ile başlayan fonksiyonlardır; örneğin useState (bir değeri hatırlar) ve useEffect (render’dan sonra kod çalıştırır, örneğin veri çekmek için). Yapay zeka tarafından üretilen React kodunda bunları her yerde görürsünüz.

Uygulamalı örnek: bir sepet sayacı

Online mağazanızda bir “Sepete ekle” düğmesi ve ürün sayısını gösteren bir sepet simgesi olduğunu düşünün. React’te kabaca şöyle görünür:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

Bir alışverişçi “Sepete ekle” düğmesine tıkladığında olanlar:

1. Düğmenin onClick özelliği onAdd’i çağırır, o da setCartCount’u çağırır.
2. React cartCount state’ini 0’dan 1’e günceller.
3. React Shop bileşenini yeniden render eder ve CartIcon’a count={1} gönderir.
4. Sayfa artık “Cart (1)” gösterir. “Sepet yazısını bul ve değiştir” diyen kodu kimse yazmadı — ekran veriyi takip eder.

Sınırlarını da fark edin. Bu sayaç tarayıcının belleğinde yaşar. Sayfayı yenilerseniz yeniden 0’a döner. Sepeti korumak için onu kalıcı bir yere kaydetmeniz gerekir — bir çerez, tarayıcı depolaması ya da backend üzerinden bir veritabanı. React ekranı yönetir; sizin verinizi saklamaz.

React bir web uygulamasında nerede durur

“Vite + React” uygulaması tarayıcıda render edilir (tek sayfalık bir uygulama). Bir Next.js uygulaması ise sayfaları önce sunucuda render edebilir; bu da arama motorlarına ve ilk yükleme hızına yardımcı olur.

Yaygın terimler

Yaygın hatalar ve yanlış anlamalar

• “React bir programlama dilidir.” JavaScript (ya da TypeScript) ile yazılan ve bunların içinden kullanılan bir kütüphanedir.
• “React verilerimi saklar.” State tarayıcıda yaşar ve yenilemede kaybolur. Kalıcı veri için bir backend ve veritabanı gerekir.
• React koduna gizli değer koymak. Bir React uygulamasındaki her şey ziyaretçinin tarayıcısına gönderilir. Oradaki API anahtarları herkese açık olur. Onları sunucuda tutun.
• “React uygulamaları arama sonuçlarında sıralanamaz.” Yalnızca istemci tarafı render, arama için daha zayıftır; ama önceden render etme ya da sunucu tarafı render çoğu sorunu çözer.
• Dev bileşenler. 1.000 satırlık tek bir bileşeni insanların ve yapay zekanın güvenle değiştirmesi zordur. Daha küçük bileşenler isteyin.
• React web uygulamasının bir telefon uygulaması olduğunu varsaymak. Telefonlar dahil tarayıcıda çalışır, ama bir App Store uygulaması değildir.

Yapay zeka inşa edicinizden ne istemelisiniz

• “Bu sayfayı küçük, adlandırılmış bileşenlere böl ve her birinin hangi dosyada olduğunu söyle.”
• “ProductCard bileşenini, name, price ve image props’larıyla yeniden kullanılabilir yap.”
• “Sepeti yenilemeden sonra da kalması için veritabanına kaydet.”
• “Tüm API anahtarlarını sunucuda tut; React kodu kendi API’mizi çağırmalı.”
• “Sunucudan gelen veriler için yükleniyor ve hata durumları ekle.”
• “Bu sayfalarda arama görünürlüğü önemliyse, bunları önceden render et ya da sunucu tarafında render edilen bir kurulum kullan.”
• “Bu hatanın ne anlama geldiğini ve hangi bileşenden kaynaklandığını sade bir dille açıkla.”

Daha geniş resim için frontend ve backend rehberine, yapay zekanın yazdığını gözden geçirmek için de yapay zeka tarafından üretilen kodu nasıl incelersiniz rehberine bakın.

Mythex’te React

Başka bir şey istemediğiniz sürece Mythex yeni projeleri Vite + React + TypeScript + Tailwind üzerinde başlatır; siz sohbet ederken canlı bir önizleme çalışır. İlk promptunuzda başka bir kurulum adlandırabilirsiniz — örneğin “Next.js kullan” ya da “düz statik HTML açılış sayfası” — ve Mythex bunu yazdığınız metinden seçer; bunun için bir ayarlar ekranı yoktur. Teknolojinin nasıl seçildiğini anlatan dokümantasyon sayfası şablonlar bölümündedir. Kod düzenleyici Ücretsiz planda salt okunurdur; Pro’da React kodunu doğrudan düzenleyebilir ve projeyi başka bir yerde çalışmaya devam etmek için dışa aktarabilirsiniz.

Sorular