Browser Event Listeners in React for Search and Autocomplete
Learn how to manage and listen to browser event listeners in a React app. We'll walk through spinning up a Next.js app and working with a search autocomplete example to focus on the input on page load and navigate results with a keyboard.
Jamstack X Ecommerce Course Updates
https://colbyfayock.com/ecomm
🧐 What's inside?
00:00 - Intro to Browser Events in JavaScript
00:10 - What are browser events and dealing with them in React
00:57 - Starting a new project from a Next.js SWAPI search demo
02:32 - Reviewing demo project before diving in
03:45 - Using refs and the useEffect hook to focus on an input on page load
06:37 - Listening to keyboard events to trigger code
09:41 - Navigating autocomplete results using keyboard events
17:43 - Outro
🗒️ Read More
https://spacejelly.dev/posts/how-to-u...
🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]
👨🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/what-i-use
🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/zayner/falling
License code: GMFVUS2JCPFIQZLO
#colbyfayock #reactjs #browserevent #nextjs #search #webdevelopment
Смотрите видео Browser Event Listeners in React for Search and Autocomplete онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Colby Fayock 14 Июль 2021. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 4,579 раз и оно понравилось 172 посетителям.
