Sıfırdan İleriye ReactJs #14 Material UI Data Display Elemanları

'Masséna · 8 Eki 2025

Sıfırdan ileriye ReactJs serisinin yeni bölümüne hoş geldiniz. En son artık ReactJs arayüz kütüphanesi olan Material UI geçmiştik. Bu kütüphane sayesinde tek tek Css yazmaktan kurtarıyordu. Geçen hafta input componentlerini görmüştük. Bugün is Data Display göreceğiz. Data Display biraz daha görsel ağırlıklıdır. (avatar, tablolar iconlar, listler vs)

Kısa bir tanışmadan sonra şimdi componentlerimize geçelim.

Avatar

Avatar, herkesin bildiği klasik avatardır. Dilerseniz bu avatar içine fotoğraf koyabilir, dilerseniz harfler, ikonlar kullanabilirsiniz. Tamamen sizin neye ihtiyacınız olduğuna göre değişir. Biz bugün basit versiyonlarını göreceğiz.

JavaScript:

import "./App.css"
import foto from "../src/assets/thtlogo.png"
import Avatar from '@mui/material/Avatar';
import FolderIcon from '@mui/icons-material/Folder';
import PageviewIcon from '@mui/icons-material/Pageview';
import AssignmentIcon from '@mui/icons-material/Assignment';

function App() {
  const uyeler = [
    { nick: "DarkS0LDIER" },
    { nick: "'drose" },
    { nick: "sametghack" }
  ];

  let ilkHarfAl = uyeler.map((uye) => uye.nick.slice(0, 1));

  const rastgeleRenk = () => {
    const renk = Math.floor(Math.random() * 16777215).toString(16);
    return `#${renk.padStart(6, "0")}`;
  };

  return (
    <div className="app">
      {/* //fotolu avatar */}
      <Avatar
        alt="Tht Logo"
        src={foto}
        sx={{ height: "30vh", width: "auto", border: "10px solid" }}
      />

      {/* //harfli avatar */}
      <div style={{ display: "flex", gap: "10px", marginTop: "20px" }}>
        {ilkHarfAl.map((veri, index) => (
          <Avatar
            key={index}
            sx={{
              bgcolor: rastgeleRenk(),
              width: 56,
              height: 56,
              fontWeight: "bold"
            }}
          >
            {veri.toUpperCase()}
          </Avatar>
        ))}
      </div>

      <div style={{ display: "flex" }}>
        <Avatar sx={{ bgcolor: "blue" }}>
          <FolderIcon />
        </Avatar>
        <Avatar sx={{ bgcolor: "pink" }}>
          <PageviewIcon />
        </Avatar>
        <Avatar sx={{ bgcolor: "green" }}>
          <AssignmentIcon />
        </Avatar>
      </div>

    </div>
  );
}

export default App;

İlk başta kendi dosyama indirdiğim bir fotoğraf, avatar componenti ve iconlar import ediyorum. Daha sonra bir obje oluşturup bunun içini dolduruyoruz (ileride lazım olacak). Oluşturduğumuz objenin ilk harfini almak için map ile dizi içindeki her objeye ulaşıp obje içinde bulunan nicklere erişip slice ile ilk harfleri dilimliyoruz.

Buradan sonra rastgele renk fonksiyonu yazıyoruz.

İlk avatarımız logolu. Import ettiğimiz logoyu direkt src içine koyuyoruz ve avatarımız resimli oluyor. Sx kısmı css düzenlemeleri için gerekli.

İkinci avatarımızda ise oluşturduğumuz objeden ilerleyeceğiz. Hatırlarsanız ilk harflerini almıştık bu yüzden direkt map ile her değere ulaşıp avatar kullanıyoruz. İndex kısmı objedeki her değişkenin sayısal değeridir. Key olarak bu indexi veriyoruz ki değerler karışmasın. Sx ile css düzenlemeleri yapıyoruz bgColor yani arka plan rengini rastgele renk oluşturan fonksiyonuna veriyoruz. Son olarak değerlerimizi büyük harfle yazdırıyoruz. Böylece avatarlarımız içinde harfler olmuş oldu.

