Lynx Tutorial – JS Framework for Cross Platform Development
702Lynx is a framework similar to React Native. In this course you will learn to build a game search application using Lynx, ByteDance's newly open-sourced cross-platform framework that delivers native performance with modern development practices. This comprehensive course guides you through setting up a Lynx project, implementing API integration, and mastering Lynx's unique dual-thread architecture for optimal performance. This tutorial provides an essential introduction to Lynx's UI components, state management with TanStack Query, and navigation implementation using React Router.
✏ ️ Course created by Brijen Makwana.
💻 Source Codehttps://github.com/BrijenMakwana/lynx-game-search..
❤ ️ Try interactive JavaScript courses we love, right in your browshttps://scrimba.com/freeCodeCamp-JavaScripta... (Made possible by a grant from our friends at Scrimba)
⭐ ️ Contents ⭐ ️
(0:00:00) Video Game Search Mobile App (Lynx)
(0:01:49) Initialize the project
(0:03:11) Setup Lynx Explorer App for the Testing
(0:05:08) Understand the Project Structure
(0:06:08) Setup Lynx Dev Tools
(0:07:56) Cleanup the Project
(0:10:17) GameCard Component
(0:15:25) GameCategory Component
(0:23:06) Intro to IGDB API
(0:24:55) Use Postman to test IGDB API
(0:29:12) Queries for Game Categories
(0:33:22) Setup Tanstack Query
(0:34:59) useGameQuery Custom Hook
(0:42:30) Fetch images from IGDB API
(0:45:10) Event Listeners in Lynx
(0:46:13) Setup React Router
(0:47:22) Add New Route for Game Details Screen
(0:57:59) useGame Custom hook
(1:05:57) Working on the Game Details Screen
(1:27:44) GameList Component
(1:29:51) Implementing Loader
(1:32:15) Add CSS Animations
(1:33:49) Run Code in the Main Thread because of the Dual Thread Architecture of Lynx
(1:38:54) useGameEvents Custom Hook
(1:41:29) GameEvents Component
(1:45:29) EventCard Component
(1:53:36) Add New Route for Game Event Screen
(1:56:49) useGameEvent Custom Hook
(2:00:46) Working on the Game Event Screen
(2:07:05) Add New Route for Game Search Screen
(2:12:32) Working on the Game Search Screen
(2:13:04) Handle Input in Lynx
(2:19:45) useSearch Custom Hook
(2:24:53) Display Games in Search Screen
(2:29:00) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 Drake Milly
👾 Ulises Moralez
👾 Goddard Tan
👾 David MG
👾 Matthew Springman
👾 Claudio
👾 Oscar R.
👾 jedi-or-sith
👾 Nattira Maneerat
👾 Justin Hual
--
Learn to code for free and get a develophttps://www.freecodecamp.org/camp.org
Read hundreds of articles on progrhttps://freecodecamp.org/newsorg/news