РЕАЛЬНОЕ 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-yb1oq2dh3c
    @user-yb1oq2dh3c3 жыл бұрын

    Спасибо за ваш труд! Одно удовольствие было повторять за вами;) лайк и жду подобные видео)

  • @user-vv6jx8qg4v

    @user-vv6jx8qg4v

    2 жыл бұрын

    Не жди ищи работу

  • @victormog
    @victormog3 жыл бұрын

    Много интересных фишек!!! Рад, что наткнулся на это видео!

  • @skynov
    @skynov3 жыл бұрын

    Пожалуйста, не останавливайся 👍👍👍

  • @romanlamer181
    @romanlamer1813 жыл бұрын

    Очень познавательный ролик,узнал много нового хоть и давно кручусь в этой теме,спасибо!!!Буду рекомендовать всем знакомым¡

  • @komilolimov8886
    @komilolimov88862 жыл бұрын

    Красавчик отвечаю, молодец. От души спасибо

  • @andreybalatsan9336
    @andreybalatsan9336 Жыл бұрын

    Спасибо бро, отличный пример. Смотрю в 22 году. Мало воды, много практики. Конечно некоторые вещи тяжко даются, но основа мощная. Продвигай дальше свои ролики. отлично получилось

  • @epic3386
    @epic33863 жыл бұрын

    Привет, спасибо за видео, делай пожалуйста побольше проектов по реакту это очень полезная и актуальная информация.

  • @joky790
    @joky790 Жыл бұрын

    Спасибо за видео!

  • @methodsUa
    @methodsUa3 жыл бұрын

    Очень крутой практический пример

  • @vlad-zf1ev
    @vlad-zf1ev2 жыл бұрын

    Отлично , хорошее объяснение.

  • @azizbekkomilov3589
    @azizbekkomilov35892 жыл бұрын

    Супер Спасибо за видео!

  • @wisejs

    @wisejs

    2 жыл бұрын

    Спасибо за комментарий)

  • @DiHandUkr
    @DiHandUkr3 жыл бұрын

    однозначно лайк и в закладки - на вызодных выделю время и от корки до корки- заранее спс

  • @frainnizil5279
    @frainnizil52793 жыл бұрын

    жду новых уроков)

  • @vl_rotche
    @vl_rotche3 жыл бұрын

    ух в редаксе и навертел....

  • @andTutin

    @andTutin

    2 жыл бұрын

    хрень полная. другой человек разбирайся потом, что там написано: названия экшонов склеиваются - расклеиваются, вычисляемые свойства объектов , вместо того, чтобы написать ручками больше на сотню символов, зато понятнее.

  • @SafetyLast-_-
    @SafetyLast-_- Жыл бұрын

    Привіт! Дякую за відос. Робив на днях code along по цьому відосу - майже все вийшло. Але через те що юзав React 18 та Mui v5 довелось помудохатись з версткою щоб все запрацювало(theme, імпорти, та інші назви бібліотек). Але загальна ідея була розібратись з redux-saga - з цим все супер! Було б цікаво подивитись щось новеньке від тебе в такому ж стилі. Мирного неба 🇺🇦

  • @semenov_real
    @semenov_real3 жыл бұрын

    Привет. Спасибо за интересный разбор. Есть вопрос. На протяжении всего видео в консоли браузера у тебя выводится надпись "[HMR] Waiting for update signal from WDS...". Что означает данная надпись и как от неё избавиться?

  • @wisejs

    @wisejs

    3 жыл бұрын

    Это Hot Module Replacement. Сейчас можно избавиться установив другую версию react-scripts. Как это сделать можете посмотреть здесь: github.com/facebook/create-react-app/issues/8153

  • @yakub8798
    @yakub8798 Жыл бұрын

    привет а почему ты в некоторых местах очень сильно усложняешь материал ? В некоторых местах можно было бы написать более простой код .

  • @andrewreidn8062
    @andrewreidn80623 жыл бұрын

    А если мы делаем пост запрос, но на основании его ответа потом тоже диспатчим данные в стор, Сага в таком случае используется?

  • @wisejs

    @wisejs

    3 жыл бұрын

    да, сага вообще используется для любых асинхронных действий

  • @ivanvinogradov5984
    @ivanvinogradov59843 жыл бұрын

    Здравствуйте, у меня возник вопрос. Моки нужно прописать в один из файлов? Если да, то в какой именно?

  • @wisejs

    @wisejs

    3 жыл бұрын

    Здравствуйте! Ссылки на моки указаны в описании, их не нужно самому прописывать, мы их получаем через запрос.

  • @ddrdeveloper
    @ddrdeveloper3 жыл бұрын

    После просмотре других уроков, того же Минина - тут как-то все очень своеобразно и мудрено сделано. Я лично ничего не понял, особенно создание API - мало объяснений что куда и откуда. Видно, что Автор сечет, но это видео пожалуй, не для новичков.

  • @wisejs

    @wisejs

    3 жыл бұрын

    Да, это видео не для людей которые вчера узнали что такое React/Redux. Здесь я не рассказываю об основах, а предлагаю вариант организации кода для решения типичных проблем и дальнейшего развития проекта. Не очередной Hello World.

  • @user-mn2po8ns2z

    @user-mn2po8ns2z

    2 жыл бұрын

    @@wisejs как раз таки очередной hello world но типа не как лох, а на латыни, елементарно простая вещь, хотел потамагочить саги, но рилл пропадает желание, половину пропускаю ибо для меня эта ся штуковина не вновь, я уже работаю разрабом, но это рилл бесит, как ты усложняешь типа `${...}${...}` и нет это не сложно отдельно, но тип ты этого напихиваешь шоб показать шо у тебя яйцы хьюдж, а от тебя требовалось шоб ты внятненько показал как и чё, так что по делу те сё написано

  • @user-mn2po8ns2z

    @user-mn2po8ns2z

    2 жыл бұрын

    @@wisejs кст твой ник ну или название канала говорит о том, что ты любишь помудрить там где не надо

  • @user-pl8bp5ot9y
    @user-pl8bp5ot9y2 жыл бұрын

    А для чего в зависимости useEffect, useCollback передавать dispatch? По докам react, насколько я понял, там должны быть изменяемые значения, и ничего не было сказано про функции.

  • @joky790

    @joky790

    Жыл бұрын

    useCollback будет вызывать коллбек переданной функции, если изменятся переданные в [ ] аргументы. Это нужно для того, чтобы не вызывать функцию на каждую перерисовку компонента, когда он вызывается в useEffect. Похоже работает хук useMemo, только передается не функция, а значение, которое меняется в зависимости от изменения переданных аргументов в [ ].

  • @holingdev1737
    @holingdev1737 Жыл бұрын

    Не совсем понимаю зачем делать разный вид реализации в редюсерах? В одном через if, во втором через тернарный оператор и свойства объекта.

  • @samuelfreedman8088
    @samuelfreedman80883 жыл бұрын

    Привет, спасибо вам огромное за ваш труд. С какого то момента начала появлятся внезапно эта ошибка, и абсолютно без понятия как ее исправить. Есть мысли? 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

    @wisejs

    3 жыл бұрын

    Ошибка может быть в нескольких моментах, скорее всего просто забыли извлечь employee или опечатка. Можете сверится с кодом: github.com/maks1mp/react_redux_redux_saga_materialUI/blob/master/src/components/Employees/index.jsx

  • @sgs1986g
    @sgs1986g2 жыл бұрын

    Ну почему не включён typescript

  • @indigosay
    @indigosay2 жыл бұрын

    Придерживаетесь ли точки зрения , что редакс огромен и его невозможно типизировать до конца

  • @wisejs

    @wisejs

    2 жыл бұрын

    Редакс не огромен. Огромным его делают люди, которые не умеют его использовать.

  • @lazzy_Dev
    @lazzy_Dev3 жыл бұрын

    Do you have tutorials in english?

  • @markwahlberg9358

    @markwahlberg9358

    3 жыл бұрын

    There are a lot of another tutorials in internet in English than in Russia, man

  • @victormog
    @victormog3 жыл бұрын

    В чём польза создания *InitialState* через функцию? Почему сразу не создать объект?..

  • @wisejs

    @wisejs

    3 жыл бұрын

    Бывают случаи, когда нужно что-то сделать перед созданием стейта. Например сгенерировать какие-то данные или что-то посчитать.

  • @victormog

    @victormog

    3 жыл бұрын

    @@wisejs Спасибо!

  • @eroskaeroska6921
    @eroskaeroska69213 жыл бұрын

    Побольше бы объяснений, кто - "за"?

  • @eroskaeroska6921

    @eroskaeroska6921

    3 жыл бұрын

    Не пойму, какой смысл без объяснений? Любой возьмет код и с бумажки, как ты, прочитает его. Какой смысл смотреть больше часа, ты с момента использования саги ничего не объясняешь? Смотреть, как ты код печатаешь? Чему можно научиться?

  • @wisejs

    @wisejs

    3 жыл бұрын

    Спасибо за комментарий! Постараюсь объяснять более детально.

  • @user-fq4pc7fm2z
    @user-fq4pc7fm2z2 жыл бұрын

    еще бы чуточку больший шрифт... не у всех большие мониторы. а так спасибо за урок!

  • @wisejs

    @wisejs

    2 жыл бұрын

    Спасибо за комментарий! В новых видео шрифт больше 🙂

  • @atlasua2021
    @atlasua20212 жыл бұрын

    Что лучше saga или thunk? Почему?

  • @wisejs

    @wisejs

    2 жыл бұрын

    Простой CRUD - thunk. Сложная логика - saga.

  • @atlasua2021

    @atlasua2021

    2 жыл бұрын

    @@wisejs благодарю) кратко, разумно, понятно!

  • @nexgenua
    @nexgenua3 жыл бұрын

    Небольшой фейл, все пакеты устанавливались не в ту директорию, в зависимостях проекта пусто

  • @user-ot7kh9fz3b
    @user-ot7kh9fz3b3 жыл бұрын

    Меньше кода и более гибкая, но нихуя не читабельная

  • @wisejs

    @wisejs

    3 жыл бұрын

    Что именно вас так смущает?

  • @vlad-zf1ev
    @vlad-zf1ev2 жыл бұрын

    Toolkit toolkit toolkit toolkit toolkit сделайте видео про тулкит. Это более продвинутый способ работы редаксом. Интересно это видеть в связке redux,+saga,+ react. В идеале, ещё styled components . Это тоже, более удобный и продвинутый способ работы со стилями.

  • @joky790
    @joky790 Жыл бұрын

    Ошибка есть при клике на навигацию 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.

  • @user-pl8bp5ot9y
    @user-pl8bp5ot9y2 жыл бұрын

    material-ui убрали русский язык для документации. оперативно.

  • @user-mn2po8ns2z
    @user-mn2po8ns2z2 жыл бұрын

    я крч уйх забил и решил взять ево апи и нахерачить всё сам с документации разобраться проще, чем этого мудреца слушать, замудренного мудреца заумновича

  • @user-li7ce3fc3z
    @user-li7ce3fc3z3 жыл бұрын

    Мм типо позиционируешь что это крутое настоящее приложение, при этом часть решений в реальной жизни так не делается, при этом это не для новичков..тогда нах такой контент нужен, мне кажется это очередной высер

  • @wisejs

    @wisejs

    3 жыл бұрын

    Что именно в реальной жизни так не делается? Кто сказал что нужно все делать для новичков?

  • @user-li7ce3fc3z

    @user-li7ce3fc3z

    3 жыл бұрын

    @@wisejs ну для кого этот контент? Если человек поработал пол года реакт разработчиком в команде, ему подобные видео наф не нужны, он сам решение любое придумает, такие видео могут искать только по запросу saga, что бы ее лучше понять например.. ну а смотреть реально такое только новички будут, а им от этого видоса тоже толку мало будет, потом в команде за подобные решения могут по рукам надавать)) короче хз

  • @wisejs

    @wisejs

    3 жыл бұрын

    @@user-li7ce3fc3z за какие конкретно решения?

  • @wisejs

    @wisejs

    3 жыл бұрын

    @@user-li7ce3fc3z а вот по поводу пол года на реакте, не напишет. А видео показывает что-то немного сложнее чем туду-лист с примером адекватных переиспользуемых решений.

  • @vlad-zf1ev
    @vlad-zf1ev2 жыл бұрын

    @Wisejs Frontend вот вам идея для нового видео! Сделать просто, а подтягивать просмотры можно коротким упоминанием в каждом новом видео. За свое длительное время обучения js, я ни разу не встречал на пути видео о плагинах для vs coda. Речь о: 1. Prettier Поможет писать код быстрее и правильнее. 2. EsLinter ещё один помощник улучшить код Джуна! *Расскажите о настройках этих плагинов. И их совместной работы. (Насколько я знаю, он только для типизации) Ну и конечно же, можно делать видео с типизацией и там использовать плагины. Пусть видео будут дольше, медленнее, зануднее но информативные!

Келесі