All language subtitles for 014 Adding _normal_ JavaScript Logic to Components_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,410 --> 00:00:04,710 Now that we learned about props, 2 00:00:04,710 --> 00:00:09,470 we're basically done with our first custom component. 3 00:00:09,470 --> 00:00:12,950 This expense item component is now reusable 4 00:00:12,950 --> 00:00:16,070 and we can use this props concept to configure it 5 00:00:16,070 --> 00:00:18,720 differently every time that we're using it. 6 00:00:18,720 --> 00:00:22,200 So that the four times we're using ExpenseItem here 7 00:00:22,200 --> 00:00:25,730 we're also getting a different output four times. 8 00:00:25,730 --> 00:00:27,570 I also just wanna emphasize again, 9 00:00:27,570 --> 00:00:31,440 that here we are indeed setting the values 10 00:00:31,440 --> 00:00:33,210 for the props dynamically 11 00:00:33,210 --> 00:00:36,490 with this single curly brace syntax 12 00:00:36,490 --> 00:00:39,500 but we could also just have a hard coded value 13 00:00:39,500 --> 00:00:42,160 like this here if that is what we needed. 14 00:00:42,160 --> 00:00:46,250 So props are not limited to dynamically set values. 15 00:00:46,250 --> 00:00:47,280 We can do that, 16 00:00:47,280 --> 00:00:48,990 but we don't have to. 17 00:00:48,990 --> 00:00:52,000 The main idea behind props is always the same though. 18 00:00:52,000 --> 00:00:55,780 We wanna make sure that we can pass data into our components 19 00:00:55,780 --> 00:00:58,913 to make them configurable and reusable. 20 00:01:00,060 --> 00:01:03,510 Now let's continue working on that expense item component 21 00:01:03,510 --> 00:01:06,130 and let's continue working on that date. 22 00:01:06,130 --> 00:01:09,950 Because at the moment this is clearly not too pretty, 23 00:01:09,950 --> 00:01:12,400 not too human readable. 24 00:01:12,400 --> 00:01:14,740 And instead of showing it like this, 25 00:01:14,740 --> 00:01:18,700 I instead wanna have this calender like look 26 00:01:18,700 --> 00:01:21,180 which you see here in this preview. 27 00:01:21,180 --> 00:01:24,400 I wanna have my date look like that. 28 00:01:24,400 --> 00:01:27,990 And therefore of course we need to change that HTML code, 29 00:01:27,990 --> 00:01:29,800 that JSX code 30 00:01:29,800 --> 00:01:33,200 and I'm using these terms interchangeably as well. 31 00:01:33,200 --> 00:01:35,630 We need to change that which is responsible 32 00:01:35,630 --> 00:01:38,080 for outputting that date. 33 00:01:38,080 --> 00:01:42,540 And here to build such a calender look, 34 00:01:42,540 --> 00:01:45,340 we could say that inside of that main div 35 00:01:45,340 --> 00:01:49,350 which should hold the overall date element, 36 00:01:49,350 --> 00:01:54,060 we wanna have free individual divs like this, 37 00:01:54,060 --> 00:01:57,750 where the top most div is responsible 38 00:01:57,750 --> 00:01:59,450 for outputting the month. 39 00:01:59,450 --> 00:02:02,890 The middle div is responsible for outputting the year 40 00:02:02,890 --> 00:02:06,340 and the bottom div then shows the date. 41 00:02:06,340 --> 00:02:08,880 That's something we could do. 42 00:02:08,880 --> 00:02:13,030 And, of course, for that we wanna extract month, year 43 00:02:13,030 --> 00:02:15,760 and day from the incoming date. 44 00:02:15,760 --> 00:02:18,930 So from that date prop which we're setting. 45 00:02:18,930 --> 00:02:20,980 For that here for the month, 46 00:02:20,980 --> 00:02:25,023 we can output a value dynamically and access props.date, 47 00:02:26,720 --> 00:02:28,210 and now what? 48 00:02:28,210 --> 00:02:31,770 How can we now output the month here? 49 00:02:31,770 --> 00:02:35,730 Well, we can use a built-in method which is 50 00:02:35,730 --> 00:02:39,660 accessible on all date objects in JavaScript. 51 00:02:39,660 --> 00:02:44,523 We can call the toLocaleString method. 52 00:02:45,780 --> 00:02:48,470 Now this is not a React specific method. 53 00:02:48,470 --> 00:02:50,920 You can Google for JS toLocaleString 54 00:02:50,920 --> 00:02:53,763 to find an official article on this method. 55 00:02:54,600 --> 00:02:57,730 And this method simply helps you with outputting dates 56 00:02:57,730 --> 00:03:00,620 in human readable formats. 57 00:03:00,620 --> 00:03:02,640 And you can simply call it and then pass 58 00:03:02,640 --> 00:03:05,080 in two arguments where the first argument 59 00:03:05,080 --> 00:03:09,770 is basically the language and here I'll use en-US 60 00:03:09,770 --> 00:03:11,400 to go with English. 61 00:03:11,400 --> 00:03:13,830 And then the second argument is an object 62 00:03:13,830 --> 00:03:16,980 where you configure how specifically 63 00:03:16,980 --> 00:03:19,220 that date should be formatted. 64 00:03:19,220 --> 00:03:21,300 And here we got different options 65 00:03:21,300 --> 00:03:24,960 where you can find more details in that article 66 00:03:24,960 --> 00:03:25,993 which you can find. 67 00:03:27,110 --> 00:03:29,680 Here you can learn more about the various ways 68 00:03:29,680 --> 00:03:31,960 of configuring this and using this. 69 00:03:31,960 --> 00:03:36,890 And here we can set month to long for example. 70 00:03:36,890 --> 00:03:39,150 That's one of the provided options 71 00:03:39,150 --> 00:03:41,930 or one of the supported options. 72 00:03:41,930 --> 00:03:44,670 And if we do that and save this, 73 00:03:44,670 --> 00:03:49,670 we see that August and March and June are being output here. 74 00:03:50,590 --> 00:03:52,540 So that we got a human readable way 75 00:03:52,540 --> 00:03:54,053 of outputting that month. 76 00:03:55,000 --> 00:03:58,010 Now, doing that all in line here 77 00:03:58,010 --> 00:04:00,940 in that JSX code clearly works. 78 00:04:00,940 --> 00:04:02,190 As I mentioned earlier, 79 00:04:02,190 --> 00:04:04,520 when I introduced this syntax, 80 00:04:04,520 --> 00:04:08,900 you can have expressions like this between the curly braces 81 00:04:08,900 --> 00:04:11,300 but it is considered a better practice, 82 00:04:11,300 --> 00:04:13,490 and it leads to cleaner code. 83 00:04:13,490 --> 00:04:15,580 If you extract logic like that, 84 00:04:15,580 --> 00:04:18,370 and don't put it into your JSX code, 85 00:04:18,370 --> 00:04:21,709 but instead you create a separate helper variable 86 00:04:21,709 --> 00:04:23,110 or a constant. 87 00:04:23,110 --> 00:04:24,790 Something like month here 88 00:04:24,790 --> 00:04:27,100 which simply holds that value. 89 00:04:27,100 --> 00:04:30,930 And then here between your curly braces in the JSX code 90 00:04:30,930 --> 00:04:35,110 you just point at that helper variable or a constant. 91 00:04:35,110 --> 00:04:38,370 By doing it like this you keep your JSX code lean 92 00:04:38,370 --> 00:04:42,360 and you have your more complex logic in the rest 93 00:04:42,360 --> 00:04:45,623 of this function so that this overall is easier to read. 94 00:04:46,630 --> 00:04:50,240 And now we can do something similar for the day 95 00:04:50,240 --> 00:04:51,250 and the year. 96 00:04:51,250 --> 00:04:56,250 For the day we can access props.date.toLocaleString en-US 97 00:04:59,150 --> 00:05:02,240 and then here passing a configuration where we say 98 00:05:02,240 --> 00:05:05,810 that we wanna format just the day 99 00:05:05,810 --> 00:05:08,263 and output it in a two digit format. 100 00:05:09,130 --> 00:05:11,900 And we can add a year helper constant 101 00:05:11,900 --> 00:05:13,860 where we access props.date 102 00:05:13,860 --> 00:05:16,910 and then actually just access get full year 103 00:05:16,910 --> 00:05:18,670 which is another built-in method 104 00:05:18,670 --> 00:05:22,103 which just extracts the year as a four digit number. 105 00:05:23,240 --> 00:05:27,620 And now we can use these helper constants 106 00:05:27,620 --> 00:05:31,633 to output their values like this in our JSX code. 107 00:05:33,500 --> 00:05:36,360 And if we do that and save that file, 108 00:05:36,360 --> 00:05:38,870 now we see the month, 109 00:05:38,870 --> 00:05:42,385 the year and also the day in the month. 110 00:05:42,385 --> 00:05:45,800 And that's the raw data which I wanna have here. 111 00:05:45,800 --> 00:05:49,200 Now, of course, one crucial thing is missing 112 00:05:49,200 --> 00:05:50,730 and that would be the styling. 113 00:05:50,730 --> 00:05:52,600 But before we add that, 114 00:05:52,600 --> 00:05:55,303 let's talk about splitting components. 8868

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