Как создать простое приложение-счетчик в React

React — одна из самых популярных интерфейсных библиотек JavaScript. Многие компании используют React для разработки своих пользовательских интерфейсов, и он приобрел широкую популярность среди разработчиков.

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

Особенности приложения счетчика

В этом проекте вы собираетесь разработать приложение-счетчик со следующими функциями:

1. Кнопка увеличения количества: Это увеличит количество на единицу.
2. Кнопка уменьшения количества: Это уменьшит количество на единицу.
3. Кнопка сброса: Это установит счетчик на ноль.

Основные концепции React

Прежде чем двигаться дальше, вам нужно понять некоторые из этих основных концепций React, которые вы будете использовать в этом проекте:

1. Компоненты
   instagram viewer
   : Компоненты являются основными строительными блоками приложений React. Они содержат независимый повторно используемый код. Используя компоненты, вы можете разделить пользовательский интерфейс на отдельные части. Затем вы можете повторно использовать эти части и работать с ними независимо.
2. Состояние: В React вы можете использовать объект для хранения данных, представляющих состояние компонента. Это позволяет компонентам управлять своими данными и обновлять их. Состояние компонента определяет, как он отображается и ведет себя.
3. Функциональные компоненты: Функциональный компонент React — это просто функция JavaScript, которая принимает свойства в качестве аргумента и возвращает элемент React (JSX).
4. Реквизит: вы можете использовать свойства — сокращение от «свойства» — для передачи данных от родительского компонента к дочернему компоненту. Реквизиты — одна из неотъемлемых частей React, и вы можете использовать реквизит для выполнения нескольких операций в React.
5. Крючки: React Hooks — это встроенные функции которые позволяют вам управлять состоянием и другими функциями React, такими как методы жизненного цикла внутри функциональных компонентов. Они также могут помочь вам написать лаконичный и понятный код. Вскоре вы увидите, как можно управлять состоянием с помощью использовать состояние() крюк.

Код, используемый в этом проекте, доступен в Репозиторий GitHub и вы можете использовать его бесплатно по лицензии MIT.

Шаг 1: Настройка проекта

Откройте терминал и выполните следующую команду, чтобы начать:

npx создавать-реагировать-приложение реагировать-счетчик-приложение

Это будет создать новое реагирующее приложение, готовый к тому, чтобы вы начали создавать свой проект. Он сгенерирует структуру файловой системы с несколькими файлами и папками.

Выполните следующую команду в терминале, чтобы запустить сервер разработки:

нпм начинать

Эта команда должна открыть новую вкладку в вашем браузере, указывающую на http://localhost: 3000. Все изменения, которые вы будете вносить в проект, будут автоматически обновляться здесь.

Шаг 2: Создание скелета приложения счетчика

Открой источник/App.js файл и удалите весь код по умолчанию, который там присутствует. Теперь создайте скелет приложения, используя следующий код:

Импортировать Реагировать, {useState} от"реагировать";
функцияПриложение() {
константа [счетчик, setCount] = useState(0);
позволять инкрементколичество = () => {
// Чтобы добавить позже
 };
позволять декрементКоличество = () => {
// Чтобы добавить позже
 };
позволять resetCount = () => {
// Чтобы добавить позже
 }
возвращаться (
<дивclassName="приложение">
<п>Количество: {количество}п>
<дивclassName="кнопки">
див>
див>
);
}
экспортпо умолчанию Приложение;

Первый оператор импортирует использование состояния крючок из реагировать модуль. Используйте его для создания считать state и инициализируйте его значением 0. Вы можете изменить значение параметра считать используя setCount функция.

Вы будете использовать incrementCount, decrementCount, и resetCount функции позже для увеличения, уменьшения и сброса значения счетчика.

Вы можете заметить фигурные скобки { } вокруг переменной count в разметке. По сути, это позволяет синтаксическому анализатору JSX понять, что он должен обрабатывать содержимое внутри этих фигурных скобок как JavaScript.

Шаг 3: Добавление функциональности в приложение счетчика

Вам необходимо создать три кнопки для реализации функциональности приложения-счетчика: кнопку уменьшения счетчика, кнопку увеличения счетчика и кнопку сброса. Добавьте следующий код внутри кнопки раздел:

<Кнопказаголовок={"Уменьшение"} действие={уменьшение количества} />
<Кнопказаголовок={"Увеличение"} действие={incrementCount} />
<Кнопказаголовок={"Перезагрузить"} действие={resetCount} />

При нажатии на эти кнопки decrementCount, incrementCount, и resetCount функции будут работать. Обратите внимание, что вы передаете заголовок и действие реквизит от родителей Приложение компонент для ребенка Кнопка компонент.

Обновите эти функции в App.js файл со следующим кодом:

позволять инкрементколичество = () => {
 setCount (количество + 1);
};
позволять декрементКоличество = () => {
 setCount (количество - 1);
};
позволять resetCount = () => {
 установитьКоличество (0);
}

setCount функция обновит состояние считать.

Обратите внимание, что вы еще не создали компонент Button. Создать новый компоненты папка в источник каталог, а затем создайте новый файл с именем Кнопка.js. Рекомендуется хранить все компоненты в одной папке.

Добавьте следующий код в компоненты/Button.js файл:

Импортировать Реагировать от"реагировать";
функцияКнопка(реквизит) {
позволять {действие, заголовок} = реквизит;
возвращаться<кнопкапо щелчку={действие}>{заголовок}кнопка>;
}
экспортпо умолчанию Кнопка;

Кнопка компонент получает данные через реквизит. Затем функция разделяет эти реквизиты на отдельные переменные, используя их для заполнения возвращаемой разметки.

Код повторно использует этот компонент три раза для создания кнопок увеличения, уменьшения и сброса.

Наконец, импортируйте компонент Button в верхней части App.js страницу с помощью следующего кода:

Импортировать Кнопка от"./компоненты/Боттон";

Вот как будет выглядеть окончательный код в App.js файл:

Импортировать Реагировать, {useState} от"реагировать";
Импортировать Кнопка от"./компоненты/кнопка";
функцияПриложение() {
константа [счетчик, setCount] = useState(0);
позволять инкрементколичество = () => {
 setCount (количество + 1);
 };
позволять декрементКоличество = () => {
 setCount (количество - 1);
 };
позволять resetCount = () => {
 установитьКоличество (0);
 }
возвращаться (
<дивclassName="приложение">
<п>Количество: {количество}п>
<дивclassName="кнопки">
<Кнопказаголовок={"Уменьшение"} действие={уменьшение количества} />
<Кнопказаголовок={"Увеличение"} действие={incrementCount} />
<Кнопказаголовок={"Перезагрузить"} действие={resetCount} />
див>
див>
 );
}
экспортпо умолчанию Приложение;

Следуйте лучшим практикам реагирования

Вы можете писать код React по-разному, но важно структурировать его как можно чище. Это гарантирует, что вы сможете легко поддерживать его, и может помочь улучшить общую производительность вашего приложения.

Вы можете следовать нескольким практикам React, рекомендованным сообществом React, таким как избегание повторяющегося кода, написание тестов для каждого компонента React, использование деструктуризации объектов для реквизита и последующее присвоение имен соглашения.