ДЕНЬ 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
This media is not supported in your browser
VIEW IN TELEGRAM
ДЕНЬ 120
Наконец-то добился желаемого результата. Теперь количество товара отображается у конкретного продукта.
Было несколько ошибок по хранилищу. Не получалось взять конкретные значения по типу айдишника товара и прочей инфы. Ошибка заключалась в неправильной записи createSlice и Reducer. Так как .reducer используется для обратки действий в slicе, то его необходимо записывать в reducer
Пример:
На практике понял , что просто так через useSelector не получится взять из store данные массива. Для этого потребуется метод map
Наконец-то добился желаемого результата. Теперь количество товара отображается у конкретного продукта.
Было несколько ошибок по хранилищу. Не получалось взять конкретные значения по типу айдишника товара и прочей инфы. Ошибка заключалась в неправильной записи createSlice и Reducer. Так как .reducer используется для обратки действий в slicе, то его необходимо записывать в reducer
Пример:
export const store = configureStore({
reducer: {
products: productSlice.reducer
}
})На практике понял , что просто так через useSelector не получится взять из store данные массива. Для этого потребуется метод map
🔥1👨💻1
This media is not supported in your browser
VIEW IN TELEGRAM
ДЕНЬ 121
Сделал отображение компонента в зависимости от значения количества в store. + немного стилизировал компоненты
Сделал отображение компонента в зависимости от значения количества в store. + немного стилизировал компоненты
🔥5❤1👨💻1
This media is not supported in your browser
VIEW IN TELEGRAM
ДЕНЬ 122
Сделал открытие корзины и закрытие через кликание по кнопке или заднему фону.
Использовал порталы реакта для простоты создание наложения корзины.
По уму надо было сделать состояние рендера корзины через Redux или Context. Для быстроты сделал через пропсы, заодно больше разобрался в компонтах.
P.S: Потом конечно переделаю под Redux состояние
Сделал открытие корзины и закрытие через кликание по кнопке или заднему фону.
Использовал порталы реакта для простоты создание наложения корзины.
По уму надо было сделать состояние рендера корзины через Redux или Context. Для быстроты сделал через пропсы, заодно больше разобрался в компонтах.
P.S: Потом конечно переделаю под Redux состояние
🔥4👨💻1
This media is not supported in your browser
VIEW IN TELEGRAM
ДЕНЬ 123
Сделал функционал корзины, неполностью конечно еще есть над чем поработать.
Начал лучше понимать функционал Redux, ошибки были, но зачастую все фиксились через откалду с помощью консоли.
Сделал функционал корзины, неполностью конечно еще есть над чем поработать.
Начал лучше понимать функционал Redux, ошибки были, но зачастую все фиксились через откалду с помощью консоли.
🔥3👨💻1
ДЕНЬ 124
Добавил подсчёт количества товаров, а так же их сумму. Добавил отображения количества у каждого товара. Пробовал сделать отображения суммы у самих товаров, но не вышло. Изначально подсчитывало цену всех товаров, затем undefined, пробовал брать значения через пропсы и перемножать, но не получилось, также через useSelector брать значения, тоже бестолку. Есть идея попробовать сделать это в store
Добавил подсчёт количества товаров, а так же их сумму. Добавил отображения количества у каждого товара. Пробовал сделать отображения суммы у самих товаров, но не вышло. Изначально подсчитывало цену всех товаров, затем undefined, пробовал брать значения через пропсы и перемножать, но не получилось, также через useSelector брать значения, тоже бестолку. Есть идея попробовать сделать это в store
❤3👨💻2