Introducción a Material-UI para React (Diseño de material para React)

Esta publicación ha sido publicada primero en CodingTheSmartWay.com.

Suscríbase en YouTube | Demo en vivo | Código en GitHub

Material Design es un lenguaje de diseño desarrollado en 2014 por Google y es muy popular para aplicaciones web y móviles.

Material Design está inspirado en el mundo físico y sus texturas, incluida la forma en que reflejan la luz y proyectan sombras. Las superficies de material vuelven a imaginar los medios de papel y tinta.

Con los componentes de la biblioteca Material-UI, es muy fácil utilizar elementos de Material Design en su web o aplicación móvil React. El sitio web de la biblioteca se puede encontrar en: https://material-ui.com.

En este tutorial, aprenderá a configurar y usar Material-UI en su aplicación web React. Comenzaremos desde cero y crearemos una aplicación de muestra del mundo real desde cero.

Lo que vamos a construir en este tutorial

En este tutorial, aprenderá cómo usar la biblioteca Material-UI en su aplicación React. Siguiendo los pasos, aprenderá a crear la siguiente aplicación de muestra de principio a fin:

Como puede ver, la interfaz de usuario consta de elementos de diseño de materiales. Utilizaremos componentes de Material-UI para mostrar una lista de cursos al usuario. La aplicación consta de una barra de navegación en la parte superior que contiene el título de la aplicación, un campo de texto que se puede utilizar para iniciar una búsqueda de texto completo para los cursos y una cuadrícula receptiva que contiene los resultados del curso.

