1 00:00:02,120 --> 00:00:05,250 Now to really conclude this module, 2 00:00:05,250 --> 00:00:07,980 I just wanna show you an alternative syntax 3 00:00:07,980 --> 00:00:10,130 for writing these functions, 4 00:00:10,130 --> 00:00:12,653 any kinds of functions in JavaScript. 5 00:00:13,800 --> 00:00:17,320 A syntax which is not exclusive to React by the way, 6 00:00:17,320 --> 00:00:21,630 but which can be used in any modern JavaScript application. 7 00:00:21,630 --> 00:00:23,550 Instead of writing a function like this 8 00:00:23,550 --> 00:00:25,430 with the function keyword, 9 00:00:25,430 --> 00:00:29,420 you can also write a so-called arrow function, 10 00:00:29,420 --> 00:00:32,250 and attached you find a link with more details 11 00:00:32,250 --> 00:00:34,060 on these arrow functions. 12 00:00:34,060 --> 00:00:36,373 Again, it's not a React specific thing. 13 00:00:37,520 --> 00:00:40,000 To use that arrow function syntax. 14 00:00:40,000 --> 00:00:44,050 You replace function with const to create a new constant 15 00:00:44,050 --> 00:00:47,000 with a given name app in this case. 16 00:00:47,000 --> 00:00:50,190 And then the value which you assigned to this constant 17 00:00:50,190 --> 00:00:53,143 is an arrow function written like this. 18 00:00:54,600 --> 00:00:57,300 A list of parameters then an equal sign 19 00:00:57,300 --> 00:01:00,030 and a greater sign forming such an arrow 20 00:01:00,030 --> 00:01:03,510 and then the function body between curly braces. 21 00:01:03,510 --> 00:01:06,823 And again, that's really just standard JavaScript code. 22 00:01:07,900 --> 00:01:11,670 You can absolutely stick to the function keyword. 23 00:01:11,670 --> 00:01:14,710 This is just a syntax, which I personally prefer 24 00:01:14,710 --> 00:01:17,870 because it's a bit shorter or yeah, I just prefer it. 25 00:01:17,870 --> 00:01:21,380 And therefore I will migrate all my functions to 26 00:01:21,380 --> 00:01:25,480 this syntax like this here in the case of card 27 00:01:25,480 --> 00:01:26,880 but you don't have to do that 28 00:01:26,880 --> 00:01:31,880 if you prefer the other syntax, it's really 100% optional. 29 00:01:32,320 --> 00:01:33,920 And in this case here 30 00:01:33,920 --> 00:01:37,110 it doesn't offer any benefits or anything like that. 31 00:01:37,110 --> 00:01:39,040 It's really just personal preference. 32 00:01:39,040 --> 00:01:41,330 And I want to show this syntax here 33 00:01:41,330 --> 00:01:44,330 since you will also see that in a lot of React projects 34 00:01:44,330 --> 00:01:46,540 and you therefore should be aware of it 35 00:01:46,540 --> 00:01:48,880 that you can write your functions like this, 36 00:01:48,880 --> 00:01:52,173 any functions by the way, not just component functions. 37 00:01:54,430 --> 00:01:58,060 And with that, we're really done for this module. 38 00:01:58,060 --> 00:01:59,400 It was a huge module. 39 00:01:59,400 --> 00:02:02,520 And yet we're still only scratching the surface. 40 00:02:02,520 --> 00:02:05,290 There's way more to explore about React. 41 00:02:05,290 --> 00:02:07,940 And the next thing we are going to explore is how 42 00:02:07,940 --> 00:02:10,710 we can make this a bit more interactive 43 00:02:10,710 --> 00:02:14,380 and reactive because currently it's all static. 44 00:02:14,380 --> 00:02:16,120 This data never changes. 45 00:02:16,120 --> 00:02:18,890 As a user we can't do anything about it. 46 00:02:18,890 --> 00:02:21,420 And we are building modern user interfaces 47 00:02:21,420 --> 00:02:23,480 with React because we typically want to 48 00:02:23,480 --> 00:02:26,714 build user interfaces where things can change. 49 00:02:26,714 --> 00:02:30,370 Therefore, in the next course section, we are going to dive 50 00:02:30,370 --> 00:02:32,890 into another important React concept, 51 00:02:32,890 --> 00:02:35,260 state because that will help us 52 00:02:35,260 --> 00:02:37,823 make our applications interactive.