ДЕНЬ 107
Поменял немного интерфейс, теперь изначально предлагается создать новый расход, после чего меняется на форму, если отказаться от создания расхода, то перебрасывает на первоначальный блок. Из трудностей было только нормально это реализовать, с первого раза не получилось, так как с одного компонента перебрасывало на другой, что повлекло за собой создании кучи блоков и в итоге получалась рекурсия(2 видео).
+ сделал дополнение, если расходов нет в году, то появляется надпись "Расходов в этом году нет".
Код:https://github.com/Holman52/LearnReact
Поменял немного интерфейс, теперь изначально предлагается создать новый расход, после чего меняется на форму, если отказаться от создания расхода, то перебрасывает на первоначальный блок. Из трудностей было только нормально это реализовать, с первого раза не получилось, так как с одного компонента перебрасывало на другой, что повлекло за собой создании кучи блоков и в итоге получалась рекурсия(2 видео).
+ сделал дополнение, если расходов нет в году, то появляется надпись "Расходов в этом году нет".
Код:https://github.com/Holman52/LearnReact
👍3👨💻2
This media is not supported in your browser
VIEW IN TELEGRAM
ДЕНЬ 108
Закончил работу над этим проектом на react.
Сделал диаграмму, в которой отображаются расходы, совершенные в данном месяце. Все расходы в месяцах строятся относительно наибольшего месяца. Достаточно времени на это потратил, так как не получалось взять данные с одного массива и закинуть их во второй и связать это всё через дату.
Итак, в этом проекте реализовано:
1) Фильтрация расходов по годам
2) Создание нового расхода через форму
3) Диаграмма, строящаяся относительно наибольшего расхода
Закончил работу над этим проектом на react.
Сделал диаграмму, в которой отображаются расходы, совершенные в данном месяце. Все расходы в месяцах строятся относительно наибольшего месяца. Достаточно времени на это потратил, так как не получалось взять данные с одного массива и закинуть их во второй и связать это всё через дату.
Итак, в этом проекте реализовано:
1) Фильтрация расходов по годам
2) Создание нового расхода через форму
3) Диаграмма, строящаяся относительно наибольшего расхода
👨💻6🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
ДЕНЬ 109
Несколько дней изучал как лучше стилизовать объекты и подобрал удобный для себя метод, при котором не нужно придумывать каждому объекту свой уникальный класс. Изучил откладку и разобрался в типовых ошибках при разработке приложения, поработал с React DevTools и Breakpoints.
Решил закрепить базу React и создать ещё одно приложение, +- похожее на предыдущее, но чутка другой концепции.
Несколько дней изучал как лучше стилизовать объекты и подобрал удобный для себя метод, при котором не нужно придумывать каждому объекту свой уникальный класс. Изучил откладку и разобрался в типовых ошибках при разработке приложения, поработал с React DevTools и Breakpoints.
Решил закрепить базу React и создать ещё одно приложение, +- похожее на предыдущее, но чутка другой концепции.
👨💻6
This media is not supported in your browser
VIEW IN TELEGRAM
ДЕНЬ 110
Закончил делать приложение, добавил модальное окно с ошибкой, если пользователь не ввёл имя или некорректно ввёл возраст. Были некоторые траблы с появлением модального окна, а именно не получалось сделать нормальный рендер из-за базовых настроек браузера, поэтому необходимо было их убрать.
Код:https://github.com/Holman52/LearnReact/tree/secondProject
Закончил делать приложение, добавил модальное окно с ошибкой, если пользователь не ввёл имя или некорректно ввёл возраст. Были некоторые траблы с появлением модального окна, а именно не получалось сделать нормальный рендер из-за базовых настроек браузера, поэтому необходимо было их убрать.
Код:https://github.com/Holman52/LearnReact/tree/secondProject
👨💻5🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
ДЕНЬ 111
Приступил к новой практике, написал шаблон для этого, в дальнейшем буду записывать данные в локалку с помощью useEffect.
Также подключил sass вместо обычного module.css, буду пробовать постепенно scss изучать, посмотрел пару видосиков, удобная вещь, если знать как правильно пользоваться.
Заменил в старых проектах useState на useRef, также некоторые div на Fragment
Приступил к новой практике, написал шаблон для этого, в дальнейшем буду записывать данные в локалку с помощью useEffect.
Также подключил sass вместо обычного module.css, буду пробовать постепенно scss изучать, посмотрел пару видосиков, удобная вещь, если знать как правильно пользоваться.
Заменил в старых проектах useState на useRef, также некоторые div на Fragment
👨💻6
This media is not supported in your browser
VIEW IN TELEGRAM
ДЕНЬ 112
Начал юзать useEffect, используется когда нет необходимости рендерить весь компонент. Например, при выполнении побочных эффектов(перезагрузка страницы, обновление данных в инпутах и прочее).
Теперь при перезагрузке страницы не перекидывает на окно авторизации, так как ввод данных отображается в localStorage
P.S: Пытался реализовать это на ванильном JS в 36 дне, но не получилось
Начал юзать useEffect, используется когда нет необходимости рендерить весь компонент. Например, при выполнении побочных эффектов(перезагрузка страницы, обновление данных в инпутах и прочее).
Теперь при перезагрузке страницы не перекидывает на окно авторизации, так как ввод данных отображается в localStorage
P.S: Пытался реализовать это на ванильном JS в 36 дне, но не получилось
👨💻5❤3👏1
ДЕНЬ 113
Переписал немного состояния, объединил пару хуков состояния в один, а именно, email+ validation и password + validation, теперь это два useReducer. Функционал заключается в передаче нового состояния через despatchFn, которая передаёт значение в функцию вне компонента(например, statePassword).
Когда используется useReducer:
Хук useReducer в React используется для управления состоянием компонентов, особенно когда состояние становится сложным или когда необходимо управлять состоянием с помощью более сложной логики, чем простое обновление с помощью useState.
Переписал немного состояния, объединил пару хуков состояния в один, а именно, email+ validation и password + validation, теперь это два useReducer. Функционал заключается в передаче нового состояния через despatchFn, которая передаёт значение в функцию вне компонента(например, statePassword).
Когда используется useReducer:
👨💻5❤2🥰1
ДЕНЬ 114
Изменил структуру передачу данных от компонента к App при помощи Context вместо props в каждом компоненте. Изначально пробовал через Context API, но обновленное значение не передавалось, поэтому реализовал через хук useContext. По функционалу Context идентичен Redux.
Отличие Redux от Context:
• Если приложение небольшое и требует простого обмена данными между компонентами, Context API может быть достаточным.
• При работе с большим приложением, где требуется сложное управление состоянием, асинхронные действия и масштабируемость, то Redux будет более подходящим выбором.
В некоторых случаях можно комбинировать оба подхода в одном приложении, используя Context для передачи менее критичных данных и Redux для управления основным состоянием.
P.S: То что закомментировал это использование Context API.
Изменил структуру передачу данных от компонента к App при помощи Context вместо props в каждом компоненте. Изначально пробовал через Context API, но обновленное значение не передавалось, поэтому реализовал через хук useContext. По функционалу Context идентичен Redux.
Отличие Redux от Context:
• Если приложение небольшое и требует простого обмена данными между компонентами, Context API может быть достаточным.
• При работе с большим приложением, где требуется сложное управление состоянием, асинхронные действия и масштабируемость, то Redux будет более подходящим выбором.
В некоторых случаях можно комбинировать оба подхода в одном приложении, используя Context для передачи менее критичных данных и Redux для управления основным состоянием.
P.S: То что закомментировал это использование Context API.
👨💻6🔥3👍2👏1🤩1👾1
ДЕНЬ 115
Перенёс всю логику компонента App в отдельную функцию для удобства и простоты чтения кода, также изменил передачу некоторых состояний через Context вместо props.
Столкнулся с некоторыми трудностями в vs code. А именно, с компиляцией, vs code попросту не мог найти правильный путь импорта и прописать его. Сначало подумал, что ошибка на моей стороне, поэтому откатился к прошлому коммиту, но безуспешно. Нужно было просто заново создать компонент и поменять название.
Перенёс всю логику компонента App в отдельную функцию для удобства и простоты чтения кода, также изменил передачу некоторых состояний через Context вместо props.
Столкнулся с некоторыми трудностями в vs code. А именно, с компиляцией, vs code попросту не мог найти правильный путь импорта и прописать его. Сначало подумал, что ошибка на моей стороне, поэтому откатился к прошлому коммиту, но безуспешно. Нужно было просто заново создать компонент и поменять название.
👨💻3👍2👌1
ДЕНЬ 116
Продолжил делать проект, появилась идея создать маленький суши магазин с фильтрацией товаров, списком корзины.
Изменил немного рендер элементов(114 день), теперь будет рендериться компонент всего контента второй страницы, вместо трёх элементов.
Также если использовать стандартный HTML, то картинку можно вставить через тэг, указав лишь путь, но в React такое не прокатит, сначала нужно импортировать картинку, а только потом ее вставить
Продолжил делать проект, появилась идея создать маленький суши магазин с фильтрацией товаров, списком корзины.
Изменил немного рендер элементов(114 день), теперь будет рендериться компонент всего контента второй страницы, вместо трёх элементов.
Также если использовать стандартный HTML, то картинку можно вставить через тэг, указав лишь путь, но в React такое не прокатит, сначала нужно импортировать картинку, а только потом ее вставить
❤3👨💻3👍1
ДЕНЬ 117
Доделал верстку сайта, осталось функционал сделать. Сделал массив для отображения информации карточек с едой(фото, название, цена, рейтинг, время доставки). В дальнейшем данные массива рендерятся через метод map(делал подобное на 105 дне).
Изначально все картинки и иконки хранил в папке src, но это не лучший вариант, поэтому подсказали хранить в public(упрощает путь и не приходится импортировать изображения).
Из-за того что я импортировал картинку, а потом вставлял в тэг, то была ошибка. Но это фиксится, если убрать импорт и вставить в тэг путь к картинке
Доделал верстку сайта, осталось функционал сделать. Сделал массив для отображения информации карточек с едой(фото, название, цена, рейтинг, время доставки). В дальнейшем данные массива рендерятся через метод map(делал подобное на 105 дне).
Изначально все картинки и иконки хранил в папке src, но это не лучший вариант, поэтому подсказали хранить в public(упрощает путь и не приходится импортировать изображения).
Из-за того что я импортировал картинку, а потом вставлял в тэг, то была ошибка. Но это фиксится, если убрать импорт и вставить в тэг путь к картинке
👍3👨💻2
Поздравляю всех с 2025 годом. Всем успехов и хорошо отдохнуть. Удачи в новом году😉. С праздником❄️☃️
Контент будет в скором времени. Добавляю фичу с выбором количества товара, трудность лишь граммотно отрендерть компетентны(учитывая, что количество не может быть <= 0)
Контент будет в скором времени. Добавляю фичу с выбором количества товара, трудность лишь граммотно отрендерть компетентны(учитывая, что количество не может быть <= 0)
❤🔥3🎄2❤1
ДЕНЬ 118
В течение четырех дней пытался сделать счетчик с количеством товара при добавлении в корзину. Изначально делал это через обычный хук состояния, но потом понял, что мне придется брать значения состояния и рендерить компоненты в зависимости от значения состояния количества товаров.
Была идея закинуть это все через useContext, но это будет менее удобным и гибким, поэтому решил использовать Redux. Вот начиная с этого момента все пошло не очень гладко.
Сначала была проблема с зависимостями(первый скрин), весьма вероятно это случилось из-за этой команды: "npm audit —fix", которая меняет все зависимости. Была попытка исправить это через ручное изменение зависимостей(дописать в версиях start, build ,test: --openssl-legacy-provider), но не получилось. Откатить до коммита, но безуспешно.
В течение четырех дней пытался сделать счетчик с количеством товара при добавлении в корзину. Изначально делал это через обычный хук состояния, но потом понял, что мне придется брать значения состояния и рендерить компоненты в зависимости от значения состояния количества товаров.
Была идея закинуть это все через useContext, но это будет менее удобным и гибким, поэтому решил использовать Redux. Вот начиная с этого момента все пошло не очень гладко.
Сначала была проблема с зависимостями(первый скрин), весьма вероятно это случилось из-за этой команды: "npm audit —fix", которая меняет все зависимости. Была попытка исправить это через ручное изменение зависимостей(дописать в версиях start, build ,test: --openssl-legacy-provider), но не получилось. Откатить до коммита, но безуспешно.