React JS #21 Приложение и Редакс модули (Application & Redux - modules)

#YauhenK #webDev #React #Redux #ReactRouter
Всех приветствую в курсе «React JS».
В данном видео-курсе мы с вами рассмотрим базовые понятия библиотеки React JS. Научимся создавать свои компоненты приложения. Разберёмся, как подключается и как работает React Router и с его помощью напишем простое одностраничное приложение. А так же рассмотрим такой подход контроля данных в приложении, как Redux.
Дополнительные темы, которые мы рассмотрим:
- Валидация пропсов с помощью библиотеки PropTypes
- Работа с реальным API
- Создание роутинга одностраничного приложения с помощью React Router
- Работа с менеджером состояний Redux
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/re...
✒ Полезные курсы на канале:
✔ ES6: • ES6
✒ Используемые ресурсы и инструменты:
✔ Atom (Редактор кода): atom.io/
✔ Create React App (рабочее окружение): github.com/facebook/create-re...
✔ React Developer Tools (расширение для браузера): chrome.google.com/webstore/de...
✔ Redux Devtools (расширение для браузера): chrome.google.com/webstore/de...
✔ Redux Devtools (репозиторий): github.com/zalmoxisus/redux-d...
✔ Fake online REST API (моковый API): jsonplaceholder.typicode.com/
✔ Hacker News (ресурс): hn.algolia.com/?query=&sort=b...
✔ Hacker News (описание API): hn.algolia.com/api
✔ Redux-LocalStorage-Simple (репозиторий): www.npmjs.com/package/redux-l...
✒ Полезные ссылки:
✔ React (документация): reactjs.org/docs/getting-star...
✔ Redux (документация): redux.js.org/
✔ React анимации (документация): reactcommunity.org/react-tran...
✔ Redux (документация): redux.js.org/
✔ React lifecycle methods +16.3 (ресурс со ссылками): projects.wojtekmaj.pl/react-li...
✔ React lifecycle methods less 16.3 (картинка): webjustify.com/wp-content/upl...
✔ React Transition Group (документация): reactcommunity.org/react-tran...
✔ React Router (репозиторий): github.com/ReactTraining/reac...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZbin: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

[@YuriiKratser]

Спасибо! Жду с нетерпением следующего урока.

[@YauhenKavalchuk]

Пожалуйста!)

[@dmitryivanov3200]

Огромное спасибо за твой труд!

[@oce10t12]

Спасибо, ждём ещё.

[@YauhenKavalchuk]

Пожалуйста, видео каждую неделю во вторник и пятницу.

[@user-wz1tn7fn4s]

Спасибо огромное, курс шикарен Хотелось бы попросить в курсе "components" разобрать такой компонент как форма.

[@YauhenKavalchuk]

Ох, саму форму разбирать смысла нету их очень много, они все разные и т.д. Однако, вы можете найти компонент Input и Button из которых эта самая форма собрана и имплементация которых в данном курсе рассмотрена

[@sashakobzev]

Ждём

[@YauhenKavalchuk]

В целом, там не очень много, но основы должны быть понятны

[@DirtyKalach]

для начала, спасибо за курс! Хотелось бы задать вопрос, все будет разбираться по компонентам или отдельные компоненты нужно брать с репозитория? а в видео последующих будет затронут только редакс?

[@YauhenKavalchuk]

Компоненты лучше брать из репозитория, т.к. в виде будет затронут только Redux

[@DirtyKalach]

@@YauhenKavalchuk Спасибо

[@valievruslan7739]

курс шикарен для бесплатного, наверно даже легко может с последним конкурировать ) только вот в redux пока не особо втираю (

[@YauhenKavalchuk]

В любом случае, спасибо!)

[@user-sl9gx7sl8f]

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

[@YauhenKavalchuk]

👍

[@artemkostylev6387]

Спасибо за видео , подскажите как делать редирект после success в redux-thunk?

[@YauhenKavalchuk]

