Sıfırdan İleriye ReactJs #15 Material UI Feedback Elemanları

'Masséna · 11 Eki 2025

Sıfırdan ileriye ReactJs yeni konusuna hoş geldiniz. En son Material UI componentlerinden data display bölümünü bitirmiştik. Bugün ise Feedback dediğimiz kullanıcı bildirim yollama ve yükleme ekranı işlemlerini göreceğiz.

Bu componentleri kullanıcıyı yönlendirme, kullanıcıya geri yanıt verme veya kullanıcıyı bekletme gibi işlemlerde kullanırız. Mesela bir form düşünün kullanıcı form inputlarından birini doldurmadığı zaman feedback yani şu alanı döndürmedin gibisinden uyarı verebiliriz veya formdaki her şeyi doldurduğu senaryoda mesajınız iletilmiştir gibisinden mesajlar için kullanılabilir.
Loading ekranları için ise genelde asenkron işlemlerde kullanırız örneğin api çağrısı gibi. Asenkron işlem bittiği vakit ve sayfa yüklendiği zaman loading ekranı ortadan kaybolur.

Şimdi sırayla Feedback componentlerini görelim.

İyi okumalar

Alert

Alert, kullanıcıya uyarı yollama işlemidir. Javascript ile alert özelliğini kullanabilirsiniz ama çok eski kalır. MUI ile alert kullanırsanız tasarım bakımından sıfırdan uğraşmanıza gerek kalmaz. Success, info, warning ve error alert türleri vardır. Çoğunlukla renkleri değişir. Success (yeşil), info (mavi), warning ( sarı/turuncu), error (kırmızı).

JavaScript:

import "./App.css"
import Alert from '@mui/material/Alert';

function App() {

  return (
    <div>
      <Alert severity="success">This is a success Alert.</Alert>
      <Alert severity="info">This is an info Alert.</Alert>
      <Alert severity="warning">This is a warning Alert.</Alert>
      <Alert severity="error">This is an error Alert.</Alert>
    </div >
  );
}

export default App;

Burada aslında alert etiketi içeresinde severity parametresi ile alarm türünü belirleyebiliyoruz. Çok basit bir kullanımı var.

Backdrop

Backdrop bileşeni, uygulama içindeki bir durum değişikliğini bildirir ve yükleyiciler, iletişim kutuları ve daha fazlasını oluşturmak için kullanılabilir. En basit haliyle Backdrop bileşeni, uygulamanızın üzerine soluk bir katman ekler.

JavaScript:

import "./App.css"
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';
import { useState } from "react";

function App() {
  const [open, setOpen] = useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  const handleOpen = () => {
    setOpen(true);
  };
  return (
    <div className="app">
      <Button onClick={handleOpen}>Show backdrop</Button>
      <Backdrop
        sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
        open={open}
        onClick={handleClose}
      >
        <CircularProgress color="inherit" />
      </Backdrop>
    </div>
  );
}

export default App;

Burada state ile backdrop açılıp açılmadığını kontrol ediyoruz. Bunu fonksiyon ile tuşa basıldıkça tersi olayı olmasını tetikliyoruz. Bir buton ile backdrop açılmasını sağlıyoruz. Backdrop açılıp açılmayacağı durumu tanımladığımız state ile kontrol ediyoruz.

Dialog

Dialog, kritik bilgiler sağlamak veya bir karar istemek için uygulama içeriğinin önünde görünen bir tür modal penceredir. İletişim kutuları, görüntülendiğinde tüm uygulama işlevlerini devre dışı bırakır ve onaylanana, kapatılana veya gerekli bir işlem yapılana kadar ekranda kalır.

JavaScript:

import "./App.css";
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import React from "react"

function App() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div className="app">
      <Button variant="outlined" onClick={handleClickOpen}>
        Open alert dialog
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          {"Use Google's location service?"}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            Let Google help apps determine location. This means sending anonymous
            location data to Google, even when no apps are running.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Disagree</Button>
          <Button onClick={handleClose} autoFocus>
            Agree
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

