menu de comida en react

2 min read 17-10-2024

En este artículo, exploraremos cómo crear un menú de comida utilizando React, una de las bibliotecas más populares para construir interfaces de usuario. A medida que avanzamos, aprenderás a estructurar tus componentes y a gestionar el estado de la aplicación para mostrar un menú interactivo.

¿Qué es React?

React es una biblioteca de JavaScript para construir interfaces de usuario. Permite crear componentes reutilizables que facilitan la construcción de aplicaciones web dinámicas y eficientes. Su enfoque basado en componentes y el manejo del estado hacen que sea una opción ideal para proyectos como un menú de comida.

Estructura del Proyecto

Antes de empezar a codificar, asegúrate de tener configurado un entorno de React. Puedes utilizar Create React App para configurar un nuevo proyecto rápidamente:

npx create-react-app menu-de-comida
cd menu-de-comida
npm start

Componentes del Menú

Para nuestro menú de comida, podemos dividir la aplicación en varios componentes:

Menu: Componente principal que renderiza el menú.
MenuItem: Componente que representa un elemento del menú.
Cart: Componente que muestra los artículos seleccionados.

Ejemplo de Código

A continuación, se muestra un ejemplo básico de cómo implementar estos componentes.

Componente Menu

// Menu.js
import React, { useState } from 'react';
import MenuItem from './MenuItem';

const Menu = () => {
    const [cart, setCart] = useState([]);

    const items = [
        { id: 1, name: 'Pizza', price: 10 },
        { id: 2, name: 'Hamburguesa', price: 8 },
        { id: 3, name: 'Ensalada', price: 5 },
    ];

    const addToCart = (item) => {
        setCart([...cart, item]);
    };

    return (
        <div>
            <h1>Menú de Comida</h1>
            <div>
                {items.map(item => (
                    <MenuItem key={item.id} item={item} addToCart={addToCart} />
                ))}
            </div>
            <Cart cart={cart} />
        </div>
    );
};

export default Menu;

Componente MenuItem

// MenuItem.js
import React from 'react';

const MenuItem = ({ item, addToCart }) => {
    return (
        <div>
            <h2>{item.name}</h2>
            <p>Precio: ${item.price}</p>
            <button onClick={() => addToCart(item)}>Agregar al carrito</button>
        </div>
    );
};

export default MenuItem;

Componente Cart

// Cart.js
import React from 'react';

const Cart = ({ cart }) => {
    return (
        <div>
            <h2>Carrito</h2>
            {cart.length === 0 ? (
                <p>No hay artículos en el carrito.</p>
            ) : (
                <ul>
                    {cart.map((item, index) => (
                        <li key={index}>{item.name} - ${item.price}</li>
                    ))}
                </ul>
            )}
        </div>
    );
};

export default Cart;

Estilos CSS

Para mejorar la apariencia de nuestro menú, podemos agregar un poco de estilo. Crea un archivo CSS y aplica estilos a tus componentes. Por ejemplo:

/* styles.css */
h1, h2 {
    font-family: 'Arial', sans-serif;
}

button {
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

Conclusión

Crear un menú de comida en React es una excelente manera de practicar tus habilidades con esta poderosa biblioteca. En este artículo, cubrimos la estructura básica y la funcionalidad de un menú interactivo. Puedes expandir este proyecto agregando características como un sistema de autenticación, un sistema de pagos o incluso integraciones con APIs de alimentos.

¡Ahora es tu turno de experimentar y crear tu propio menú de comida en React!