1
00:00:02,230 --> 00:00:08,710
To start with animating react apps, I prepared a little demo project which you can find attached to this video,

2
00:00:08,710 --> 00:00:11,930
it's a very simple project using create react app.

3
00:00:12,190 --> 00:00:17,880
In this project I got a backdrop, I got a modal and I got this list component

4
00:00:18,190 --> 00:00:25,180
and if we see all of that in action with npm start, what we will see is that in the end I just got a

5
00:00:25,180 --> 00:00:26,650
modal which is always there

6
00:00:26,650 --> 00:00:32,500
so we were going to need to add some functionality to show or hide it and if we manually comment out

7
00:00:32,500 --> 00:00:38,920
this modal for now by simply wrapping it in curly braces which then contains a block comment with

8
00:00:39,490 --> 00:00:41,310
/*,

9
00:00:41,560 --> 00:00:48,310
if we do it like this and then save this file, we can work with the list and there simply add items or remove

10
00:00:48,310 --> 00:00:55,570
items and the algorithm for adding items is super simple here as you can check out in the list component.

11
00:00:55,900 --> 00:01:02,890
So this is the application we have and the idea of course is to animate both the appearance and dismissal

12
00:01:02,890 --> 00:01:07,060
of the modal as well as our list of list items,

13
00:01:07,060 --> 00:01:11,070
now with that let's dive into the different options we have for that

14
00:01:11,200 --> 00:01:16,810
but before we actually start, let's make sure that we have a way of showing and hiding the modal.

15
00:01:17,020 --> 00:01:23,300
So I'm going to remove my comments here so that we again show it all the time

16
00:01:23,530 --> 00:01:31,110
and in the modal.js file, I get a onClick listener on the dismissal button where I emit this closed event.

17
00:01:31,270 --> 00:01:36,150
Now let's say I want to control whether the modal is displayed or not

18
00:01:36,300 --> 00:01:43,750
inside this modal javascript file for now by simply showing or hiding the modal, now that's of course

19
00:01:43,750 --> 00:01:45,160
something we can do

20
00:01:45,430 --> 00:01:51,910
and we can easily do this by going into the modal.css file where we define a style for this, I'm by

21
00:01:51,910 --> 00:01:58,750
the way not using css modules here but still, this is the only file where I use this modal css class.

22
00:01:59,050 --> 00:02:07,460
So there we could control whether this modal is visible or not by adding a modal open class to it when

23
00:02:07,460 --> 00:02:12,430
it should be shown and the modal closed class when it should not be shown.

24
00:02:12,830 --> 00:02:20,330
And then of course one trivial way of controlling this is to set the display to block when we have

25
00:02:20,330 --> 00:02:30,430
modal open and display to none if it should be closed and we should do the same for the backdrop

26
00:02:30,440 --> 00:02:39,330
so in the backdrop.css file, I'm also going to add backdrop open and backdrop closed.

27
00:02:39,380 --> 00:02:44,720
Now with that we just have to add some code to both files to make sure we actually take advantage of

28
00:02:44,720 --> 00:02:45,230
that,

29
00:02:45,230 --> 00:02:51,500
so first of all I'm going to refactor this backdrop component function here into a function with curly

30
00:02:51,530 --> 00:02:58,340
braces where I then will return the jsx eventually but before I do so and that's the reason why I convert

31
00:02:58,370 --> 00:03:03,090
this, I want to create my classes array basically

32
00:03:03,350 --> 00:03:07,070
so my css classes I want to attach here should be an array,

33
00:03:07,160 --> 00:03:14,000
it should always be backdrop but then it should be backdrop open or closed depending on some prop I

34
00:03:14,000 --> 00:03:14,690
receive.

35
00:03:14,690 --> 00:03:22,400
So let's say I check if props show is true and only if that is true, I want to add backdrop open

36
00:03:22,430 --> 00:03:25,990
otherwise I'd add backdrop closed.

37
00:03:26,030 --> 00:03:31,280
Now finally what I need to do is I need to attached this class here

38
00:03:31,490 --> 00:03:38,440
so this css classes constant and call showing to join this into a string.

39
00:03:38,920 --> 00:03:45,220
Now with that, we can control the display of the backdrop, I'm going to copy that code into my modal.js

40
00:03:45,220 --> 00:03:46,820
file and there too,

41
00:03:46,960 --> 00:03:47,880
I'll 

42
00:03:47,880 --> 00:03:55,030
refactor this to take advantage of the fact that we do have a function where we don't just return something

43
00:03:55,270 --> 00:03:58,490
but we will return something, before we do so

44
00:03:58,540 --> 00:04:01,390
I also want to control my css classes here.

45
00:04:01,650 --> 00:04:05,300
So let's make sure we return the jsx code here too

46
00:04:05,920 --> 00:04:12,250
but then as I just said, we should have css classs where we have modal and then we have modal open

47
00:04:12,520 --> 00:04:14,490
or modal closed

48
00:04:14,590 --> 00:04:23,620
and I actually use that as my css class name here, again joining it into one string with that join

49
00:04:23,710 --> 00:04:24,640
method.

50
00:04:24,640 --> 00:04:30,900
Now with that we just need to pass the show prop to backdrop and modal, we can do that in the app.js

51
00:04:31,000 --> 00:04:31,550
file,

52
00:04:31,540 --> 00:04:33,500
there we have a class based component,

53
00:04:33,520 --> 00:04:39,040
let's now add a state where we add modal is open and set this to false

54
00:04:39,040 --> 00:04:44,760
let's say at the beginning and then I will simply change this state.

55
00:04:44,770 --> 00:04:52,690
So in this class I'll add showModal that should be a function where I simply call this.setState and

56
00:04:52,690 --> 00:04:56,180
set modal is open to true

57
00:04:56,620 --> 00:05:03,290
and then I will, I have a close modal function and that of course is all pretty much straightforward,

58
00:05:03,340 --> 00:05:06,370
nothing new in the close modal function

59
00:05:06,370 --> 00:05:08,730
I will set modal is open to false

60
00:05:08,770 --> 00:05:11,790
just like that. Show modal and close modal

61
00:05:11,830 --> 00:05:19,400
now in the modal component, again I do call this closed prop on a click on the dismiss button

62
00:05:19,570 --> 00:05:25,420
so that is the close prop is what I should bind to my close modal method here

63
00:05:25,600 --> 00:05:32,980
so closed will be equal to this.closedModal and the backdrop in modal now

64
00:05:33,010 --> 00:05:35,490
both need to receive the show prop,

65
00:05:35,710 --> 00:05:41,710
that should be this state modal is open because that will determine whether we want to show or hide

66
00:05:41,710 --> 00:05:42,700
the modal.

67
00:05:42,700 --> 00:05:47,610
Finally we need a way to show the modal, we get this open modal button here,

68
00:05:47,620 --> 00:05:55,690
now all we have to do is hook up the onClick listener there to this.showModal. And now with all these

69
00:05:55,690 --> 00:06:02,290
things if we save this, we go back to the application I click open modal we see the modal, I click dismiss

70
00:06:02,500 --> 00:06:03,710
we dismiss it.

71
00:06:03,760 --> 00:06:06,400
Now that's all nice but we have no animation

72
00:06:06,430 --> 00:06:10,610
so again finally, let's work on this animation in the next lecture.