Реализация поиска 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 )