{"id":533,"date":"2024-03-10T13:17:43","date_gmt":"2024-03-10T10:17:43","guid":{"rendered":"https:\/\/mudosdigital.com\/tr\/?p=533"},"modified":"2024-03-10T13:18:16","modified_gmt":"2024-03-10T10:18:16","slug":"material-ui-nedir","status":"publish","type":"post","link":"https:\/\/mudosdigital.com\/tr\/material-ui-nedir\/","title":{"rendered":"Material UI nedir ve nas\u0131l kullan\u0131l\u0131r?"},"content":{"rendered":"\n<p>React, modern web geli\u015ftiricileri i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline geldi. Bu g\u00fc\u00e7l\u00fc JavaScript k\u00fct\u00fcphanesi, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturman\u0131n ve y\u00f6netmenin en etkili yolunu sunar. Ayr\u0131ca React i\u00e7in geli\u015ftirilen \u00e7e\u015fitli kullan\u0131c\u0131 aray\u00fcz\u00fc kitapl\u0131klar\u0131 vard\u0131r. Peki bu kitapl\u0131klardan biri olan Material UI nedir ve nas\u0131l kullan\u0131l\u0131r?<\/p>\n\n\n\n<p><strong>Temel gereksinimler<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Temel JavaScript Bilgisi<\/strong>: React, JavaScript tabanl\u0131 bir k\u00fct\u00fcphanedir, bu nedenle temel JavaScript bilgisine sahip olman\u0131z \u00f6nemlidir. De\u011fi\u015fkenler, fonksiyonlar, ko\u015fullu ifadeler ve d\u00f6ng\u00fcler gibi temel JavaScript kavramlar\u0131n\u0131 anlaman\u0131z gerekir.<\/li>\n\n\n\n<li><strong>DOM ve HTML\/CSS Bilgisi<\/strong>: React, kullan\u0131c\u0131 aray\u00fczlerini olu\u015fturmak i\u00e7in DOM (Document Object Model) \u00fczerinde \u00e7al\u0131\u015f\u0131r. Bu nedenle, HTML ve CSS hakk\u0131nda temel bilgilere sahip olman\u0131z \u00f6nemlidir. Web sayfalar\u0131n\u0131 olu\u015fturmak ve stil vermek i\u00e7in HTML ve CSS&#8217;i nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 bilmek React projelerinizde \u00e7ok \u00f6nemli olacakt\u0131r.<\/li>\n\n\n\n<li><strong>ES6+ (ECMAScript 2015 ve sonras\u0131) Bilgisi<\/strong>: React, ECMAScript 2015 (ES6) ve sonras\u0131ndaki JavaScript \u00f6zelliklerini kullan\u0131r. Bu nedenle, temel ES6+ kavramlar\u0131n\u0131 (okunur-ayn\u0131 zamanda, arrow functions, destructuring, spread operat\u00f6r\u00fc gibi) bilmek \u00f6nemlidir.<\/li>\n\n\n\n<li><strong>Node.js ve npm (veya Yarn) Bilgisi<\/strong>: React projelerini olu\u015fturmak ve y\u00f6netmek i\u00e7in Node.js ve npm veya Yarn gibi paket y\u00f6neticilerini kullanman\u0131z gerekecektir. Node.js ve paket y\u00f6neticileri hakk\u0131nda temel bilgilere sahip olman\u0131z \u00f6nemlidir.<\/li>\n\n\n\n<li><strong>Component-Based Development (Bile\u015fen Tabanl\u0131 Geli\u015ftirme) Kavram\u0131<\/strong>: React, bile\u015fen tabanl\u0131 bir yap\u0131ya dayan\u0131r. Bu nedenle, uygulaman\u0131z\u0131 k\u00fc\u00e7\u00fck ve yeniden kullan\u0131labilir bile\u015fenlere b\u00f6lmeyi ve bu bile\u015fenleri bir araya getirerek daha b\u00fcy\u00fck uygulamalar olu\u015fturmay\u0131 \u00f6\u011frenmelisiniz.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Giri\u015f: React &amp; Kullan\u0131c\u0131 aray\u00fcz\u00fc kitapl\u0131klar\u0131<\/h2>\n\n\n\n<p>React, Facebook taraf\u0131ndan geli\u015ftirilen ve a\u00e7\u0131k kaynakl\u0131 bir JavaScript k\u00fct\u00fcphanesidir. Temel olarak, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) geli\u015ftirmek i\u00e7in kullan\u0131l\u0131r ve genellikle tek sayfa uygulamalar\u0131 olu\u015fturmak i\u00e7in tercih edilir. React, bile\u015fen tabanl\u0131 bir yap\u0131ya sahiptir, yani uygulaman\u0131z\u0131 k\u00fc\u00e7\u00fck par\u00e7alara b\u00f6ler ve her bir par\u00e7ay\u0131 ba\u011f\u0131ms\u0131z bir \u015fekilde y\u00f6netmenizi sa\u011flar. Bu, kodun yeniden kullan\u0131labilirli\u011fini art\u0131r\u0131r ve geli\u015ftirme s\u00fcrecini daha mod\u00fcler hale getirir.<\/p>\n\n\n\n<p>React, sanal DOM (Document Object Model) kullanarak performans\u0131 art\u0131r\u0131r. De\u011fi\u015fikliklerin ger\u00e7ek DOM&#8217;a uygulanmadan \u00f6nce sanal DOM&#8217;da yap\u0131lmas\u0131, taray\u0131c\u0131 performans\u0131n\u0131 art\u0131r\u0131r ve uygulaman\u0131n daha h\u0131zl\u0131 tepki vermesini sa\u011flar.<\/p>\n\n\n\n<p>Kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) geli\u015ftirmek i\u00e7in React kullan\u0131rken, \u00e7o\u011fu geli\u015ftirici bir UI kitapl\u0131\u011f\u0131na ihtiya\u00e7 duyar. Bu kitapl\u0131klar, haz\u0131r bile\u015fenler, stiller ve yard\u0131mc\u0131 programlar sunar ve geli\u015ftiricilere kullan\u0131c\u0131 aray\u00fczlerini h\u0131zl\u0131 bir \u015fekilde olu\u015fturma ve \u00f6zelle\u015ftirme imkan\u0131 sa\u011flar. Baz\u0131 pop\u00fcler React UI kitapl\u0131klar\u0131 \u015funlard\u0131r:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Material UI<\/strong>: Google&#8217;\u0131n Material Design y\u00f6nergelerine dayal\u0131 olarak tasarlanm\u0131\u015ft\u0131r. Haz\u0131r bile\u015fenler, stiller ve reaktif \u00f6zellikler sunar.<\/li>\n\n\n\n<li><strong>Ant Design<\/strong>: Ant Design, \u00c7inli teknoloji \u015firketi Alibaba taraf\u0131ndan geli\u015ftirilmi\u015ftir. Geni\u015f bir bile\u015fen k\u00fct\u00fcphanesi ve kolay \u00f6zelle\u015ftirme imkan\u0131 sunar.<\/li>\n\n\n\n<li><strong>Semantic UI React<\/strong>: Semantic UI, sezgisel ve do\u011fal dil kullan\u0131m\u0131n\u0131 te\u015fvik eden bir tasar\u0131m diline sahiptir. React i\u00e7in uyarlanm\u0131\u015f versiyonu, kullan\u0131m\u0131 kolay bile\u015fenler sunar.<\/li>\n\n\n\n<li><strong>Bootstrap React<\/strong>: Bootstrap, web uygulamalar\u0131 i\u00e7in pop\u00fcler bir CSS \u00e7er\u00e7evesidir. React i\u00e7in uyarlanm\u0131\u015f versiyonu, Bootstrap&#8217;un bile\u015fenlerini React bile\u015fenleri olarak kullanman\u0131za olanak tan\u0131r.<\/li>\n<\/ol>\n\n\n\n<p>Bu kitapl\u0131klar, geli\u015ftiricilere kullan\u0131c\u0131 aray\u00fcz\u00fc geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131rken, ayn\u0131 zamanda kapsaml\u0131 belgelendirme ve topluluk deste\u011fi sunar. Peki bu pop\u00fcler kitapl\u0131klardan biri olan Material UI nedir?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Material UI nedir?<\/h2>\n\n\n\n<p>Material UI, <a href=\"https:\/\/mudosdigital.com\/tr\/?s=React\">React<\/a> i\u00e7in bir kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) kitapl\u0131\u011f\u0131d\u0131r. Google&#8217;\u0131n Material Design y\u00f6nergelerine dayanarak tasarlanm\u0131\u015ft\u0131r. React uygulamalar\u0131nda kullan\u0131c\u0131 aray\u00fczlerini olu\u015fturmak i\u00e7in haz\u0131r bile\u015fenler, stiller ve reaktif \u00f6zellikler sa\u011flar. Bu, geli\u015ftiricilere kullan\u0131c\u0131 aray\u00fczlerini h\u0131zl\u0131 bir \u015fekilde olu\u015fturup \u00f6zelle\u015ftirmelerine olanak tan\u0131r ve ayn\u0131 zamanda birbirleriyle uyumlu ve konsolide bir g\u00f6r\u00fcn\u00fcm sa\u011flar. Material UI, \u00f6zelle\u015ftirilebilir ve kullan\u0131m\u0131 kolayd\u0131r, bu nedenle React tabanl\u0131 projelerde pop\u00fcler bir se\u00e7enektir.<\/p>\n\n\n<ul class=\"wp-block-latest-posts__list wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/wordpress-yerel-gelistirme-ortami-docker-ile-adim-adim-rehber\/\">WordPress Yerel Geli\u015ftirme Ortam\u0131 \u2013 Docker ile Ad\u0131m Ad\u0131m Rehber<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/looker-studio-ile-tekil-sayfa-performans-grafigi-olusturma\/\">Looker Studio ile Tekil Sayfa Performans Grafi\u011fi Olu\u015fturma<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/seoda-vektor-nedir-semantik-arama-ve-siralamadaki-rolu\/\">SEO\u2019da Anahtar Kelime Vekt\u00f6rleri ve Semantik Aramadaki Rol\u00fc<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/tiklama-orani-to-nedir-anahtar-kelime-to-artirma-yollari\/\">T\u0131klama Oran\u0131 (TO) Nedir? Anahtar Kelime TO Art\u0131rma Yollar\u0131<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/googlebot-rehberi-nedir-nasil-calisir-ve-sitenizi-nasil-etkiler\/\">Googlebot Rehberi: Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r ve Sitenizi Nas\u0131l Etkiler?<\/a><\/li>\n<\/ul>\n\n\n<p>Material UI ile birlikte ba\u015fka k\u00fct\u00fcphaneler i\u00e7in de y\u00f6nergeler sunuluyor. Her bir k\u00fct\u00fcphane, kullan\u0131c\u0131 aray\u00fcz\u00fc geli\u015ftirme s\u00fcrecini h\u0131zland\u0131rmak ve standartlar\u0131na uygun, eri\u015filebilir ve kullan\u0131c\u0131 dostu UI&#8217;lar olu\u015fturmak i\u00e7in kullan\u0131labilir. Bu \u00f6\u011feler, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) geli\u015ftirme i\u00e7in React bile\u015fenlerini ve yard\u0131mc\u0131 programlar\u0131 sunan k\u00fct\u00fcphaneleri temsil ediyor.<\/p>\n\n\n\n<p><strong>\u0130lgili<\/strong>: <a href=\"https:\/\/mui.com\/store\/?utm_source=marketing&amp;utm_medium=referral&amp;utm_campaign=templates-cta#populars\">\u00dccretli React \u015fablonlar\u0131 ke\u015ffedin.<\/a><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Material UI<\/strong>: Material UI, Google&#8217;\u0131n Material Design y\u00f6nergelerine dayal\u0131 olarak geli\u015ftirilmi\u015f, React tabanl\u0131 bir UI k\u00fct\u00fcphanesidir. Bu k\u00fct\u00fcphane, haz\u0131r bile\u015fenler, stiller ve reaktif \u00f6zellikler sa\u011flayarak geli\u015ftiricilere kullan\u0131c\u0131 aray\u00fczlerini olu\u015fturma ve \u00f6zelle\u015ftirme imkan\u0131 sunar.<\/li>\n\n\n\n<li><strong>Joy UI<\/strong>: Joy UI, React i\u00e7in haz\u0131rlanm\u0131\u015f, kullan\u0131ma haz\u0131r bile\u015fenler ve yard\u0131mc\u0131 programlar sunan bir k\u00fct\u00fcphanedir. Joy UI&#8217;nin \u00f6nceliklerinden biri, kullan\u0131c\u0131 eri\u015filebilirli\u011fini her zaman g\u00f6z \u00f6n\u00fcnde bulundurarak tasar\u0131m sistemleri i\u00e7in temel UI bloklar\u0131n\u0131 sunmakt\u0131r.<\/li>\n\n\n\n<li><strong>Base UI<\/strong>: Base UI, kullan\u0131c\u0131 aray\u00fcz\u00fc geli\u015ftirmek i\u00e7in temel bile\u015fenleri ve yard\u0131mc\u0131 programlar\u0131 i\u00e7eren bir React k\u00fct\u00fcphanesidir. Bu k\u00fct\u00fcphane, kullan\u0131c\u0131 dostu ve eri\u015filebilir bir deneyim sa\u011flamak amac\u0131yla tasarlanm\u0131\u015ft\u0131r.<\/li>\n\n\n\n<li><strong>MUI System<\/strong>: MUI System, React tabanl\u0131 bir kullan\u0131c\u0131 aray\u00fcz\u00fc geli\u015ftirme k\u00fct\u00fcphanesidir. Bu k\u00fct\u00fcphane, tasar\u0131m sistemleri i\u00e7in gerekli olan bile\u015fenleri ve yard\u0131mc\u0131 programlar\u0131 sa\u011flar ve kullan\u0131c\u0131lar\u0131n kolayca \u00f6zelle\u015ftirebilece\u011fi esnek bir yap\u0131 sunar.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Nas\u0131l kullan\u0131l\u0131r?<\/h2>\n\n\n\n<p>\u00d6ncelikle, bir React projesi olu\u015fturman\u0131z gerekir. Yeni bir proje olu\u015fturmak i\u00e7in Node.js ve npm (veya Yarn) kurulu olmal\u0131d\u0131r. Bir terminal veya komut istemcisinde a\u015fa\u011f\u0131daki komutu kullanarak yeni bir React projesi olu\u015fturabilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app my-material-ui-app<\/code><\/pre>\n\n\n\n<p>Bu komut, &#8220;my-material-ui-app&#8221; ad\u0131nda yeni bir React projesi olu\u015fturacakt\u0131r.<\/p>\n\n\n\n<p>Olu\u015fturdu\u011funuz projeye Material UI&#8217;y\u0131 eklemek i\u00e7in terminalde veya komut istemcisinde a\u015fa\u011f\u0131daki komutlar\u0131 kullanabilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd my-material-ui-app\nnpm install @mui\/material @emotion\/react @emotion\/styled<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki komutlar, Material UI&#8217;n\u0131n gerekli paketlerini projenize ekleyecektir.<\/p>\n\n\n\n<p>Material UI&#8217;n\u0131n sundu\u011fu bile\u015fenleri kullanmak i\u00e7in, bile\u015fenleri projenizin ilgili dosyalar\u0131nda i\u00e7e aktarman\u0131z gerekir. \u00d6rne\u011fin, bir d\u00fc\u011fme bile\u015fenini kullanmak i\u00e7in, bile\u015feni \u015fu \u015fekilde i\u00e7e aktarabilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Button } from '@mui\/material';\n\nfunction App() {\n  return (\n    &lt;div&gt;\n      &lt;Button variant=\"contained\"&gt;Click Me&lt;\/Button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki \u00f6rnekte, <code>Button<\/code> bile\u015feni Material UI taraf\u0131ndan sa\u011flanmaktad\u0131r ve bir d\u00fc\u011fme olu\u015fturur.<\/p>\n\n\n\n<p>Material UI bile\u015fenleri genellikle \u00e7e\u015fitli \u00f6zellikler ve stillerle \u00f6zelle\u015ftirilebilir. \u00d6rne\u011fin, bir d\u00fc\u011fmenin rengini veya boyutunu de\u011fi\u015ftirebilirsiniz. \u00d6zelle\u015ftirme hakk\u0131nda daha fazla bilgi i\u00e7in Material UI belgelerine ba\u015fvurabilirsiniz.<\/p>\n\n\n\n<p>Bu ad\u0131mlar\u0131 takip ederek, Material UI bile\u015fenlerini React projesinde kullanabilir ve kullan\u0131c\u0131 aray\u00fcz\u00fc geli\u015ftirmeye ba\u015flayabilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React, modern web geli\u015ftiricileri i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline geldi. Bu g\u00fc\u00e7l\u00fc JavaScript k\u00fct\u00fcphanesi, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturman\u0131n ve y\u00f6netmenin en etkili yolunu sunar. Ayr\u0131ca React i\u00e7in geli\u015ftirilen \u00e7e\u015fitli kullan\u0131c\u0131 aray\u00fcz\u00fc kitapl\u0131klar\u0131 vard\u0131r. Peki bu kitapl\u0131klardan biri olan Material UI nedir ve nas\u0131l kullan\u0131l\u0131r? Temel gereksinimler Giri\u015f: React &amp; Kullan\u0131c\u0131 aray\u00fcz\u00fc kitapl\u0131klar\u0131 React, Facebook taraf\u0131ndan geli\u015ftirilen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[62,60,61],"class_list":["post-533","post","type-post","status-publish","format-standard","hentry","category-blog","tag-kullanici-arayuzu-kitapligi","tag-material-ui","tag-react"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/comments?post=533"}],"version-history":[{"count":3,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/533\/revisions"}],"predecessor-version":[{"id":536,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/533\/revisions\/536"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/categories?post=533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/tags?post=533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}