Skip to playerSkip to main content
  • 3 months ago
আজকের ভিডিওতে আমরা শিখবো কিভাবে React Router-এর Loader ব্যবহার করে JSON ফাইল থেকে ডাটা লোড করে তা UI-তে সুন্দরভাবে Display করা যায়।
এটি আমাদের চলমান React Project Tutorial সিরিজের Part - 4, যেখানে আমরা বই সম্পর্কিত ডাটা JSON থেকে এনে সুন্দরভাবে কার্ড ডিজাইন করেছি।

🎯 In this video you’ll learn:

How to use loader in React Router

How to fetch JSON data dynamically

How to display book data using React components

UI styling with Tailwind CSS & DaisyUI

⚙️ Tools Used:
React JS | React Router | Tailwind CSS | DaisyUI

Category

📚
Learning
Transcript
00:00Assalamualaikum
00:30comment below
00:33?
00:37?
00:42?
00:45?
00:51?
00:53?
00:53?
00:57?
00:59I am hero image and I am just going to book
01:02Hey, I can listen
01:03So, I am going to class
01:06Class name
01:09Class name
01:11Class name
01:13Text
01:143 Excel
01:16I am going to see the text
01:18I am going to bold
01:21So, text
01:23Bold
01:24Text bold
01:27Find
01:29Flow
01:32Book
01:331
01:35Bottas
01:37Faber
01:39Yare
01:41Send
01:43And
01:44Everything
01:45I want to check
01:48You can
01:50Ah
01:51Ah
01:52Right
01:56I'm a component and I'm a pages home home home at Vitoria Sina Paisley servitor a home hero
02:05our home as a page of servitor a telly I'm not a pages that you can easily play the servitor
02:12I'm like a folder on a feeling I'm really much in books I'm on it and I'm like a file
02:16I'm a component near she and I'm not just a person for mama about the poor
02:29I'm gonna be this is books list okay this is you please let's see I can only do the browser
02:38so
02:42import
02:46books
02:50books
02:52this is book list
02:54successfully
02:56books
02:58books
03:00data
03:02data
03:04all books
03:18products
03:20eshko
03:24eggs
03:26all books
03:28all books
03:30all books
03:32the
03:36set all books
03:38books
03:40books
03:42set all books
03:44use state
03:46use state
03:48use state
03:50use state
03:52json file
03:54public folder
03:56public folder
03:58I'll see you next time.
04:06This is very good.
04:12This is very good.
04:15use effect
04:21enter function
04:25enter function
04:30enter
04:35enter
04:36enter
04:38enter
04:39enter
04:42enter
04:43enter
04:44іяए परै खाली जागाटास अब्स हैंने और फेच कोुर फेच को अके जेत तो हमा देर फाइलडहाप पापलिक फोल्डर भी तो रहाँ से जसे जसन फाइलडहाटा तो ११११११११११११
04:55रॉक्स की नाम्तिसी फ११११॥e dada.json १११११११११॥
05:03.then then then then dhyeho chayah amre kiki koriwo
05:09amreachtha response paabu response toare aamre kiki koriwbo json aconvert koriwo
05:13response dot json json aamre call koriwo dayson aconvert koriwo
05:20thikhaashe json aconvert koriwo
05:21air pore aamre kiki koriwo then aamre etrane paabu
05:24yaetranea data paabu
05:27data daamre kiki koriwo ahso console aadaka
05:31I'm not a problem check on soul dot look it's really console look it's a parent that I'm the console of the
05:39political column ever on the day job for a manager inspector the browser Islam inspects
05:45column console is a teller that another is a ritual after another data as it is a money
05:49not a book I'm in the pipeline center to reload for you about television and I'm not going to
05:53we have an option that would be easily
05:55this is the reactor option
05:57we have to use state the software
06:01but we have to use the react router
06:05we have to load this
06:07we will use the load
06:09this is the load
06:15that we use the load
06:17where do we use the load
06:19I am going to use the data to load the data.
06:26I am going to use the home page.
06:31Home component is the first type of drive.
06:35This is the slash path.
06:37This is the landing page.
06:39This is the home component.
06:41So I am going to use the logical component here.
06:54We pak шoam Loader.
06:56So loader product instead of ....
07:05books.data.json
07:10just fetch
07:12save
07:14save
07:15this
07:17loader
07:19is
07:20home
07:21home
07:22home
07:23home
07:24receive
07:25so
07:26home
07:27receive
07:28the
07:31variable
07:33data
07:34use
07:35loader
07:36use
07:37loader
07:38use
07:39loader
07:40use
07:41loader
07:42loader
07:43loader
07:44loader
07:45use
07:46loader
07:48loader
07:49data
07:50data
07:51name
07:52data
07:53.
08:06.
08:11.
08:14.
08:16.
08:21.
08:22.
08:23So, I am using console lock to the console lock.
08:30So, console lock to the console lock to the console lock.
08:36So, I am using console lock to the console lock.
08:45So, it is easy to use data.
08:51So, I am using data.
08:54So, I am using data.
08:58I am using a proxy that I am using data.
09:07I am using data, props and data.
09:09I am using a proxy.
09:11I am using a proxy.
09:13Clicking to receive data.
09:17I am using data.
09:20We have the most detailed book-share and the entire book-share.
09:34We have to try and make full details.
09:36Now, the next thing we do is to make a folder of the pages.
09:50We have a single book.
09:50This is the file.
09:59RSCBA is the component.
10:10For example, we need to map.
10:13We need to find data.map
10:19map data can map turbo check him have a
10:23barren am i can add that again a column which a book name this book name amra
10:29sister Pablo sitar amra a particular watch a carcass and I can call for the
10:34bullshit book book book am a cultural realm and a booker video I'm
10:41Now we have to look at the fact that we have to select the data
10:47So then we have to look at the data
10:54Now we have to select the book
11:00So the book is 4. But as I do, we have to select the book
11:07.dwo.k book
11:09.dwo.k book
11:11and here you can use console.log
11:15.console.log
11:19.log
11:21.book
11:23.console.log
11:25.com
11:27.dstructure
11:29.
11:31.console.log
11:33.log
11:35.book
11:37foreign
11:51foreign
12:07.
12:14.
12:26.
12:29.
12:32.
12:36.
12:37foreign
12:57column ever today
13:07change into a marketable possible because it's so you have to remove it a good
13:11very shutout check to be simple vishai ah I'm right to look at the economic
13:15situation will not run looks at a simple component as I'm a customer and I'll say
13:19I'm other in a stretch and story I'm not a check and take I'm ready to call
13:23record I'm lucky girl I'm not a holiday for my daughter but I'm not going to
13:27console like I didn't know our console okay I'm a console only console dot lock
13:33I'm thinking I'm the book a consular column set column the key of a sub voyage I
13:37mouse or red button inspect and I can take a console is above edge object so
13:42objective with the ray I'm ready to see image the material say I am a G image
13:46yourself so I'm not gonna get this structure curry
13:49and I'm ready to go check I'm ready to go check I'm ready to go check I'm ready to
14:03get a source of source all the data to let me get a source there is a image or
14:10sort of say can I'm right I'm a star of asylum circle over to me the key
14:15so
14:21so
14:27we are looking at the image of the image
14:35we will see the image here
14:48do
14:50no
14:52you
14:54do
14:56no
14:58not
15:00do
15:02no
15:04no
15:06no
15:08no
15:10so we have grid column 1
15:16so we have md
15:19medium devices
15:21grid column 2
15:25lg
15:27grid column 3
15:31set column
15:33and we will select the cards
15:355
15:37so we have
15:39a simple
15:40way
15:42we have the title
15:46we will select the console
15:50and run the object
15:52and the name of the book
15:54and the name of the title
15:56and then we will select the title
15:58so we will select
15:59and click the
16:03and I can look at all of them because and for I'm not going to be miserable for a
16:07this structure career checkbook name care on it and a cut title that can be a
16:13cut title that's a kind of just amber people who is a book name that was I
16:17do not set for love ever to be giant and I can book name to last check to get a
16:22report a key as a reviewer say I'm not China connect to review this body
16:27I'm not going to take us a technical program prototype a little bit of a
16:33sujit is for to go say also Russia I'm not author and number is a very
16:38a technique here somebody can take it by by the author and I'm not have to
16:44collect I'm right on a author and I'm the very author below a a bit to borrow
16:48the author of his pro agent so public alone here for a rich and of the
16:54is political actually from the cano to a paragraph about it and I'm the article
16:59to go to the street or for the realm and a can a paragraph and I'm listening to
17:05buy by the clones are pretty sure I'm a second bracket for dynamic
17:10available for the most important set column that can buy a total asset in
17:14for a can I ask a fashion product are okay so I say I tell you to target I'm
17:20He has a fashion product, with a style of design and design.
17:25This is the image and image.
17:29As you can see image in the image.
17:31So when you have a size, you can see image in the image.
17:36But as you can see, image in the size, it's the image image.
17:40From the image, we have a class.
17:43We have a class.
17:44We can select this image.
17:46So, we can play the class.
17:50okay so I'm right on a little I'll chair kid is a very I'm a hide in the body's I
17:58hide the hide the photo and they won't say in the photo awesome and they can see
18:06come now say to another I'm gonna get in the height terrible theater
18:12I'm right and I had the electricity pixel so she didn't allow me to do the king
18:20what I'm going to hide to last so I guess it's okay I'm a she got a not be I'm not
18:32the
18:39the
18:42the
18:44the
18:47the
18:50the
18:53the
18:58his
18:59the
19:08the
19:18the
19:22national
19:25so
19:55grey color grey
19:57grey
19:59action
20:015
20:035
20:055
20:075
20:095
20:115
20:135
20:155
20:175
20:195
20:215
20:235
20:255
20:275
20:296
20:316
20:337
20:357
20:378
20:398
20:419
20:439
20:459
20:4710
20:4910
20:519
20:539
20:559
20:579
20:599
21:019
21:0310
21:0510
21:0710
21:0910
21:1110
21:1310
21:1510
21:1710
21:1910
21:2110
21:2310
21:2511
21:2710
21:2910
21:3110
21:3310
21:3510
21:3710
21:3910
21:4110
21:4310
21:45reactor icon pack
21:47react icon research
21:49NPM react icon
21:51react icon
21:53copy
21:55copy
21:57control
21:59terminal
22:01power
22:03power
22:05git bash
22:07paste
22:09install
22:11react icon
22:13install
22:15browser
22:17is
22:19github.io
22:21react icon
22:23star
22:25star
22:27star
22:29star
22:33import
22:35import
22:37import
22:39install
22:41terminal
22:43terminal
22:45crater
22:47terminal
22:49terminal
22:51terminal
22:53c
22:55star
22:57star
22:59so let's take a time and I'm a multi I'm other books are loading with the problem and I'm not
23:05I can now on and I'm like my glasses it's an image it's so I'm not really gonna get the
23:10device will be under a can of the heat I can only get us on it
23:17you know I'm not gonna get out of the video so I'm not gonna get out of the way
23:19.
23:26.
23:35.
23:41.
23:43.
23:44.
23:47I'm going to take a look at the camera so I'm not a movie a mother boy a system
23:54I'm going to take a load for the mercy and I'm actually it's only more like this
24:00is a hero section I'm using a picture of a baby home to get out of the video today
24:05she wrote a jar for a much I'm like honey I didn't know I didn't know I'm right
24:13the height there they hide for the book and then the height of the policy and I
24:17be predicting the height of a personal I'm going to click on this passage to
24:20another picture so I'm like and I get a corpus it out somewhere and I very much
24:24check passage to a new pixel absolutely it's a simple one are you looking it's an
24:33I see how much is my name is a minimum high-risk window so it will be a case
24:42I bet it's about our than a return of the process of the reaction and I'm not
24:46about the other landing page by home page story graph we'll see so it up not a
24:51practice current next video to yamda aro bhalo quite a minute ago in a love
24:56as a family thing
Comments

Recommended