Componentes

"Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada." 🧩

Para el desarrollo de nuestro proyecto necesitamos necesitamos por ahora solo dos componentes, Header y Product. Iniciemos entonces creando dentro de la carpeta /src en la raíz de nuestro proyecto una carpeta llamada /components, en esta agregaremos cada uno de los componentes que utilizaremos en nuestro proyecto.

Header 🙆🏻‍♀️

Este componente solo sera de uso visual, no tiene ninguna lógica de nuestra api, pero como en nuestro sitio tendremos varias paginas, para no duplicar este mismo código en cada una, crearemos este componente. Creamos el archivo Header.jsx dentro de la carpeta componentes.

/components/Header.jsx

import React from 'react';

import { Link } from 'react-router-dom';

const Header = () => (
  <nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div className="container">
      <Link className="navbar-brand" to="/">Ecommerce MedJS</Link>
      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse" id="navbarResponsive">
        <ul className="navbar-nav ml-auto">
          <li className="nav-item active">
            <Link className="nav-link" to="/">Home
              <span className="sr-only">(current)</span>
            </Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/register">Register</Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/login">Login</Link>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://medellinjs.org" target="_blank" rel="noopener noreferrer">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
)

export default Header

Product 📦

El componente de producto, nos permitirá visualizar cada uno de los productos que nos entregara nuestra API, en el podremos ver en detalle la información del producto listado. Crearemos entonces el archivo Product.jsx dentro de la carpeta componentes con el siguiente código.

/components/Product.jsx

import React from 'react';
import { Link } from 'react-router-dom';

const Product = (props) => {
  const {
    _id,
    price,
    name,
    image,
    description,
    availableQuantity,
  } = props;

  return (
    <div className="card h-100">
      <Link to={`/product/${_id}`}>
        <img className="card-img-top" src={image} alt={name} />
      </Link>
      <div className="card-body">
        <h4 className="card-title">
          <Link to={`/product/${_id}`}>{name}</Link>
        </h4>
        <h5>${price}</h5>
        <p className="card-text">{description}</p>
      </div>
      <div className="card-footer">
        <small className="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
      </div>
    </div>
  );
};

export default Product;

Por ahora estos son los únicos componentes que tendrá nuestro proyecto de shopping 🛒.