Adı : Axios ve React ile Veri Ekleme İşlemi: Form Oluşturma

Axios ve React, web uygulamaları için yaygın olarak kullanılan bir JavaScript kütüphanesi olan React ile iletişim kurmamıza olanak sağlayan bir HTTP istemci kütüphanesidir. Bu yazıda Axios ve React'i kullanarak veri ekleme işlemlerini nasıl yapabileceğimizi detaylı şekilde inceleyeceğiz.

Form Oluşturma:
1. İlk adım olarak, react ve axios paketlerini projemize eklemeliyiz. Yeni bir react projesi oluşturduktan sonra, terminalde aşağıdaki komutları sırasıyla çalıştırarak bu paketleri ekleyebiliriz:
```
npm install react
npm install axios
```

2. Ardından, React bileşenimizi oluşturmak için bir JavaScript dosyası oluşturmalıyız. Örnek olarak \"Form.js\" olarak adlandırabiliriz. Bu dosyanın içine aşağıdaki kodu ekleyelim:

```jsx
import React, { useState } from \"react\";
import axios from \"axios\";

const Form = () => {
const [name, setName] = useState(\"\");
const [email, setEmail] = useState(\"\");

const handleSubmit = async (e) => {
e.preventDefault();

const data = {
name: name,
email: email,
};

try {
// Axios ile POST isteği yapılıyor
const response = await axios.post(\"https://api.example.com/users\", data);

// Başarılı sonuç durumunda kullanıcıya bilgi veriliyor
alert(\"Kullanıcı başarıyla eklendi\");
} catch (error) {
// Hata durumunda hata gösteriliyor
alert(\"Bir hata meydana geldi. Lütfen tekrar deneyin\");
}

// Form alanları sıfırlanıyor
setName(\"\");
setEmail(\"\");
};

return (


Name:
type=\"text\"
value={name}
onChange={(e) => setName(e.target.value)}
/>


Email:
type=\"email\"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>

Submit

);
};

export default Form;
```

Yukarıdaki kodda, \"Form\" adında bir fonksiyonel bileşen oluşturduk. Bu bileşen, form alanlarına girilen verileri takip eder ve Axios ile bir POST isteği yaparak bu verileri sunucuya gönderir.

3. Form bileşenimizi projemizde kullanmak için, başka bir JavaScript dosyasında çağırabiliriz. Örneğin, projemizin ana bileşenini oluşturan \"App.js\" dosyasına aşağıdaki kodu ekleyelim:

```jsx
import React from \"react\";
import Form from \"./Form\";

const App = () => {
return (