Construisez un compteur simple avec React

Un exemple très simple de construction d'un compteur dans React

Dans ce court didacticiel, nous allons créer un exemple très simple de compteur dans React, en appliquant de nombreux concepts et théories décrits précédemment.

Utilisons Codepen pour cela. Nous commençons par bifurquer leStylo modèle React.

Dans Codepen, nous n'avons pas besoin d'importer React et ReactDOM car ils sont déjà ajoutés dans la portée.

Nous montrons le nombre dans un div, et nous ajoutons quelques boutons pour incrémenter ce nombre:

const Button = ({ increment }) => {
  return <button>+{increment}</button>
}

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

return ( <div> <Button increment={1} /> <Button increment={10} /> <Button increment={100} /> <Button increment={1000} /> <span>{count}</span> </div> ) }

ReactDOM.render(<App />, document.getElementById(‘app’))

Ajoutons la fonctionnalité qui nous permet de modifier le décompte en cliquant sur les boutons, en ajoutant unonClickFunctionsoutenir:

const Button = ({ increment, onClickFunction }) => {
  const handleClick = () => {
    onClickFunction(increment)
  }
  return <button onClick={handleClick}>+{increment}</button>
}

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

const incrementCount = increment => { //TODO }

return ( <div> <Button increment={1} onClickFunction={incrementCount} /> <Button increment={10} onClickFunction={incrementCount} /> <Button increment={100} onClickFunction={incrementCount} /> <Button increment={1000} onClickFunction={incrementCount} /> <span>{count}</span> </div> ) }

ReactDOM.render(<App />, document.getElementById(‘app’))

Ici, chaque élément Button a 2 accessoires:incrementetonClickFunction. Nous créons 4 boutons différents, avec 4 valeurs d'incrémentation: 1, 10 100, 1000.

Lorsque vous cliquez sur le bouton du composant Button, leincrementCountla fonction est appelée.

Cette fonction doit incrémenter le décompte local. Comment pouvons-nous faire cela? Nous pouvons utiliser des crochets:

const { useState } = React

const Button = ({ increment, onClickFunction }) => { const handleClick = () => { onClickFunction(increment) } return <button onClick={handleClick}>+{increment}</button> }

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

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

return ( <div> <Button increment={1} onClickFunction={incrementCount} /> <Button increment={10} onClickFunction={incrementCount} /> <Button increment={100} onClickFunction={incrementCount} /> <Button increment={1000} onClickFunction={incrementCount} /> <span>{count}</span> </div> ) }

ReactDOM.render(<App />, document.getElementById(‘app’))

useState()initialise la variable count à 0 et nous fournit lesetCount()méthode pour mettre à jour sa valeur.

Nous utilisons les deux dans leincrementCount()implémentation de méthode, qui appellesetCount()mise à jour de la valeur à la valeur existante decount, plus l'incrément passé par chaque composant Button.

The react counter

L'exemple de code complet peut être consulté à l'adressehttps://codepen.io/flaviocopes/pen/QzEQPR

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: