РЕАЛЬНОЕ WEB ПРИЛОЖЕНИЕ С НУЛЯ: react, hooks, redux, redux-saga, material-ui.
Пишем приложение: react, hooks, redux, redux-saga, material-ui.
✅Cсылки из видео:
API:
JOBS - 5f7998dbe402340016f9321f.mock...
PROVIDERS - 5f7998dbe402340016f9321f.mock...
Скачать Nodejs (npm идет месте с ним): nodejs.org/en/
Create-react-app: create-react-app.dev/docs/get...
Скринкаст Redux: egghead.io/courses/getting-st...
Redux-dev-tools: chrome.google.com/webstore/de...
Код готового приложения: github.com/maks1mp/react_redu...
#react #redux #реакт #редакс
Пікірлер: 64
Спасибо за ваш труд! Одно удовольствие было повторять за вами;) лайк и жду подобные видео)
@user-vv6jx8qg4v
2 жыл бұрын
Не жди ищи работу
Много интересных фишек!!! Рад, что наткнулся на это видео!
Пожалуйста, не останавливайся 👍👍👍
Очень познавательный ролик,узнал много нового хоть и давно кручусь в этой теме,спасибо!!!Буду рекомендовать всем знакомым¡
Красавчик отвечаю, молодец. От души спасибо
Спасибо бро, отличный пример. Смотрю в 22 году. Мало воды, много практики. Конечно некоторые вещи тяжко даются, но основа мощная. Продвигай дальше свои ролики. отлично получилось
Привет, спасибо за видео, делай пожалуйста побольше проектов по реакту это очень полезная и актуальная информация.
Спасибо за видео!
Очень крутой практический пример
Отлично , хорошее объяснение.
Супер Спасибо за видео!
@wisejs
2 жыл бұрын
Спасибо за комментарий)
однозначно лайк и в закладки - на вызодных выделю время и от корки до корки- заранее спс
жду новых уроков)
ух в редаксе и навертел....
@andTutin
2 жыл бұрын
хрень полная. другой человек разбирайся потом, что там написано: названия экшонов склеиваются - расклеиваются, вычисляемые свойства объектов , вместо того, чтобы написать ручками больше на сотню символов, зато понятнее.
Привіт! Дякую за відос. Робив на днях code along по цьому відосу - майже все вийшло. Але через те що юзав React 18 та Mui v5 довелось помудохатись з версткою щоб все запрацювало(theme, імпорти, та інші назви бібліотек). Але загальна ідея була розібратись з redux-saga - з цим все супер! Було б цікаво подивитись щось новеньке від тебе в такому ж стилі. Мирного неба 🇺🇦
Привет. Спасибо за интересный разбор. Есть вопрос. На протяжении всего видео в консоли браузера у тебя выводится надпись "[HMR] Waiting for update signal from WDS...". Что означает данная надпись и как от неё избавиться?
@wisejs
3 жыл бұрын
Это Hot Module Replacement. Сейчас можно избавиться установив другую версию react-scripts. Как это сделать можете посмотреть здесь: github.com/facebook/create-react-app/issues/8153
привет а почему ты в некоторых местах очень сильно усложняешь материал ? В некоторых местах можно было бы написать более простой код .
А если мы делаем пост запрос, но на основании его ответа потом тоже диспатчим данные в стор, Сага в таком случае используется?
@wisejs
3 жыл бұрын
да, сага вообще используется для любых асинхронных действий
Здравствуйте, у меня возник вопрос. Моки нужно прописать в один из файлов? Если да, то в какой именно?
@wisejs
3 жыл бұрын
Здравствуйте! Ссылки на моки указаны в описании, их не нужно самому прописывать, мы их получаем через запрос.
После просмотре других уроков, того же Минина - тут как-то все очень своеобразно и мудрено сделано. Я лично ничего не понял, особенно создание API - мало объяснений что куда и откуда. Видно, что Автор сечет, но это видео пожалуй, не для новичков.
@wisejs
3 жыл бұрын
Да, это видео не для людей которые вчера узнали что такое React/Redux. Здесь я не рассказываю об основах, а предлагаю вариант организации кода для решения типичных проблем и дальнейшего развития проекта. Не очередной Hello World.
@user-mn2po8ns2z
2 жыл бұрын
@@wisejs как раз таки очередной hello world но типа не как лох, а на латыни, елементарно простая вещь, хотел потамагочить саги, но рилл пропадает желание, половину пропускаю ибо для меня эта ся штуковина не вновь, я уже работаю разрабом, но это рилл бесит, как ты усложняешь типа `${...}${...}` и нет это не сложно отдельно, но тип ты этого напихиваешь шоб показать шо у тебя яйцы хьюдж, а от тебя требовалось шоб ты внятненько показал как и чё, так что по делу те сё написано
@user-mn2po8ns2z
2 жыл бұрын
@@wisejs кст твой ник ну или название канала говорит о том, что ты любишь помудрить там где не надо
А для чего в зависимости useEffect, useCollback передавать dispatch? По докам react, насколько я понял, там должны быть изменяемые значения, и ничего не было сказано про функции.
@joky790
Жыл бұрын
useCollback будет вызывать коллбек переданной функции, если изменятся переданные в [ ] аргументы. Это нужно для того, чтобы не вызывать функцию на каждую перерисовку компонента, когда он вызывается в useEffect. Похоже работает хук useMemo, только передается не функция, а значение, которое меняется в зависимости от изменения переданных аргументов в [ ].
Не совсем понимаю зачем делать разный вид реализации в редюсерах? В одном через if, во втором через тернарный оператор и свойства объекта.
Привет, спасибо вам огромное за ваш труд. С какого то момента начала появлятся внезапно эта ошибка, и абсолютно без понятия как ее исправить. Есть мысли? Failed to compile. src\components\Employees\index.jsx Line 26:28: 'employee' is not defined no-undef Line 26:39: 'employee' is not defined no-undef src\components\common\Navigation.js Line 60:54: 'jobId' is not defined no-undef
@wisejs
3 жыл бұрын
Ошибка может быть в нескольких моментах, скорее всего просто забыли извлечь employee или опечатка. Можете сверится с кодом: github.com/maks1mp/react_redux_redux_saga_materialUI/blob/master/src/components/Employees/index.jsx
Ну почему не включён typescript
Придерживаетесь ли точки зрения , что редакс огромен и его невозможно типизировать до конца
@wisejs
2 жыл бұрын
Редакс не огромен. Огромным его делают люди, которые не умеют его использовать.
Do you have tutorials in english?
@markwahlberg9358
3 жыл бұрын
There are a lot of another tutorials in internet in English than in Russia, man
В чём польза создания *InitialState* через функцию? Почему сразу не создать объект?..
@wisejs
3 жыл бұрын
Бывают случаи, когда нужно что-то сделать перед созданием стейта. Например сгенерировать какие-то данные или что-то посчитать.
@victormog
3 жыл бұрын
@@wisejs Спасибо!
Побольше бы объяснений, кто - "за"?
@eroskaeroska6921
3 жыл бұрын
Не пойму, какой смысл без объяснений? Любой возьмет код и с бумажки, как ты, прочитает его. Какой смысл смотреть больше часа, ты с момента использования саги ничего не объясняешь? Смотреть, как ты код печатаешь? Чему можно научиться?
@wisejs
3 жыл бұрын
Спасибо за комментарий! Постараюсь объяснять более детально.
еще бы чуточку больший шрифт... не у всех большие мониторы. а так спасибо за урок!
@wisejs
2 жыл бұрын
Спасибо за комментарий! В новых видео шрифт больше 🙂
Что лучше saga или thunk? Почему?
@wisejs
2 жыл бұрын
Простой CRUD - thunk. Сложная логика - saga.
@atlasua2021
2 жыл бұрын
@@wisejs благодарю) кратко, разумно, понятно!
Небольшой фейл, все пакеты устанавливались не в ту директорию, в зависимостях проекта пусто
Меньше кода и более гибкая, но нихуя не читабельная
@wisejs
3 жыл бұрын
Что именно вас так смущает?
Toolkit toolkit toolkit toolkit toolkit сделайте видео про тулкит. Это более продвинутый способ работы редаксом. Интересно это видеть в связке redux,+saga,+ react. В идеале, ещё styled components . Это тоже, более удобный и продвинутый способ работы со стилями.
Ошибка есть при клике на навигацию Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: reactjs.org/link/strict-mode-find-node at div at Transition (localhost:3000/static/js/bundle.js:64220:30) at Fade (localhost:3000/static/js/bundle.js:4749:24) at Backdrop (localhost:3000/static/js/bundle.js:2624:24) at WithStyles (localhost:3000/static/js/bundle.js:14399:31) at div at Portal (localhost:3000/static/js/bundle.js:7687:24) at Modal (localhost:3000/static/js/bundle.js:6830:78) at Drawer (localhost:3000/static/js/bundle.js:4536:29) ... Как понимаю, это ошибка фреймворка material-ui? У нас в коде нет использования аттр ref.
material-ui убрали русский язык для документации. оперативно.
я крч уйх забил и решил взять ево апи и нахерачить всё сам с документации разобраться проще, чем этого мудреца слушать, замудренного мудреца заумновича
Мм типо позиционируешь что это крутое настоящее приложение, при этом часть решений в реальной жизни так не делается, при этом это не для новичков..тогда нах такой контент нужен, мне кажется это очередной высер
@wisejs
3 жыл бұрын
Что именно в реальной жизни так не делается? Кто сказал что нужно все делать для новичков?
@user-li7ce3fc3z
3 жыл бұрын
@@wisejs ну для кого этот контент? Если человек поработал пол года реакт разработчиком в команде, ему подобные видео наф не нужны, он сам решение любое придумает, такие видео могут искать только по запросу saga, что бы ее лучше понять например.. ну а смотреть реально такое только новички будут, а им от этого видоса тоже толку мало будет, потом в команде за подобные решения могут по рукам надавать)) короче хз
@wisejs
3 жыл бұрын
@@user-li7ce3fc3z за какие конкретно решения?
@wisejs
3 жыл бұрын
@@user-li7ce3fc3z а вот по поводу пол года на реакте, не напишет. А видео показывает что-то немного сложнее чем туду-лист с примером адекватных переиспользуемых решений.
@Wisejs Frontend вот вам идея для нового видео! Сделать просто, а подтягивать просмотры можно коротким упоминанием в каждом новом видео. За свое длительное время обучения js, я ни разу не встречал на пути видео о плагинах для vs coda. Речь о: 1. Prettier Поможет писать код быстрее и правильнее. 2. EsLinter ещё один помощник улучшить код Джуна! *Расскажите о настройках этих плагинов. И их совместной работы. (Насколько я знаю, он только для типизации) Ну и конечно же, можно делать видео с типизацией и там использовать плагины. Пусть видео будут дольше, медленнее, зануднее но информативные!