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
