Saltar al contenido

Una guía para principiantes a la interfaz de usuario del material Reaccionar tutorialDec, 4thIn este tutorial, vamos a aprender acerca de cómo utilizar el material …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo utilizar el marco de materiales de interfaz de usuario en aplicaciones React. diseño

material es desarrollado por Google en 2014, utiliza los diseños basados ​​en la red, animaciones sensibles y transiciones, el relleno y efectos de profundidad, tales como iluminación y sombras. diseño

material se inspira en los objetos del mundo físico y sus texturas cómo se reflejan las sombras andcast luz.

lo que es material de interfaz de usuario?

Material de interfaz de usuario es una de las famosas Reaccionar marcos de interfaz de usuario con 6 millones de descargas mensuales de la NGP y 43k estrellas GitHub.

Material de interfaz de usuario proporciona a reaccionar componentes de google que implementan el diseño de materiales.

Introducción

En primer lugar, tenemos que configurar e instalar la nueva aplicación reaccionan con la función de crear una reacción aplicación de línea de comandos.

Abre los siguientes comandos de terminal y correr.

npx create-react-app react-material

continuación, tenemos que cambiar nuestra directorio de trabajo mediante el uso de comandos a continuación.

cd react-material
npm start

NPM inicio se utiliza para ejecutar el servidor de desarrollo. tiempo de

para instalar el marco de materiales de interfaz de usuario mediante el uso de comandos a continuación.

npm install @material-ui/core

Ahora abra la carpeta de reaccionar-material de aplicación utilizando su editor de código o IDE favorito.

Navegar hasta la carpeta pública y index.html abierta y añadir el siguiente etiqueta highlightedlink.