Son avatar türü ise içine ikon eklemeli olan. Import ettiğimiz ikonları direkt avatar içinde bir etiket açarak kullanıyoruz.

Daha fazla özellik için resmi dokümantasyonu inceleyin.

Badge

Badge genelde bildirim tarzı yerlerde kullanılır. Bunları küçük içinde sayı bulunan componentler diyebiliriz. Genelde bu badgeleri bir icon ile kullanırız.

JavaScript:

import "./App.css"
import Button from '@mui/material/Button';
import Badge from '@mui/material/Badge';
import MailIcon from '@mui/icons-material/Mail';
import { useState } from "react";

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

  return (
    <div className="app" style={{ textAlign: "center", marginTop: "40px" }}>
      <Badge
        badgeContent={sayac}
        color="error"
        sx={{
          "& .MuiBadge-badge": { fontSize: "0.8rem", fontWeight: "bold" }
        }}
      >
        <MailIcon sx={{ fontSize: 40 }} />
      </Badge>

      <Button
        onClick={() => setSayac(sayac + 1)}
        variant="contained"
        sx={{ mt: 3, fontWeight: "bold" }}
      >
        Bana Tıkla
      </Button>
    </div>
  );
}

export default App;

Burada useState ile bildirim sayısını tutacak bir state tanımlıyoruz. Badge etiketi içerisinde badgeContent yani içeriğine statemizi yazıyoruz. Badge etiketi içerisinde ise import ettiğimiz ikonu yerleştiriyoruz. Son olarak butona tıkladığımız her zaman state değeri +1 artıyor böylece badge daha net görebiliyoruz.

Daha fazla özellik için resmi dokümantasyonu inceleyin.

Icons

İkonları buraya kadar gördük ama yine açıklayalım. Daha çok web siteyi kullanıcı dostu yapmak için kullanılan küçük görsellerdir. Material UI indirirken eğer ikonları da indirmek istiyorsanız aşağıdaki npm kodunu yazmanız yeterli olacaktır.

Kod:

npm install @mui/icons-material

Kullanım ise basittir beğendiğiniz ikonu seçip karşınıza çıkan kodu kopyalayıp projenize yapıştırın böylece import etmiş olacaksınız. Daha sonra dilediğiniz yerde kullanın.

Lists

Listeler aslında html'den bildiğimiz ul-li etiketlerinin daha gelişmiş halidir. Birden fazla sıralı veya sırasız eleman yazdıracaksak bu list componentini kullanabiliriz. Özellike navbar ve footer gibi alanlarda kullanabilirsiniz.

JavaScript:

import "./App.css"

import List from "@mui/material/List";

import ListItem from "@mui/material/ListItem";

import ListItemButton from "@mui/material/ListItemButton";

import ListItemIcon from "@mui/material/ListItemIcon";

import ListItemText from "@mui/material/ListItemText";

import Checkbox from "@mui/material/Checkbox";

import Typography from "@mui/material/Typography";

import Divider from "@mui/material/Divider";

import TaskAltIcon from "@mui/icons-material/TaskAlt";

import { useState } from "react";



function App() {

  const [tasks, setTasks] = useState([

    { id: 1, text: "Makale taslağını tamamla", done: false },

    { id: 2, text: "React projesinde bug kontrolü yap", done: true },

    { id: 3, text: "Yeni yazı başlığı fikirleri düşün", done: false },

  ]);

 
  return (

    <div className="app">

      <List

        sx={{

          width: "100%",

          maxWidth: 360,

          bgcolor: "background.paper",

          borderRadius: 2,

          boxShadow: 3,

        }}

      >

        {tasks.map((task) => (

          <ListItem key={task.id} disablePadding>

            <ListItemButton onClick={() => toggleTask(task.id)}>

              <ListItemIcon>

                {task.done ? (

                  <TaskAltIcon color="success" />

                ) : (

                  <Checkbox checked={false} />

                )}

              </ListItemIcon>

              <ListItemText

                primary={task.text}

                sx={{

                  textDecoration: task.done ? "line-through" : "none",

                  opacity: task.done ? 0.6 : 1,

                }}

              />

            </ListItemButton>

          </ListItem>

        ))}

      </List>

    </div>

  );

}
export default App;

