React Nedir? React ile Statik Web Sitesi Oluşturma

Web geliştirme dünyası, kullanıcı deneyimini iyileştirmek ve dinamik içerikler sunmak amacıyla sürekli olarak gelişmektedir. Bu bağlamda, JavaScript kütüphaneleri ve framework’leri önemli bir rol oynamaktadır. React, Facebook tarafından geliştirilen ve günümüzde en popüler JavaScript kütüphanelerinden biri olarak öne çıkmaktadır. Bu makalede, React’in ne olduğu, nasıl çalıştığı ve bir statik web sitesi oluşturma sürecinde nasıl kullanılacağı detaylı bir şekilde ele alınacaktır.

1. React Nedir?

React, kullanıcı arayüzleri (UI) oluşturmak için kullanılan bir JavaScript kütüphanesidir. İlk olarak 2013 yılında Facebook tarafından piyasaya sürülen React, bileşen tabanlı bir yapı sunarak geliştiricilerin daha modüler ve yeniden kullanılabilir kod yazmalarına olanak tanır. React, sanal DOM (Virtual DOM) kullanarak kullanıcı arayüzlerini hızlı bir şekilde güncelleyebilme yeteneğine sahiptir. Bu sayede, uygulama performansı artırılır.

1.1. Bileşen Tabanlı Yapı

React’in en önemli özelliklerinden biri bileşen tabanlı yapısıdır. Her bir bileşen, kendi durumunu (state) ve özelliklerini (props) tutar. Bu, uygulamanın her bir parçasının bağımsız olarak geliştirilmesine ve test edilmesine olanak tanır. Geliştiriciler, bileşenleri kullanarak karmaşık kullanıcı arayüzlerini daha basit parçalara bölebilir.

1.2. Sanal DOM

React, sanal DOM kullanarak DOM üzerinde yapılan işlemleri optimize eder. Gerçek DOM manipülasyonları zaman alıcıdır. Ancak sanal DOM, bu işlemleri hafif bir temsilci üzerinden gerçekleştirerek performansı artırır. Değişiklikler yapıldığında, React yalnızca gerekli olan bileşenleri günceller, böylece hızlı bir kullanıcı deneyimi sunar.

2. React ile Statik Web Sitesi Oluşturma

React, dinamik ve etkileşimli web uygulamaları oluşturmak için yaygın olarak kullanılsa da, basit statik web siteleri oluşturmak için de idealdir. Aşağıda, React ile basit bir statik web sitesi oluşturma adımlarını inceleyeceğiz.

2.1. Gerekli Araçlar

React ile bir proje başlatmak için bazı araçlara ihtiyacınız olacak:

• Node.js: React uygulamalarını geliştirmek için Node.js yüklü olmalıdır. Node.js, JavaScript’i sunucu tarafında çalıştırmanıza olanak tanır.
• npm veya Yarn: JavaScript paketlerini yönetmek için kullanılan bu araçlardan birini tercih edebilirsiniz. React uygulamalarını başlatmak ve bağımlılıkları yüklemek için kullanılır.
• Bir Kod Editörü: Visual Studio Code, Atom veya Sublime Text gibi bir kod editörü kullanarak kod yazabilirsiniz.

2.2. Yeni Bir React Projesi Oluşturma

React uygulamanızı oluşturmak için terminal veya komut istemcisi üzerinden şu komutu kullanabilirsiniz:

bashKodu kopyalanpx create-react-app my-static-site

Bu komut, my-static-site adında yeni bir React projesi oluşturur. Proje dizinine geçmek için şu komutu kullanın:

bashKodu kopyalacd my-static-site

2.3. Projeyi Başlatma

Oluşturduğunuz React uygulamasını başlatmak için aşağıdaki komutu kullanabilirsiniz:

bashKodu kopyalanpm start

Bu komut, tarayıcınızda uygulamayı başlatır ve genellikle http://localhost:3000 adresinde görüntüler.

2.4. Bileşen Oluşturma

React ile çalışırken, bileşenler oluşturmak anahtar bir adımdır. Basit bir statik web sitesi için birkaç temel bileşen oluşturabiliriz. Örneğin, bir ana sayfa (Home), bir hakkında (About) sayfası ve bir iletişim (Contact) sayfası oluşturabiliriz.

2.4.1. Home Bileşeni

src klasörü altındaki components adında bir klasör oluşturun ve Home.js adında bir dosya oluşturun:

javascriptKodu kopyala// src/components/Home.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Hoş Geldiniz!</h1>
      <p>Bu, React ile oluşturulmuş basit bir statik web sitesidir.</p>
    </div>
  );
};

export default Home;

2.4.2. About Bileşeni

Benzer şekilde, About.js adında bir dosya oluşturun:

javascriptKodu kopyala// src/components/About.js
import React from 'react';

const About = () => {
  return (
    <div>
      <h1>Hakkında</h1>
      <p>React, kullanıcı arayüzleri oluşturmak için kullanılan bir JavaScript kütüphanesidir.</p>
    </div>
  );
};

export default About;

2.4.3. Contact Bileşeni

Son olarak, Contact.js adında bir dosya oluşturun:

javascriptKodu kopyala// src/components/Contact.js
import React from 'react';

const Contact = () => {
  return (
    <div>
      <h1>İletişim</h1>
      <p>Bize ulaşmak için iletişim formunu doldurun.</p>
    </div>
  );
};

export default Contact;

2.5. Router Kullanımı

React uygulamanızda sayfalar arasında geçiş yapmak için react-router-dom kütüphanesini kullanabilirsiniz. Bu kütüphaneyi yüklemek için terminalde aşağıdaki komutu çalıştırın:

bashKodu kopyalanpm install react-router-dom

Sonrasında src/App.js dosyasını düzenleyerek yönlendirmeleri ayarlayın:

javascriptKodu kopyala// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Ana Sayfa</Link></li>
          <li><Link to="/about">Hakkında</Link></li>
          <li><Link to="/contact">İletişim</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
};

export default App;

2.6. Stil Eklemek

Web sitenizin görünümünü iyileştirmek için CSS kullanabilirsiniz. src/App.css dosyasına stil ekleyerek sayfanızın görünümünü değiştirebilirsiniz. Örneğin:

cssKodu kopyalanav {
  background-color: #282c34;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
}

nav a {
  color: white;
  text-decoration: none;
}

3. Sonuç

React, bileşen tabanlı yapısı ve sanal DOM kullanımı sayesinde kullanıcı arayüzleri oluşturmayı kolaylaştıran güçlü bir kütüphanedir. Bu makalede, React ile basit bir statik web sitesi oluşturmanın temel adımlarını inceledik. Projenizi oluştururken bileşenler, yönlendirme ve stil gibi temel kavramları öğrendiniz.

React, yalnızca statik web siteleri değil, aynı zamanda dinamik ve etkileşimli uygulamalar oluşturmak için de güçlü bir araçtır. Öğrendiklerinizle, daha karmaşık projeler geliştirmek için React’in sunduğu imkanlardan faydalanabilirsiniz. Web geliştirme yolculuğunuzda başarılar dilerim!