MUI: La librería UI para React que siempre quisiste

MUI proporciona una biblioteca robusta, personalizable y accesible de componentes básicos y avanzados, lo que te permite crear tu propio sistema de diseño y desarrollar aplicaciones React más rápido.

MUI incluye potentes herramientas que te ayudarán a crear todo tipo de interfaces de usuario.

Maravillosamente diseñado

Puedes comenzar tus proyectos con Material Design de Google o crear tus propios diseños utilizando las sofisticadas características de MUI.

Fácilmente personalizado

Disfruta del poder de sus componentes sin sacrificar tus propios estilos. Modifica como se procesan todos los componentes hasta la última clase.

Excelente documentación

Sus documentación se formó a lo largo de los años con la ayuda y la experiencia de sus mas de 2,000 colaboradores de código abierto de confianza. ¡Está todo ahí!

Empieza a utilizar React y MUI en poco tiempo.

Los componentes MUI funcionan de forma aislada. Son autosuficientes y solo inyectarán los estilos que necesitan mostrar. No se basan en ninguna hoja de estilo global como normalize.css.

Puedes utilizar cualquiera de los componentes como se muestra en la documentación. Consulta la página de demostración de cada componente para ver cómo se deben importar.

Inicio rápido

Aquí hay un ejemplo rápido para comenzar, es literalmente todo lo que necesitas:

import * as React from 'react';
import ReactDOM from 'react-dom';
import Button from '@mui/material/Button';

function App() {
  return (
     <Button variant="contained">
       Hello World
     </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Sí, esto es realmente todo lo que necesitas para comenzar, como puedes ver en esta demostración en vivo e interactiva:

Proyectos de ejemplo

Puedes encontrar algunos proyectos de ejemplo en el repositorio de GitHub en la carpeta /examples:

Create React App es un proyecto increíble para aprender React. Echa un vistazo a las alternativas disponibles para ver qué proyecto se adapta mejor a tus necesidades.

Recursos recomendados

Cuando aprendes MUI por primera vez, es posible que las publicaciones de blogs, libros y cursos de video de terceros sean más útiles que la documentación oficial. A continuación te dejamos algunos recursos recomendados por el mismo MUI, algunos de los cuales son gratuitos.

Gratis

Introduction to MUI: una serie de videos que cubren todos los componentes importantes de MUI.
- 📹 The videos
Customize MUI for your project: un vistazo a cómo puedes personalizar MUI para alinearlo con la identidad de tu proyecto (sistema de diseño) y productos
- 📹 The videos
Meet MUI — your new favorite user interface library: un blog que te guiará en la construcción de Todo MVC mientras cubre algunos conceptos importantes de MUI.
- 📝 The blog post
Learn React & MUI: una serie de videos que cubren todos los componentes importantes de MUI.
- 📹 The videos
Getting Started With MUI For React: un blog que te guiará en la creación de una lista de tarjetas simple.
- 📝 The blog post
- 📹 The video
Elegant UX in React with MUI: un blog que cubre algunos conceptos importantes de MUI.
- 📝 The blog post

De Pago

Implement high fidelity designs: Cerrar la brecha entre diseño y desarrollo. Analiza diseños detallados y dales vida con MUI y React.
- 💻 The Course
Apply Google Material Design: Este curso enseña los fundamentos de Google Material Design y cómo desarrollar una aplicación de reserva y búsqueda de vuelos de principio a fin utilizando MUI y React.
- 📹 Watch Course Trailer
- 💻 The Course
Cookbook: Cree aplicaciones modernas implementando los principios de Material Design en React, usando MUI.
- 📘 The book

Builder Book: Aprenda a crear una aplicación web SaaS y JavaScript desde cero, utilizando un stack de JavaScript moderno y MUI.
- 📘 The book

TipNov: 😉

El término stack (“pila”) hace referencia al método de apilamiento de los componentes de este conjunto de herramientas, uno encima del otro. La sencilla arquitectura de estos stacks para el desarrollo web se compone de un sistema operativo, un servidor web, una base de datos y un intérprete de lenguaje de programación.

Si quieres saber más sobre el poder de MUI, aquí tienes algunos proyectos que están disponibles en la tienda MUI.