Los cursos se recuperan del back-end de CMS Contentful (https://www.contentful.com/).

Configuración del proyecto React

Primero necesitamos configurar un nuevo proyecto React. Esto se puede hacer usando el script create-react-app de la siguiente manera:

$ npx create-react-app react-material-ui

Al usar el comando npx (que es parte de la instalación del Administrador de paquetes de nodos (NPM), podemos ejecutar create-react-app sin la necesidad de descargarlo e instalarlo primero).

Después de ejecutar este comando, está disponible un nuevo directorio de proyectos react-material-ui. Cambie a la carpeta del proyecto recién creado y encontrará el proyecto inicial React.

Instalación de la Biblioteca y dependencias de UI de material

A continuación, necesitamos instalar más dependencias. Al usar el siguiente comando, nos estamos asegurando de que la biblioteca Material-UI esté instalada:

$ npm install @ material-ui / core

A continuación, debemos instalar la biblioteca de JavaScript Contentful para poder acceder al backend Contentful:

$ npm instalar contenido

Probemos si todo funciona iniciando el servidor web de desarrollo con

$ npm start

Se abre el navegador, se carga la página de inicio de la aplicación React predeterminada y debería poder ver la siguiente salida en el navegador:

Ahora estamos listos para implementar la aplicación de muestra, así que comencemos.

Implementación de la aplicación de muestra

Eliminar el contenido predeterminado

Lo primero que debe hacerse es eliminar algunas partes de la implementación predeterminada. Primero abra el archivo src / App.js y aplique los siguientes cambios:

  • Elimine el código JSX que está disponible dentro de la declaración de devolución
  • Elimine la declaración de importación que se está importando de ./logo.svg (también puede eliminar este archivo ya que ya no es necesario).

Ahora estamos listos para agregar nuestro propio código al proyecto.

Implementando el componente NavBar

Primero agreguemos una barra de navegación a nuestra aplicación. El código que se necesita para mostrar la barra de navegación utilizando componentes de Material Design de la biblioteca Material-UI se agrega en otro componente. Para implementar ese nuevo componente, cree una subcarpeta nueva en el directorio src y agregue un nuevo archivo NavBar.js. Inserte el siguiente código en el archivo recién creado:

importar Reaccionar desde 'reaccionar'
importar AppBar desde '@ material-ui / core / AppBar'
importar barra de herramientas desde '@ material-ui / core / Toolbar'
Importar tipografía desde '@ material-ui / core / Typography'
const NavBar = () => {
    regreso(
        
                                                       Aplicación de muestra React & Material-UI                                                
    ) }
exportar barra de navegación predeterminada;

Aquí estamos usando el componente AppBar, Toolbar y Typography de la biblioteca Material-UI para generar la barra de navegación como se muestra anteriormente. Para poder incluir NavBar en nuestra aplicación principal componente de aplicación, debemos asegurarnos de que NavBar se exporte.

Ahora estamos listos para importar NavBar en src / App.js:

import React, {Component} desde 'react'
importar NavBar desde './components/NavBar'
La aplicación de clase extiende el componente {
  render () {
    regreso (
      
               
    )   } }
Exportar aplicación predeterminada

La etiqueta se inserta en el código JSX, de modo que la barra de navegación formará parte de la salida.

Implementación del componente de la lista de cursos

A continuación, agregaremos otro componente a nuestra aplicación: CourseList. Agregue un nuevo archivo llamado CourseList.js dentro de la carpeta src / components e inserte el siguiente código:

import React, {Component} desde 'react'
importar Grid desde '@ material-ui / core / Grid';
importar TextField desde '@ material-ui / core / TextField';
importar * como contenido de 'contenido'
Importar curso desde '../components/Course'
const SPACE_ID = '[INSERTAR ID DE ESPACIO CONTENIDO]'
const ACCESS_TOKEN = '[INSERTAR TOKEN DE ACCESO CONTENIDO]'
cliente const = contentful.createClient ({
    espacio: SPACE_ID,
    accessToken: ACCESS_TOKEN
})
class CoursesList extiende el componente {
    estado = {
        cursos: [],
        cadena de búsqueda: ''
    }
    constructor () {
        súper()
        this.getCourses ()
    }
    getCourses = () => {
        client.getEntries ({
            content_type: 'curso',
            consulta: this.state.searchString
        })
        .then ((respuesta) => {
            this.setState ({cursos: respuesta.items})
            console.log (this.state.courses)
        })
        .catch ((error) => {
          console.log ("Error al recuperar entradas")
          console.error (error)
        })
    }
    onSearchInputChange = (event) => {
        console.log ("La búsqueda ha cambiado ..." + event.target.value)
        if (event.target.value) {
            this.setState ({searchString: event.target.value})
        } más {
            this.setState ({searchString: ''})
        }
        this.getCourses ()
    }
    render () {
        regreso (
            
                {this.state.courses? (                     
                                                                              {this.state.courses.map (currentCourse => (                                                                                                                                    ))}                                              
                ): "No se encontraron cursos"}             
        )     } }
exportar lista de cursos predeterminada;

Este componente es responsable de recuperar los datos del curso del servicio de fondo Contentful y mostrar la lista de cursos al usuario.

Primero, la conexión a Contentful se establece utilizando la biblioteca Contentful JavaScript. Para establecer la conexión, debe iniciar sesión en el back-end Contentful (https://be.contentful.com/login), crear un nuevo espacio, insertar un modelo de Curso como puede ver en la siguiente captura de pantalla y acceder a Space ID y token de acceso desde la configuración de Space - API Keys.

Para acceder a esos valores, debe crear una nueva clave haciendo clic en el botón Crear clave API. Ambos valores: la ID de espacio y el token de acceso deben copiarse e insertarse en la cadena asignada a las constantes SPACE_ID y ACCESS_TOKEN.

Ambas constantes se utilizan para iniciar la conexión de fondo utilizando las siguientes líneas de código:

cliente const = contentful.createClient ({
    espacio: SPACE_ID,
    accessToken: ACCESS_TOKEN
})

La conexión al espacio Contentful se almacena en el cliente. Para recuperar la lista de cursos de esta conexión, el método getCourses se agrega a la clase de componente:

getCourses = () => {
        client.getEntries ({
            content_type: 'curso',
            consulta: this.state.searchString
        })
        .then ((respuesta) => {
            this.setState ({cursos: respuesta.items})
            console.log (this.state.courses)
        })
        .catch ((error) => {
          console.log ("Error al recuperar entradas")
          console.error (error)
        })
    }

La solicitud para recuperar la lista de cursos de Contentful se realiza llamando al método client.getEntries. Este método espera obtener un objeto de configuración como parámetro. Este objeto de configuración debe contener dos propiedades:

  • content_type: el tipo de contenido Contentful que se debe consultar. En nuestro caso: curso.
  • consulta: es posible realizar una búsqueda de texto completo en todos los campos de texto y símbolo con el parámetro de consulta. El valor asignado a esta propiedad está disponible en this.state.searchString. Esta propiedad de estado se actualiza cada vez que el usuario cambia el valor del campo de entrada de búsqueda.

Como la llamada de getEntries es una operación asincrónica, devuelve una promesa para que podamos conectarnos al resultado mediante el uso de entonces. Dentro del método then, la lista de cursos está disponible en response.items. Esos elementos se almacenan dentro de la propiedad de los cursos del estado del componente.

La salida del componente se define mediante el código JSX que devuelve el método de representación:

render () {
        regreso (
            
                {this.state.courses? (                     
                                                                              {this.state.courses.map (currentCourse => (                                                                                                                                    ))}                                              
                ): "No se encontraron cursos"}             
        )     }

Aquí estamos utilizando dos componentes de Material-UI: TextField y Grid. Ambos componentes se agregan a la salida solo si los elementos del curso están disponibles en this.state.courses. En este caso, el usuario puede usar TextField para iniciar una búsqueda de texto libre. Si el valor del campo de texto cambia, se llama al método onSearchInputChange y la propiedad searchString del objeto de estado se actualiza con ese nuevo valor.

El componente Material-UI Grid se utiliza para mostrar los cursos en un diseño de cuadrícula que responde al tamaño de la pantalla. El resultado de un curso específico es generado por el componente del curso personalizado que se implementa en el siguiente paso. El curso actual se entrega a este componente a través del parámetro del curso.

Nuevamente, necesitamos importar y agregar el componente CourseList en App.js:

import React, {Component} desde 'react'
importar NavBar desde './components/NavBar'
importar CoursesList desde './components/CoursesList'
La aplicación de clase extiende el componente {
  render () {
    regreso (
      
                        
    )   } }
Exportar aplicación predeterminada

Implementación del componente del curso

A continuación, implementemos el componente del curso. Cree un nuevo archivo Course.js en la carpeta src / components e inserte el código de la siguiente lista:

importar Reaccionar desde 'reaccionar'
Importar tarjeta desde '@ material-ui / core / Card'
importar CardActions desde '@ material-ui / core / CardActions'
importar CardContent desde '@ material-ui / core / CardContent'
importar CardMedia desde '@ material-ui / core / CardMedia'
Importar botón desde '@ material-ui / core / Button'
Importar tipografía desde '@ material-ui / core / Typography'
Curso const = (accesorios) => {
    console.log (accesorios)
    regreso(
        
            {props.course? (                                                                                                         {props.course.fields.title}                                                                   {props.course.fields.description}                                                                                                                                       ) : nulo}         
    ) }
Exportar curso predeterminado

Como el curso actual se entrega como una propiedad, podemos acceder a los datos del curso a través de props.course. Si hay datos disponibles, el curso se muestra utilizando el componente Tarjeta de la biblioteca Material-UI. Además, estamos utilizando los siguientes componentes de diseño de materiales: CardActions, CardContent, CardMedia, Button y Typography.

Una vez completada la implementación, nuestra aplicación ahora debería generar el resultado final como se muestra al comienzo de este tutorial.

Conclusión

Al usar la biblioteca de componentes Material-UI, es fácil mejorar el resultado de su aplicación React con el diseño de materiales de Google. En este tutorial, aprendió a configurar y usar Material-UI en su proyecto React e implementar una aplicación de muestra del mundo real desde cero.

Esta publicación ha sido publicada primero en CodingTheSmartWay.com.

# 1 Reaccionar - La Guía Completa

¡Sumérgete y aprende a reaccionar desde cero! ¡Aprenda Reactjs, Redux, React Routing, Animaciones, conceptos básicos de Next.js y mucho más!
Ir al curso ...

Descargo de responsabilidad: esta publicación contiene enlaces de afiliados, lo que significa que si hace clic en uno de los enlaces de productos, recibiré una pequeña comisión. ¡Esto ayuda a apoyar este blog!