React ve Material-UI ile Yeniden Kullanılabilir UI Componentleri Oluşturmak

Adı : React ve Material-UI ile Yeniden Kullanılabilir UI Componentleri Oluşturmak

React ve Material-UI, modern bir web uygulaması geliştirmek için kullanabileceğiniz iki popüler araçtır. React, Facebook tarafından geliştirilen açık kaynak kodlu bir JavaScript kütüphanesi ve UI bileşenlerinin etkileşime girmesine yardımcı olurken, Material-UI, Google'ın Material Design stilini benimseyen bir bileşen kitaplığıdır. Bu yazıda, React ve Material-UI kullanarak yeniden kullanılabilir UI bileşenleri oluşturmak için farklı örnekler üzerinde duracağız.

1. Basit bir buton bileşeni oluşturma:

Material-UI'nin birçok bileşeni vardır, ancak en temel bileşenlerden biri butondur. Basit bir buton bileşeni oluşturmak için, öncelikle React ile bir bileşen sınıfı oluşturmalısınız.

```
import React from \"react\";
import Button from \"@material-ui/core/Button\";

function SimpleButton() {
return (

Basit Buton

);
}

export default SimpleButton;
```

Bu bileşen, basit bir buton oluşturur ve Material-UI'nin \"contained\" ve \"primary\" stillerini kullanarak renkli bir arka plana sahip olur.

2. Etkileşimli bir form bileşeni oluşturma:

Material-UI, etkileşimli bir form oluşturmak için bir dizi bileşen sunar. İşlevsel bir görevi yerine getiren bir örnek için, form alanı başlatma sınavı diyebiliriz.

```
import React, { useState } from \"react\";
import TextField from \"@material-ui/core/TextField\";
import Button from \"@material-ui/core/Button\";

function StartQuizForm(props) {
const [name, setName] = useState(\"\");

const handleSubmit = (event) => {
event.preventDefault();
props.onSubmit(name);
};

return (