React ile Portföy Web Sitesi Oluşturma

React ile Portföy Web Sitesi Oluşturma

Merhaba! Fatih Soysal olarak, sizlere React kullanarak etkileyici bir portföy web sitesi oluşturmayı adım adım anlatacağım. Bu rehber, hem yeni başlayanlar hem de React deneyimi olanlar için faydalı bilgiler içermektedir. Öncelikle projenizi nasıl yapılandıracağınızdan, temel bileşenlerin oluşturulmasına, sonrasında ise stilleme ve dağıtıma kadar her aşamayı detaylı şekilde ele alacağız.

Proje Kurulumu

İlk adımda, yeni bir React projesi oluşturmalıyız. Bunun için Create React App kullanabilirsiniz. Aşağıdaki komutu terminalinize yazarak projeyi başlatabilirsiniz:

npx create-react-app my-portfolio

Bu komut, “my-portfolio” adlı bir klasör içinde yeni bir React projesi oluşturacaktır. Proje klasörüne girdikten sonra, geliştirme sunucusunu başlatmak için şu komutu kullanın:

npm start

Şimdi, temel proje yapımız hazır. Sonrasında, projenizin ihtiyaç duyduğu ek kütüphaneleri (örneğin, router veya state yönetimi için) kurabilirsiniz. Benim kişisel tercihim, karmaşık projelerde Redux veya Context API kullanmaktır. Ancak basit portföy siteleri için, React’in kendi state yönetim mekanizması yeterli olabilir. Bu noktada, projenizin büyüklüğüne ve karmaşıklığınıza bağlı olarak karar vermeniz en doğrusu.

Bileşenlerin Oluşturulması

Bir sonraki adım, web sitenizin temel bileşenlerini oluşturmaktır. Bunlar genellikle “Navbar”, “Hero”, “Projects”, “About”, “Contact” gibi bileşenlerdir. Her bileşeni ayrı bir dosyada tutmak, kod düzeninizi temiz ve anlaşılır tutmanıza yardımcı olacaktır. Örneğin, “Projects” bileşeninde, projelerinizi listelemek için bir map fonksiyonu kullanabilirsiniz. Ayrıca her proje için ayrıntılı bilgi içeren bir modal veya ayrı bir sayfa oluşturabilirsiniz. Bu sayede ziyaretçileriniz projelerinizi detaylı olarak inceleyebilirler.

// Projects.js
import React from 'react';

const Projects = () => {
  const projects = [
    // Proje bilgilerini burada ekleyin
  ];

  return (
    

      {projects.map((project) => (
        

          {/* Proje detayları */}
        
      ))}
    
  );
};

export default Projects;

Stilleme

Web sitenizin görünümünü özelleştirmek için CSS veya bir CSS framework’ü kullanabilirsiniz. Benim tavsiyem, uygulama hızını ve ölçeklenebilirliği iyileştirmek için Material-UI, Ant Design gibi popüler React UI kütüphanelerini tercih etmektir. Bu kütüphaneler hazır bileşenler ve stil seçenekleri sunarak geliştirme sürecini hızlandıracaktır. Ayrıca, benzersiz bir görünüm için özelleştirilebilirler.

Dağıtım

Son adımda, oluşturduğunuz portföy web sitenizi yayınlamalısınız. Bunun için çeşitli platformlar mevcuttur. Netlify, Vercel ve GitHub Pages gibi platformlar ücretsiz dağıtım seçenekleri sunmaktadır. Bu platformlardan birini seçerek, sitenizi kolayca yayınlayabilirsiniz. Yayınlama işlemi genellikle basit bir komutla veya platformun arayüzü üzerinden yapılır. Bu sayede, projenizi dünyayla paylaşabilir ve çalışmanızı herkese sergileyebilirsiniz.

Sonuç

Umarım bu rehber, React ile portföy web sitesi oluşturmanızda size yardımcı olmuştur. Unutmayın ki, bu sadece bir başlangıç noktasıdır. Kendi yaratıcılığınızı kullanarak sitenizi daha da geliştirebilir ve kişiselleştirebilirsiniz. Daha fazla bilgi ve kaynak için fatihsoysal.com sitesini ziyaret edebilirsiniz. Ayrıca, React öğrenmenizde yardımcı olacak birçok harika kaynak mevcuttur. Örneğin, React’in resmi dokümanlarına buradan ulaşabilirsiniz.

#Etiketler: React, Portföy, Web Sitesi, Geliştirme, Programlama, JavaScript, Tutorial, Rehber, CSS, UI Kütüphanesi, Dağıtım, Netlify, Vercel, GitHub Pages