¿Qué es MUI y cómo lo puedes utilizar en tus proyectos con ReactJS?

Un framework o una biblioteca de código abierto, los desarrolladores parecen no decidirse cómo definir a ReactJS, pero en lo que sí están claros es que esta es una de las mejores tecnologías en la actualidad para diseñar atractivas y dinámicas interfaces de usuario para aplicaciones móviles o sitios web empresariales.

React o ReactJS es un marco de JavaScript que permite a los desarrolladores crear interfaces de usuario de manera rápida y eficiente al incluir archivos Java en su HTML. Es una de las bibliotecas de Java más populares del mundo y la utilizan grandes plataformas como Netflix, Airbnb e incluso Walmart.

Para crear aplicaciones y sitios web, puedes usarlo junto a MUI, o antes conocidos como Material-UI. MUI comenzó como una implementación de Material Design adaptada a las aplicaciones React. Hoy la marca se encuentra en expansión y busca crear un nuevo sistema de diseño, que será una alternativa al Material Design.

Cómo utilizar MUI en tu aplicación React

En la página web oficial de MUI señalan “MUI ofrece un conjunto integral de herramientas de interfaz de usuario para ayudarlo a enviar nuevas funciones más rápido. Comience con Material UI, nuestra biblioteca de componentes completamente cargada, o traiga su propio sistema de diseño a nuestros componentes listos para producción”.

MUI se puede instalar utilizando un paquete npm

npm install @material-ui/core

Material UI recomienda fuentes roboto para UI. Para usar la fuente Roboto, la puedes incluir utilizando los enlaces proporcionados por GoogleAPI:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Ejemplo de funcionamiento

Vamos a recrear la lista de gatos utilizando componentes de interfaz de usuario de MUI, por lo que primero se creará una nueva aplicación de react usando Create React App y luego, instalar la biblioteca React Transition Group:

cd /go/to/project npm install @material-ui/core @material-ui/icons –save

Luego de hacer esto, abre la aplicación en tu editor favorito. Cuando hagas esto, crea la carpeta src en el directorio raíz de la aplicación. A continuación, crea la carpeta de componentes en la carpeta src.

Luego de esto, hay que crear un archivo, ExpenseEntryItemList.js en la carpeta src/components para crear el componente ExpenseEntryItemList

A continuación, importa la biblioteca React y la hoja de estilo.

import React from 'react';

Luego, importar la librería Material-UI

import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

A continuación, crear la clase ExpenseEntryItemList y llamar la función de construcción

class ExpenseEntryItemList extends React.Component {
constructor(props) {
super(props);
}
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Luego, crear la función de renderizar:

render() {
}

Lo siguiente sería aplicar los estilos para las tablas, columnas y celdas en el método de renderizar:

const StyledTableCell = withStyles((theme) => ({
   head: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white,
   },
   body: {
      fontSize: 14,
   },
}))(TableCell);
const StyledTableRow = withStyles((theme) => ({
   root: {
      '&:nth-of-type(odd)': {
         backgroundColor: theme.palette.action.hover,
      },
   },
}))(TableRow);

Después, utiliza el método de mapa para generar una colección de Material UI StyledTableRow, cada uno de los cuales representa un solo elemento de entrada de gastos en la lista.

const lists = this.props.items.map((item) =>
   <StyledTableRow key={item.id}>
      <StyledTableCell component="th" scope="row">
         {item.name}
      </StyledTableCell>
      <StyledTableCell align="right">{item.amount}</StyledTableCell>
      <StyledTableCell align="right">
         {new Date(item.spendDate).toDateString()}
      </StyledTableCell>
      <StyledTableCell align="right">{item.category}</StyledTableCell>
   </StyledTableRow>
);

En este paso, la clave identifica cada fila y debe ser única en la lista. Luego, en el método render() se crea la tabla de MUI y se incluye la expresión de listas en la sección de filas y la devuelves:

return (
<TableContainer component={Paper}>
   <Table aria-label="customized table">
      <TableHead>
         <TableRow>
            <StyledTableCell>Title</StyledTableCell>
            <StyledTableCell align="right">Amount</StyledTableCell>
            <StyledTableCell align="right">Spend date</StyledTableCell>
            <StyledTableCell align="right">Category</StyledTableCell>
         </TableRow>
      </TableHead>
      <TableBody>
         {lists}
      </TableBody>
   </Table>
</TableContainer> );

Finalmente, exportas el componente:

export default ExpenseEntryItemList;

Siguiendo los pasos anteriores se pudo crear con éxito el componente para representar los elementos de gastos utilizando componentes de interfaz de MUI. El código fuente completo del componente es el siguiente:

import React from 'react';

import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

