MENU

Fun & Interesting

Build a React Router V7 Countries App | ReactJS, RRV7, TailwindCSS, Typescript

PedroTech 18,483 3 months ago
Video Not Working? Fix It Now

Get 20% off pro plans when learning with Scrimba: https://scrimba.com/?via=pedrotech Learn How to Build a React Router V7 Resume Ready App. In this tutorial, you'll create a fully responsive country explorer where you can filter and view detailed country data fetched directly from the REST Countries API. We cover everything from setting up dynamic routing and loaders to styling with Tailwind CSS—all while breaking down the fundamental features of React Router V7. Whether you're a beginner or looking to level up your skills, this video has you covered. Don't forget to like, subscribe, and hit the notification bell for more coding tutorials! Api link: restcountries.com Code: https://github.com/machadop1407/react-router-v7-project Want to Support Me? https://buymeacoffee.com/pedrow Join my newsletter: https://www.pedrotech.co/newsletter 🚀 Learn ReactJS By Building 6 Projects: https://codedamn.com/learn/reactjs-projects 🐙 GraphQL Course: https://codedamn.com/learn/graphql-for-beginners Social ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Website: https://www.pedrotech.co Linkedin: https://www.linkedin.com/in/machadop1407/ Instagram: https://www.instagram.com/pedro.fmachado_ Github: https://github.com/machadop1407 Business Email: [email protected] 🌟 Gear / Hardware I Use and Recommend 🌟 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 💻 https://amzn.to/42kqFuM 💻 Monitor 🖱️https://amzn.to/3C0ZhHb 🖱️ Mouse 📷 https://amzn.to/3OHJvbM 📷 My Camera 🎤 https://amzn.to/3oxSthj 🎤 My Microphone ⌨️ https://amzn.to/3oFPpj1 ⌨️ My Microphone ⚡ https://amzn.to/3MYMnzM ⚡ LED Lights In the Background Timestamps: 00:00 - 00:07 Introduction to Project 00:07 - 00:14 Overview of Features 00:14 - 00:20 Setting Up the Project 00:20 - 00:27 Installing React Router 01:23 - 01:29 Creating the App Folder 02:48 - 02:54 Understanding Folder Structure 04:05 - 04:10 Defining the Root Component 06:03 - 06:08 Creating Routes for Pages 09:19 - 09:26 Building the Navbar Component 12:05 - 12:13 Adding Tailwind CSS 16:14 - 16:20 Building the Home Component 24:05 - 24:11 Fetching Country Data 32:05 - 32:12 Displaying Country List 38:12 - 38:17 Adding Search Functionality 42:06 - 42:11 Handling No Results Found 51:31 - 51:38 Displaying Individual Country Data 55:00 - 55:08 Creating the About Page #reactjs

Comment