export default App;

state ile açılıp açılmayacağı değerleri hazırladıktan sonra butona oluşturulan fonksiyonu atıyoruz. Butona basılınca dialog etiketi içindeki değerler gelecektir. İlk önce bir başlık gelecek daha sonra dialog content denilen dialog içeriği gelecektir. Bu içerik içinde bir text mevcuttur. DialogContent ile işimiz bittiği vakit DialogActions kısmında genelde iki adet buton tanımlanır kabul etme - etmeme durumudur. Bu kısımda bu butonlarla yapılacak işlemler yapılır. Mesela form yollarken emin misiniz sorusu gelsin hayır derse bir şey olmaz ama evet ders formu gönderecek fonksiyon çalışır gibi bir örnek aklımıza oturmasına yardımcı olur.

JavaScript:

import * as React from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';

function App() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const formJson = Object.fromEntries(formData.entries());
    const email = formJson.email;
    console.log(email);
    handleClose();
  };

  return (
    <div className="app">
      <Button variant="outlined" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Subscribe</DialogTitle>
        <DialogContent>
          <DialogContentText>
            To subscribe to this website, please enter your email address here. We
            will send updates occasionally.
          </DialogContentText>
          <form onSubmit={handleSubmit} id="subscription-form">
            <TextField
              autoFocus
              required
              margin="dense"
              id="name"
              name="email"
              label="Email Address"
              type="email"
              fullWidth
              variant="standard"
            />
          </form>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button type="submit" form="subscription-form">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

export default App

Burada ise seçenekler değil bir input gelir. İlk örnekten tek farkı dialogcontent sonrası bir form içeriği olmasıdır.

Progress

Progress belirtilmemiş bir bekleme süresini ifade eder veya bir işlemin uzunluğunu görüntüler. Şimdi Backdrop da aynı işlemi görüyor diyebilirsiniz ama farklı var.

Backdrop ile kullanıcı etkileşime girebilir.
Progress ile kullanıcı etkileşime giremez.

Backdrop tüm ekranı kaplar.
Progress belli bir alanı.

Backdrop tek başına yükleme animasyonu göstermez.
Progress tek başına yüklenme animasyonu gösterir.

JavaScript:

import { useState, useEffect } from "react";
import "./App.css";
import CircularProgress from "@mui/material/CircularProgress";

function App() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 5000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="app">
      {loading ? (
        <CircularProgress />
      ) : (
        <div>Veriler yüklendi!</div>
      )}
    </div>
  );
}

export default App;

loading state ilk başta true çünkü bir api istek attığımızı varsayıyoruz. UseEffect içinde aslında 5 saniye boyunca bu state false yapma 5 saniye sonra false yapıyoruz. Sanki istek atılan verilerden bir cevap gelmiş bir örnek diye düşünebilirsiniz. Return içinde loading durumunu kontrol ediyoruz eğer true ise yükleme ikonu çalışacak false ise veriler yüklendi yazısı gelecek.

Skeleton

Skeleton, Material UI’da (ve genel olarak UI tasarımında) bir içerik yüklenmeden önceki yer tutucu (placeholder) bileşendir. Yani sayfadaki veriler (örneğin metinler, resimler, kartlar) henüz API’den gelmeden önce, kullanıcıya boş bir alan yerine o içeriğin gri iskelet şeklinde önizlemesini gösterir.

JavaScript:

import "./App.css";
import Skeleton from '@mui/material/Skeleton';

function App() {
  return (
    <div className="app">
      <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
      <Skeleton variant="circular" width={40} height={40} />
      <Skeleton variant="rectangular" width={210} height={60} />
      <Skeleton variant="rounded" width={210} height={60} />
    </div>
  );
}

export default App;

