Skip to main content

​
Components Overview

Tienda ETCA uses a component-based architecture built with React. Components are organized into two main directories: reusable UI components and layout containers.

​
Component Categories

UI Components

Reusable building blocks for the application

Layout Components

Page-level containers and structural components

​
UI Components

Located in ~/workspace/source/src/components/, these components provide reusable functionality across the application.
Main navigation header with logo, menu links, shopping cart, and login/admin access.Location: src/components/Header.jsxFeatures:
  • Navigation menu (Inicio, Nosotros, Galería, Contacto)
  • Shopping cart button with item count
  • Login and Admin access buttons
  • Integrates with CartContext for cart state
Dependencies: CartContext, Cart component, React Router

​
Content Display

Hero section component with text content on the left and image on the right.Location: src/components/Main.jsxProps:
  • titular (string) - Section heading
  • texto (string) - Description text
  • boton (string) - Button label
  • imagen (string) - Image URL
Layout: Two-column Bootstrap layout with text left, image right
Hero section component with image on the left and text content on the right.Location: src/components/Main2.jsxProps:
  • titular (string) - Section heading
  • texto (string) - Description text
  • boton (string) - Button label
  • imagen (string) - Image URL
Layout: Two-column Bootstrap layout with image left, text right

​
Product Components

Individual product card component displaying product information.Location: src/components/Product.jsxProps:
  • product (object) - Product data containing:
    • id - Product identifier
    • nombre - Product name
    • precio - Product price
    • stock - Available stock
    • imagen - Product image URL
Features:
  • Product image display
  • Name, price, and stock information
  • “Add to cart” button
  • “View details” link
  • Integrates with CartContext
Product gallery with search, pagination, and filtering.Location: src/components/ProductList.jsxFeatures:
  • Search input for filtering products
  • Paginated product display (5 items per page)
  • Bootstrap pagination controls
  • Smooth scroll to top on page change
  • Integrates with CartContext for product data
State Management:
  • Uses CartContext for productosFiltrados and busqueda
  • Local state for pagination
Shopping cart drawer with purchase management.Location: src/components/Cart.jsxFeatures:
  • Slide-out cart drawer
  • Product quantity controls (+/-)
  • Individual item removal
  • Empty cart button
  • Total price calculation
  • Purchase confirmation with SweetAlert2
  • Integrates with CartContext
Cart Operations:
  • Increase/decrease quantity
  • Remove items
  • Clear cart
  • Finalize purchase

​
Form Components

See the dedicated Forms Documentation for detailed information about form components.

Formulario

Contact form component

FormularioProducto

Add new product form

FormularioEdicion

Edit existing product form

​
Other Components

Team member display component showing staff profiles.Location: src/components/Equipo.jsxProps:
  • equipo (array) - Array of team member objects containing:
    • nombre - Member name
    • rol - Member role/position
    • imagen - Profile photo URL
Layout: Responsive Bootstrap card grid
Demo component that fetches and displays users from an API.Location: src/components/ListaUsuarios.jsxFeatures:
  • Fetches data from JSONPlaceholder API
  • Loading state management
  • Error handling
  • Displays user name and website
API: https://jsonplaceholder.typicode.com/users
404 error page component.Location: src/components/NotFound.jsxFeatures:
  • Custom 404 error message
  • “Go back” button using React Router navigation
  • Friendly error messaging in Spanish

​
Layout Components

Located in ~/workspace/source/src/layout/, these components compose full page layouts.

Home

Main landing page layout

GaleriaProductos

Product gallery page layout

Admin

Administrative dashboard layout

DetallesProductos

Product details page layout

AcercaDe

About us page layout

Contacto

Contact page layout

Login

Login page layout

​
Home Layout

Location: src/layout/Home.jsx Composed Components:
  • Header
  • Main (hero section)
  • ProductList
  • Cart
  • Main2 (secondary content)
  • Footer
Features:
  • Loading state with animated GIF
  • Error handling with NotFound component
  • Uses CartContext for loading and error states

​
Galeria Layout

Location: src/layout/GaleriaProductos.jsx Composed Components:
  • Header
  • ProductList
  • Cart
  • Footer
Features:
  • Dedicated product browsing page
  • Loading state management
  • Full product catalog display

​
Admin Layout

Location: src/layout/Admin.jsx Composed Components:
  • FormularioProducto (conditional)
  • FormularioEdicion (conditional)
Features:
  • Product management dashboard
  • Add, edit, and delete products
  • Custom admin navigation
  • Logout functionality
  • Uses AdminContext for product operations
  • Modal-based forms for product management
The Admin layout requires authentication. It integrates with AuthContext to manage user authentication state.

​
Context Integration

Many components integrate with React Context for state management: 
// Used by: Header, Product, ProductList, Cart, Home, GaleriaProductos
import { CartContext } from '../context/CartContext';

const { 
  cart, 
  cartCount, 
  isCartOpen, 
  setCartOpen,
  handleAddToCart,
  productosFiltrados,
  busqueda,
  setBusqueda
} = useContext(CartContext);

​
File Structure

src/
├── components/
│   ├── Cart.jsx
│   ├── Equipo.jsx
│   ├── Footer.jsx
│   ├── Formulario.jsx
│   ├── FormularioEdicion.jsx
│   ├── FormularioProducto.jsx
│   ├── Header.jsx
│   ├── ListaUsuarios.jsx
│   ├── Main.jsx
│   ├── Main2.jsx
│   ├── NotFound.jsx
│   ├── Product.jsx
│   ├── ProductList.jsx
│   └── style/
│       ├── Footer.css
│       ├── Header.css
│       ├── Modal.css
│       ├── NotFound.css
│       └── Product.css
└── layout/
    ├── AcercaDe.jsx
    ├── Admin.jsx
    ├── Contacto.jsx
    ├── DetallesProductos.jsx
    ├── GaleriaProductos.jsx
    ├── Home.jsx
    ├── Login.jsx
    └── layoutMain.css

​
Next Steps

Layout Components

Detailed documentation for Header, Footer, and Main components

Form Components

Complete guide to form components and validation

Build docs developers (and LLMs) love

Get started for freeTalk to us