stackoverflow.com/questions/43010228/how-to-use-redux-thunk-to-redirect-after-success-or-error

[@artemkostylev6387]

Yauhen Kavalchuk спасибо

[@YauhenKavalchuk]

Пожалуйста

[@user-qj2yg1rn3j]

т.е. подключение redux всегда одинаковое? можно копипастить из проекта в проект

[@YauhenKavalchuk]

Да

[@evgeniychip]

:)

[@DirtyKalach]

Добрый день, пишет, что createStore устарел, теперь нужно устанавливать configureStore from toolkit, но у нас configure задекларирована в коде ниже, как быть? просто изменить название константы? в общем, когда импортируешь configureStore from toolkit выдает синтаксическую ошибку, так как это название есть в константе

[@YauhenKavalchuk]

Вы можете установить в проект ту версию Redux, которая используется в курсе и никаких проблем не будет)

[@DirtyKalach]

@@YauhenKavalchuk спасибо, решил полблему, посмотрев доку toolkit )

[@iGotton]

+

[@FailedArchaeologist]

здраствуйте, курс по еще актуален

[@YauhenKavalchuk]

Актуален. После него, дополнительно можете посмотреть React видеокаст.

[@user-xd7vj5cf9f]

Добрый день! Евгений актуален ли сейчас на 22 год данный курс?

[@YauhenKavalchuk]

Актуален, в дополнение можете посмотреть плейлист “React видеокаст», там последние обновления

[@user-xd7vj5cf9f]

@@YauhenKavalchuk спасибо за ответ.

[@bogdanshelomanov5668]

а что такое PropTypes?

[@YauhenKavalchuk]

Посмотрите начальные уроки, там есть пояснение

[@user-lw3lc8yv4d]

А почему файл компонента с расширением jsx а не js?

[@YauhenKavalchuk]

Потому что это компонент, содержащий разметку JSX. Вообще однозначного ответа на то, какое расширение ставить нету. Я просто пишу, как привык.

[@b4bcat]

Я слышал два мнения на этот счет. Один человек говорил, что раз файл содержит разметку JSX, то поставив такое расширение мы ускорим быстродействие при разработке. По мнению другого, пишется расширение .jsx исключительно для разработчика, чтобы он быстрее понимал, что именно содержится в файле

[@denisp8849]

В репозитории курса нет актуального кода! Залит базовый пустой шаблон :(

[@YauhenKavalchuk]

В репозитории есть ветки, по которым нужно переходить

[@denisp8849]

Теперь разобрался, спасибо!

[@DenisKlymenko]

Странно, у меня иконки не отображаются

[@YauhenKavalchuk]

Откройте index.html и подключите шрифт иконок. В репозитории можете посмотреть эту строку)

[@SochnayaShaurma]

А в чем прикол давать ссылку на гитхаб, если там лежит код из create-react-app? А кода самих уроков там нет. За уроки спасибо. Материал короткий и понятный, то что нужно.

[@YauhenKavalchuk]

Прикол в том, что там есть ветки. И код каждого урока лежит в своей ветке!

[@Checnev]

Да почему, почему все примеры это ToDo ??? Я уже с закрытыми глазами могу писать эти todo, а с реальными примерами, взять банальный блог с статьями я просто застрял Как использовать react + redux + router? Например где загружать данные, в containers или components ? Список статей и 1 статья, это 1 или 2 разных умных компонента? У меня миллион вопросов, и я так надеялся найти здесь что-то, кроме todo лист

[@YauhenKavalchuk]

Потому что ToDo - это база, это весь сижу CRUD операций! А какие приложения, по вашему мнению, должны рассматриваться в курсах?

[@Checnev]

@@YauhenKavalchuk Например блог, тот же CRUD, но еще разбирается тема с роутингом и прочими трудностями, просто todo это на столько просто и базово + почти все примеры это todo, даже в документации везде todo )

[@danielocaballero1111]

ничего не понял

[@YauhenKavalchuk]

Пересмотрите ещё раз