SPA utilizando React #12
Conversation
diegovelezg
added
help wanted
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
| <meta name="theme-color" content="#000000"> | ||
| <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> | ||
| <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">--> |
There was a problem hiding this comment.
Los estilos que no son utilizados pueden ser eliminados.
| return ( | ||
| <div className = "Footer"> | ||
| <footer> | ||
| <p className = "footer-links"> |
There was a problem hiding this comment.
<a href="url" los espacios no son necesarios entre el atributo y su valor. Aplica para todas las etiquetas que como div, p, a en este archivo.
| <div className = "Header"> | ||
| <div className = "Logo"> | ||
| <img src = {logo} alt = "logo" className = "Logo-img" /> | ||
| {/* <ul className = "menu"> |
There was a problem hiding this comment.
El código comentado puede ser eliminado.
| } | ||
|
|
||
| renderLoginButton() { | ||
| if (this.state.user) { |
There was a problem hiding this comment.
Tal vez una buena opción sea extraer el usuario desde this.state ya que se ocupa varias veces en este método:
const { user } = this.state;
| </ul> */} | ||
| </div> | ||
| <div className = "ShoppingCart"> | ||
| <img src = {cart} art = 'cart' className = 'ShopCart' alt = ""/> |
There was a problem hiding this comment.
El atributo alt es importante para la accesibilidad de los component, un valor simple como 'Shopping cart' podría ser útil.
| render() { | ||
| return ( | ||
| <div className="PicturesContainer"> | ||
| {this.state.pictures[0]} |
There was a problem hiding this comment.
this.state.pictures es un arreglo de componentes, será posible mostrarlo directamente:
<div className="PicturesContainer">
{this.state.pictures}
</div>| class MercadoLibreApp extends Component { | ||
| constructor() { | ||
| super(); | ||
| this.state = { pictures: [], |
| } | ||
|
|
||
| handleSubmit(event) { | ||
| // alert('A name was submitted: ' + this.state.value); |
| console.log(data); | ||
| let pictures = data.results.map((pic) => { | ||
| return ( | ||
| <div className = "product" key = {pic.id}> |
There was a problem hiding this comment.
Este código para crear las imágenes se repite también en el componente Header, sería bueno poder extraerlo en un lugar común y usarlo desde los dos componentes. Eso creo que tomará un tiempo considerable, tal vez no tengas que cambiarlo ahora, pero tómalo en cuenta para futuros componentes.
| }; | ||
| render() { | ||
| return ( | ||
| <div className = "container"> |
There was a problem hiding this comment.
Arreglar la indentación de div y form
No description provided.