class React extends Post

*** React, modern web uygulamaları geliştirmek için popüler bir JavaScript kütüphanesidir. Bu yazıda, React kullanarak basit bir blog frontend’i oluştururken izlenecek adımları, kurulumu, önemli React özelliklerini ve performans optimizasyonlarını ele alacağız. --- ### **1. React Kurulumu** React projesini oluşturmak için birkaç farklı yöntem bulunur. En popüler yöntemlerden biri, `create-react-app` komutunu kullanmaktır. Şu adımları takip edebilirsiniz: 1. **Node.js ve npm Kurulumu:** - İlk olarak Node.js ve npm’in bilgisayarınıza yüklenmiş olması gerekir. [Node.js Resmi Sitesi](https://nodejs.org) adresinden yükleyebilirsiniz. 2. **Yeni Proje Oluşturma:**

npx create-react-app my-blog
   cd my-blog
   npm start

Bu komutlar, yeni bir React projesi oluşturur ve yerel geliştirme sunucusunu başlatır. --- ### **2. Basit Blog Yapısı** Bir blog frontend’inde genellikle aşağıdaki bileşenler bulunur: - **Anasayfa:** Blog yazılarının listesi. - **Blog Detay Sayfası:** Seçilen blog yazısının detayları. - **Hakkında ve İletişim Sayfaları:** Statik sayfalar. Örnek bir dosya yapısı: ``` src/ ├── components/ │ ├── Header.js │ └── Footer.js ├── pages/ │ ├── Home.js │ ├── BlogDetail.js │ └── About.js ├── App.js └── index.js ``` #### **Örnek Kod: Header Bileşeni**

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>My Blog</h1>
      <nav>
        <a href="/">Anasayfa</a>
        <a href="/about">Hakkında</a>
      </nav>
    </header>
  );
};

export default Header;

#### **Home Sayfası**

import React, { useState, useEffect } from 'react';

const Home = () => {
  const [blogs, setBlogs] = useState([]);

  useEffect(() => {
    // Blog yazılarını bir API’den çekiyoruz.
    fetch('/api/blogs')
      .then(response => response.json())
      .then(data => setBlogs(data));
  }, []);

  return (
    <div>
      <h2>Blog Yazıları</h2>
      <ul>
        {blogs.map(blog => (
          <li key={blog.id}>
            <a href={`/blog/${blog.id}`}>{blog.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

--- ### **3. Performans Optimizasyonları** #### **1. React’ın Virtual DOM’unu Anlama** React, Virtual DOM kullanarak DOM manipülasyonlarını optimize eder. Ancak, bileşenlerinizi verimli bir şekilde tasarlamak bu süreci daha da hızlı hale getirebilir. #### **2. Memoization Kullanımı** Gereksiz render işlemlerini önlemek için `React.memo` ve `useMemo` gibi araçları kullanabilirsiniz. #### **3. React Router ile Dinamik Yükleme** React Router’ı kullanırken bileşenleri lazım olduklarında yüklemek için `React.lazy` ve `Suspense` kullanın.

import React, { Suspense, lazy } from 'react';
const BlogDetail = lazy(() => import('./pages/BlogDetail'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <BlogDetail />
    </Suspense>
  );
}

#### **4. Lighthouse ile Performans Analizi** Google’ın Lighthouse aracı, uygulamanızın hızını ve performansını optimize etmek için kullanılabilir. - Gereksiz CSS ve JavaScript dosyalarını temizleyin. - Resimlerinizi optimize edin (WebP formatı kullanabilirsiniz). - CDN kullanarak statik kaynakları hızlı bir şekilde ulaşılabilir kılın. --- ### **4. SEO ve Google Arama Performansı** React uygulamalarında SEO sorunları genellikle dinamik içeriklerin arama motorları tarafından dizine eklenememesinden kaynaklanır. Bu sorunları aşağıdaki tekniklerle azaltabilirsiniz: #### **1. Server-Side Rendering (SSR)** Next.js gibi SSR destekli bir framework kullanarak React uygulamanızı daha SEO dostu hale getirebilirsiniz. #### **2. Meta Etiketleri Dinamik Olarak Ekleme** `react-helmet` paketini kullanarak sayfa başlığı ve meta etiketlerini düzenleyebilirsiniz:

import { Helmet } from 'react-helmet';

function BlogDetail({ title, description }) {
  return (
    <div>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={description} />
      </Helmet>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
}

#### **3. Sitemap ve Robots.txt** - Sitemap.xml oluşturup Google Search Console’a ekleyin. - Robots.txt dosyası ile arama motorlarına rehberlik edin. --- ### **Sonuç** React ile bir blog frontend’i geliştirmek hem keyifli hem de öğretici bir deneyimdir. Bu yazıda bahsedilen adımları takip ederek temel bir yapı oluşturabilir, performansı optimize edebilir ve Google arama performansını iyileştirebilirsiniz. Bol kodlu ve başarılı projeler dilerim!