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

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

[@user-hw2mo6ty2n]

Спасибо огромнейшее - это самый полный курс, который удалось найти. Рассматривается просто всё

[@YauhenKavalchuk]

Спасибо большое и вам за фидбэк!

[@yusufrahimov9160]

Большое спасибо за подробное объяснение каждого аспекта темы. 🙏 Этот видеоурок был невероятно полезным! 🤯

[@YauhenKavalchuk]

Пожалуйста

[@user-iz9is7wm9d]

спасибо за уроки, Вы молодец!

[@YauhenKavalchuk]

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

[@maxfrost7344]

Спасибо за видео. Есть вопрос: я вызываю из базы массив заголовков для табов, вызываю в дидмаунт, из за чего сначала происходит рендеринг страницы с пустым стэйт масивом, а после туда прописываются мои значения. НО проблема в том происходит это дергано, из за того что сначало рендериться пустой массив с дом деревом и стилями а после приходят мои данные, пытался вызывать запрос и в конструкторе (до рендоренга) ситуацию не изменило, что делаю не так? конечно можно положить прелоудер или не рендерить страницу пока не получу данные, но может есть какой то более привильный метод?

[@YauhenKavalchuk]

Нету. Вы назвали нормальные варианты. Ну ещё, как вариант задать табам min-width, тогда дёрганье не будет видно так сильно

[@YuriiKratser]

Спасибо за видео! а ты не мог бы пояснить почему ты пишешь const {hit=[]}=… имею ввиду зачем ты присваиваешь массив, видь hit и так массив?

[@YauhenKavalchuk]

Это дефолтное значение аргумента. Предположим, если произошёл сбой в запросе и вместо массива вернулся undefined, то весь UI развалится, а консоль будет пестрить красными цветами) - это если не добавить дефолтное значение. А вот если я добавляю {hit=[]} то даже в случае возврата undefined у меня просто ничего не отрендерится и UI не упадёт. Подробно можно это рассмотретьв плейлисте по "ES6"

[@yurigorsky3164]

Евгений, спасибо за очередной урок! Подскажите, пожалуйста, почему вы в названии классов css используете верблюжью нотацию? ( .newsList или .newsTitle) Разве не правильнее будет .news-list .news-title ? Или это какая-то особенность именно для разработки на React?

[@YauhenKavalchuk]

Имя класса не на что не влияет (это не особенность) просто на тот момент я писал в camelCase. Сейчас пишу стандартно, даже иногда БЭМ проскальзывает

[@yurigorsky3164]

@@YauhenKavalchuk Понял, спасибо! Кстати, на счёт БЭМ - я вот тоже пока изучаю реакт, думаю, что было бы очень удобно применить методологию БЭМ для компонентов. Используется ли микс React'а и BEM на реальных проектах?

[@YauhenKavalchuk]

Не рекомендую - это избыточно, т.к. есть модульный CSS, благодаря которому проблемы нейминга «уходят»

[@Kempriol]

А почему был использован fetch, а не, допустим, axios? чтобы не подключать лишних библиотек или есть какие-то подводные камни?

[@YauhenKavalchuk]

Сугубо, что бы не подключать лишнее.

[@gradusnikblea]

Все твои уроки очень полезные, но у всех не хватает просто показа курсора, т.к. часто сложно уловить о чем в коде ты говоришь

[@YauhenKavalchuk]

учту

[@bogdanshelomanov5668]

я к тому, что как вы сделали не реакт не ругается типо map undefined, но тогда мы ведь пролоадер не поставим?

[@YauhenKavalchuk]

А зачем преломлен ставить на отсутствующие данные. Его обычно забрасывают в цепочку проминов. Сделали запрос, показали прелоадер, получили данные, убрали прелоадер.

[@bogdanshelomanov5668]

а что значит const { hits = [] } = result??? я просто делал например let {hits} = result и ставил переменную load если массив пришел то она tru и мы рендерим то что пришло, как правильно делать?

[@YauhenKavalchuk]

Это дефолтное значение для hits, что бы не сломать map если мы получим ответ null или undefined.

[@yurigorsky3164]

Евгений, ещё такой вопрос: почему в setNews и fetchData используются не обычные методы, а стрелочные функции? В чем преимущество данного подхода? Мы ведь никуда не передаем эти методы и this будет что так, что так указывать на компонент.

[@YauhenKavalchuk]

Стрелочные функции - это уже по сути стандарт. Использовать нужно только их

