Learn The MERN Stack

Learn The MERN Stack [4] – ShoppingList Component & Transitions

alright guys so in the last video we implemented our clients so we're able to run the server and the client at the same time we also cleaned up the the

default boilerplate for the create react app application and we also created our app navbar component which uses react strap so now what I want to do is work on the shopping list component and like

I said we're not going to be dealing with the backend for a little while I want to just get get stuff set up in the front and then we'll connect to the backend you know after we implement

Redux and and do some other stuff so let's create a new file in our components directory called shopping list dot j/s okay and we're gonna be implementing the the transitions here as

well so there is a little bit of CSS that we'll have to add but let's let's see let me just see something here real quick all right so we're gonna import to react obviously we want react and it'll

be a component based component class based component and this will be from react okay and then we want some stuff from react strap as well so we're gonna want a container everything all the

items will go in a list group so we want to bring in list group along with list group item and we also want a button okay and that'll be from react strap strap okay we're also going to need a

couple things from the react transition group so we're gonna want something called CSS transition we also want transition group and that's going to be from

react – transition group like that and then we're also gonna want the UUID component because for now we're just going to generate some IDs for our items we won't need this ultimately but just

for now and that's the thing about this this series is I'm doing it in a way where you can see how like we're going to start off with just putting static data and right in the component then

we're going to move to implementing Redux and putting that static data in redox inside the store then we're going to move to connecting to our back-end and getting the data from there from our

database alright I could just go right to connecting to the database but I think it's a better learning experience doing it this way hopefully hopefully so let's create a class called

shopping list okay this is our component it's going to extend the initial react component and we want to export export default shopping list okay so let's add our state so like I

said we're gonna hard code the state for now I'll have items and it'll be an array and it'll be an array of objects which will have an ID and to generate the ID all we need to do is UUID like

that it's a fantastic little little module that oh that will just generate IDs by just putting this in here and then the name will just hard code we'll say eggs okay and then we're just going

to copy this will do for objects here for items this one will be milk this one will be steak and this one will be water okay and just UUID even though you know it's

not gonna it they're all gonna be different IDs that's how it works even though it's the same function it's gonna generate different IDs so now we want to do is the render

so let's go underneath the state and let's create the render method here now instead of having to use this dot state dot items I'm going to just use a little bit of D structuring and create a

variable called items okay so when we wrap curly braces around it we're using D structuring so we're basically pulling it out of whatever we put here so we're pulling out items from this dot state

items then let's be sure to add the return and not forget at this time and inside here we're gonna wrap everything in a container kind of put things in the middle inside the container we're gonna

have a button now later on we're going to have a separate button and modal component that we're going to create but that's after we implement Redux because right now we just have the state in this

single component so that's what we're gonna do everything with everything from right now but we're gonna change it later so let's say button add item okay and then this button is gonna take some

properties so inside the button here we're going to say color equals dark this is react strap I'm just gonna put a little bit of style in react in line styling because I just want to add a

margin bottom and we're gonna set that to two REM and then I'm just going to put an inline event handler here instead of creating a separate function I'm just going to do an on click and we'll put an

arrow in here and set that to a code block and we're just going to use a prompt for now later on we're gonna have a nice-looking bootstrap modal but for now it's just going to be a prompt so

we're going to put whatever is in that prompt the answer will go into a variable called name so we want to say prompt and then the text that we want to display to the user will just say enter

item okay this is this is just temporary though and then what we'll do is check to make sure that that was filled so if name then we want to set state this dot set state and we're gonna pass in state

and then put an arrow here to some parentheses and then an object and then what what I want to do is just add whatever we put in here whatever this new name is we want to add to the

current state so we can take the items that are in the state and inside some brackets we're going to use a spread operator to basically say take the state items so we have the state items but we

also want to add on to it a new item with an ID that will be generated by UUID and then with a name that'll be the name that's passed in now since these two are the same with es6 we can simply

just do name like that alright and this this is ultimately what we'll be doing in the redux store as well but for now we're just doing it within the component so what we have now should actually add

to the state so if I save this and I go back obviously there's oh we need to hope we need to insert it in a pas so let's import shopping list from components / shopping list and then

we'll put that right under the app navbar and save and all we should see now is the button and don't mind these these errors here if we add an item it should get added to the state now we

can't see anything down here we haven't done that yet but if you use your react dev tools not the Redux dev tools to react and we go to shopping list you'll see that the initial State

we have these four items each has a generated ID from UUID these are not coming from the backend okay it's very important to understand this is all in the component but we should be able to

add to the state by adding something and here if I say test and I add now there's five items in the array and this last one it's test okay so it's getting added to the component state so let's go back

to shopping list and now what we want to do is display those items underneath so under the button here let's put in a list group so we have a list group and inside here we want to map through all

of the items and then display each one now this is where we're going to use the transition group we want to wrap basically we're going to do the items dot map but we want to wrap that in

transition group and then just give this a class name I'm just gonna say shopping shopping list and then in that transition group basically all the transition group and the CSS transition

is is just wrapping certain things so inside here is where we want to map through the items so we're gonna say items dot map and if you used react before this should be very familiar I'm

just going to use a little bit of destructuring so I'm going to use parentheses and then curly braces and I basically saying I want the ID and the name okay and then

we'll use an arrow function here and then what do we want to do for each item we want to display a list group item right because we're in a list group each item should it be in a list group item

