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

Поделиться
HTML-код
  • Опубликовано: 22 янв 2025

Комментарии • 69

  • @ШураБосс
    @ШураБосс 6 лет назад +14

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 лет назад

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

  • @yusufrahimov9160
    @yusufrahimov9160 Год назад

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

  • @ТатьянаЛ-л9э
    @ТатьянаЛ-л9э 3 года назад +1

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

  • @arsenghazaryan8101
    @arsenghazaryan8101 4 года назад

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

  • @RinatYouldashbaev
    @RinatYouldashbaev 4 года назад +1

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  4 года назад +1

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

    • @RinatYouldashbaev
      @RinatYouldashbaev 4 года назад

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

  • @hodooor7360
    @hodooor7360 2 года назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 года назад

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

    • @hodooor7360
      @hodooor7360 2 года назад

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

  • @stlyak
    @stlyak 3 года назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад

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

    • @stlyak
      @stlyak 3 года назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад +1

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

  • @gradusnikblea
    @gradusnikblea 4 года назад +2

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

  • @Kempriol
    @Kempriol 6 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 лет назад

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

  • @stlyak
    @stlyak 3 года назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад

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

    • @stlyak
      @stlyak 3 года назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 года назад +1

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

  • @sergeyaleksandrov6289
    @sergeyaleksandrov6289 5 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  5 лет назад

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

    • @sergeyaleksandrov6289
      @sergeyaleksandrov6289 5 лет назад

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

  • @bogdanshelomanov5668
    @bogdanshelomanov5668 6 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 лет назад

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

  • @bogdanshelomanov5668
    @bogdanshelomanov5668 6 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 лет назад

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

  • @maxfrost7344
    @maxfrost7344 5 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  5 лет назад +1

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

  • @bogdanshelomanov5668
    @bogdanshelomanov5668 6 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 лет назад

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

    • @bogdanshelomanov5668
      @bogdanshelomanov5668 6 лет назад

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

    • @bogdanshelomanov5668
      @bogdanshelomanov5668 6 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 лет назад

      Верно

  • @YuriiKratser
    @YuriiKratser 6 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 лет назад +5

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

  • @timmy1752
    @timmy1752 5 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  5 лет назад +1

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

    • @timmy1752
      @timmy1752 5 лет назад

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

  • @TORREScs
    @TORREScs 5 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  5 лет назад

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

    • @TORREScs
      @TORREScs 5 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  5 лет назад

      Спасибо!

  • @MatthewBellam
    @MatthewBellam 6 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 лет назад

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

  • @YuriiKratser
    @YuriiKratser 6 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 лет назад

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

    • @YuriiKratser
      @YuriiKratser 6 лет назад +2

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

    • @YuriiKratser
      @YuriiKratser 6 лет назад

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

  • @p_levin
    @p_levin 6 лет назад +1

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 лет назад +1

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

  • @iGotton
    @iGotton 5 лет назад

    +

  • @MatthewBellam
    @MatthewBellam 6 лет назад

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

    • @YauhenKavalchuk
      @YauhenKavalchuk  6 лет назад

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

    • @АлМ-ы8ъ
      @АлМ-ы8ъ 6 лет назад

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