Burada sanki todo-list uygulaması yapıyormuşuz gibi bir tasarım yaptık. Şimdi bu kodları açıklayalım.

task adlı usestate tanımlayıp içlerini dolduruyoruz. Objeyi daha sonra list componenti için kullanacağız. Import ettiğimiz birçok şey var bunlar List componentin yardımcıları diyebiliriz aslında bunlar hakkında detaylı bilgi için resmi sayfaya bakmanız lazım keza biz burada sadece baş componentleri anlatıyoruz.

Objeyi oluşturduktan sonr List componenti içinde map ile bu obje değerlerini dönüyoruz ve obje içindeki id değeri ListItem componentinin key'i oluyor. Böylece obje içinde bulunan eleman kadar list itemi oluşturacak. Daha sonra kısa yoldan if-else ile bu to-do listesinin bitip bitmediğini kontrol ediyoruz keza bunu da obje içinde done değeri ile belirtmiştik. Eğer done true ise success ikonu, false ise boş bir checkbox oluşturuyoruz. ListItemIcon sonrası ListItemText ile yapılacak işin ne olduğunu yazdırıyoruz ve uygulamayı çalıştırıyoruz.

Table

Tablo componenti de bazı zamanlar kullanılabilir. Hatta basit bir uygulamayla gösterelim bunu.

JavaScript:

import "./App.css"

import Table from '@mui/material/Table';

import TableBody from '@mui/material/TableBody';

import TableCell from '@mui/material/TableCell';

import TableContainer from '@mui/material/TableContainer';

import TableHead from '@mui/material/TableHead';

import TableRow from '@mui/material/TableRow';



function App() {

  const rows = [

    { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 },

    { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3 },

    { name: 'Eclair', calories: 262, fat: 16.0, carbs: 24, protein: 6.0 },

    { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3 },

    { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9 },

  ];

  return (

    <div className="app">

      <TableContainer>

        <Table sx={{ minWidth: 650 }} aria-label="simple table">

          <TableHead>

            <TableRow>

              <TableCell>Dessert (100g serving)</TableCell>

              <TableCell align="right">Calories</TableCell>

              <TableCell align="right">Fat&nbsp;(g)</TableCell>

              <TableCell align="right">Carbs&nbsp;(g)</TableCell>

              <TableCell align="right">Protein&nbsp;(g)</TableCell>

            </TableRow>

          </TableHead>

          <TableBody>

            {rows.map((row) => (

              <TableRow

                key={row.name}

                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}

              >

                <TableCell component="th" scope="row">

                  {row.name}

                </TableCell>

                <TableCell align="right">{row.calories}</TableCell>

                <TableCell align="right">{row.fat}</TableCell>

                <TableCell align="right">{row.carbs}</TableCell>

                <TableCell align="right">{row.protein}</TableCell>

              </TableRow>

            ))}

          </TableBody>

        </Table>

      </TableContainer>
    </div >

  );

}

export default App;

Burada basit bir table yaptık. Bir objeyle değerlerimizi yazdırdık bu daha çok diyet listeleri ile alakalı bir obje gibi görünüyor.

TableContainer aslında normal container işlevi görüyor ama bu container işlevini sadece table için yapıyor. Daha sonra Table etiketini yazıyoruz ve içine TableHead ile table elemanlarının başlığını yazacağız. TableRow ile bu header içine yazacağımız değerlerin yanyana olacağını belirtiyoruz ve TableCell ile de aslında hücreleri oluşturuyoruz. TableHead ile işimiz bittiğinde TableBody ile bu sefer tablonun değerlerini yazdıracağımız asıl kısıma geçiyoruz. Oluşturduğumuz çoklu objeyi map ile dönüyoruz ve her değer için bir TableRow oluşturmasını istiyoruz. Daha sonra TableCell ile hücreleri oluşturuyoruz.

TableCell içinde align gibi css özelliklerini görebilirsiniz. Material UI Css ile birlikte kullanabilirsiniz dilerseniz TableCell align değerini left yapın solda olacaktır. Bunları deneyerek görebilirsiniz.

Tooltip

