To start with animating react apps, I prepared a little demo project which you can find attached to this video,
it's a very simple project using create react app.
In this project I got a backdrop, I got a modal and I got this list component
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
modal which is always there
so we were going to need to add some functionality to show or hide it and if we manually comment out
this modal for now by simply wrapping it in curly braces which then contains a block comment with
/*,
if we do it like this and then save this file, we can work with the list and there simply add items or remove
items and the algorithm for adding items is super simple here as you can check out in the list component.
So this is the application we have and the idea of course is to animate both the appearance and dismissal
of the modal as well as our list of list items,
now with that let's dive into the different options we have for that
but before we actually start, let's make sure that we have a way of showing and hiding the modal.
So I'm going to remove my comments here so that we again show it all the time
and in the modal.js file, I get a onClick listener on the dismissal button where I emit this closed event.
Now let's say I want to control whether the modal is displayed or not
inside this modal javascript file for now by simply showing or hiding the modal, now that's of course
something we can do
and we can easily do this by going into the modal.css file where we define a style for this, I'm by
the way not using css modules here but still, this is the only file where I use this modal css class.
So there we could control whether this modal is visible or not by adding a modal open class to it when
it should be shown and the modal closed class when it should not be shown.
And then of course one trivial way of controlling this is to set the display to block when we have
modal open and display to none if it should be closed and we should do the same for the backdrop
so in the backdrop.css file, I'm also going to add backdrop open and backdrop closed.
Now with that we just have to add some code to both files to make sure we actually take advantage of
that,
so first of all I'm going to refactor this backdrop component function here into a function with curly
braces where I then will return the jsx eventually but before I do so and that's the reason why I convert
this, I want to create my classes array basically
so my css classes I want to attach here should be an array,
it should always be backdrop but then it should be backdrop open or closed depending on some prop I
receive.
So let's say I check if props show is true and only if that is true, I want to add backdrop open
otherwise I'd add backdrop closed.
Now finally what I need to do is I need to attached this class here
so this css classes constant and call showing to join this into a string.
Now with that, we can control the display of the backdrop, I'm going to copy that code into my modal.js
file and there too,
I'll
refactor this to take advantage of the fact that we do have a function where we don't just return something
but we will return something, before we do so
I also want to control my css classes here.
So let's make sure we return the jsx code here too
but then as I just said, we should have css classs where we have modal and then we have modal open
or modal closed
and I actually use that as my css class name here, again joining it into one string with that join
method.
Now with that we just need to pass the show prop to backdrop and modal, we can do that in the app.js
file,
there we have a class based component,
let's now add a state where we add modal is open and set this to false
let's say at the beginning and then I will simply change this state.
So in this class I'll add showModal that should be a function where I simply call this.setState and
set modal is open to true
and then I will, I have a close modal function and that of course is all pretty much straightforward,
nothing new in the close modal function
I will set modal is open to false
just like that. Show modal and close modal
now in the modal component, again I do call this closed prop on a click on the dismiss button
so that is the close prop is what I should bind to my close modal method here
so closed will be equal to this.closedModal and the backdrop in modal now
both need to receive the show prop,
that should be this state modal is open because that will determine whether we want to show or hide
the modal.
Finally we need a way to show the modal, we get this open modal button here,
now all we have to do is hook up the onClick listener there to this.showModal. And now with all these
things if we save this, we go back to the application I click open modal we see the modal, I click dismiss
we dismiss it.
Now that's all nice but we have no animation
so again finally, let's work on this animation in the next lecture.