React JS — 2 класс

Привет всем. Я создал этот форум на сайте dev.to, чтобы ответить на любые ваши вопросы, касающиеся курса, который я сейчас преподаю. Поскольку это публичный форум, пожалуйста, не сообщайте конфиденциальную информацию, такую как личные данные и т.д. Вы можете оставить свои комментарии под этим постом, и я с радостью отвечу на них как можно скорее.

Я выбрал dev.to, потому что помимо того, что он бесплатный, вы также сможете получить доступ ко многим сообщениям сообщества разработчиков, вы также можете писать здесь код или прикреплять изображения, чтобы задать свои вопросы.

Любые ваши предложения приветствуются 😊.

Вот компонент, который мы создали сегодня:

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;
Войдите в полноэкранный режим Выход из полноэкранного режима

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;
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Пока я говорил вам, что мы будем создавать репозиторий на github, мне пришло в голову, что мы можем посмотреть, как загрузить наш репозиторий в github на следующем занятии, поэтому мы сделаем это на следующей неделе.

Вот пример, который я сделал для счетчика электронной коммерции

Оцените статью
devanswers.ru
Добавить комментарий