class ExpenseEntryItemList extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      const StyledTableCell = withStyles((theme) => ({
         head: {
            backgroundColor: theme.palette.common.black,
            color: theme.palette.common.white,
         },
         body: {
            fontSize: 14,
         },
      }))(TableCell);
      const StyledTableRow = withStyles((theme) => ({
         root: {
            '&:nth-of-type(odd)': {
               backgroundColor: theme.palette.action.hover,
            },
         },
      }))(TableRow);
      const lists = this.props.items.map((item) =>
         <StyledTableRow key={item.id}>
            <StyledTableCell component="th" scope="row">
               {item.name}
            </StyledTableCell>
            <StyledTableCell align="right">{item.amount}</StyledTableCell>
            <StyledTableCell align="right">{new Date(item.spendDate).toDateString()}</StyledTableCell>
            <StyledTableCell align="right">{item.category}</StyledTableCell>
         </StyledTableRow>
      );
      return (
      <TableContainer component={Paper}>
         <Table aria-label="customized table">
            <TableHead>
               <TableRow>
                  <StyledTableCell>Title</StyledTableCell>
                  <StyledTableCell align="right">Amount</StyledTableCell>
                  <StyledTableCell align="right">Spend date</StyledTableCell>
                  <StyledTableCell align="right">Category</StyledTableCell>
               </TableRow>
            </TableHead>
            <TableBody>
               {lists}
            </TableBody>
         </Table>
      </TableContainer> );
   }
}
export default ExpenseEntryItemList;

Luego de esto, debes abrir index.js e importar la biblioteca de React y el componente ExpenseEntryItemList recién creado:

import React from 'react';
import ReactDOM from 'react-dom';
import ExpenseEntryItemList from './components/ExpenseEntryItemList';

Luego debes declarar una lista (de elementos de entrada de gastos) y completarla con algunos valores aleatorios en el archivo index.js.

const items = [
   { id: 1, name: "Pizza", amount: 80, spendDate: "2020-10-10", category: "Food" },
   { id: 1, name: "Grape Juice", amount: 30, spendDate: "2020-10-12", category: "Food" },
   { id: 1, name: "Cinema", amount: 210, spendDate: "2020-10-16", category: "Entertainment" },
   { id: 1, name: "Java Programming book", amount: 242, spendDate: "2020-10-15", category: "Academic" },
   { id: 1, name: "Mango Juice", amount: 35, spendDate: "2020-10-16", category: "Food" },
   { id: 1, name: "Dress", amount: 2000, spendDate: "2020-10-25", category: "Cloth" },
   { id: 1, name: "Tour", amount: 2555, spendDate: "2020-10-29", category: "Entertainment" },
   { id: 1, name: "Meals", amount: 300, spendDate: "2020-10-30", category: "Food" },
   { id: 1, name: "Mobile", amount: 3500, spendDate: "2020-11-02", category: "Gadgets" },
   { id: 1, name: "Exam Fees", amount: 1245, spendDate: "2020-11-04", category: "Academic" }
]

El código completo de index.js se ve así:

import React from 'react';
import ReactDOM from 'react-dom';
import ExpenseEntryItemList from './components/ExpenseEntryItemList';

const items = [
   { id: 1, name: "Pizza", amount: 80, spendDate: "2020-10-10", category: "Food" },
   { id: 1, name: "Grape Juice", amount: 30, spendDate: "2020-10-12", category: "Food" },
   { id: 1, name: "Cinema", amount: 210, spendDate: "2020-10-16", category: "Entertainment" },
   { id: 1, name: "Java Programming book", amount: 242, spendDate: "2020-10-15", category: "Academic" },
   { id: 1, name: "Mango Juice", amount: 35, spendDate: "2020-10-16", category: "Food" },
   { id: 1, name: "Dress", amount: 2000, spendDate: "2020-10-25", category: "Cloth" },
   { id: 1, name: "Tour", amount: 2555, spendDate: "2020-10-29", category: "Entertainment" },
   { id: 1, name: "Meals", amount: 300, spendDate: "2020-10-30", category: "Food" },
   { id: 1, name: "Mobile", amount: 3500, spendDate: "2020-11-02", category: "Gadgets" },
   { id: 1, name: "Exam Fees", amount: 1245, spendDate: "2020-11-04", category: "Academic" }
]
ReactDOM.render(
   <React.StrictMode>
      <ExpenseEntryItemList items={items} />
   </React.StrictMode>,
   document.getElementById('root')
);

Ya en los pasos finales, sirve la aplicación usando el comendo npm

npm start

Finalmente, abre index.html en la carpeta pública e incluye las fuentes e íconos de MUI

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Material UI App</title>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
   </head>
   <body>
      <div id="root"></div>
      <script type="text/JavaScript" src="./index.js"></script>
   </body>
</html>

De esta manera se puede crear una lista de gastos utilizando MUI en ReactJs, así puedes recrearlo en tus proyectos personales.

En Rootstack, nuestros desarrolladores han logrado crear varias aplicaciones con el uso de React, resolviendo los problemas de nuestros clientes regionales e internacionales. Si quieres formar parte de un equipo multicultural, haz clic aquí y ponte en contacto con nosotros, cuéntanos tu talento y empieza a crecer profesionalmente en el apasionante mundo del desarrollo web.

Te recomendamos en video