Приложение React Counter, реализованное двумя методами: React Hook и useReducer
Большинство разработчиков внешнего интерфейса используют React, потому что это библиотека JavaScript для создания интерактивных пользовательских интерфейсов. Одной из причин создания приложения-счетчика является тот факт, что это служебное приложение, которое ведет подсчет значений и отображает общее значение. Наше приложение Counter будет иметь следующие функции:
я. Кнопка увеличения: она увеличит количество на единицу
ii. Кнопка уменьшения: это уменьшит количество на единицу
III. Кнопка сброса —установит счетчик на 0
iv. Кнопка «Установить значение»n – будет отображаться любое введенное значение
в. Поле ввода –для ввода значения
МЕТОД 1: СОЗДАНИЕ ПРИЛОЖЕНИЯ СЧЕТЧИКА С ИСПОЛЬЗОВАНИЕМ пользовательского хука
ШАГ 1. Создайте новое приложение React
npx create-react-app counter-app cd counter-app npm start
Мы создадим наше приложение счетчика, используя приведенную выше командную строку. npx — это средство запуска пакетов, которое поставляется с npm, что позволяет пользователям запускать любой пакет напрямую без установки.
Команда cd изменяет рабочий каталог на Counter .
Команда npm start открывает новую вкладку и запускает проект на локальном хосте http://localhost:3000.
ШАГ 2. Создайте компонент Custom Hook
import { useState } from "react";
export const useCounter = () => {
const [counter, setCounter] = useState(0);
const value = parseInt(counter);
const increment = () => {
return setCounter(value + 1);
};
const decrement = () => {
return setCounter(value - 1);
};
const reset = () => {
return setCounter(0);
};
const setCount = (val) => {
return setCounter(val);
};
return [increment, decrement, reset, setCount, counter];
};
Мы объявим начальное состояние счетчика с помощью useState. Мы бы установили начальное состояние на ноль и добавили бы функциональность в Increment, Decrement, Reset и setCount.
Пользовательские хуки — это многократно используемые функции, которые разработчик программного обеспечения React JS может использовать для добавления специальных и уникальных функций в приложения React.
ШАГ 3. Импортируйте компонент Custom Hook в компонент приложения
import React from "react";
import { useCounter } from "./customCounterHook";
export default function CounterApp() {
<div> Counter App </div>
}
Внутри файла src/App.js мы импортируем компонент Custom Hook, созданный на предыдущем шаге.
ШАГ 4. Импорт состояния и объявление состояния в приложении счетчика
import React from "react";
import { useCounter } from "./customCounterHook";
import { useState } from "react";
function CounterApp() {
const [inputVal, setInputVal] = useState(0);
const handleChange = (e) => {
setInputVal(e.target.value);
};
const [increment, decrement, reset, setCount, counter] = useCounter();
Мы объявим inputVal и setInputVal и установим их в useState (0), это будет содержать начальное значение отображения счетчика.
Мы устанавливаем SetInputVal для любого значения, введенного в поле ввода.
ШАГ 5: Добавьте кнопки и поле ввода
return (
<button onClick={increment}> + </button>
<button onClick={decrement}> - </button>
<button onClick={reset}> Reset </button>
<input
type="number"
aria-label="value"
onChange={handleChange}
value={inputVal}
/>
<button onClick={() => setCount(inputVal)}> Set value </button>
);
Следующим шагом является добавление кнопок и поля ввода, где мы можем ввести значение.
Свойство события onClick добавляет прослушиватель событий щелчка и делает кнопки функциональными.
ШАГ 6. Окончательный код
import React from "react";
import { useCounter } from "./customCounterHook";
import { useState } from "react";
function CounterApp(){
const [inputVal, setInputVal] = useState(0);
const handleChange = (e) => {
setInputVal(e.target.value);
};
const [increment, decrement, reset, setCount, counter] = useCounter();
return (
<button onClick={increment}> + </button>
<button onClick={decrement}> - </button>
<button onClick={reset}> Reset </button>
<input
type="number"
aria-label="value"
onChange={handleChange}
value={inputVal}
/>
<button onClick={() => setCount(inputVal)}> Set value </button>
);
}
export default CounterApp;
СПОСОБ 2: СОЗДАНИЕ ПРИЛОЖЕНИЯ СЧЕТЧИКА С ИСПОЛЬЗОВАНИЕМ useReducer
ШАГ 1: Создайте функцию-редуктор
export const reducer = (state, action) => {
switch (action.type) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
if (state > 0) {
return state - 1;
} else {
return 0;
}
case "RESET":
return 0;
case "SET VALUE":
return action.val;
default:
return state;
}
};
мы создадим компонент редуктора, в котором будет написана наша логика, чтобы сделать приложение функциональным. Здесь записывается логика увеличения, уменьшения, сброса и установки значения.
ШАГ 2: импортировать функцию редуктора и объявить состояние
import React, { useReducer, useState, useEffect } from "react";
import { reducer } from "./reducer";
function CounterApp(){
const initialValue = 0;
const [value, dispatch] = useReducer(reducer, initialValue);
return(
<div> counnterApp</div>
)
мы импортируем компонент редуктора в counterApp, чтобы передать функциональность приложению.
мы импортируем useReducer для возврата массива, содержащего текущее значение состояния, и функцию отправки, которой мы можем передать действие, а затем вызвать его.
мы будем импортировать useState для хранения переменных, которые являются частью состояния приложения и будут меняться по мере того, как пользователь взаимодействует с вашим сайтом. useEffect позволяет компонентам реагировать на события жизненного цикла, такие как монтирование в DOM, повторный рендеринг и размонтирование.
ШАГ 3: Добавьте кнопки
return (
<div>
<button
onClick={() => dispatch({ type: "INCREMENT" })}>
+
</button>
<button
onClick={() => dispatch({ type: "DECREMENT" }>
-
</button>
<button
onClick={() => dispatch({ type: "RESET" })}>
RESET
</button>
<input
id="value"
type="number"
aria-label="value"
value={newValue}
onChange={(e) => {
if (!isNaN(Number(e.target.value))) {
setNewValue(Number(e.target.value));
} else {
setNewValue(e.target.value);
}
}}
/>
<button
onClick={() => {
dispatch({
type: "SET VALUE",
val: newValue,
});
setNewValue("");
}}
>
SET VALUE
</button>
</div>
);
};
export default CounterApp;
Следующим шагом будет добавление кнопок и поля ввода. Свойство события onClick добавляет прослушиватель событий щелчка и делает кнопки функциональными.
Функция диспетчеризации позволяет обновить состояние до другого значения и запустить повторный рендеринг.
Шаг 4: Окончательный код
import React, { useReducer, useState, useEffect } from "react";
import { reducer } from "./reducer";
function CounterApp (){
const initialValue = 0;
const [value, dispatch] = useReducer(reducer, initialValue);
const [newValue, setNewValue] = useState("");
return (
<div className="counter">
<button
onClick={() => dispatch({ type: "INCREMENT" })}
>
+
</button>
<button
onClick={() => dispatch({ type: "DECREMENT" })}
>
-
</button>
<button
onClick={() => dispatch({ type: "RESET" })}
>
RESET
</button>
<input
id="value"
type="number"
aria-label="value"
value={newValue}
onChange={(e) => {
if (!isNaN(Number(e.target.value))) {
setNewValue(Number(e.target.value));
} else {
setNewValue(e.target.value);
}
}}
/>
<button
onClick={() => {
dispatch({
type: "SET VALUE",
val: newValue,
});
setNewValue("");
}}
>
SET VALUE
</button>
</div>
);
};
export default CounterApp;
Я надеюсь, что вы нашли эту статью полезной, и это почти все, что вам нужно знать для создания простого счетчика в React JS.