Burada ise skeleton farklı variantlarını gösterdim. Daha hoş tasarımlar çıkarabilirsiniz. Özellikle dokümantasyona bakarsanız göreceksiniz.

Snackbar

Snackbar, Material UI’da kısa süreli bildirim mesajları göstermek için kullanılır.
Yani ekranda alt tarafta (genelde sol veya ortada) küçük bir kutucuk açılır ve birkaç saniye sonra otomatik kapanır.

JavaScript:

import "./App.css";
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import React from "react";
import { useState } from "react";

function App() {
  const [open, setOpen] = useState(false);
  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }

    setOpen(false);
  };

  const action = (
    <React.Fragment>
      <Button color="secondary" size="small" onClick={handleClose}>
        UNDO
      </Button>
      <IconButton
        size="small"
        aria-label="close"
        color="inherit"
        onClick={handleClose}
      >
        <CloseIcon fontSize="small" />
      </IconButton>
    </React.Fragment>
  );
  return (
    <div className="app">
      <Button onClick={handleClick}>Open Snackbar</Button>
      <Snackbar
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
        message="Note archived"
        action={action}
      />
    </div>
  );
}

export default App;

İlk olarak open adında bir state tanımlanıyor. Bu state Snackbar’ın açık mı, kapalı mı olduğunu tutuyor.
Başlangıçta false olduğu için Snackbar görünmüyor. handleClick fonksiyonu, butona tıkladığımızda çalışıyor ve open değerini true yapıyor.
Yani butona bastığımız anda Snackbar ekranda beliriyor. Eğer kullanıcı sadece sayfanın başka bir yerine tıklamışsa (clickaway), Snackbar hemen kapanmıyor.
Ama diğer durumlarda (örneğin “Close” ikonuna basıldığında veya süresi dolduğunda) Snackbar kapanıyor. Action değişkeni, Snackbar’ın içinde görünen küçük buton ve kapatma ikonunu tanımlıyor.

Yani kullanıcı isterse “UNDO” butonuna basabiliyor veya “X” ikonuna tıklayarak Snackbar’ı kapatabiliyor.

Son olarak return kısmında bir buton ve Snackbar bileşeni render ediliyor.
Butona bastığımızda Snackbar açılıyor, bir süre sonra veya kullanıcı kapattığında kayboluyor.

Temel olarak Feedback bölümünü bitirdik. Componentlerden bunlardan ibaret ama daha fazla tasarım vs bakmak isterseniz resmi dokümantasyona bakmanızı öneririm. Okuduğunuz için teşekkürler bir başka konuda görüşürüz.

sametghack · 11 Eki 2025

Eline saglik

Watnea · 11 Eki 2025

Seriyi takipteyiz. Eline sağlık.

Baybars0720 · 11 Eki 2025

Takipteyiz bro, emeğine sağlık

ATK · 12 Eki 2025

Ellerinize Emeklerinize Sağlık

ARWENDA · 13 Eki 2025

Ellerine emeklerine sağlık.

Sıfırdan İleriye ReactJs #15 Material UI Feedback Elemanları

'Masséna

Global Moderatör

Alert

Backdrop

Dialog

Progress

Skeleton

Snackbar

sametghack

Moderatör

Watnea

Uzman üye

Baybars0720

Katılımcı Üye

ATK

Moderasyon Ekibi Stajyer Asistan

ARWENDA

Katılımcı Üye

Sosyal medya sayfalarımız

Sıfırdan İleriye ReactJs #15 Material UI Feedback Elemanları

'Masséna

Global Moderatör

Alert ​

Backdrop​

Dialog​

Progress​

Skeleton​

Snackbar​

sametghack

Moderatör

Watnea

Uzman üye

Baybars0720

Katılımcı Üye

ATK

Moderasyon Ekibi Stajyer Asistan

ARWENDA

Katılımcı Üye

Alert

Backdrop

Dialog

Progress

Skeleton

Snackbar