React ile Modern Web Uygulamaları
Bu yazıda, React ile modern web uygulamaları geliştirirken kullanabileceğiniz temel konseptler ve pratik örnekler sunulmaktadır. Her bir örnek, detaylı açıklamalar ve kod blogları ile desteklenmiştir. Kod blogları renkli çerçevelerle ayrılmış ve kopyala butonları eklenmiştir.
İçindekiler
- React Giriş
- React Bileşenleri
- State ve Props
- Etkinlik Yönetimi
- Lifecycle Metodları
- React Router ile Sayfalar Arası Geçiş
React Giriş
React, kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. Tek sayfa uygulamaları (SPA) geliştirmenizi sağlar ve bileşen tabanlı bir mimariye sahiptir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script>
const element = React.createElement('h1', null, 'Hello, React!');
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
</html>
React Bileşenleri
React bileşenleri, UI parçalarını temsil eden bağımsız ve yeniden kullanılabilir kod bloklarıdır. Fonksiyon veya sınıf tabanlı olabilirler.
Fonksiyonel Bileşen
import React from 'react';
function MerhabaDunya() {
return <h1>Merhaba, Dünya!</h1>;
}
export default MerhabaDunya;
Sınıf Bileşeni
import React, { Component } from 'react';
class MerhabaDunya extends Component {
render() {
return <h1>Merhaba, Dünya!</h1>;
}
}
export default MerhabaDunya;
State ve Props
State ve props, React bileşenlerinin veri yönetimi için kullanılan iki temel kavramdır.
State Kullanımı
import React, { useState } from 'react';
function Sayac() {
const [sayi, setSayi] = useState(0);
return (
<div>
<p>Sayı: {sayi}</p>
<button onClick={() => setSayi(sayi + 1)}>Arttır</button>
</div>
);
}
export default Sayac;
Props Kullanımı
import React from 'react';
function Karsilama(props) {
return <h1>Merhaba, {props.isim}!</h1>;
}
export default Karsilama;
Etkinlik Yönetimi
React, HTML'de kullanılan etkinliklere benzer şekilde, etkinlik işleyicileri tanımlamanıza olanak tanır.
import React from 'react';
function Buton() {
function handleClick() {
alert('Butona tıklandı!');
}
return (
<button onClick={handleClick}>Tıkla</button>
);
}
export default Buton;
Lifecycle Metodları
React bileşenlerinin yaşam döngüsü boyunca çeşitli aşamaları yönetmek için kullanılan metodlardır.
import React, { Component } from 'react';
class Sayac extends Component {
constructor(props) {
super(props);
this.state = { sayi: 0 };
}
componentDidMount() {
console.log('Bileşen oluşturuldu.');
}
componentDidUpdate() {
console.log('Bileşen güncellendi.');
}
componentWillUnmount() {
console.log('Bileşen kaldırıldı.');
}
arttir = () => {
this.setState({ sayi: this.state.sayi + 1 });
}
render() {
return (
<div>
<p>Sayı: {this.state.sayi}</p>
<button onClick={this.arttir}>Arttır</button>
</div>
);
}
}
export default Sayac;
React Router ile Sayfalar Arası Geçiş
React Router, React uygulamalarında sayfalar arası geçişi yönetmek için kullanılan bir kütüphanedir.
import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
function Anasayfa() {
return <h2>Anasayfa</h2>;
}
function Hakkinda() {
return <h2>Hakkında</h2>;
}
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Anasayfa</Link>
</li>
<li>
<Link to="/hakkinda">Hakkında</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/hakkinda">
<Hakkinda />
</Route>
<Route path="/">
<Anasayfa />
</Route>
</Switch>
</div>
</Router>
);
}
export default App;