React JS - 클래스 2

안녕하세요. 할 일입니다. 그는 este foro en dev.to para atender las Consultas que puedan surgir honoro al curso que dicto actualmente를 작성했습니다. Debido a que es un foro público, por favor no compartan información sensible como datos personales, etc. Pueden dejarme sus comentarios debajo de esta publicación y con gusto les estaré respondiendo a la brevedad.

Elegí dev.to ya que más allá de ser gratuito, también podrán acceder a muchos post de la comunidad de desarrolladores, además podrán escribir código acá o adjuntar imágenes para realizar sus Consultas.

Cualquier sugerencia que tengan es bienvenida 😊

Les dejo el componente que creamos hoy:

Count.jsx

import React, { useState } from 'react';
import './styles/Count.css'

const Count = ({ initial, stock }) => {

    const [ count, setCount ] = useState(initial);

    const addCount = (num) => {
        console.log('Se ejecuta addCount');
        setCount(count + num);
    }

    return(
        <div className="count-container">

            <div className="count-container__count">{count}</div>

            <div className="count-container__controls">
                <button 
                    disabled={count===initial}
                    className="controls__button"
                    onClick={()=>{addCount(-1)}}               
                >
                    -
                </button>
                <button
                    disabled={count===stock} 
                    className="controls__button"
                    onClick={()=>{addCount(1)}}
                >
                    +
                </button>
            </div>

        </div>
    )
}

export default Count;

카운트.css

.count-container{

    width: 100%;
    min-height: 400px;
    text-align: center;

}

.count-container .count-container__count {
    font-size: 8rem;
}

.count-container .count-container__controls {

}

.count-container .count-container__controls .controls__button{
    font-size:4rem;
    padding:9px 12px;
    cursor: pointer;
}

Si bien les dije que vamos a crear un repositorio de github, se me ocurrió que podemos ver cómo subir nuestro repo en github para la siguiente clase, así que lo haremos la próxima semana.

Acá les dejor un ejemplo que hice para el contador de un e-Commerce