but we want to add that transition effect so first we want to just do CSS transition it takes in a key it should be a unique key which will use the ID which is being passed in right here so

whatever the current ID of each one that will be used as the key we can also put a timeout which I'm going to set to 500 milliseconds and then it also needs a class names attribute you can use more

than one but we're just gonna have one called fade and we will have to add just a little bit of CSS for this to work using that fade class now we can put our list item so let's say list or up sorry

list group item all right so inside the list group item let's just do we're gonna have the delete button but for now I just want to make sure we can at least see the name which is

coming from here well loop we're looping through the items we should be able to get the ID in the name we want the name to be displayed here so let's save that and take a look and there we go so you

can see each item again just coming from the local component State now before that name I want to put a delete button so right here let's say button and I'm gonna use ampersand times semicolon

which will give us that little X icon but this button here the opening tag is going to take in a bunch of properties one is going to be class name we're gonna need this for a little just a

little bit of CSS so I'm going to call this remove BTN color so with react strap we can set this to color danger which will be read by default we can set a size so basically anything

that you can do with the bootstrap regular framework you can do with react strap I'm gonna set it to small so we're gonna put an on click here and set that to set of curly braces and then we're

gonna put an arrow function that is set to some curly braces and then we want to call this dot set state okay just like we did with when we added the item up here we did this dot set state we passed

in state and set that to some parenthesis and curly braces and then we basically just added we took the current state and we also added a new a new item so this this time we want to delete the

items so what we'll do is again we'll say set state and we're gonna set it to curly braces and I'm sorry parentheses and curly braces and we'll say items and now what we're going to do is take the

items in the state which we can access with state items and we're going to use the filter method okay filter is a high order array method and we're going to use item as the variable

here and then it takes in a condition so the condition is going to be if item dot ID is not equal to ID so basically the the whatever we click on with whatever item we click the delete button is not

going to be returned in this array it's gonna it's gonna be filtered out so it's going to be deleted essentially from the UI so this will actually be the functionality in our Redux store but

then on top of that we'll have an action that'll make a delete request to our server that will delete it from the database so you see it's going to be deleted from the database and from the

UI alright so I think that should work let's go ahead and save this and let's go back to Chrome and let's go and delete milk okay steak there we go so we can now delete

stuff and we can add stuff good cool now we don't have the effect yet the the transition effect because we do need to add just a little bit of CSS now remember we have this class names

equals fade so we can use this inside of our CSS so I'm gonna go to app dot CSS which is kind of like the global stylesheet you could put this anywhere but I'm just going to do it here but

before I do that I just want to take the remove button remember we gave it a class of remove button and I just want to add some margin right and I could have did this in line I guess but it

doesn't really matter I just want to move it over 0.5 Rams so now if we look you can see it's moved over and it just looks a little cleaner so now let's add the CSS for the transition so since we

called it fade class names equals fade we can do fade – enter and we want to do fade – enter – active so this is like this is when it comes in and that's when we add an item when we type in something

and it shows up that's the fade enter and then we want the same for fade exit so we want fade exit what this is like the start state and then the end state so fade exit and active all right now

fade enter to begin with we want it to be almost invisible so I'm going to set the opacity to 0.01 okay and then limit when it's active basically when it when it does come in we wanted to we want the

opacity to change to one which is fully visible okay but we need to add a transition to that opacity so we want to say transition we want to use the opacity property we can give it a time

we'll say 1000 milliseconds and we want it to ease in okay that's like to cut the motion I guess we wanted to ease in so it's very important that we add this transition here and then to exit so to

exit we want it's going to start with full visibility so past that e1 and then when it exits out we want to change the opacity to 0.01 which is barely visible and then again add the

the transitions so the same thing here we want to add like that alright so that should be it let's save that and go back and now if I delete something it fades out if I add something it fades in now

notice that gets added to the bottom when we start to deal with our back end remember how we sorted it we sorted it so that the most recent will be on top so that will change once we deal with

our back end but right now we're just dealing with static State that's right inside the component alright guys so the next thing that I want to do is implement Redux and we're going to do

that in the next video right now as you as you can see we have everything stored in the component I don't want that obviously I want this to be in a Redux store inside of a reducer and then I'm

going to create another component that'll be a modal because right now we just have this ugly looking prompt when we add an item localhost 3,000 says I want to have a nice modal that will

build with react strap which will be a separate component but we need access to the state through both the shopping list component and the modal component and that's where Redux comes in and it also

just gives us a better way to lay out our state and a way to to make requests through actions and so on to our back-end ultimately so that's it for this video guys in the next video we're

going to implement redux there is a lot of boilerplate which I absolutely hate about Redux I would suggest if you've never dealt with redux before watching my redux crash course if I remember I'll

put a link in the description but if you just search redux I think it's the first video that pops up so that's it guys I will see you in the next video

In this video we will create our ShoppingList component and make it work with just local state with some dummy data. We are not yet dealing with Redux or with our backend. I just want to get the single component working, then we will move to Redux

Code:
https://github.com/bradtraversy/mern_shopping_list

MERN Stack Front To Back Udemy Course:
https://www.udemy.com/mern-stack-front-to-back/?couponCode=TRAVERSYMEDIA

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia

The Developer Hangout: Public Discord Server
https://discord.gg/developers