In this video we will be creating a fully functional & fully responsive youtube clone single page application with react js, tailwind css & rapid api, we will use core concepts of react js such as jsx, components, props, state, lifecycle of components, conditional rendering, lists, keys & context api, we will build more complex logics in javascript to make our react application super interactive and good looking.
Recommended Videos:
⏩ Build & Google Search Clone - bit.ly/3P30F1X
⏩ Build Personal Portfolio Website - bit.ly/3DPjyQz
⭐ RU-vid API - rapidapi.com/Glavier/api/yout...
⭐ Rapid API - rapidapi.com/hub
📚 Materials/References:
GitHub Repository (give it a star ⭐): bit.ly/3ETUwBF
Gist: bit.ly/3U7m2Qq
Assets: bit.ly/3GE9rRN
Dependencies commands:
npm i @tailwindcss/line-clamp axios js-abbreviation-number react-player moment
npm i react-router-dom react-icons
Installed NPM Packages:
Axios - www.npmjs.com/package/axios-r...
React Player - www.npmjs.com/package/react-p...
JS Abbreviation Number - www.npmjs.com/package/js-abbr...
Moment - www.npmjs.com/package/moment
React Router DOM - www.npmjs.com/package/react-r...
React Icons - www.npmjs.com/package/react-i...
In this tutorial you’ll learn:
- React 18 and its latest features
- React functional components and their reusability
- React hooks and state management
- How to use Context API
- Rapid UI building with Tailwind CSS
- Mobile first responsive approach
- Fetching data from Rapid API
- Functional Programming through utility methods
- How to use Axios in react app
Follow me on 👇
🖼️ Instagram - bit.ly/3jIJqYc
😺 GitHub - bit.ly/3I6Qx6O
👇 Time Stamps
00:00:00 Intro & Project Demo
00:02:22 Project Setup
00:17:29 API Setup & Context API
00:33:44 Header
01:16:15 Left Category Section
01:43:38 Feed
02:11:24 Video Details
02:49:02 Search Result
03:19:38 Deploy
8 июл 2024
