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...
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-pr...
🐙 GraphQL Course: https://codedamn.com/learn/graphql-fo...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: https://www.pedrotech.co
Linkedin: / machadop1407
Instagram: / pedro.fmachado_
Github: https://github.com/machadop1407
Business Email: pedro@pedrotech.co
🌟 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
