> For the complete documentation index, see [llms.txt](https://medellin-js.gitbook.io/workshop-fullstack-js-developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://medellin-js.gitbook.io/workshop-fullstack-js-developer/frontend/reactjs/componentes.md).

# 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.

{% code title="src/components/Header.jsx" %}

```jsx
import React from 'react';

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

export default Header

```

{% endcode %}

### 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.

{% code title="src/components/Product.jsx" %}

```jsx
import React from 'react';

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

  return (
    <div className="card h-100">
      <a href={`/product/${_id}`}>
        <img className="card-img-hrefp" src={image} alt={name} />
      </a>
      <div className="card-body">
        <h4 className="card-title">
          <a href={`/product/${_id}`}>{name}</a>
        </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;

```

{% endcode %}

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