Tooltip, bir öğenin üzerine gelindiğinde veya tıkanıldığında bilgilendirici bir yazı gösterir. Örneğin Forumun footer alanındaki sosyal medya ikonları örnek olabilir.

Burada Facebook ikonun üstüne gelince tam adını gösteriyor.

JavaScript:

import "./App.css"

import DeleteIcon from '@mui/icons-material/Delete';

import IconButton from '@mui/material/IconButton';

import Tooltip from '@mui/material/Tooltip';

function App() {

  return (

    <div className="app">

      <Tooltip title="Delete">

        <IconButton>

          <DeleteIcon />

        </IconButton>

      </Tooltip>

    </div >

  );

}
export default App;

IconButton, bir ikonun buton özelliği taşıması gerektiği zamanlar kullanırız. Tooltip içinde title kısmıyla istediğiniz değeri girebilirsiniz.

Typography

Typography, kendim projelerimde olukça bol kullanıyorum. Aslında kendisi normal paragrafları yazmak için kullanılıyor. Bir nevi paragraf ve başlık etiketleri diyebiliriz ama tasarımını yapmanız daha kısa sürüyor.

JavaScript:

import "./App.css"

import Typography from "@mui/material/Typography";



function App() {



  return (

    <div>

      <Typography variant="h3" gutterBottom>

        Material UI Typography Örneği

      </Typography>



      <Typography variant="h5" color="primary" gutterBottom>

        Farklı Başlık Düzeyleri

      </Typography>



      <Typography variant="body1" paragraph>

        Typography bileşeni, Material UI’da metinleri stilize etmek için kullanılır.

        Farklı “variant” değerleriyle başlıklar, gövde metinleri veya küçük notlar oluşturabilirsiniz.

      </Typography>



      <Typography variant="subtitle1" color="text.secondary">

        Bu bir alt başlık metnidir (subtitle1).

      </Typography>



      <Typography variant="caption" display="block" sx={{ mt: 2 }}>

        Küçük açıklama veya not (caption)

      </Typography>

    </div >

  );

}



export default App;

Burada variant özelliği ile aslında türünü belirleyebiliyoruz. H3 başlık, p paragraf gibi özellikler mevcuttur.

Daha fazlası için resmi dokümantasyona bakmayı unutmayın. Bir sonraki konuda görüşmek üzere okuduğunuz için teşekkür ederim.

Kryzlo · 8 Eki 2025

Ellerinize sağlık hocam

ATK · 8 Eki 2025

Elinize Sağlık

sametghack · 8 Eki 2025

Eline sağlık

Baybars0720 · 8 Eki 2025

Emeğine sağlık sayın Moderatörünüz

sessizejder · 9 Eki 2025

Çok güzelmiş

'Masséna · 11 Eki 2025

Kryzlo' Alıntı:
Ellerinize sağlık hocam

ATK' Alıntı:
Elinize Sağlık

sametghack' Alıntı:
Eline sağlık

Baybars0720' Alıntı:
Emeğine sağlık sayın Moderatörünüz

sessizejder' Alıntı:
Çok güzelmiş

Yorumlarınız için teşekkür ederim

BlackPion · 11 Eki 2025

Eline sağlık, forumun FE tarafları ile ilgileniyorsun gibime geliyor, en azından ben öyle hissediyorum doğru mu?

Sıfırdan İleriye ReactJs #14 Material UI Data Display Elemanları

'Masséna

Global Moderatör

Avatar

Badge

Icons

Lists

Table

Tooltip

Typography

Kryzlo

Anka Team

ATK

Moderasyon Ekibi Stajyer Asistan

sametghack

Moderatör

Baybars0720

Katılımcı Üye

sessizejder

Uzman üye

'Masséna

Global Moderatör

BlackPion

Kıdemli Üye

Sosyal medya sayfalarımız

Sıfırdan İleriye ReactJs #14 Material UI Data Display Elemanları

Global Moderatör

Avatar​

Badge​

Icons​

Lists​

Table​

Tooltip​

Typography​

Anka Team

Moderasyon Ekibi Stajyer Asistan

Moderatör

Katılımcı Üye

Uzman üye

Global Moderatör

Kıdemli Üye

Avatar

Badge

Icons

Lists

Table

Tooltip

Typography