React.js ile Web Uygulaması Yapmaya Başlamadan Önce
Her şeyden önce, React.js nedir? Eğer web geliştirmeye yeni başladıysanız, React.js’i öğrenmek, web uygulamanızı daha hızlı ve etkili bir şekilde oluşturmanıza yardımcı olacaktır. Facebook tarafından geliştirilen ve şu an çok popüler olan bu JavaScript kütüphanesi, dinamik web uygulamaları oluşturmak için mükemmel bir araçtır. Peki, React.js ile web uygulaması yapmak nasıl bir deneyim? Hadi birlikte keşfedelim.
Adım 1: React Kurulumunu Yapın
İlk adım, React’ı bilgisayarınıza kurmaktır. React, Node.js ile çalışır, bu yüzden Node.js’in bilgisayarınızda yüklü olduğundan emin olun. Eğer Node.js yüklü değilse, [Node.js’in resmi web sitesinden](https://nodejs.org) indirip kurabilirsiniz.
Şimdi, React uygulamanızı başlatmak için terminal veya komut istemcisine şu komutu yazabilirsiniz:
npx create-react-app my-app
Bu komut, "my-app" adında yeni bir React uygulaması oluşturur. Başka bir isim de verebilirsiniz. Komut çalıştığında React projeni kurmaya başlar ve her şey hazır olana kadar biraz beklemeniz gerekebilir.
Adım 2: Uygulama Yapısını Tanıyın
React, bileşenler (component) temellidir. Her şey bir bileşen olarak düşünülebilir. İlk başta, React’in nasıl çalıştığını tam anlamayabilirsiniz ama merak etmeyin, her şey zamanla yerine oturacak. Projenizi oluşturduktan sonra, şu dosya yapısına sahip olacaksınız:
my-app/
node_modules/
public/
src/
App.js
index.js
- node_modules: Projeye dahil ettiğiniz tüm bağımlılıkların bulunduğu klasördür.
- public: Statik dosyaların bulunduğu klasördür. Genellikle HTML, görseller, vb. burada bulunur.
- src: JavaScript ve React bileşenlerinin bulunduğu klasördür. Uygulamanızın tüm kodları burada yazılır.
Adım 3: İlk Bileşeninizi Oluşturun
Şimdi, React uygulamanızda bir bileşen oluşturmanın zamanı geldi. İlk bileşeninizi oluşturmak çok heyecan verici olabilir. Hadi, "Merhaba Dünya!" mesajını gösterecek bir bileşen oluşturalım.
`App.js` dosyasını açın ve şu kodu yazın:
import React from 'react';
function App() {
return (
Merhaba Dünya!
);
}
export default App;
Bu kadar basit! Şimdi terminalde şu komutu çalıştırarak uygulamanızı başlatın:
npm start
Tarayıcınızda http://localhost:3000 adresini ziyaret ettiğinizde, "Merhaba Dünya!" mesajını göreceksiniz. Harika değil mi?
Adım 4: Dinamik İçerik ve State Kullanımı
React’in gücünü tam anlamanız için bileşenlerde state (durum) kullanmak çok önemlidir. State, bileşenlerin değişen verilerini saklamak için kullanılır. Bu sayede uygulamanızın dinamik hale gelmesini sağlarsınız.
Mesela, kullanıcıdan bir isim alıp, o ismi ekranda göstermek istersek, şöyle bir örnek yapabiliriz:
import React, { useState } from 'react';
function App() {
const [name, setName] = useState('');
const handleInputChange = (event) => {
setName(event.target.value);
};
return (
Merhaba, {name}!
);
}
export default App;
Bu örnekte, kullanıcı ismini girdikçe ekranda o isim dinamik bir şekilde gösterilecektir. `useState` Hook’u, React’te bileşenlerin durumunu yönetmenin en yaygın yoludur.
Adım 5: React Router ile Sayfa Geçişleri
Birçok web uygulamasında, sayfa geçişleri önemlidir. React Router, bu sayfa geçişlerini yönetmek için kullanılır. React Router ile farklı sayfalara yönlendirme yapabiliriz. Örneğin, ana sayfada bir bağlantı oluşturalım ve tıklanınca başka bir sayfaya gidelim:
İlk olarak React Router’ı yükleyin:
npm install react-router-dom
Sonra, `App.js` dosyasını şu şekilde güncelleyin:
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function Home() {
return Ana Sayfa
;
}
function About() {
return Hakkında
;
}
function App() {
return (
);
}
export default App;
Artık sayfalar arasında geçiş yapabiliriz! Eğer ana sayfaya veya hakkında sayfasına tıklarsanız, uygun içerikler ekranda görünecek.
Sonuç: React ile Web Uygulaması Yapmak Kolay ve Eğlenceli!
React.js, web geliştirme dünyasında devrim yaratan bir araçtır. Yukarıdaki adımlar, temel bir React uygulamasının nasıl oluşturulacağına dair size bir fikir verdi. Gördüğünüz gibi, React ile web uygulamaları geliştirmek oldukça kolay ve eğlenceli bir süreçtir. Öğrenmeye başladıkça daha karmaşık ve dinamik projelere imza atabilirsiniz. Uygulamanızda React’in sunduğu her bir yeniliği keşfetmek, sizi daha da heyecanlandıracak.
