React Router 6 Tutorial | Shop UI Design in React using React Router for Beginners
10.2 هزار بار بازدید -
2 سال پیش
-
Learn to use latest React
Learn to use latest React Router in React JS by creating an app containing multiple pages, products and shop design. Learn React Router, creating routes, creating nested routes, creating error pages, creating dynamic routes, creating shop page with products and images, fetching data using react js hooks an fetch API with async await, getting parameters from URL or getting ID from URL in react js by using react router and much much more.
In this video we will create a clean looking responsive website containing header, footer, navigation menu, pages, products page, single product page, breadcrumbs, header menu, footer menu,
using React JS and latest React Router. Tutorial shows you how to create routes, use dynamic classes in menus, get URL parameters to show specific data and all that good stuff. Data will be fetched from a JavaScript Object that is in a separate javascript file. We can also use an external API for the data. For basic styling, we are using Twitter bootstrap. At the end of this tutorial, you will be able to understand dynamic routes in React JS, linking different pages in React JS application, creating menus and more. New React Router has smart routing where router has better algorithm to understand request to navigate to better result.
In tutorial we will also learn:
- Difference between Link and NavLink components in react router
- When to use Link and when to use NavLink
- How to shift active class in navigation in react js using react router
- What to do if you don't get the ID or params from url by using useParams in react js using react router
and more...
This is a beautiful & clean looking app. It can be used as a react js project or assignment.
TIMESTAMPS:
00:00 INTRO
03:47 Creating React APP
04:55 Installing Dependencies (Bootstrap & React Router DOM)
05:14 Setting up routes for pages
08:17 Creating components (header, footer)
09:13 Creating pages / components
11:20 Header Navigation with Link Component
11:47 Using Bootstrap
14:38 Creating Footer Component
15:46 Setting up data for the products
17:20 Images for products
18:09 Changing App title & adding Google fonts
18:50 Home component
21:28 About component
23:51 Products component
34:28 Posts page
43:54 Single Product Page
57:52 Changing Header, Using NavLink
01:02:42 Changing Footer, Using NavLink
01:05:22 Error Page
01:06:12 Outlet, Main layout
01:10:10 Final Look
Download Code:
https://github.com/webstylepress/Reac...
- React JS Apps & Projects:
ReactJS Apps / Utilities
- React JS Tutorials
ReactJS Playground
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: webstylepress
Website: https://www.webstylepress.com
FaceBook: Facebook: webstylepress
Twitter: Twitter: webstylepress
GitHub: https://github.com/webstylepress
#react #reactjs #reactjstutorial #reactjscourse #reactjsforbeginners #reactjsproject #javascript #reactrouter #WebStylePress #webdevelopment
In this video we will create a clean looking responsive website containing header, footer, navigation menu, pages, products page, single product page, breadcrumbs, header menu, footer menu,
using React JS and latest React Router. Tutorial shows you how to create routes, use dynamic classes in menus, get URL parameters to show specific data and all that good stuff. Data will be fetched from a JavaScript Object that is in a separate javascript file. We can also use an external API for the data. For basic styling, we are using Twitter bootstrap. At the end of this tutorial, you will be able to understand dynamic routes in React JS, linking different pages in React JS application, creating menus and more. New React Router has smart routing where router has better algorithm to understand request to navigate to better result.
In tutorial we will also learn:
- Difference between Link and NavLink components in react router
- When to use Link and when to use NavLink
- How to shift active class in navigation in react js using react router
- What to do if you don't get the ID or params from url by using useParams in react js using react router
and more...
This is a beautiful & clean looking app. It can be used as a react js project or assignment.
TIMESTAMPS:
00:00 INTRO
03:47 Creating React APP
04:55 Installing Dependencies (Bootstrap & React Router DOM)
05:14 Setting up routes for pages
08:17 Creating components (header, footer)
09:13 Creating pages / components
11:20 Header Navigation with Link Component
11:47 Using Bootstrap
14:38 Creating Footer Component
15:46 Setting up data for the products
17:20 Images for products
18:09 Changing App title & adding Google fonts
18:50 Home component
21:28 About component
23:51 Products component
34:28 Posts page
43:54 Single Product Page
57:52 Changing Header, Using NavLink
01:02:42 Changing Footer, Using NavLink
01:05:22 Error Page
01:06:12 Outlet, Main layout
01:10:10 Final Look
Download Code:
https://github.com/webstylepress/Reac...
- React JS Apps & Projects:
ReactJS Apps / Utilities
- React JS Tutorials
ReactJS Playground
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: webstylepress
Website: https://www.webstylepress.com
FaceBook: Facebook: webstylepress
Twitter: Twitter: webstylepress
GitHub: https://github.com/webstylepress
#react #reactjs #reactjstutorial #reactjscourse #reactjsforbeginners #reactjsproject #javascript #reactrouter #WebStylePress #webdevelopment
2 سال پیش
در تاریخ 1401/05/03 منتشر شده
است.
10,279
بـار بازدید شده