Zde je návod na useState (nebo téměř)

Kdykoli někdo na React narazí poprvé, je zaskočen jeho háčky a funkcemi, že? Sám se bojím některých háčků a kvůli některým jsem šel spát několikrát s pláčem.

Ale buďte si jisti, že alespoň useState I se vás mohu pokusit naučit jednoduchým způsobem, jako byste byli poprvé na základní škole.

V Reactu máme několik háčků a jedním z nich je useState, toto je pro mě nejjednodušší na pochopení a použití, tak se pojďme podívat, jak to funguje.

Vytvoření a spuštění useState

Co je useState? useState je háček React, který vrací pole se dvěma prvky, z nichž první je náš stav a druhý funkce pro změnu našeho stavu. Také můžeme projít jako argument, výchozí stav pro náš stav. Ještě nerozumíte? Uklidni se, vysvětlím ti to. Viz příklad níže:

import { useState } from "react";

export default function Component() {
  const [state, setState] = useState(0);

Zde máme state což je stav, setState což je funkce pro změnu hodnoty našeho stavu a useState(0) což je počáteční hodnota našeho stavu, v tomto případě je to 0 (může to být jakákoli jiná hodnota, například řetězec a logická ).

Použití useState v praxi

Abychom lépe pochopili, jak useState funguje, musíme mu porozumět i v praxi. A k tomu ukážu příklad useState k vytvoření jednoduchého čítače.

import { useState } from "react";

export default function Component() {
  const [counter, setCounter] = useState(0);

  function addCounter() {
    setCounter(counter + 1);
  }

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={addCounter}>Adicionar</button>
    </div>
  );
}

na řádku 4 máme příklad stavu, který přijímá počáteční hodnotu 0

const [counter, setCounter] = useState(0);

a funkce těsně pod na řádku 6, která připojí 1 do našeho stavu při každém kliknutí na tlačítko

function addCounter() {
    setCounter(counter + 1);
  }

pro zobrazení stavu na obrazovce stačí přidat {} ve vašem HTML se stavem uvnitř, v příkladu je to h1 (řádek 12).

<h1>{counter}</h1>

Dvojitým kliknutím na tlačítko se náš stav automaticky zobrazí na stránce s číslem 2 , díky naší malé funkci zvané addCounter kteří přidali 2krát.

DOKÁŽELI JSME TO, WOW! vytvořili jsme super jednoduchý a funkční malý pult s useState ! Teď už jen procvičovat s dalšími příklady a jsem si jistý, že vám to půjde skvěle! ❤️