React Material-UI Introducción e instalación

Material UI es la herramienta más poderosa y eficiente para construir una Aplicación agregando Diseños y Animaciones y usándola con innovación técnica y científica. Básicamente es un lenguaje de diseño que fue desarrollado por Google en 2014. Utiliza más diseño y animaciones, sistema de cuadrícula y proporciona sombras y efectos de iluminación.

Se puede usar con todos los marcos de JavaScript como AngularJS , VueJS y bibliotecas como ReactJS , para hacer que la aplicación sea más sorprendente y receptiva. Con más de 35 000 estrellas en GitHub, Material UI es una de las mejores bibliotecas de interfaz de usuario para React.

Características de Material UI: Material UI proporciona funciones de utilidad de bajo nivel llamadas «funciones de estilo»  para construir sistemas de diseño potentes. 

• Acceda a los valores del tema directamente desde los accesorios del componente.
• Fomente la coherencia de la interfaz de usuario.
• Escriba un estilo receptivo sin esfuerzo.
• Trabaja con cualquier objeto de tema.
• Menos de KB g comprimidos.
• Lo suficientemente rápido para ejecutar.

Requisito previo:

• Un editor de código como (VS Code, Atom, Sublime, etc.).
• NodeJS debe estar instalado.
  Instalación de Node.js en Windows
  Instalación de Node.js en Linux
• Conocimiento de la creación de una aplicación de reacción.

Instalación: para instalar Material UI, ejecute el siguiente comando en su directorio de trabajo.

• Instale Material UI usando npm.

  npm install @material-ui/core

• Instale Material UI usando hilo.

  yarn add @material-ui/core

Ejemplo: En este ejemplo haremos cambios en App.js, importaremos Material UI y colocaremos un botón con el color primario.

import React, {Component} from 'react';
import './App.css';
import Button from '@material-ui/core/Button'; 
  
class App extends Component {
  render(){
    return (
      <div className="App"> 
        <br />
        <Button variant="contained" color="primary" 
                size="large">
            GeeksforGeeks
        </Button>     
    </div>
      
    ); 
  }
   
}
  
export default App;

Producción: