React JS #17 Работа с реальным API (React: work with API. Part II)

#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...

[@MrBlackhard27]

Залип на Ваш курс)) лайки на все видосы! купил курс по реакту на udemy, т.к. надоел angularjs, но смотрю Ваши видео - более душевно сделано что ли. Так держать!

[@YauhenKavalchuk]

Спасибо огромно за душевный отзыв)!

[@yusufrahimov9160]

Этот урок был настолько хорошо структурированным, что я легко смог усвоить информацию. 🤓 Большое спасибо! 👍

[@YauhenKavalchuk]

Пожалуйста

[@user-hw2mo6ty2n]

Всё просто супер! Лайк под каждым видео!

[@YauhenKavalchuk]

Спасибо

[@YuriiKratser]

Как всегда получаю большое удоволствие от манеры вашего преподавания) Подскажите, а вы не планируете использовать в дальнейшем Material ui?

[@YauhenKavalchuk]

Спасибо большое! Честно говоря, нет, не планировал

[@MikAleinik]

Спасибо за вашу работу - очень доступным языком поясняете. У меня возник вопрос - по какой причине при запросах у вас происходи повтор предшествующего запроса? Например - 16:37 после нажатия на кнопку "1" в консоли к данным "0" страницы еще раз добавились они же и потом вывелись данные "1" страницы.

[@YuriiKratser]

Эх, было бы здорово код увидеть)

[@YauhenKavalchuk]

Код в GitHub репозитории в соответствующей ветке

[@user-vw2mk3il9w]

Жека, какой ноут посоветуешь для фронтендера? Каким пользуешься сам? Спасибо!

[@YauhenKavalchuk]

На канале в плейлисте Frontreview есть видео, которое называется: MackBook для Front-end разработчика. Я думаю, ответ очевиден для обоих вопросов)

[@iGotton]

+

[@user-wq2oq8st1u]

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

[@YauhenKavalchuk]

В каждом компоненте. Если эти данные ни чем не связаны. И для отрисовки страницы в любом случае нужно сделать 3 запроса, которые в 1 не объединить, то нет смысла всё хранить в родителе

[@user-wq2oq8st1u]

@@YauhenKavalchuk ясно, спасибо!

[@YauhenKavalchuk]

Пожалуйста!

[@user-vt2yx4hi7d]

Почему мы в методе handleHitsChange вызываем метод fetchData внутри setState? Мы могли его вызвать отдельно(после) setState?

[@antonkiryienka2862]

Не могли бы, без использования колбэка в стейте лежало бы предыдущее значение, т.к. setState работает асинхронно. Колбэк вызывается после обновления стейта, все есть в доках =)

[@YauhenKavalchuk]

Нельзя, нужно актуальное значение

[@user-vi1jf3xb3e]

@@YauhenKavalchuk колбек в setState это такая реализация component did update?

[@user-gt9uh9yt7n]

#webDev посмотрел ваш урок переписал код. Выдает ошибку при переходе на другие страницы. NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. Код сравнивал и копировал с репозитория ошибка остается.

[@YauhenKavalchuk]

Не получал я такую ошибку, поэтому в чём проблема с ходу сказать не могу. Попробуйте сделать сэндбокс и сбросьте ссылку, обязательно гляну и подскажу!

[@user-gt9uh9yt7n]

@@YauhenKavalchuk Большое спасибо за уроки. Все доступно и понятно. Проблему решил. Все из-за не внимательности, был подключен не тот css файл.

[@YauhenKavalchuk]

Хорошо что нашли проблему самостоятельно!

[@dimanazdratenko]

никогда больше не пиши + для преобразования в число. Number() для таких вещей есть -очевидно и прозрачно.

[@YauhenKavalchuk]

А есть боле весомый повод почему не стоит писать? В защиту "+" могу сказать что это тоже довольно очевидная и распространённая практика. А так же, это вроде как менее затратная операция, нежеле вызов функции. По крайней мере, когда учился я мне приводили именно эти доводы.

[@user-bh6mc8pd8g]

@@YauhenKavalchuk поддерживаю !

[@slolkunchik]

@@YauhenKavalchuk дефакто-стандарт вроде + )