Реализация поиска YouTube в приложении React

Я собираюсь пройти через шаги, которые я предпринял, чтобы реализовать функцию поиска по API на YouTube и настроить базовый список видео и рендеринг видео. Если вы достаточно руководитель, чтобы разбираться в документации по API YouTube, вы можете найти ее здесь:

Https://developers.google.com/youtube/v3/docs/search

или следите за моим сообщением в блоге здесь:

Https://medium.com/@the_wong_code/starting-your-first-react-project-3737c63cf255

Давайте начнем!

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

Настройка

Если вы впервые создаете новое приложение для реагирования (или вы забыли, как я всегда это делаю), я рекомендую вам ознакомиться с документацией React для начала работы. Вы можете найти это здесь: (https://reactjs.org/docs/create-a-new-react-app.html)

Перейдите к своему ./src/App.js (это можно сделать и в вашем ./index.js файле, но я предпочитаю поместить все в свой ./App.js файл) и импортируйте библиотеку YTSearch, как показано ниже:

Затем в вашем терминале запустите npm install.

Затем в дереве файлов создайте папку components в папке src и создайте следующие файлы в ./src/components:

  • CurrentVideo.js
  • SearchBar.js
  • VideoList.js
  • VideoListCard.js

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

Вверху вашего App.js файла импортируйте SearchBar:

import SearchBar from './components/SearchBar'

Давайте создадим локальное состояние в нашем App компоненте, чтобы, когда мы вернем видео, у нас было куда их поместить, и мы импортируем SearchBar в наш возврат:

Но подождите, если наш SearchBar выполняет свою работу, как мы будем загружать наши возвращенные видео в родительский компонент?

Ответ: ЕЖЕДНЕВНО ДВОЙНОЙ!

Ой, неправильное шоу.

Ответ: мы передаем функцию в SearchBar, но наша функция будет жить в App.js, что позволит нам загружать наши видео в наше состояние и обрабатывать возврат на уровне App.js, а не застревать в компоненте SearchBar.js:

Далее нам нужно создать SearchBar. Этим мы займемся в следующем сообщении блога здесь.

Особая благодарность за помощь в блоге Набенду Бисвас, вы можете прочитать первую часть его блога из трех частей здесь: (https://medium.com/@nabendu82/create-youtube-player-in-reactjs-part -1-3b949de9b251 )