Cómo agregar material de interfaz de usuario en Reactjs

Introducción

En esta publicación, aprenderemos cómo usar la biblioteca Material-UI en una aplicación React. Las bibliotecas de interfaz de usuario son un grupo de componentes que incluye todos los componentes, lo que facilita a los diseñadores y desarrolladores la creación de la interfaz de usuario. La interfaz de usuario de material incluye todos los componentes como botones, tarjetas, cuadros de diálogo, iconos de tablas, menús, entrada de controles deslizantes, formularios, etc.

correo aol en android

Material UI es uno de los frameworks de UI más populares desarrollados por Google. La biblioteca Material UI está diseñada para un desarrollo de interfaz de usuario más rápido, fácil y amigable para el desarrollador. Ahora Material-UI es compatible con todos los principales navegadores y plataformas. Más información sobre la interfaz de usuario bibliotecas

Prerrequisitos

• Conocimientos básicos de React.js
• Visual Studio Code IDE

Crear proyecto ReactJS

Primero creemos una aplicación React usando el siguiente comando.

Abra el proyecto recién creado en Visual Studio Code e instale Material-UI.

Instalar Material-UI

Ahora instale Material-UI usando el siguiente comando

Ahora, haga clic derecho en la carpeta src y agregue un nuevo componente llamado 'Form.js.I

Primero, agreguemos un botón de IU de material en este componente. Para usar el botón React Material UI, agregue la siguiente referencia en este componente.

Agregue el siguiente código en el componente de formulario y ejecute el proyecto.

Usamos la propiedad de variante y color del componente Button.

marcos front-end web

Ahora creemos un componente llamado Navbar.js y agreguemos el siguiente código.

Agregue la referencia de este componente en el archivo App.js y ejecute el proyecto y verifique el resultado.

Ahora creemos otro componente llamado 'List.js'. En este componente agregamos pan rallado. Agrega el siguiente código

Ahora ejecute el proyecto y verifique el resultado.

construcción de máquinas de aprendizaje profundo

Resumen

En este artículo aprendimos cómo instalar la biblioteca Material UI en aplicaciones React. Reactstrap es una biblioteca de componentes para React.UI. Las bibliotecas son un grupo de componentes, incluye todos los componentes, lo que facilita a los diseñadores y desarrolladores la creación de la interfaz de usuario.

¡Gracias por leer!

#react #Add Material UI # node-js #vscode