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), но не получилось. Откатить до коммита, но безуспешно.
Решил полностью удалить node js и установить заново. Столкнулся с новой проблемой(второй скрин).Частая проблема при установке node js. Фиксится через PowerShell вот этой командой:
После произвел "npm update" и все проблемы исчезли и проект запустился.
Убрал старый код с useState и начал писать на Redux.
Впервые попробовал TypeScript для типизация данных. Не очень легко и не слишком сложно, но можно запутаться.
Также узнал, что useEffect и useReducer используется для управления внешними приложениями(например, Redux), чтобы передать новое значение в хранилище.
В целом счетчик получился, но работает немного ни как надо. Изменяет количество товара сразу у всех товаров, а нужно у одного, но вполне вероятно это связано из-за метода map(), но это уже совсем другая история)
Set-ExecutionPolicy Unrestricted -Scope CurrentUser
После произвел "npm update" и все проблемы исчезли и проект запустился.
Убрал старый код с useState и начал писать на Redux.
Впервые попробовал TypeScript для типизация данных. Не очень легко и не слишком сложно, но можно запутаться.
Также узнал, что useEffect и useReducer используется для управления внешними приложениями(например, Redux), чтобы передать новое значение в хранилище.
В целом счетчик получился, но работает немного ни как надо. Изменяет количество товара сразу у всех товаров, а нужно у одного, но вполне вероятно это связано из-за метода map(), но это уже совсем другая история)
👨💻5
This media is not supported in your browser
VIEW IN TELEGRAM
ДЕНЬ 119
После того как возникла ошибка, не нашёл решения как откатится до предыдущего коммита. Переписал немного функционал сделал всё через Reduix Toolkit, он попроще в плане синтаксиса в отличии от того, что было. В целом всё получилось сделать почитав документацию. Ошибки были, но всё фиксилось череp gpt.
Но всё же не получил желаемого результата. Хотел реализовать изменение количества товара в соответствующей карточке через айдишник продукта и пропсами прокинуть к импуту где изменяется число, не получилось.
Если у кого есть идеи как это можно реализовать, то комментарии приветствуются или чатик(в него можно вступить, если зайти в коммы)
После того как возникла ошибка, не нашёл решения как откатится до предыдущего коммита. Переписал немного функционал сделал всё через Reduix Toolkit, он попроще в плане синтаксиса в отличии от того, что было. В целом всё получилось сделать почитав документацию. Ошибки были, но всё фиксилось череp gpt.
Но всё же не получил желаемого результата. Хотел реализовать изменение количества товара в соответствующей карточке через айдишник продукта и пропсами прокинуть к импуту где изменяется число, не получилось.
Если у кого есть идеи как это можно реализовать, то комментарии приветствуются или чатик(в него можно вступить, если зайти в коммы)
👨💻2🔥1