All language subtitles for 006 Adding More React Components & Connecting Components_Downloadly.ir_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian Download
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:02,040 --> 00:00:05,170 So let's now work on the HTML, 2 00:00:05,170 --> 00:00:08,460 the JSX code of an event item. 3 00:00:08,460 --> 00:00:11,270 Now here you should follow along closely 4 00:00:11,270 --> 00:00:14,570 because I will also provide finished styles 5 00:00:14,570 --> 00:00:16,160 to you in a second. 6 00:00:16,160 --> 00:00:19,900 And those styles will only do their job correctly 7 00:00:19,900 --> 00:00:22,710 if you have the same HTML code. 8 00:00:22,710 --> 00:00:25,560 So therefore make sure you follow along closely. 9 00:00:25,560 --> 00:00:28,580 Of course you can always use the code snap shots 10 00:00:28,580 --> 00:00:32,229 you find attached to the last lecture of every module 11 00:00:32,229 --> 00:00:34,150 to compare your code to mine 12 00:00:34,150 --> 00:00:36,273 incase you have some deviations somewhere. 13 00:00:37,210 --> 00:00:38,960 And therefore lets get started. 14 00:00:38,960 --> 00:00:40,790 I want to have an image here. 15 00:00:40,790 --> 00:00:43,250 An image element in every list item 16 00:00:43,250 --> 00:00:46,700 where we display the image of a chosen event 17 00:00:46,700 --> 00:00:49,410 or of a rendered event here. 18 00:00:49,410 --> 00:00:53,280 So we'll need to set up a source here and some alt text 19 00:00:53,280 --> 00:00:55,130 and we'll work on the data in a second 20 00:00:55,130 --> 00:00:58,143 for the moment let's just create the HTML code. 21 00:00:59,140 --> 00:01:01,080 And then below that I wanna have a
22 00:01:01,080 --> 00:01:03,130 below that image. 23 00:01:03,130 --> 00:01:06,900 In there I wanna have two more
s 24 00:01:06,900 --> 00:01:09,970 and in the first
in here, 25 00:01:09,970 --> 00:01:14,280 I start with a title, an h2 element here, 26 00:01:14,280 --> 00:01:17,173 where we output the title of that event. 27 00:01:18,400 --> 00:01:20,690 Then below that another
28 00:01:20,690 --> 00:01:23,730 where I want to add a time element 29 00:01:23,730 --> 00:01:26,310 which is a regular HTML element 30 00:01:26,310 --> 00:01:30,400 where the time or the date should be output 31 00:01:31,260 --> 00:01:35,793 and also then below this
another
32 00:01:37,220 --> 00:01:40,590 where the address should be output. 33 00:01:40,590 --> 00:01:43,720 For this we can use the address HTML element 34 00:01:43,720 --> 00:01:45,960 which is also a regular element 35 00:01:45,960 --> 00:01:48,673 where we will see and render the address. 36 00:01:49,880 --> 00:01:52,940 With that we can move on to the other main
37 00:01:52,940 --> 00:01:55,460 which we added side by side to this first
. 38 00:01:55,460 --> 00:01:57,550 As you're in this
, 39 00:01:57,550 --> 00:02:00,930 I in the end wanna have a clickable link. 40 00:02:00,930 --> 00:02:04,800 So for this we can use the link component 41 00:02:04,800 --> 00:02:06,650 which we need to import, 42 00:02:06,650 --> 00:02:10,840 we import link from next link as you learned, 43 00:02:10,840 --> 00:02:15,190 so that we can sent up a link that takes us to another page. 44 00:02:15,190 --> 00:02:18,730 So here we'll then need to set up the URL, 45 00:02:18,730 --> 00:02:20,940 the path to which it should navigate, 46 00:02:20,940 --> 00:02:22,200 we'll do it as later. 47 00:02:22,200 --> 00:02:26,400 And then as a text it could say explore event. 48 00:02:26,400 --> 00:02:28,220 That's the general mark up, 49 00:02:28,220 --> 00:02:31,810 the general HTML code which I wanna use. 50 00:02:31,810 --> 00:02:35,210 Now of course its lacking the concrete data though. 51 00:02:35,210 --> 00:02:37,410 So for this, we're getting props 52 00:02:37,410 --> 00:02:40,460 because that data should be passed in from outside 53 00:02:40,460 --> 00:02:43,330 and I'll again use object destructuring 54 00:02:43,330 --> 00:02:46,920 to pull out that data from the props. 55 00:02:46,920 --> 00:02:49,460 And I do expect that we get a title, 56 00:02:49,460 --> 00:02:51,090 that we get an image, 57 00:02:51,090 --> 00:02:55,263 that we get the dates and a location and an ID. 58 00:02:56,480 --> 00:03:00,330 Of course we could also just expect one event prop 59 00:03:00,330 --> 00:03:02,230 and pull out all the data from there 60 00:03:02,230 --> 00:03:04,550 but I expect multiple props here. 61 00:03:04,550 --> 00:03:07,543 You can of course expect whichever props you want. 62 00:03:09,040 --> 00:03:12,020 So now we got that and now here for example, 63 00:03:12,020 --> 00:03:15,590 we can output the title constant here 64 00:03:15,590 --> 00:03:17,113 which we get from props. 65 00:03:18,320 --> 00:03:20,220 Now for date and address, 66 00:03:20,220 --> 00:03:23,730 I just don't wanna output the data like this 67 00:03:23,730 --> 00:03:27,560 instead I want to transform it a little bit first. 68 00:03:27,560 --> 00:03:32,000 For example I want to set up a human readable date 69 00:03:32,000 --> 00:03:34,910 and for this I'll trade a new date object 70 00:03:34,910 --> 00:03:36,900 and pass date to it 71 00:03:36,900 --> 00:03:39,690 because date as we're getting it here 72 00:03:39,690 --> 00:03:44,140 we'll have this format which is kind of human readable 73 00:03:44,140 --> 00:03:46,430 but not really pretty. 74 00:03:46,430 --> 00:03:48,680 But thankfully that is a format 75 00:03:48,680 --> 00:03:51,080 which we can pass to the date constructor 76 00:03:51,080 --> 00:03:53,870 to turn it in a Java Scripted date object 77 00:03:53,870 --> 00:03:56,370 and on such a date object 78 00:03:56,370 --> 00:03:58,863 we can then call toLocaleDateString 79 00:03:59,800 --> 00:04:03,810 and then transform this into a human readable date string. 80 00:04:03,810 --> 00:04:06,790 The first argument here is to locale what we wanna use, 81 00:04:06,790 --> 00:04:09,150 and I will use en-US 82 00:04:09,150 --> 00:04:12,080 and the second argument then is an object 83 00:04:12,080 --> 00:04:14,840 where we can figure how the different parts 84 00:04:14,840 --> 00:04:17,019 of the date should be output. 85 00:04:17,019 --> 00:04:21,519 For example that a day should be output in numeric format 86 00:04:21,519 --> 00:04:24,940 month should be output in a long form 87 00:04:24,940 --> 00:04:29,193 and year should be output in numeric format as well. 88 00:04:30,780 --> 00:04:32,080 Now if you wanna learn more 89 00:04:32,080 --> 00:04:35,170 about this toLocaleDateString method 90 00:04:35,170 --> 00:04:38,960 you can of course search for mdn toLocaleDateString 91 00:04:38,960 --> 00:04:42,260 and find the kind of official docx on that 92 00:04:42,260 --> 00:04:44,370 and here you learn on how that works 93 00:04:44,370 --> 00:04:46,460 and which other options you would have 94 00:04:46,460 --> 00:04:49,230 when it comes to configuring the output. 95 00:04:49,230 --> 00:04:51,130 The configuration I chose here 96 00:04:51,130 --> 00:04:52,920 should work really well though 97 00:04:52,920 --> 00:04:55,120 and therefore now here instead of date, 98 00:04:55,120 --> 00:04:58,293 I'll put the human readable date like this. 99 00:05:01,050 --> 00:05:04,250 Now for the address I also want to format this 100 00:05:04,250 --> 00:05:08,360 and I'll create a formatted address where I use the location 101 00:05:08,360 --> 00:05:12,180 so this location proper getting, this one, 102 00:05:12,180 --> 00:05:14,930 and then on that I call replace 103 00:05:14,930 --> 00:05:19,930 and I replace comma wide space with backwards slash 'n'. 104 00:05:21,250 --> 00:05:24,730 Now all the locations, have such a comma in there 105 00:05:24,730 --> 00:05:28,500 to separate discrete from the postal code and city 106 00:05:28,500 --> 00:05:33,410 and I'm simply replacing that with backwards slash 'n' 107 00:05:33,410 --> 00:05:35,280 which adds a line break. 108 00:05:35,280 --> 00:05:37,393 So that's what I'm doing here. 109 00:05:39,480 --> 00:05:42,700 And therefore now we can use this forward method 110 00:05:42,700 --> 00:05:44,180 address down there. 111 00:05:44,180 --> 00:05:46,040 Now we'll need to add some styling 112 00:05:46,040 --> 00:05:48,020 for this line break to have an effect 113 00:05:48,020 --> 00:05:50,243 but we're going to do that later as well. 114 00:05:51,540 --> 00:05:53,710 Now we also have an image of course 115 00:05:53,710 --> 00:05:55,380 which we wanna set up here. 116 00:05:55,380 --> 00:05:59,160 And the image is just a string in the dummy data 117 00:05:59,160 --> 00:06:03,820 which is a path to an image which we added locally here. 118 00:06:03,820 --> 00:06:08,040 So we have that images slash image name path 119 00:06:08,040 --> 00:06:09,763 in our public folder. 120 00:06:11,310 --> 00:06:12,790 That's why you should make sure 121 00:06:12,790 --> 00:06:16,910 that this image path and name matches your path 122 00:06:16,910 --> 00:06:18,363 you added your imaging. 123 00:06:19,430 --> 00:06:22,110 But now that we do have this link here, 124 00:06:22,110 --> 00:06:27,110 we now can bind source to forward slash plus image. 125 00:06:28,990 --> 00:06:33,080 Image is our prop here and image will be a string like this 126 00:06:33,080 --> 00:06:35,930 and I'm just adding a forward slash at the beginning. 127 00:06:35,930 --> 00:06:38,850 And since all the content in the public folder 128 00:06:38,850 --> 00:06:42,550 will be served statically by Next.js, 129 00:06:42,550 --> 00:06:46,470 this request to slash images slash image name 130 00:06:46,470 --> 00:06:47,543 will succeed. 131 00:06:48,410 --> 00:06:52,020 We don't need to add public at the beginning here 132 00:06:52,020 --> 00:06:54,670 so it's not slash public slash 133 00:06:54,670 --> 00:06:59,220 but just slash because it's the content of the public folder 134 00:06:59,220 --> 00:07:01,420 which will be served statically. 135 00:07:01,420 --> 00:07:03,770 So public should be excluded, 136 00:07:03,770 --> 00:07:06,870 because we don't need to dive into that folder first 137 00:07:06,870 --> 00:07:08,460 it's the content of the folder 138 00:07:08,460 --> 00:07:10,870 which is being served by Next.js. 139 00:07:10,870 --> 00:07:12,290 So we can navigate 140 00:07:12,290 --> 00:07:15,713 as if we already were inside of that folder. 141 00:07:16,960 --> 00:07:19,583 Now for the alt text algorithm was my title again. 142 00:07:20,780 --> 00:07:22,610 With
we're almost done 143 00:07:22,610 --> 00:07:26,140 but we also wanna wire up that link address 144 00:07:26,140 --> 00:07:29,040 that link target here. 145 00:07:29,040 --> 00:07:31,620 And for this I wanna construct a link 146 00:07:31,620 --> 00:07:34,600 which takes this ID into account. 147 00:07:34,600 --> 00:07:39,210 I'll add a new constant here and named is exploreLink 148 00:07:39,210 --> 00:07:41,130 of course this name is up to you, 149 00:07:41,130 --> 00:07:44,570 and here I'll use a template literal and start with 150 00:07:44,570 --> 00:07:49,570 /events/ and then inject something dynamic into this spring 151 00:07:52,190 --> 00:07:53,190 I'll inject a the ID 152 00:07:54,227 --> 00:07:57,670 the value which we get on the ID prop here. 153 00:07:57,670 --> 00:08:01,560 So that exploreLink is a string that includes that ID 154 00:08:01,560 --> 00:08:03,670 and then it's just exploring 155 00:08:03,670 --> 00:08:07,513 which I bind here as a value to ref. 156 00:08:08,670 --> 00:08:11,210 And then with all that done, 157 00:08:11,210 --> 00:08:16,210 this component lacks styling but is generally ready to go. 158 00:08:17,970 --> 00:08:21,800 So now in event list we need to pass all that data 159 00:08:21,800 --> 00:08:24,150 which is expected by event item 160 00:08:24,150 --> 00:08:28,740 we need to pass those props into event item here now. 161 00:08:28,740 --> 00:08:33,549 So here I add the ID prop and pass in event.id. 162 00:08:33,549 --> 00:08:38,120 I add the title prop and pass in event.title. 163 00:08:38,120 --> 00:08:43,120 We add the location prop and pass in event.location 164 00:08:43,169 --> 00:08:44,379 and so on. 165 00:08:44,379 --> 00:08:47,450 It will be the same for the date, with event.date 166 00:08:47,450 --> 00:08:51,400 and the same for the image with event.image. 167 00:08:51,400 --> 00:08:53,120 And dozens for mapping here 168 00:08:53,120 --> 00:08:55,610 and since we are creating a list of items 169 00:08:55,610 --> 00:08:57,710 we should also set the key prop 170 00:08:57,710 --> 00:09:00,170 which is not expected by our component 171 00:09:00,170 --> 00:09:04,360 but by react whenever you output a list dynamically 172 00:09:04,360 --> 00:09:07,020 and here we pass in event ideas. 173 00:09:07,020 --> 00:09:09,850 Well since instead will be a unique identifier 174 00:09:09,850 --> 00:09:11,263 per list item. 175 00:09:12,400 --> 00:09:13,860 And now with all of that, 176 00:09:13,860 --> 00:09:16,380 we can use this EventList component 177 00:09:16,380 --> 00:09:18,980 in our starting page component. 178 00:09:18,980 --> 00:09:20,673 So in the home page component. 179 00:09:21,740 --> 00:09:26,520 For this we import the EventList component 180 00:09:26,520 --> 00:09:31,520 from going up one level diving into components, events, 181 00:09:31,830 --> 00:09:36,230 event list and then here instead of just unorder list, 182 00:09:36,230 --> 00:09:39,223 we can simply output event list like that. 183 00:09:40,270 --> 00:09:42,280 And now last but not least, 184 00:09:42,280 --> 00:09:43,840 we just need to make sure 185 00:09:43,840 --> 00:09:47,460 that we passed in items to event list. 186 00:09:47,460 --> 00:09:49,240 So here in the homepage component, 187 00:09:49,240 --> 00:09:50,990 we start with the items props 188 00:09:50,990 --> 00:09:54,920 and pass our featured events into EventList. 189 00:09:54,920 --> 00:09:57,750 And if we now save all files 190 00:09:57,750 --> 00:10:01,580 and reload I get an error numeric is not defined 191 00:10:01,580 --> 00:10:03,100 the cause an event item 192 00:10:03,100 --> 00:10:06,980 that should also be a string wrapped by quotes. 193 00:10:06,980 --> 00:10:11,670 Now if I save this, now we have a large image here 194 00:10:11,670 --> 00:10:12,503 and yeah. 195 00:10:12,503 --> 00:10:14,990 If we scroll we see the data is there 196 00:10:14,990 --> 00:10:17,730 but of course it's lacking styling 197 00:10:17,730 --> 00:10:20,480 and that's the effort which we're going to work on next 15378

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.