Herkese merhaba! Bugün sizinle harika bir yolculuğa çıkacağız. Eğer kendinizi web geliştirme dünyasında kaybolmuş hissediyorsanız, merak etmeyin, yalnız değilsiniz! Ben de bir zamanlar öyleydim, ancak React.js ile tanıştıktan sonra her şey değişti. Hadi, React ile web uygulaması geliştirmeyi adım adım öğrenmeye başlayalım. Bu yazı hem yeni başlayanlar hem de biraz tecrübeli olanlar için çok faydalı olacak!

React.js, Facebook tarafından geliştirilmiş, verimli ve esnek bir JavaScript kütüphanesidir. Tek sayfa uygulamaları (SPA) ve kullanıcı arayüzleri (UI) oluşturmayı kolaylaştırır. Diğer araçlardan farkı ise, bileşenler (component) ile çalışması ve declarative programming mantığına dayanmasıdır. Yani, "ne yapacağını" söylersiniz ve React, sizin için geri kalanı halleder.

React ile web geliştirme sürecini başlatmak oldukça basittir. Tek yapmanız gereken doğru araçları ve bazı temel bilgileri öğrenmek.

Başlamak için bilgisayarınızda Node.js ve npm (Node Package Manager) yüklü olması gerekiyor. Yüklediyseniz, terminal veya komut satırına şu komutu yazarak React projesini başlatabilirsiniz:

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

Yukarıdaki komut, create-react-app adlı araçla yeni bir React projesi oluşturur ve ardından uygulamanızı başlatır. Şimdi bir tarayıcıda `localhost:3000` adresine giderek uygulamanızı görebilirsiniz.

React'in gücü bileşenlerde yatar. Her şey bir bileşendir. Bir sayfa, bir buton, bir input kutusu bile… Her biri kendi başına bir bileşendir. İşte bunun temel mantığı:

Bir bileşen oluşturmak için şu şekilde bir fonksiyon yazabiliriz:

```jsx
import React from 'react';

function Welcome() {
return

Merhaba, React!

;
}

export default Welcome;
```

Bu kod parçası, `Welcome` adında basit bir bileşen oluşturur ve bu bileşen, bir "Merhaba, React!" başlığını ekrana yazdırır. Bileşenleri, uygulamanızın her yerinde kullanabilirsiniz.

Peki, bu bileşeni nasıl kullanacağız?

Örneğin, `App.js` dosyanızda `Welcome` bileşenini şu şekilde çağırabilirsiniz:

```jsx
import React from 'react';
import Welcome from './Welcome';

function App() {
return (

);
}

export default App;
```

React'teki en güçlü özelliklerden biri state ve props kullanımıdır. State, bileşenin dinamik verilerini yönetmenizi sağlar. Props ise bileşenler arasında veri geçişi yapmanıza olanak tanır.

İlk olarak, state ile başlayalım:

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

function Counter() {
const [count, setCount] = useState(0);

const increment = () => {
setCount(count + 1);
};

return (

);
}

export default Counter;
```

Bu örnekte, `useState` ile bir sayaç oluşturduk. Her tıklamada, sayacın değeri artacak. useState, React'in bir hook'u olup, fonksiyonel bileşenlerde durum (state) yönetimi sağlar.

Şimdi, bir bileşene props ekleyelim:

```jsx
import React from 'react';

function Greeting(props) {
return

Merhaba, {props.name}!

;
}

export default Greeting;
```

Bu bileşende, `name` adlı bir prop alıyoruz ve bunu kullanıcıya hitap etmek için kullanıyoruz. `App.js` içinde bunu şu şekilde kullanabiliriz:

```jsx
import React from 'react';
import Greeting from './Greeting';

function App() {
return (

);
}

export default App;
```

React ile çalışırken stil vermek oldukça basit. React bileşenlerine doğrudan stil eklemek için birkaç farklı yöntem kullanabilirsiniz:

Inline stil kullanarak bir bileşene stil eklemek oldukça kolaydır:

```jsx
function StyledComponent() {
const divStyle = {
backgroundColor: 'lightblue',
padding: '20px',
borderRadius: '8px',
};

return ;
}
```

React projelerinde, klasik CSS dosyalarını da kullanabilirsiniz. Bunun için, stil dosyasını bileşeninizle import etmeniz yeterlidir:

```css
/* styles.css */
.container {
background-color: lightgreen;
padding: 20px;
border-radius: 8px;
}
```

```jsx
import './styles.css';

function StyledComponent() {
return ;
}
```

Bir web uygulamasında kullanıcıdan veri almak genellikle formlar aracılığıyla olur. React ile bir form oluşturmak, state ve event handler'ları kullanarak oldukça kolaydır.

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

function Form() {
const [name, setName] = useState('');

const handleChange = (event) => {
setName(event.target.value);
};

const handleSubmit = (event) => {
event.preventDefault();
alert('Form gönderildi: ' + name);
};

return (

İsim:


Gönder

);
}

export default Form;
```

Ve işte bu kadar! React.js ile basit bir web uygulaması oluşturmak bu kadar kolay. Elbette, React dünyası çok daha derin ve öğrenilecek birçok şey var. Ancak bu yazı, React ile ilgili temel kavramları öğrenmek ve ilk adımlarınızı atmak için mükemmel bir başlangıç olacaktır.

Umarım bu yazı sizin için faydalı olmuştur. Şimdi React dünyasına adım atıp projelerinizi geliştirmeye başlama zamanı! İyi şanslar!