1. React.js Nedir ve Neden Kullanmalısınız?
React.js, Facebook tarafından geliştirilen bir JavaScript kütüphanesidir. Özellikle kullanıcı arayüzü (UI) oluşturmak için kullanılır. React, bileşen tabanlı bir yapı kullanır, yani her bir UI bileşeni bağımsız olarak tasarlanabilir ve yönetilebilir. Bu sayede kodunuzu daha modüler ve bakımı kolay hale getirebilirsiniz.
React.js'in Avantajları:
- Hızlı performans
- Bileşen tabanlı yapı
- Büyük topluluk ve bolca dökümantasyon
- Tek yönlü veri akışı ile daha kontrollü uygulama yönetimi
2. React.js Kurulumu
React.js kurulumuna başlamadan önce, bilgisayarınızda Node.js'in yüklü olması gerekiyor. Node.js, JavaScript'i sunucu tarafında çalıştırmanızı sağlar ve React projeleri için gereklidir.
Node.js Yükleme Adımları:
1. [Node.js'in resmi sitesine](https://nodejs.org/) gidin.
2. İhtiyacınıza uygun olan sürümü indirin (LTS sürümünü öneririz).
3. Kurulum sihirbazını takip ederek Node.js'i bilgisayarınıza yükleyin.
Kurulumun ardından terminal ya da komut istemcisinde şu komutu çalıştırarak Node.js'in doğru yüklendiğini kontrol edebilirsiniz:
```bash
node -v
npm -v
```
Bu komutlar, yüklü olan Node.js ve npm sürümlerini gösterecektir.
3. React Projesi Oluşturma
React projesi oluşturmanın en kolay yolu, Facebook tarafından sağlanan `create-react-app` aracını kullanmaktır. Bu araç, React için gerekli tüm yapılandırmaları otomatik olarak yapar.
Proje Başlatma Adımları:
1. Terminali açın ve yeni bir React projesi oluşturmak için şu komutu yazın:
```bash
npx create-react-app ilk-react-projem
```
Bu komut, `ilk-react-projem` adında yeni bir klasör oluşturacak ve gerekli React dosyalarını içine yerleştirecektir. Proje oluşturma işlemi tamamlandığında, terminalde şu şekilde bir çıktı göreceksiniz:
```bash
Success! Created ilk-react-projem at /path/to/ilk-react-projem
```
2. Projenizi başlatmak için terminalde bu komutu kullanın:
```bash
cd ilk-react-projem
npm start
```
Bu komut, React projenizi başlatacak ve tarayıcınızda `http://localhost:3000` adresinde çalışmaya başlayacaktır. Artık React ile geliştirmeye başlayabilirsiniz!
4. İlk React Bileşeninizi Yazma
React, bileşenler ile çalışır, yani her UI elemanı bir bileşendir. Hadi şimdi ilk bileşeninizi oluşturalım!
İlk Bileşen Kodu:
`src/App.js` dosyasını açın ve aşağıdaki kodu ekleyin:
import React from 'react';
function App() {
return (
Merhaba React!
Bu, ilk React uygulamanız!
);
}
export default App;
Bu basit bileşen, bir başlık ve paragraf içeriyor. Kodda dikkat etmeniz gereken bir diğer önemli nokta ise `export default App;` ifadesidir. Bu, bileşenin dışarıya aktarılmasını sağlar ve uygulamanın çalışabilmesi için gereklidir.
React Bileşen Yapısı:
React bileşenleri genellikle üç bölümden oluşur:
1. State (Durum): Bileşenin verileri.
2. Props (Özellikler): Dışarıdan gelen veriler.
3. Render (Görselleştirme): UI'nın nasıl görüntüleneceğini tanımlar.
5. Projeyi Geliştirme ve Yayınlama
Projeyi geliştirdikçe, React'in sunduğu bir çok özellikten yararlanabilirsiniz. Örneğin, useState, useEffect gibi Hook'lar ile daha dinamik ve etkili uygulamalar geliştirebilirsiniz.
Projeniz hazır olduğunda, onu kolayca yayınlayabilirsiniz. React projelerini yayına almak için popüler yöntemlerden biri Netlify kullanmaktır. Netlify, React uygulamanızı hızlı bir şekilde dağıtmak için mükemmel bir platformdur.
Netlify'de projenizi yayınlamak için şu adımları takip edebilirsiniz:
1. Projenizi GitHub'a yükleyin.
2. Netlify hesabı oluşturun ve GitHub reposunu bağlayın.
3. "Deploy" butonuna basarak projenizi yayınlayın.
Sonuç
React.js ile proje kurmak ve başlatmak, birkaç basit adım ile oldukça kolaydır. Bu rehberin sonunda, React'in temellerini anlamış ve kendi projenizi oluşturmuş olacaksınız. Unutmayın, React'in gücü, bileşen tabanlı yapısında ve geniş ekosisteminde yatıyor. Şimdi sıra, öğrendiklerinizi gerçek projelere dönüştürmekte!
