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

Этот проект не будет слишком сложным, но он будет очень простым и легким. Итак, давайте сделаем это приложение шаг за шагом.


Предварительные условия для создания трекера доходов в React

Базовые знания ReactJS.
Базовые знания CSS.
Базовые знания React props и хуков.
Хорошее знание компонентов React.


Настройка компонента приложения

Во-первых, мы внесем некоторые изменения в компонент App.js. Здесь мы импортировали необходимые компоненты, такие как React, Header, IncomeForm, IncomeList и хуки, которые помогут нам сделать этот проект. Мы определим компоненты Header, IncomeForm, IncomeList по мере продвижения в этом проекте.

Теперь в компоненте приложения мы создали два состояния: одно для дохода, а другое для общего дохода с начальными значениями null и 0 соответственно. После этого взамен мы сделали приложение

, в который мы добавили все компоненты с реквизитом. Здесь мы передали состояния в качестве свойств, потому что эти значения будут меняться по мере их ввода пользователем, и мы можем работать с обновленными значениями.Читать далее