Top Content

Versión en EspañolES

[EN] Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI
[ES] Construye un Tablero Rico en Datos y Hermoso con la Rejilla de Datos de MUI X y Joy UI

Construye un Tablero Rico en Datos y Hermoso con la Rejilla de Datos de MUI X y Joy UI

Sam Sycamore

MUI

Siriwat (Jun) Kunaporn

MUI

Please sign in to watch this workshop.

Bookmark

Github

Aprende cómo utilizar el ecosistema completo de MUI para construir un tablero de gestión de proyectos hermoso y sofisticado en una fracción del tiempo que tomaría construirlo desde cero. En particular, veremos cómo integrar la Rejilla de Datos de MUI X con Joy UI, nuestra biblioteca de componentes más nueva y hermana del estándar de la industria Material UI.

Tabla de contenidos:

- Presentando nuestro proyecto y herramientas

- Configuración de la aplicación e instalación del paquete

- Construcción del tablero

- Prototipado, estilos y temas - Características de Joy UI

- Filtrado, ordenación, edición - Características de la Rejilla de Datos

- Conclusión, pensamientos finales, P&R

This workshop has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

Una aplicación CRUD es aquella que permite las operaciones básicas de crear, leer, actualizar y eliminar datos. Estas son las funciones fundamentales necesarias para interactuar con una base de datos.

En la masterclass se utilizaron las bibliotecas Joy UI y MUI X Data Grid de MUI para construir una aplicación CRUD sofisticada.

Construir una aplicación CRUD desde cero podría llevar días o semanas de trabajo a tiempo completo, dependiendo de la complejidad de la aplicación y los casos extremos que pueden surgir durante el desarrollo.

Si construyes algo interesante con el código de la masterclass o cualquier otra herramienta de MUI, puedes hacerles saber a los organizadores. Si tu proyecto es destacado, podría ser compartido en el escaparate de proyectos de MUI.

MUI X es parte de las bibliotecas de MUI que incluyen componentes avanzados como la cuadrícula de datos, selectores de fecha y hora, y otros que se están desarrollando para ofrecer funcionalidades más sofisticadas a los desarrolladores.

Un mock service worker se utiliza para simular una API REST, permitiendo desarrollar y probar aplicaciones que interactúan con un servidor sin necesidad de configurar uno real. Esto facilita la prueba de funcionalidades de red y manejo de datos.

La principal diferencia es que Joy UI no sigue el diseño Material de Google y ofrece un sistema de diseño propio, lo que permite más libertad y variabilidad en el diseño de interfaces, mientras que Material UI sigue las directrices de Material Design.

Joy UI es una biblioteca de componentes React UI de MUI, diseñada como alternativa a Material UI, que implementa un sistema de diseño propio, permitiendo mayor flexibilidad y experimentación en el desarrollo de interfaces de usuario.

component library

Sam Sycamore

Siriwat (Jun) Kunaporn

137 min

24 May, 2023

Comments

Available in other languages:

Watch more workshops on topic

Aprende a utilizar Composables: La navaja suiza de los desarrolladores de Vue

Vue.js Live 2024

163 min

Aprende a utilizar Composables: La navaja suiza de los desarrolladores de Vue

Workshop

Juan Andrés Núñez Charro

Los Composables (funciones de composición) son funciones con estado/sin estado que pueden aprovechar la API de reactividad de Vue, desacoplándola de los componentes.Este cambio de perspectiva abre la posibilidad de abordar escenarios comunes de una manera nueva y creativa. En este masterclass, aprenderás cómo resolver problemas típicos que enfrenta cada desarrollador de Vue, utilizando composables:
- Almacenamiento de datos;- Comunicación entre componentes;- Funciones de utilidad (DOM, API, etc);Y más.

vue unit testing component library

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia

React Advanced 2021

47 min

Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia

Top Content

Siddharth Kshetrapal

GitHub

The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.

design systems component library best practices

Hacia una Biblioteca Estándar para Runtimes de JavaScript

Node Congress 2022

34 min

Hacia una Biblioteca Estándar para Runtimes de JavaScript

Top Content

James Snell

Workers team @Cloudflare

There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.

node.js javascript component library

Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro

React Summit 2022

17 min

Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro

Top Content

Thomas Findlay

Findlay Web Tech

Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.

react components component library architecture react composition react fiber programming concepts

Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React

React Advanced 2021

21 min

Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React

Top Content

Perttu Lähteenlahti

Fenrir Digital

This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.

react component library cross-platform react native for web react native react native ui library react native components

Caminando en la línea entre la flexibilidad y la consistencia en las bibliotecas de componentes

React Summit 2022

27 min

Caminando en la línea entre la flexibilidad y la consistencia en las bibliotecas de componentes

Siddharth Kshetrapal

GitHub

This Talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the action list pattern and the customization options available for the action list component. The Talk also emphasizes the introduction of a composite component to improve API flexibility. Additionally, it mentions the importance of finding the right balance between flexibility and consistency and the use of types to enforce specific child components.

design systems component library

Descubre si tu sistema de diseño es mejor que nada

React Summit 2022

20 min

Descubre si tu sistema de diseño es mejor que nada

Arseny Smoogly

Solution Architect @ Rangle

Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.

react components design systems component library case study