1
00:00:01,110 --> 00:00:04,620
‫It's time to set up our next project.

2
00:00:04,620 --> 00:00:07,380
‫So we're building a lot of projects, here,

3
00:00:07,380 --> 00:00:09,090
‫which is exactly what you need

4
00:00:09,090 --> 00:00:12,393
‫to become the React developer that you want to be.

5
00:00:13,920 --> 00:00:16,740
‫And, by now, you already know the drill,

6
00:00:16,740 --> 00:00:18,810
‫so just fire up your terminal,

7
00:00:18,810 --> 00:00:21,840
‫or your command prompt if you are on Windows,

8
00:00:21,840 --> 00:00:24,330
‫and then simply navigate to the folder

9
00:00:24,330 --> 00:00:27,690
‫that you want to build your next project in.

10
00:00:27,690 --> 00:00:32,430
‫Then type npx create-react-app

11
00:00:32,430 --> 00:00:34,710
‫at version number five please.

12
00:00:34,710 --> 00:00:39,690
‫And then the name of the app, which is usepopcorn.

13
00:00:39,690 --> 00:00:41,910
‫So what might that be?

14
00:00:41,910 --> 00:00:44,400
‫That's a bit of a strange name.

15
00:00:44,400 --> 00:00:47,433
‫So let's, actually, check it out right now.

16
00:00:48,600 --> 00:00:51,270
‫So this is the usePopcorn app,

17
00:00:51,270 --> 00:00:53,760
‫and if you want, you can go explore it right now

18
00:00:53,760 --> 00:00:58,143
‫on your own at usepopcorn.netlify.app.

19
00:00:59,010 --> 00:01:01,050
‫So it's called usePopcorn

20
00:01:01,050 --> 00:01:04,350
‫because this application is all about movies

21
00:01:04,350 --> 00:01:08,010
‫and maybe you see that this prefix, here, of the name

22
00:01:08,010 --> 00:01:09,870
‫is this keyword of use

23
00:01:09,870 --> 00:01:13,410
‫and that reminds you maybe of the useState name.

24
00:01:13,410 --> 00:01:15,420
‫So the name of the useState hook.

25
00:01:15,420 --> 00:01:18,270
‫And so that's because we will build this project

26
00:01:18,270 --> 00:01:22,020
‫over this section and even to other sections,

27
00:01:22,020 --> 00:01:25,560
‫and it is going to be all about hooks, basically.

28
00:01:25,560 --> 00:01:28,833
‫And so that's a hint to that, here, right in the name.

29
00:01:29,850 --> 00:01:32,250
‫But anyway, here in the search bar,

30
00:01:32,250 --> 00:01:34,143
‫we can now search for movies.

31
00:01:35,100 --> 00:01:38,370
‫So let's say one of my all-time favorite movies

32
00:01:38,370 --> 00:01:39,690
‫called Inception,

33
00:01:39,690 --> 00:01:44,460
‫and this is now loading these movies here from a real API.

34
00:01:44,460 --> 00:01:47,520
‫So we're doing some real data fetching here.

35
00:01:47,520 --> 00:01:50,490
‫Then we can click on any of these movies,

36
00:01:50,490 --> 00:01:53,790
‫which will then take us to this display overview here.

37
00:01:53,790 --> 00:01:55,740
‫Then we can rate the movie.

38
00:01:55,740 --> 00:01:58,920
‫So you see that we have this nice rating component,

39
00:01:58,920 --> 00:02:00,693
‫and this one is definitely a 10.

40
00:02:01,860 --> 00:02:02,970
‫Then it asks us

41
00:02:02,970 --> 00:02:05,610
‫if we want to add the movie to our watchlist.

42
00:02:05,610 --> 00:02:08,610
‫And as we say yes, then you see that the movie

43
00:02:08,610 --> 00:02:11,643
‫has, indeed, been added to our watchlist here.

44
00:02:12,540 --> 00:02:17,010
‫Let's say we also saw this one here, maybe it was a seven.

45
00:02:17,010 --> 00:02:19,170
‫Then let's also add it to our list.

46
00:02:19,170 --> 00:02:21,210
‫And you see now we have both of them.

47
00:02:21,210 --> 00:02:25,560
‫And up here we have some statistics about our watchlist.

48
00:02:25,560 --> 00:02:27,750
‫We can also delete movies from here.

49
00:02:27,750 --> 00:02:28,583
‫So, maybe later,

50
00:02:28,583 --> 00:02:31,950
‫I remembered that I didn't actually watch this one,

51
00:02:31,950 --> 00:02:33,900
‫so let's get rid of it.

52
00:02:33,900 --> 00:02:38,403
‫And, yeah, so another thing is that, when we click here,

53
00:02:39,300 --> 00:02:41,610
‫on a movie that we already rated before,

54
00:02:41,610 --> 00:02:44,100
‫then you see that here it no longer displays

55
00:02:44,100 --> 00:02:47,610
‫that rating component but our actual rating,

56
00:02:47,610 --> 00:02:50,400
‫then we can always go back by clicking here

57
00:02:50,400 --> 00:02:54,960
‫or we can also just hit the Escape key.

58
00:02:54,960 --> 00:02:56,550
‫So that also works.

59
00:02:56,550 --> 00:02:59,790
‫So that's another small feature right there.

60
00:02:59,790 --> 00:03:02,130
‫And, yeah, that's actually it.

61
00:03:02,130 --> 00:03:03,930
‫So a very small application,

62
00:03:03,930 --> 00:03:06,780
‫but, again, with real data fetching.

63
00:03:06,780 --> 00:03:09,090
‫So that's going to be something really nice

64
00:03:09,090 --> 00:03:11,490
‫that we're going to do for the first time.

65
00:03:11,490 --> 00:03:12,480
‫So this app, here,

66
00:03:12,480 --> 00:03:16,500
‫might feel already a little bit more real because of that.

67
00:03:16,500 --> 00:03:17,940
‫Now, as I said,

68
00:03:17,940 --> 00:03:20,460
‫we will build this throughout three sections.

69
00:03:20,460 --> 00:03:22,230
‫And so, in this first section,

70
00:03:22,230 --> 00:03:25,140
‫we'll only work with static data yet.

71
00:03:25,140 --> 00:03:29,460
‫So this list of movies here is not yet coming from an API.

72
00:03:29,460 --> 00:03:31,620
‫It's just an array of objects

73
00:03:31,620 --> 00:03:33,900
‫as we have been working with before.

74
00:03:33,900 --> 00:03:37,770
‫The only thing that works here already is at the state here,

75
00:03:37,770 --> 00:03:41,430
‫so we can like collapse these two lists here

76
00:03:41,430 --> 00:03:44,430
‫and we can also already write something here

77
00:03:44,430 --> 00:03:46,140
‫into this search bar.

78
00:03:46,140 --> 00:03:48,180
‫But, besides that, in this section,

79
00:03:48,180 --> 00:03:51,600
‫we are more concerned about the component part.

80
00:03:51,600 --> 00:03:54,630
‫So, basically, creating this layout that we see here

81
00:03:54,630 --> 00:03:58,050
‫and also talking a bit about component reusability

82
00:03:58,050 --> 00:03:59,580
‫and component composition.

83
00:03:59,580 --> 00:04:00,870
‫And, with that being said,

84
00:04:00,870 --> 00:04:03,210
‫let's actually move on to the next lecture

85
00:04:03,210 --> 00:04:04,740
‫where we will learn a bit more

86
00:04:04,740 --> 00:04:07,443
‫about how to think about components.