Создайте простой счетчик с помощью React

В этом коротком уроке мы создадим очень простой пример счетчика в React, применив многие концепции и теорию, изложенные ранее.

Давайте для этого используем Codepen. Мы начинаем с разветвления пера шаблона React .

В Codepen нам не нужно импортировать React и ReactDOM, так как они уже добавлены в область видимости.

Мы показываем количество в div и добавляем несколько кнопок для увеличения этого количества:

const Button = ({ increment }) => {
  return +{increment}
}

const App = () => {
  let count = 0

  return (
    

      
      
      
      
      {count}
    
  )
}

ReactDOM.render(, document.getElementById('app'))

Давайте добавим функциональность, которая позволяет нам изменять количество, нажимая кнопки, добавляя функцию onClick prop:

const Button = ({ increment, onClickFunction }) => {
  const handleClick = () => {
    onClickFunction(increment)
  }
  return +{increment}
}

const App = () => {
  let count = 0

  const incrementCount = increment => {
    //TODO
  }

  return (
    

      
      
      
      
      {count}
    
  )
}

ReactDOM.render(, document.getElementById('app'))

Здесь каждый элемент кнопки имеет 2 реквизита: увеличение и Функция onClick (Один клик) . Мы создаем 4 разные кнопки с 4 значениями приращения: 1, 10, 100, 1000.

При нажатии кнопки в компоненте Button вызывается функция Счетчик приращений .

Эта функция должна увеличивать локальный счетчик. Как мы можем это сделать? Мы можем использовать крючки:

const { useState } = React

const Button = ({ increment, onClickFunction }) => {
  const handleClick = () => {
    onClickFunction(increment)
  }
  return +{increment}
}

const App = () => {
  const [count, setCount] = useState(0)

  const incrementCount = increment => {
    setCount(count + increment)
  }

  return (
    

      
      
      
      
      {count}
    
  )
}

ReactDOM.render(, document.getElementById('app'))

использование функции State() инициализирует переменную count значением 0 и предоставляет нам метод setCount() для обновления ее значения.

Мы используем оба в реализации метода incrementCount() , который вызывает setCount() обновление значения до существующего значения count плюс приращение, передаваемое каждым компонентом кнопки.

Полный пример кода можно посмотреть по адресу https://codepen.io/flaviocopes/pen/QzEQPR

Оригинал: “https://flaviocopes.com/react-example-counter/”