React App<itle><br /> </head></p> <p><body data-rsssl=1><br /> <noscript>You need to enable JavaScript to run this app.<<br />oscript></p> <div id="root"></div> <p></body></p> <p></html></code> </p> <p> Aquí se actualiza nuestro archivo HTML mediante la adición de una fuente Roboto Google porque IU material fue diseñado con la fuente Roboto en mente. El diseño de </p> <p> dejar que nuestra cabecera de aplicaciones que utilizan material de interfaz de usuario componentes </p> <p> Ahora en el archivo app.js estamos importando <AppBar> componente de la ‘@ material ui / core / AppBar’. componente </p> <p> <code>import React, { Component } from 'react';<br /> import AppBar from '@material-ui/core/AppBar';</p> <p>class App extends Component {<br /> render() {<br /> return (</p> <div> <AppBar color="primary" position="static"></p> <h1>My header</h1> <p> </AppBar></p></div> <p> );<br /> }<br /> }<br /> export default App;</code> </p> <p> En AppBar pasamos dos colores apoyos y la posición </p> <p> ya se puede ver un encabezado con el color primario se representa en la pantalla. </p> <p> <img src="https://openanalytics.es/wp-content/uploads/2020/03/react-material-ui-header.png"> </p> <p> Vamos a sustituir nuestro elemento h1 con el material de interfaz de usuario de la tipografía de componentes. </p> <p> <code>import React, { Component } from 'react';<br /> import AppBar from '@material-ui/core/AppBar';<br /> import Toolbar from '@material-ui/core/Toolbar'<br /> import TypoGraphy from '@material-ui/core/Typography'</p> <p>class App extends Component {<br /> render() {<br /> return (</p> <div> <AppBar color="primary" position="static"><br /> <Toolbar><br /> <TypoGraphy variant="title" color="inherit" ><br /> My header<br /> </TypoGraphy><br /> </Toolbar><br /> </AppBar></p></div> <p> );<br /> }<br /> }<br /> export default App;</code> </p> <p> En el código anterior primero nos importó dos componentes que son barra de herramientas y la tipografía de la ‘@ material ui’ marco. componente </p> <p> en la tipografía que pasó dos puntales variante y color. </p> <p> <img src="https://openanalytics.es/wp-content/uploads/2020/03/material-ui-typography.png"> </p> <p> ¿Usted ha visto cómo hemos llegado más espaciado sobre nuestro rumbo? </p> <h3> Adición de barra de navegación </h3> <p> Vamos a añadir la barra de navegación a nuestra cabecera. </p> <p> crear un nuevo archivo llamado navbar.js en su carpeta src. </p> <p> <code>import React from 'react';<br /> import List from '@material-ui/core/List';<br /> import ListItem from '@material-ui/core/ListItem';<br /> import ListItemText from '@material-ui/core/ListItemText';<br /> import TypoGraphy from '@material-ui/core/Typography'</p> <p>function NavBar(props) {</p> <p> return (<br /> <List component="nav"><br /> <ListItem component="div"><br /> <ListItemText inset><br /> <TypoGraphy color="inherit" variant="title"><br /> Home<br /> </TypoGraphy><br /> </ListItemText></p> <p> <ListItemText inset><br /> <TypoGraphy color="inherit" variant="title"><br /> Posts<br /> </TypoGraphy><br /> </ListItemText></p> <p> <ListItemText inset><br /> <TypoGraphy color="inherit" variant="title"><br /> Contact<br /> </TypoGraphy><br /> </ListItemText><br /> </ListItem ></p> <p> </List><br /> )<br /> }</p> <p>export default NavBar;</code> </p> <p> Dentro de las navbar.js importamos ListItem y el componente ListItemText. componente </p> <p> En <strong> ListItem </strong> que añade valor prop componente al NAV por lo que podemos obtener de navegación HTML elemento. </p> <p> <img src="https://reactgo.com//static/cba42f4a76be6fab23856f4d9b471e6e/98829<br />avbar.png”> </p> <h3> material ui SVG iconos </h3> <p> Material de interfaz de usuario nos proporciona iconos SVG materiales a utilizar en nuestra aplicación para reaccionar. </p> <p> vamos a instalar el paquete de iconos en nuestra aplicación de manera que podemos utilizar como iconos Reaccionar componentes. Importación de </p> <p> <code>npm install @material-ui/icons</code> </p> <p> dejar que los iconos dentro de nuestro archivo navbar.js. </p> <p> <code>import React from 'react';<br /> import List from '@material-ui/core/List';<br /> import ListItem from '@material-ui/core/ListItem';<br /> import ListItemText from '@material-ui/core/ListItemText';<br /> import TypoGraphy from '@material-ui/core/Typography'<br /> import ListItemIcon from '@material-ui/core/ListItemIcon'<br /> import { Home, Book, AccountBox } from '@material-ui/icons'</p> <p>function NavBar(props) {</p> <p> return (<br /> <List component="nav"><br /> <ListItem component="div" ></p> <p> <ListItemText inset><br /> <TypoGraphy color="inherit" variant="title"><br /> Home <Home /><br /> </TypoGraphy><br /> </ListItemText></p> <p> <ListItemText inset><br /> <TypoGraphy color="inherit" variant="title"><br /> Posts <Book /><br /> </TypoGraphy><br /> </ListItemText></p> <p> <ListItemText inset><br /> <TypoGraphy color="inherit" variant="title"><br /> Contact <AccountBox /><br /> </TypoGraphy><br /> </ListItemText><br /> </ListItem ></p> <p> </List><br /> )<br /> }</p> <p>export default NavBar;</code> </p> <p> <img src="https://openanalytics.es/wp-content/uploads/2020/03/material-icons.png"> </p> <h3> cuadrícula </h3> <p> el material de interfaz de usuario es compatible con diseños de cuadrícula de respuesta que se adaptan a la andorientation tamaño de la pantalla del dispositivo. el uso de </p> <p> Let el componente de cuadrícula. </p> <p> Crear un dos nuevos archivos denominados ficticios-post.js, posts.js y agregue el código siguiente. </p> <p> <code>const posts = [</p> <p> {<br /> title: "My first post",<br /> excerpt: "This is my first post with more content inside",<br /> image: "https://bit.ly/2WNi2Ml"<br /> },</p> <p> {<br /> title: "My second post",<br /> excerpt: "This is my second post with more content inside",<br /> image: "https://bit.ly/2WNi2Ml"<br /> },</p> <p> {<br /> title: "My third post",<br /> excerpt: "This is my third post with more content inside",<br /> image: "https://bit.ly/2WNi2Ml"<br /> },</p> <p> {<br /> title: "My fourth post",<br /> excerpt: "This is my fourth post with more content inside",<br /> image: "https://bit.ly/2WNi2Ml"<br /> },</p> <p> {<br /> title: "My fifth post",<br /> excerpt: "This is my fifth post with more content inside",<br /> image: "https://bit.ly/2WNi2Ml"<br /> },</p> <p> {<br /> title: "My sixth post",<br /> excerpt: "This is my sixth post with more content inside",<br /> image: "https://bit.ly/2WNi2Ml"<br /> }<br /> ]</code> <code>import React from "react";<br /> import { Grid, Paper, Typography } from "@material-ui/core";<br /> import Card from "@material-ui/core/Card";<br /> import CardActionArea from "@material-ui/core/CardActionArea";<br /> import CardActions from "@material-ui/core/CardActions";<br /> import CardContent from "@material-ui/core/CardContent";<br /> import CardMedia from "@material-ui/core/CardMedia";<br /> import Button from "@material-ui/core/Button";<br /> import { posts } from "./dummy-posts";</p> <p>function Posts(props) {<br /> return (</p> <div style={{ marginTop: 20, padding: 30 }}> <Grid container spacing={40} justify="center"><br /> {posts.map(post => (<br /> <Grid item key={post.title}><br /> <Card><br /> <CardActionArea><br /> <CardMedia component="img" alt="Contemplative Reptile" height="140" image={post.image} title="Contemplative Reptile" /><br /> <CardContent><br /> <Typography gutterBottom variant="h5" component="h2"><br /> {post.title}<br /> </Typography><br /> <Typography component="p">{post.excerpt}</Typography><br /> </CardContent><br /> </CardActionArea><br /> <CardActions><br /> <Button size="small" color="primary"><br /> Share<br /> </Button><br /> <Button size="small" color="primary"><br /> Learn More<br /> </Button><br /> </CardActions><br /> </Card><br /> </Grid><br /> ))}<br /> </Grid> </div> <p> );<br /> }</p> <p>export default Posts;</code> </p> <p> En el código anterior, que importó de cuadrícula y tarjeta de componentes relacionados. </p> <p> En la rejilla de componentes que pasó puntal recipiente para que se convierta en contenedor de cuadrícula. </p> <ul> <li> justificar prop nos ayuda a hacer nuestros artículos rejilla del centro de </li> <li> separación prop nos ayuda a crear el espacio entre los elementos de cuadrícula individuales (valores de apoyo son 8, 16, 24, 32 o 40). </li> </ul> <p> Dentro del componente de contenedor de cuadrícula, que pasó prop elemento al componente de cuadrícula de modo que se conviertan en elementos de la cuadrícula. El diseño de </p> <p> <img src="https://openanalytics.es/wp-content/uploads/2020/03/material-ui-grid-component.png"> </p> <h3> de contacto Formulario </h3> <p> Let un formulario de contacto utilizando la interfaz de usuario de materiales y componentes FormControl de entrada. </p> <p> crear un nuevo archivo llamado contact.js en su carpeta src. </p> <p> <code>import React from "react";<br /> import {<br /> FormControl,<br /> InputLabel,<br /> Input,<br /> Button,<br /> TextField<br /> } from "@material-ui/core";</p> <p>class Contact extends React.Component {<br /> render() {<br /> return (</p> <div style={{ display: "flex", justifyContent: "center", margin: 20, padding: 20 }} ></p> <form style={{ width: "50%" }}> <h1>Contact Form</h1> <p> <FormControl margin="normal" fullWidth><br /> <InputLabel htmlFor="name">Name</InputLabel><br /> <Input id="name" type="text" /><br /> </FormControl></p> <p> <FormControl margin="normal" fullWidth><br /> <InputLabel htmlFor="email">Email</InputLabel><br /> <Input id="email" type="email" /><br /> </FormControl></p> <p> <FormControl margin="normal" fullWidth><br /> <InputLabel htmlFor="email">Message</InputLabel><br /> <Input id="email" multiline rows={10} /><br /> </FormControl></p> <p> <Button variant="contained" color="primary" size="medium"><br /> Send<br /> </Button><br /> </form> </p></div> <p> );<br /> }<br /> }</p> <p>export default Contact;</code> </p> <p> Aquí nos importó el primer FormControl, InputLabel, de entrada, Button y TextField componentes de la interfaz de usuario marco material. </p> <p> <strong> FormControlComponent </strong>: componente En FormControl pasamos valor de margen prop a tan normal que se mantiene la distancia entre los campos de entrada, también pasamos fullwidth que significa ocupar el espacio disponible. </p> <p> <strong> InputLabel </strong>: El componente <strong> InputLabel </strong> nos ayuda a mostrar la etiqueta para nuestro campo de entrada. </p> <p> <strong> entrada </strong>: El componente de entrada <strong> </strong> nos ayuda a mostrar el campo de entrada HTML. </p> <p> Si pasamos puntal de varias líneas al componente de entrada va a proporcionar área de texto en lugar de elemento de campo de entrada. </p> <p> filas prop se utiliza para aumentar las filas de área de texto elemento. Salida </p> <p> <img src="https://openanalytics.es/wp-content/uploads/2020/03/material-ui-contact-form.png"></p> <div class="banner desktop"> <div class="center fluid"> </div> </div> <div class="banner mobile"> <div class="center fluid"> </div> </div> <footer class="entry-footer"> <section class="entry-related"> <h3>Entradas relacionadas</h3> <div class="flex flex-fluid"> <article id="post-2111" class="entry-item column-third"> <a href="https://openanalytics.es/modo-de-empleo-reaccionar-hooksdec-29thin-este-tutorial-vamos-a-aprender-acerca-de-como-utilizar-los-ganchos-en/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/usestate-hook-demo-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Modo de empleo Reaccionar hooksDec, 29thIn este tutorial, vamos a aprender acerca de cómo utilizar los ganchos en …</h4> </a> </article> <article id="post-2115" class="entry-item column-third"> <a href="https://openanalytics.es/como-agregar-hojas-de-estilo-externas-a-reactdec-27thin-reaccionar-aplicaciones-que-no-necesitamos-anadir-etiquetas-de-vinculos-manualmente-al-html/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/react-external-style-sheet-example-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Cómo agregar hojas de estilo externas a reactDec, 27thIn reaccionar aplicaciones que no necesitamos añadir etiquetas de vínculos manualmente al HTML …</h4> </a> </article> <article id="post-2090" class="entry-item column-third"> <a href="https://openanalytics.es/componentes-de-orden-superior-especial-en-reaccionar-con-examplesdec-13thin-este-tutorial-vamos-a-aprender-acerca-de-lo-que-son-de-orden-superior/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/hoc-example-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">componentes de orden superior (Especial) en Reaccionar con examplesDec, 13thIn este tutorial, vamos a aprender acerca de lo que son de orden superior …</h4> </a> </article> <article id="post-2094" class="entry-item column-third"> <a href="https://openanalytics.es/reaccionar-modal-tutorial-utilizando-hookssep-19thin-este-tutorial-vamos-a-aprender-acerca-de-como-crear-un-referente-en/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/modal-open-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Reaccionar modal tutorial utilizando hooksSep, 19thIn este tutorial, vamos a aprender acerca de cómo crear un referente en …</h4> </a> </article> <article id="post-2096" class="entry-item column-third"> <a href="https://openanalytics.es/http-solicitudes-en-redux-utilizando-redux-thunkjan-11thin-este-tutorial-vamos-a-aprender-acerca-de-como-obtener-los-datos-de-la/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/http-requests-redux-150x150.gif" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Http solicitudes en Redux utilizando Redux-thunkJan, 11thIn este tutorial, vamos a aprender acerca de cómo obtener los datos de la …</h4> </a> </article> <article id="post-2107" class="entry-item column-third"> <a href="https://openanalytics.es/iniciacion-a-la-interfaz-de-usuario-semantica-reactnov-9thin-este-tutorial-vamos-a-aprender-acerca-de-como-utilizar-la-interfaz-de-usuario-semantica/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/react-semantic-ui-grid-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Iniciación a la interfaz de usuario Semántica ReactNov, 9thIn este tutorial, vamos a aprender acerca de cómo utilizar la interfaz de usuario semántica …</h4> </a> </article> </div> </section> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3>Deja un comentario <small><a rel="nofollow" id="cancel-comment-reply-link" href="/una-guia-para-principiantes-a-la-interfaz-de-usuario-del-material-reaccionar-tutorialdec-4thin-este-tutorial-vamos-a-aprender-acerca-de-como-utilizar-el-material/#respond" style="display:none;">Cancelar respuesta</a></small></h3> <form action="https://openanalytics.es/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate> <p class="comment-notes"><span id="email-notes">Tu dirección de correo electrónico no será publicada.</span> Los campos obligatorios están marcados con <span class="required">*</span></p><textarea id="comment" name="comment" cols="45" rows="1" required></textarea><p class="comment-form-author"><label for="author">Nombre <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Correo electrónico <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Guardar mi nombre, correo electrónico y sitio web en este navegador para la próxima vez que haga un comentario.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="btn btn-primary" value="Publicar comentario" /> <input type='hidden' name='comment_post_ID' value='2112' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> </form> </div><!-- #respond --> </div> </footer> </div> </div> </main> <footer class="site-footer"> <div class="container"> <div class="credits row"> <p>SEO y Programación.</p> </div> </div> </footer> <!-- Site Overlay --> <div class="site-overlay"></div> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "Open Analytics", "alternateName": "SEO y Programación.", "url": "https://openanalytics.es" } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article", "headline": "  En este tutorial, vamos a aprender acerca de cómo utilizar el Read more", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://openanalytics.es/una-guia-para-principiantes-a-la-interfaz-de-usuario-del-material-reaccionar-tutorialdec-4thin-este-tutorial-vamos-a-aprender-acerca-de-como-utilizar-el-material/" }, "image": { "@type": "ImageObject", "url": "https://openanalytics.es/wp-content/uploads/2020/03/create-react-app-install.png", "height": 1024, "width": 1024 }, "datePublished": "2020-03-13", "dateModified": "2020-03-13", "author": { "@type": "Person", "name": "admin" }, "publisher": { "@type": "Organization", "name": "Open Analytics" } } </script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/navigation.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/social.min.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/main.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-includes/js/comment-reply.min.js?ver=5.2.6'></script> <script type='text/javascript' src='https://openanalytics.es/wp-includes/js/wp-embed.min.js?ver=5.2.6'></script> </body> </html>