Merhaba sevgili geliştirici arkadaşım! Eğer React.js ile web uygulamaları yapmaya başlamak istiyorsan, doğru yerdesin. Bu yazı, seni adım adım React ile tanıştıracak ve bu harika kütüphaneyi kullanarak ilk uygulamanı oluşturmanı sağlayacak.

React.js Nedir?

React.js, Facebook tarafından geliştirilen ve günümüzde popülerliğini katlanarak artıran bir JavaScript kütüphanesidir. Özellikle kullanıcı arayüzleri oluşturmak için tercih edilir. Basit, hızlı ve bileşen bazlı yapısıyla React, projeni çok daha yönetilebilir hale getirir. Ama gel, bu kütüphaneyi daha yakından tanıyalım!

React ile Web Uygulaması Yapmaya Başlamak

Şimdi, hadi ilk React uygulamamızı yapalım. İlk adımda biraz hazırlık yapmamız gerekiyor.

React uygulaması oluşturmak için önce Node.js ve npm'yi kurmamız gerekiyor. Eğer zaten kuruluysa, harika! Kurulumu aşağıdaki adımlarla yapabilirsin:

- [Node.js](https://nodejs.org/) sitesine gidip işletim sistemine uygun olan sürümü indir.
- Kurulumdan sonra terminalde `node -v` ve `npm -v` komutlarıyla kurulumun doğru yapıldığını kontrol et.

React ile çalışmak için en kolay yöntemlerden biri, Create React App komut satırı aracını kullanmaktır. Bu araç, senin için temel bir React uygulaması şablonu oluşturur. Aşağıdaki adımlarla projeni başlatabilirsin:

```bash
npx create-react-app react-uygulamam
cd react-uygulamam
npm start
```

Bu komutlar, projenin temel yapısını oluşturacak ve senin için gerekli tüm dosyaları hazırlayacaktır. Sonrasında `npm start` komutuyla projeyi başlatabilir ve tarayıcında uygulamanı görebilirsin.

React’ın en temel yapı taşı bileşenlerdir (components). Her şey bir bileşenden oluşur. Hadi gel, bir bileşen oluşturalım!

Projenin içindeki `src/App.js` dosyasını aç ve şu şekilde düzenle:

```jsx
import React from 'react';

function App() {
return (

);
}

export default App;
```

Yukarıdaki kodda bir React bileşeni tanımladık. `App` fonksiyonu, HTML benzeri JSX yapısını döndürüyor. Bu bileşen, ekrana başlık ve bir paragraf yazdıracak.

React’te, HTML benzeri yapıdaki JSX kodları kullanıyoruz. Buradaki en önemli fark, React’ın bu JSX kodlarını alıp JavaScript'e dönüştürmesidir. JSX kullanarak HTML’i daha dinamik ve etkileşimli hale getirebilirsiniz.

Örneğin, bir düğme ekleyip ona tıklandığında bir işlem yapmasını isteyebiliriz:

```jsx
import React, { useState } from 'react';

function App() {
const [sayac, setSayac] = useState(0);

const arttir = () => setSayac(sayac + 1);

return (

);
}

export default App;
```

Bu kodda, React’in useState hook’u ile bir sayacı tutuyoruz ve her tıklamada bu sayacı arttırıyoruz. Bu, React’in etkileşimli özelliklerinden sadece bir örnek.

Web uygulamanı geliştirdikçe stil vermek de önemli bir adım. React projende stil verme işlemi oldukça basittir. Şimdi, `src/App.css` dosyasına aşağıdaki gibi stil ekleyebilirsin:

```css
div {
text-align: center;
margin-top: 50px;
}

h1 {
color: #007bff;
}

button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}
```

Bu stil, uygulamanıza güzel bir görünüm katacaktır. Özellikle React’te stil eklemek çok kolaydır; doğrudan CSS dosyasını import ederek bileşenlere özel stiller uygulayabilirsiniz.

Geliştirdiğin React uygulamasını yayınlamak da oldukça basit. Projeyi Netlify veya Vercel gibi platformlarda yayınlayabilirsin. Hadi gel, Netlify üzerinden nasıl yayınlayacağımıza bakalım:

1. Netlify hesabı oluştur.
2. Projeni GitHub’a yükle.
3. Netlify’a giriş yap ve GitHub hesabını bağla.
4. Projeni seç ve yayınla.

Ve işte bu kadar! Artık React ile oluşturduğun web uygulamanı herkes görebilir.

Ve işte! React.js ile ilk web uygulamanı oluşturmayı başardın. Bu yazıda, temel adımlarla nasıl bir React uygulaması oluşturabileceğini gösterdim. Şimdi, React'in daha ileri seviye özelliklerini keşfetmeye başlayabilir ve projelerini büyütebilirsin.

React ile neler yapabileceğini görmek gerçekten çok heyecan verici. Her şey bileşenlerden ibaret ve bu bileşenleri birbirine bağlayarak inanılmaz projeler ortaya çıkarabilirsin!