Summary
Keywords
Full Transcript
In this video, we will see how to create a dynamic, responsive multi-page website using React 19. You'll learn how to use React Router DOM for seamless routing, fetch API data with Axios, implement search, filter, sort functionality, and manage user input with forms. Plus, we'll explore best practices for using React 19 to create efficient, user-friendly web applications. Whether you're upgrading from React 18 or starting fresh, this tutorial provides practical examples you can apply to real-life projects. Click here to buy India Best Hosting 👉 http://www.hostinger.com/thapa7 For Thapa Family 💥 Use the discount code THAPA7 to get Extra 10% OFF! --------------------------------------------------------- 💸 Get All My YouTube Videos' Source Code for just ₹249! Grab Now - https://thapatechnical.shop/source-code 🔥Get Source Code here for Free : https://www.thapatechnical.com/2024/09/build-responsive-multi-page-react-19.html 📺 Discover React.js History in Just 10 Minutes - https://youtu.be/MiK2bFqhg1U 📺 Watch the complete Playlist here : https://www.youtube.com/playlist?list=PLwGdqUZWnOp1Rab71vx2zMF6qpwGDB2Z1 ------------------------------------------------------------------------ 🚀 Boost Your Skills with these Pre-Requisite Videos: 🔗 Best HTML Course - https://youtu.be/5ccq_nLHneE 🔗 Best CSS Course - https://youtu.be/MSICFljRcb4 🔗 JavaScript Basics Course Part 1 - https://youtu.be/13gLB6hDHR8 🔗 JavaScript Advanced Course Part 2 - https://youtu.be/YwsOCN8woA8 ------------------------------------------------------------------------ 💸 Build Your Own E-commerce Website for Free! - https://www.thapatechnical.com/2024/03/build-complete-ecommerce-website-using.html ------------------------------------------------------------------------ ✌️ Join Us! 🚀 Become a Member: Unlock perks, free source code, and more Join Now : https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA/join 📷 Connect on Instagram: https://www.instagram.com/thapatechnical 🗨️ Join Our Discord Server: Hang out with fellow programmers Discord Link: https://discord.gg/MdScmCsua6 ------------------------------------------------------------------------ ⌛TIMELINE⏳ 0:00 - Introduction to Building a React 19 Website 0:10 - Why React 19 is Essential 0:20 - Home Page Overview 3:10 - Access the Source Code 4:45 - Creating the Contact Page 5:15 - Developing the Country Info Page 9:05 - Installing React, Axios, React Router DOM 14:05 - Upgrading from React 18 to React 19 16:15 - Setting Up Routes & Navbar 20:10 - Applying CSS Styling 23:10 - Implementing Routing in React 28:20 - Using Children Props for Layout 34:50 - Creating an Error Page in React 39:00 - Maximizing Value from This Video 40:30 - Building a Dynamic Navbar 45:30 - Styling the Navbar 49:50 - Creating the Hero Section 53:00 - How to Add Images in React 55:05 - Explaining Hero Section Styling 57:05 - Building the About Page 58:00 - Creating a JSON API for Country Data 59:30 - Continuing the About Page 1:04:30 - Importing JSON Data & Looping Through Cards 1:08:30 - Making the Home Page More Readable 1:10:40 - About Page Styling Explanation 1:14:05 - Building the Contact Page 1:20:00 - Contact Us for Online React Classes 1:25:20 - Developing the Footer Section 1:27:30 - JSON vs Object Data in React 1:29:00 - Showing Components Inside Mapping Logic 1:36:00 - Coding the Country Info Page 1:38:50 - Creating Axios Instance 1:43:00 - Fetching API Data with Axios 1:48:00 - Adding Loader State in React 1:50:30 - Looping Through State to Display Country Cards 2:00:30 - Optimizing Text Display for User Clarity 2:01:30 - Creating Dynamic Routes & Country Detail Pages 2:23:30 - Implementing Search & Filter Logic 2:38:10 - Adding Ascending & Descending Sorting Functionality 2:43:30 - Final Website Functionality Check 2:45:00 - Making the Navbar Responsive 2:51:00 - How to Host Your React Website Live for Free 2:55:55 - Paid Hosting Options for Your React Website
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
