ДЕНЬ 102
  Начал изучать обработку событий, использовал хуки useState, чтобы при нажатии на кнопку менялось содержание продукта. Пытался сделать формочку, но не получилось. Изначально React ругался на импорт, но в нём всё норм было, пытался чет менять постоянно, помогло только перезайти, так же не применяются стили к блокам, хотя в теории всё норм, может я слепой конечно

Код:https://github.com/Holman52/LearnReact

Ещё немного блендера

ДЕНЬ 103
Разместил некоторые файлы в папку ui, где находятся компоненты пользовательского интерфейса и в папку form, где находятся все компоненты связанные с формой. Поменял файлам расширение с js на jsx. Написал код, который выводит все данные в консоль, что вбивал пользователь в инпуты. Из проблем столкнулся с импортом файлов при распределение их по папкам, что-то постоянно менял, получился полный бред, пришлось откатывать версию до прошлого коммита и всё начинать заново. В итоге react сам настроил импорты.

ДЕНЬ 104
Изучил добавление двустороннего связывания и коммуникации компонентов наследник-родитель. Если до этого приходилось делать пропсы через родителя к наследнику, то теперь нужно наоборот, здесь уже пришлось несколько раз пересмотреть видос с курса. Зашёл в ютуб, нашел более подробное видео про подъём состояния, посмотрел для чего он нужен и как часто его приходиться использовать, пока до конца не понятно, надо побольше углубиться в эту тему.
Самостоятельно создал фильтрацию года через подъем состояния, пришлось долго посидеть, подумать, с горем пополам что-то получилось.
Заметил, что страница долго загружается, в среднем уходит секунд 10 чтобы прогрузить весь контент, хотя его не так уж и много.

Код:https://github.com/Holman52/LearnReact

Ещё немого верстки по макету
Макет: https://www.figma.com/design/IOKhpddIsh0piwGHivK7e6/Untitled?node-id=0-1&t=PL9pf0b0f10XLcQk-1

ДЕНЬ 105
Реализовал создание нового блока с товаром через инпуты. Слишком много времени потратил на это всё, сделал поднятие состояние уже из поднятого состояния, очень долго с этим мучался, поскольку не мог понять почему этот способ не рабоает, оказывается просто забыл прописать props в одном из компонентов👍.
Также осуществил перебор массива через .map(), теперь не приходится каждому блоку подвязывать компонент, а достаточно одного, который будет принимать каждое значение массива, довольно удобно.
Также не корректно работало отображение продукта при вводе в инпут, но там проблема была в реализации кнопки "изменить продукт"(день 102), которая обращался к данным из изначально созданного массива.
+ Почитал документацию про Redux и пару видео, он значительно упрощает работу с useState и не приходится делать "Поднятие состояние", что ну ооооочень упрощает работу и делает код менее запутанным. В последующим буду его изучать.

Код:https://github.com/Holman52/LearnReact

ДЕНЬ 106
Сделал отображение контента по выбору года, пришлось поломать голову как это сделать, изначально пытался вытащить с компонента где отображается дата(синий блок в оранжевой карточке), но нашёл способ полегче, а именно с массива, где вся информация(цена, дата, продукт) и взял оттуда только дату.
+ Теперь у каждого блока есть свой айди, заданный через атрибут key. Здесь он нужен, поскольку у нас список и у каждого элемента списка должен быть свой айдишник

ДЕНЬ 108
Закончил работу над этим проектом на react.
Сделал диаграмму, в которой отображаются расходы, совершенные в данном месяце. Все расходы в месяцах строятся относительно наибольшего месяца. Достаточно времени на это потратил, так как не получалось взять данные с одного массива и закинуть их во второй и связать это всё через дату.
Итак, в этом проекте реализовано:
1) Фильтрация расходов по годам
2) Создание нового расхода через форму
3) Диаграмма, строящаяся относительно наибольшего расхода

ДЕНЬ 109
Несколько дней изучал как лучше стилизовать объекты и подобрал удобный для себя метод, при котором не нужно придумывать каждому объекту свой уникальный класс. Изучил откладку и разобрался в типовых ошибках при разработке приложения, поработал с React DevTools и Breakpoints.
Решил закрепить базу React и создать ещё одно приложение, +- похожее на предыдущее, но чутка другой концепции.

ДЕНЬ 110
Закончил делать приложение, добавил модальное окно с ошибкой, если пользователь не ввёл имя или некорректно ввёл возраст. Были некоторые траблы с появлением модального окна, а именно не получалось сделать нормальный рендер из-за базовых настроек браузера, поэтому необходимо было их убрать.

Код:https://github.com/Holman52/LearnReact/tree/secondProject

ДЕНЬ 111
Приступил к новой практике, написал шаблон для этого, в дальнейшем буду записывать данные в локалку с помощью useEffect.
Также подключил sass вместо обычного module.css, буду пробовать постепенно scss изучать, посмотрел пару видосиков, удобная вещь, если знать как правильно пользоваться.
Заменил в старых проектах useState на useRef, также некоторые div на Fragment

ДЕНЬ 112
Начал юзать useEffect, используется когда нет необходимости рендерить весь компонент. Например, при выполнении побочных эффектов(перезагрузка страницы, обновление данных в инпутах и прочее).
Теперь при перезагрузке страницы не перекидывает на окно авторизации, так как ввод данных отображается в localStorage
P.S: Пытался реализовать это на ванильном JS в 36 дне, но не получилось

ДЕНЬ 113
Переписал немного состояния, объединил пару хуков состояния в один, а именно, email+ validation и password + validation, теперь это два useReducer. Функционал заключается в передаче нового состояния через despatchFn, которая передаёт значение в функцию вне компонента(например, statePassword).
Когда используется useReducer:
Хук useReducer в React используется для управления состоянием компонентов, особенно когда состояние становится сложным или когда необходимо управлять состоянием с помощью более сложной логики, чем простое обновление с помощью useState.