[@yurigorsky3164]

@@YauhenKavalchuk Тогда почему методы жизненного цикла и render вы пишете как обычные методы, а не как функции-стрелки? Чтобы писать меньше кода/символов?

[@YauhenKavalchuk]

У них это не предполагает

[@RinatYouldashbaev]

Очень хорошо, спасибо, но не нашел ссылку на файлы для этого урока.

[@YauhenKavalchuk]

В описании есть ссылка на репозиторий, а в репозитории есть ветки

[@RinatYouldashbaev]

@@YauhenKavalchuk Нашел, благодарю!

[@iGotton]

+

[@hodooor7360]

Евгений, подскажите пожалуйста название ветки на которую нужно перейти? Все уже перечитал никак не могу найти. Скопировал репозиторий по вашей инструкции, но в какую ветку нужно перейти, чтобы получить файлы этого урока, так и не понял

[@YauhenKavalchuk]

Ветка называется: 16_api_1

[@hodooor7360]

@@YauhenKavalchuk Благодарю.

[@p_levin]

а в цикле vue такого не было :) , так и живем.

[@YauhenKavalchuk]

Не было. Возможно доснимаю продолжение)

[@timmy1752]

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

[@YauhenKavalchuk]

Там есть ветки. Включите нужную

[@timmy1752]

@@YauhenKavalchuk Благодарю!

[@arsenghazaryan8101]

Здравствуйте у меня не открывает этот сайт не получается что делать

[@MatthewBellam]

странная фигня, если ввести точное название новости но в выдаче пустые блоки joxi.net/1A5pzNKfDk1Rl2. это так api хакера работает или мы где то ошибку допустили ?

[@YauhenKavalchuk]

Не могу открыть вашу ссылку.

[@sergeyaleksandrov6289]

У меня какая-то проблема с fetch. Я не могу ни с сервера, ни локально получить JSON, пишет "SyntaxError: Unexpected token < in JSON at position 0"

[@YauhenKavalchuk]

Видимо, либо проблема в запросе - не верный url, либо в сервисе. Попробуйте проверит ресурс, если он работает нормально, то повторите запрос позже

[@sergeyaleksandrov6289]

@@YauhenKavalchuk Да, проблема была с сервисом, спасибо!)

[@TORREScs]

Подскажите где Ссылка на урок )уже пол часа ищу в описании)) что за дичь)))

[@YauhenKavalchuk]

О каком уроке идёт речь?

[@TORREScs]

@@YauhenKavalchuk про код урока) уже нашел) спасибо за быстрый ответ и за ваш контент!))) Все идеально объясняете)

[@YauhenKavalchuk]

Спасибо!

[@YuriiKratser]

Подскажите, а где ссылка на API ?

[@YauhenKavalchuk]

В описании к видео и в GitHub репозитории, так же в описании

[@YuriiKratser]

Подскажите, а у вас нет набраного когда? Ваша система придусматривает, что мы должны наберать за вами? Данный рипо пустой github.com/YauhenKavalchuk/react-js-tutorial

[@YuriiKratser]

@@YauhenKavalchuk спасибо, нашел

[@bogdanshelomanov5668]

а поиск тут сделан по url ведь, а не по самим данным, а как сделать поиск по данным, которые пришли?

[@YauhenKavalchuk]

Делаете метод для фильтрации. Введённое значение из поля поиска и массив полученных данных храните в стейте. Создаёте метод фильтрации в котором на основании поля фильтруете полученные данные и обновляете стейт. Компонент отобразит отфильтрованные значения. Но обычно, это все-таки задача API.

[@bogdanshelomanov5668]

@@YauhenKavalchuk тоесть бекенд должен приедоставить API , например www.имяСайта/путь/что то еще/ПЕРЕМЕННАЯ

[@bogdanshelomanov5668]

@@YauhenKavalchuk и это переменную нужно ловить из инпута?

[@YauhenKavalchuk]

Да, обычно так и происходит

[@YauhenKavalchuk]

Верно

[@MatthewBellam]

Сделайте уроки по вебпак. Этот трешаковый сборщик никак без нормального объяснения не дается мне

[@YauhenKavalchuk]

Буду старать, но приблизительный план на ближайшие уроки уже готов)

[@user-yg8nh2ek6w]

MatthewBellam, без знания английского в нем трудновато разобраться (поэтому вы и считаете что он "трешаковый"). Тем не менее в англоязычной документации описано практически все