React JS #18 Роутер (React Router. Part I)

#YauhenK #webDev #React #Redux #ReactRouter
Всех приветствую в курсе «React JS».
В данном видео-курсе мы с вами рассмотрим базовые понятия библиотеки React JS. Научимся создавать свои компоненты приложения. Разберёмся, как подключается и как работает React Router и с его помощью напишем простое одностраничное приложение. А так же рассмотрим такой подход контроля данных в приложении, как Redux.
Дополнительные темы, которые мы рассмотрим:
Валидация пропсов с помощью библиотеки PropTypes
Работа с реальным API
Создание роутинга одностраничного приложения с помощью React Router
Работа с менеджером состояний Redux
✒ Репозиторий курса:
✔ GitHub: github.com/Yau...
✒ Полезные курсы на канале:
✔ ES6: • ES6
✒ Используемые ресурсы и инструменты:
✔ Atom (Редактор кода): atom.io/
✔ Create React App (рабочее окружение): github.com/fac...
✔ React Developer Tools (расширение для браузера): chrome.google....
✔ Redux Devtools (расширение для браузера): chrome.google....
✔ Redux Devtools (репозиторий): github.com/zal...
✔ Fake online REST API (моковый API): jsonplaceholde...
✔ Hacker News (ресурс): hn.algolia.com...
✔ Hacker News (описание API): hn.algolia.com...
✔ Redux-LocalStorage-Simple (репозиторий): www.npmjs.com/...
✒ Полезные ссылки:
✔ React (документация): reactjs.org/do...
✔ Redux (документация): redux.js.org/
✔ React анимации (документация): reactcommunity...
✔ Redux (документация): redux.js.org/
✔ React lifecycle methods +16.3 (ресурс со ссылками): projects.wojtek...
✔ React lifecycle methods less 16.3 (картинка): webjustify.com...
✔ React Transition Group (документация): reactcommunity...
✔ React Router (репозиторий): github.com/Rea...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R...
✒ Автор курса:
✔ KZbin: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenK...
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/Yau...
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/Yau...

[@yusufrahimov9160]

Спасибо за то, что вы делитесь своими знаниями и опытом в этом видеоуроке. 💡 Он был действительно вдохновляющим! 💪

[@YauhenKavalchuk]

Спасибо за поддержку

[@ШураБосс]

Спасибо вам огромное! Продолжайте в том же духе!

[@YauhenKavalchuk]

Спасибо, постараюсь!

[@HeyHey-ng8py]

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

[@YauhenKavalchuk]

Спасибо огромное за отзыв!

[@ГришаТкач-у5д]

Здравствуйте! У меня вопрос: при создании компонента Posts я использовал функциональный метод, не работало; зашел к Вам на репозиторий и там было через классы создание компонента Posts и все заработало. Не могли бы объяснить, почему нужно именно через классы Posts создавать?

[@YauhenKavalchuk]

Это не обязательно. Скорее всего это у вас в коде ошибка

[@TORREScs]

Здравствуйте! как нам в данном случае обернуть компонент App в провайдер чтобы получить доступ к стору, если компонент App уже обёрнут в БраузерРоутер

[@YauhenKavalchuk]

Просто оберните в провайдер. Проблем быть не должно

[@TORREScs]

@@YauhenKavalchuk Спасибо, всё получилось! и еще вопрос) у меня при клике на кнопку изменяется this.state.red из false в true и благодаря этому выполняется данное условие {this.state.red && }и происходит перенаправление на Login. Как сделать чтобы после этого state обратно становился в false. и кнопка обратно работала?

[@YuriiKratser]

Здравствуйте! Спасибо за урок! Как правельно записать название файла, чтобы перейти к уроку в гит git checkout 18_react-router

[@YauhenKavalchuk]

git checkout 18_router_1

[@YuriiKratser]

remotes/origin/02_components remotes/origin/03_state remotes/origin/04_props_1 remotes/origin/05_props_2 remotes/origin/06_events remotes/origin/07_conditional_rendering remotes/origin/08_lists remotes/origin/09_fragment remotes/origin/10_form remotes/origin/11_lifecycle remotes/origin/12_refs

[@Polite_person_]

Привет. Добавь пожалуйста хуки в курс для полноты картины. Спасибо.

[@YauhenKavalchuk]

Про хуки есть информация на канале, в react videocast. Не вижу смысла дублировать контент

[@vxarlanchuk]

Евгений, здравствуйте. К сожалению невозможно смотреть ваши видео начиная с 16 урока, поскольку вы реализуете некоторые компоненты за кадром и говорите, что весь код есть в репозитории, но его там нет.

[@YauhenKavalchuk]

Он там есть, перейдите в соответствующую уроку ветку

[@vxarlanchuk]

@@YauhenKavalchuk Спасибо, а то обидно стало пропускать ваши ролики из-за этого

[@YauhenKavalchuk]

Пожалуйста!

[@3bbiani]

К сожалению, ни в уроке про HOC, ни здесь не было указано, как устанавливать react-router. Глобально, я так понял, никак его не установить? Ругается, что не установлен react. ЗЫ. Шикарные уроки, устал уже говорить) Евгений молодец!

[@YauhenKavalchuk]

В описании под видео есть ссылка на GitHub репозиторий. Файл, который вам нужен - это package.json копируете его себе, из папки с проектом набираете команду npm i, и всё что нужно устанавливается автоматически

[@leandrmiklashevich297]

Яўген, ці можа вы ментарыце ў РСС?

[@YauhenKavalchuk]

Да, записался на 2-ю секцию)

[@leandrmiklashevich297]

@@YauhenKavalchuk о. мяркую камусці пашанцуе))

[@YauhenKavalchuk]

Возможно) А может и нет, ведь требовать буду много и поблажек не дам)

[@leandrmiklashevich297]

@@YauhenKavalchuk ну мне так падаецца. Бо вы намагаецеся патлумачыць і данесці думку. Вам не ўсё роўна. Гэтага бывае не хапае. Помню адзін студэнт казаў, што нічога акром адзнакі ад ментара не атрымліваў. Ні фідбэка, ні кодрэвью.

[@dymitrhryhoryeu9381]

@@leandrmiklashevich297 а можно узнать, что за курс?