{"id":1205,"date":"2022-07-02T18:41:53","date_gmt":"2022-07-02T18:41:53","guid":{"rendered":"https:\/\/611digital.com\/?p=1205"},"modified":"2023-01-27T23:45:06","modified_gmt":"2023-01-27T23:45:06","slug":"que-es-material-ui-y-por-que-deberiamos-usarlo","status":"publish","type":"post","link":"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/","title":{"rendered":"\u00bfQu\u00e9 es Material UI y por qu\u00e9 deber\u00edamos usarlo?"},"content":{"rendered":"\n<p>Material UI es una librer\u00eda de componentes de React.js, de c\u00f3digo abierto creada por Google, basada en Material Design, la cual nos brinda una serie de pautas y lineamientos que sientan la base para crear dise\u00f1os profesionales para aplicaciones web en muy poco tiempo.<\/p>\n\n\n\n<p>Esta librer\u00eda comienza en el 2014 como una implementaci\u00f3n a React de Material Design.<\/p>\n\n\n\n<p>Material UI nos permite hacer uso de componentes de alta calidad para crear un c\u00f3digo sumamente limpio, mantenible, escalable y reutilizable a mediano y largo plazo a medida que nuestra aplicaci\u00f3n crezca. Permite crear f\u00e1cilmente:<\/p>\n\n\n\n<ul>\n<li><strong>Entradas<\/strong><\/li>\n\n\n\n<li><strong>Visualizaciones de datos tipo Dashboard<\/strong><\/li>\n\n\n\n<li><strong>Realimentaci\u00f3n<\/strong><\/li>\n\n\n\n<li><strong>Superficies<\/strong><\/li>\n\n\n\n<li><strong>Componentes de Navegaci\u00f3n<\/strong><\/li>\n\n\n\n<li><strong>Componentes de Perfil de Usuario<\/strong><\/li>\n\n\n\n<li><strong>Cuadr\u00edcula de datos<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Su implementaci\u00f3n es sumamente simple, se puede instalar en su proyecto utilizando los manejadores de paquetes npm o yarn, con una simple l\u00ednea de c\u00f3digo:<\/p>\n\n\n\n<p>npm install @material-ui\/core \u00f3 yarn add @material-ui\/core<\/p>\n\n\n\n<p>Luego de eso podr\u00e1 empezar a importar todos sus componentes dentro del proyecto.&nbsp;<\/p>\n\n\n\n<p>Compartimos algunos tutoriales y art\u00edculos que nos ayudan en el d\u00eda a d\u00eda a trabajar con estas herramientas.<\/p>\n\n\n\n<p><a href=\"https:\/\/medium.com\/@gavizoid16\/working-with-material-ui-7e1407babd4f\">https:\/\/medium.com\/@gavizoid16\/working-with-material-ui-7e1407babd4f<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.text-em-all.com\/blog\/material-ui-the-internet-found-our-ui-project\">https:\/\/www.text-em-all.com\/blog\/material-ui-the-internet-found-our-ui-project<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/mui.com\/blog\/material-ui-is-now-mui\/\">https:\/\/mui.com\/blog\/material-ui-is-now-mui\/<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/mui.com\/\">https:\/\/mui.com\/<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/material.io\/design\">https:\/\/material.io\/design<\/a><\/p>\n\n\n\n<p>En 611 digital tenemos una amplia experiencia en el manejo e implementaci\u00f3n de esta herramienta y muchas otras similares, siempre con el objetivo de crear y mantener una interfaz de usuario agradable, responsiva y con muy buena accesibilidad.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Material UI es una librer\u00eda de componentes de React.js, de c\u00f3digo abierto creada por Google, basada en Material Design, la cual nos brinda una serie de pautas y lineamientos que sientan la base para crear dise\u00f1os profesionales para aplicaciones web en muy poco tiempo. Esta librer\u00eda comienza en el 2014 como una implementaci\u00f3n a React [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1207,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[13,18,16,19],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00bfQu\u00e9 es Material UI y por qu\u00e9 deber\u00edamos usarlo? - 611 Digital | Digital Agency | Design, Strategy &amp; Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfQu\u00e9 es Material UI y por qu\u00e9 deber\u00edamos usarlo? - 611 Digital | Digital Agency | Design, Strategy &amp; Technology\" \/>\n<meta property=\"og:description\" content=\"Material UI es una librer\u00eda de componentes de React.js, de c\u00f3digo abierto creada por Google, basada en Material Design, la cual nos brinda una serie de pautas y lineamientos que sientan la base para crear dise\u00f1os profesionales para aplicaciones web en muy poco tiempo. Esta librer\u00eda comienza en el 2014 como una implementaci\u00f3n a React [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/\" \/>\n<meta property=\"og:site_name\" content=\"611 Digital | Digital Agency | Design, Strategy &amp; Technology\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.linkedin.com\/company\/611digital\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-02T18:41:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-27T23:45:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/611digital.com\/media\/uploads\/2022\/07\/material-ui-post-scaled.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"2560\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Seis Uno Uno Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Seis Uno Uno Digital\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/\"},\"author\":{\"name\":\"Seis Uno Uno Digital\",\"@id\":\"https:\/\/611digital.com\/#\/schema\/person\/03bc3ba69f72bf873534dcb729be6bbd\"},\"headline\":\"\u00bfQu\u00e9 es Material UI y por qu\u00e9 deber\u00edamos usarlo?\",\"datePublished\":\"2022-07-02T18:41:53+00:00\",\"dateModified\":\"2023-01-27T23:45:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/\"},\"wordCount\":268,\"publisher\":{\"@id\":\"https:\/\/611digital.com\/#organization\"},\"articleSection\":[\"Dise\u00f1o UX\/UI\",\"Frontend\",\"Programaci\u00f3n\",\"React Js\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/\",\"url\":\"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/\",\"name\":\"\u00bfQu\u00e9 es Material UI y por qu\u00e9 deber\u00edamos usarlo? - 611 Digital | Digital Agency | Design, Strategy &amp; Technology\",\"isPartOf\":{\"@id\":\"https:\/\/611digital.com\/#website\"},\"datePublished\":\"2022-07-02T18:41:53+00:00\",\"dateModified\":\"2023-01-27T23:45:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/611digital.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00bfQu\u00e9 es Material UI y por qu\u00e9 deber\u00edamos usarlo?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/611digital.com\/#website\",\"url\":\"https:\/\/611digital.com\/\",\"name\":\"611 Digital | Digital Agency | Design, Strategy &amp; Technology\",\"description\":\"Smart and strategic technology and design\",\"publisher\":{\"@id\":\"https:\/\/611digital.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/611digital.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/611digital.com\/#organization\",\"name\":\"611 Digital\",\"url\":\"https:\/\/611digital.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/611digital.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/611digital.com\/media\/uploads\/2022\/03\/cropped-611-profile.png\",\"contentUrl\":\"https:\/\/611digital.com\/media\/uploads\/2022\/03\/cropped-611-profile.png\",\"width\":512,\"height\":512,\"caption\":\"611 Digital\"},\"image\":{\"@id\":\"https:\/\/611digital.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/611digital\/\",\"https:\/\/www.instagram.com\/611digital\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/611digital.com\/#\/schema\/person\/03bc3ba69f72bf873534dcb729be6bbd\",\"name\":\"Seis Uno Uno Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/611digital.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/af4f49d02e49068044d828e77aea32b8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/af4f49d02e49068044d828e77aea32b8?s=96&d=mm&r=g\",\"caption\":\"Seis Uno Uno Digital\"},\"sameAs\":[\"https:\/\/611digital.com\"],\"url\":\"https:\/\/611digital.com\/author\/seis-uno-uno-digital\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfQu\u00e9 es Material UI y por qu\u00e9 deber\u00edamos usarlo? - 611 Digital | Digital Agency | Design, Strategy &amp; Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/","og_locale":"en_US","og_type":"article","og_title":"\u00bfQu\u00e9 es Material UI y por qu\u00e9 deber\u00edamos usarlo? - 611 Digital | Digital Agency | Design, Strategy &amp; Technology","og_description":"Material UI es una librer\u00eda de componentes de React.js, de c\u00f3digo abierto creada por Google, basada en Material Design, la cual nos brinda una serie de pautas y lineamientos que sientan la base para crear dise\u00f1os profesionales para aplicaciones web en muy poco tiempo. Esta librer\u00eda comienza en el 2014 como una implementaci\u00f3n a React [&hellip;]","og_url":"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/","og_site_name":"611 Digital | Digital Agency | Design, Strategy &amp; Technology","article_publisher":"https:\/\/www.linkedin.com\/company\/611digital\/","article_published_time":"2022-07-02T18:41:53+00:00","article_modified_time":"2023-01-27T23:45:06+00:00","og_image":[{"width":2560,"height":2560,"url":"https:\/\/611digital.com\/media\/uploads\/2022\/07\/material-ui-post-scaled.jpeg","type":"image\/jpeg"}],"author":"Seis Uno Uno Digital","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Seis Uno Uno Digital","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/#article","isPartOf":{"@id":"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/"},"author":{"name":"Seis Uno Uno Digital","@id":"https:\/\/611digital.com\/#\/schema\/person\/03bc3ba69f72bf873534dcb729be6bbd"},"headline":"\u00bfQu\u00e9 es Material UI y por qu\u00e9 deber\u00edamos usarlo?","datePublished":"2022-07-02T18:41:53+00:00","dateModified":"2023-01-27T23:45:06+00:00","mainEntityOfPage":{"@id":"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/"},"wordCount":268,"publisher":{"@id":"https:\/\/611digital.com\/#organization"},"articleSection":["Dise\u00f1o UX\/UI","Frontend","Programaci\u00f3n","React Js"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/","url":"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/","name":"\u00bfQu\u00e9 es Material UI y por qu\u00e9 deber\u00edamos usarlo? - 611 Digital | Digital Agency | Design, Strategy &amp; Technology","isPartOf":{"@id":"https:\/\/611digital.com\/#website"},"datePublished":"2022-07-02T18:41:53+00:00","dateModified":"2023-01-27T23:45:06+00:00","breadcrumb":{"@id":"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/611digital.com\/que-es-material-ui-y-por-que-deberiamos-usarlo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/611digital.com\/"},{"@type":"ListItem","position":2,"name":"\u00bfQu\u00e9 es Material UI y por qu\u00e9 deber\u00edamos usarlo?"}]},{"@type":"WebSite","@id":"https:\/\/611digital.com\/#website","url":"https:\/\/611digital.com\/","name":"611 Digital | Digital Agency | Design, Strategy &amp; Technology","description":"Smart and strategic technology and design","publisher":{"@id":"https:\/\/611digital.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/611digital.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/611digital.com\/#organization","name":"611 Digital","url":"https:\/\/611digital.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/611digital.com\/#\/schema\/logo\/image\/","url":"https:\/\/611digital.com\/media\/uploads\/2022\/03\/cropped-611-profile.png","contentUrl":"https:\/\/611digital.com\/media\/uploads\/2022\/03\/cropped-611-profile.png","width":512,"height":512,"caption":"611 Digital"},"image":{"@id":"https:\/\/611digital.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/611digital\/","https:\/\/www.instagram.com\/611digital\/"]},{"@type":"Person","@id":"https:\/\/611digital.com\/#\/schema\/person\/03bc3ba69f72bf873534dcb729be6bbd","name":"Seis Uno Uno Digital","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/611digital.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/af4f49d02e49068044d828e77aea32b8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/af4f49d02e49068044d828e77aea32b8?s=96&d=mm&r=g","caption":"Seis Uno Uno Digital"},"sameAs":["https:\/\/611digital.com"],"url":"https:\/\/611digital.com\/author\/seis-uno-uno-digital\/"}]}},"_links":{"self":[{"href":"https:\/\/611digital.com\/wp-json\/wp\/v2\/posts\/1205"}],"collection":[{"href":"https:\/\/611digital.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/611digital.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/611digital.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/611digital.com\/wp-json\/wp\/v2\/comments?post=1205"}],"version-history":[{"count":2,"href":"https:\/\/611digital.com\/wp-json\/wp\/v2\/posts\/1205\/revisions"}],"predecessor-version":[{"id":1701,"href":"https:\/\/611digital.com\/wp-json\/wp\/v2\/posts\/1205\/revisions\/1701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/611digital.com\/wp-json\/wp\/v2\/media\/1207"}],"wp:attachment":[{"href":"https:\/\/611digital.com\/wp-json\/wp\/v2\/media?parent=1205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/611digital.com\/wp-json\/wp\/v2\/categories?post=1205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/611digital.com\/wp-json\/wp\/v2\/tags?post=1205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}