Hadi, gözlerini kısıp, bir an için web dünyasına adım attığını hayal et. Bir an için kendi internet uygulamanı yaratmak ve onu dünya ile paylaşmak fikri seni heyecanlandırmıyor mu? İster sıfırdan başla, ister daha önce JavaScript ile birkaç şey öğrenmiş ol, React.js seni bekliyor. Bu yazıda, React.js ile web uygulaması yapmanın ne kadar kolay olabileceğini keşfedeceğiz.
Neden React.js?
Ama tabii, bir de şöyle düşünmelisin: "Ben nasıl başlarım?" Endişelenme, adım adım seni yönlendireceğiz.
Başlamadan Önce
1. Node.js İndir ve Kur: [Node.js](https://nodejs.org) resmi sitesinden son sürümü indir.
2. npm Kontrolü Yap: Terminal ya da komut istemcisine `npm -v` yazarak npm’in doğru şekilde yüklendiğinden emin ol.
React Projesi Oluşturma
```bash
npx create-react-app my-app
```
Bu komut, `my-app` adında yeni bir React projesi oluşturacak. Burada `npx`, Node.js’in bir aracı olarak create-react-app komutunu çalıştırır ve proje yapısının oluşturulmasına yardımcı olur.
Proje oluşturulduktan sonra, oluşturduğun klasöre gidip uygulamanı başlatabilirsin:
```bash
cd my-app
npm start
```
Bu komut, tarayıcında http://localhost:3000 adresinde çalışan bir React uygulaması açacaktır.
React'in Temelleri
Öncelikle `src/App.js` dosyasını aç ve şu basit bileşeni ekle:
kopyalaimport React from 'react'; function App() { return ( Merhaba, React! Web uygulamanızın ilk adımına hoş geldiniz! ); } export default App;
Bu basit bileşen, ekranda “Merhaba, React!” yazısını gösterecek. Her yeni bileşen, genellikle kullanıcı arayüzünü kontrol eder ve buna uygun verileri yönetir.
Durum Yönetimi (State)
kopyalaimport React, { useState } from 'react'; function App() { const [counter, setCounter] = useState(0); const increment = () => { setCounter(counter + 1); }; return ( Sayac: {counter} Arttır ); } export default App;
Burada `useState` kullanarak bir sayacı tutuyoruz. Her tıklamada sayaç değeri bir artacak.
Bileşenler Arası Veri Paylaşımı
kopyalafunction Greeting(props) { return Merhaba, {props.name}!; } function App() { return ( ); } export default App;
Yukarıdaki örnekte, Greeting bileşeni `name` props’u ile farklı değerler alıyor ve ekranda onları gösteriyor. Bu, bileşenler arasındaki veri iletimini oldukça basitleştirir.
React Router ile Sayfa Yönlendirme
```bash
npm install react-router-dom
```
Sonrasında, sayfalar arasında geçiş yapmak için şu şekilde kullanabilirsin:
kopyalaimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; function Home() { return Ana Sayfa; } function About() { return Hakkında Sayfası; } function App() { return ( ); } export default App;
Bu örnekte, kullanıcı /about adresine giderse, "Hakkında Sayfası" görünür. React Router sayesinde sayfalar arasında geçiş yapmak oldukça basit hale gelir.
Sonuç: Kendine Güven, Web Uygulamanı Yap!
---
