Hello. Good evening. So um, today I'm going to do part two of this as Fiji and react breakdown. Um, I have got just a regular create react app here. Um, the only thing that has changed is um, we have two folders. We have a folder that is SVG and then we have a folder that is S. P. G. R. And in the folder that is says SVG under source. Um We've got a little SPT file here. I've called it green flower. I will give you a visual. So you know what we're working with 2-2. Okay, so this is our green flower. Um, I know this looks a little bit ST patrick's tea but the other flower I started drawing looked like a gingerbread man. So I was like, okay, let's let's not use that. Let's use this guy. And um, um, so this is what we're working with in our folder hair. Uh, if you ever need some SvG files though just to fool around or you're sort of poking around the internet looking, I highly recommend checking out scrapbooking forums because those people are really surprisingly advanced in the SVG creation and sort of distribution. It is usually christmas themed, but there are other, they have some things, they've got a lot of borders if you ever want something like that. So yeah, a lot of open source um, sp gs in that community, which it didn't surprise me when I first thought, but it's, it's, you know, I should have, I should have known because they are extremely organized. How organized you have to be to have a not dry glue stick in your house. It's uh, it's more than I currently am. So anyways, Okay, so we've got this green green flower here um similar to where that last video left off now, the new thing that we're gonna work on today is we're going to use something called SvG are now sp Gr um I've got it downloaded in already into this. Uh but what it does is it converts your SVG image, so your vector graphic into jsx into a react component and it does it automatically for you. Um, I'm going to do it from the command line. It's really very great. It's a little bit magical. Um it's uh there's a few sort of processes that it goes through. I know it uses S V G O, which sort of trims off all the information that you don't need. And I know it puts it through prettier as well. Um but I think there's like four or five steps, but you know, usually speaking, I'm fine with the answer that says is magic. So if you want to look it up, you know, you can't, but I know that the output is something very useful and I'm really glad that it's out there and I think there is a version of react, that it's going to become, it's going to come with it. Um, I don't know when that is or if that's what's going on with that, but um, I think that's that's in the horizon at some point. Okay so like I said I'm going to use it from the command line. I don't know if you can see this little, I don't know if it's too tiny for you but um this is what I'm gonna do here and the one that I like to use is down here in which it says okay so here's here is my command and then here is my folder and here is my file and I want you to create the new folder and new vial into this location. So that's why I've got the sPG our folder here. So if I need to. Okay so here you can see that I'm saying basically um ah go to the source folder, go to the SPG folder, take the green flower SVG and then go to the source folder go to the SVG our folder and then create a new file called green flower dot Js. Yeah if I don't know if you heard that side, that was just the sigh of anticipation because it doesn't. Okay, it looks pretty good. Good. All right, here we go. Okay so um if I show you guys that buy side here what we're working with. Okay so this is our usual s Fiji the one that was already here and then this is our new react component SPG so you can see here we've got SVG green flower um we're passing in props and we're exporting Svg green flower. Um there's a few other things that look different, like where, where it's really easy to see here is you've got your circle class, um your circle X circle wise to the size and then the radius here, um you see what's going on here and then also what you're seeing here is you've got your style component here, whereas before the S T one was called up here with the fill color being here and in this um in the JsX version that Phil is down here as well, there are other things as well which you can sort of go through, you can see a few other bits and pieces that have changed. So I'm going to close this up for now. Okay, we can go down to one screen here. Okay, let me just cue this up. Oh, and I'm going to save it so you can see it too. There we go. Okay, so first things first, what I'm gonna do is I'm going to import it so we can see it on our homepage and then what we're gonna do is we're going to pass it uh color variable so we're gonna pass it some proper information and I'll show you how to do that. Yeah, yeah. Oh, I should actually have Copying pasting as being number one friend. Oh, we're importing our new component. Yeah, from SVG are in barge's X. Great, Yeah, so and then this is where usual image logo is which we don't actually need the image. I can keep this tag though but we no longer need the image shake. Okay, good, big, but we can change that. Uh there we go. Okay, easy. All right, okay, let's now let's for this slightly more complicated bid. Let us let us change the color or let us see how we can do that. Okay, so I'm going to start this by importing prop types Now this is a good habit to get into, it's good for um keep plugging and if you aren't used to it or familiar with it um I highly recommend sort of becoming acquainted. You can I've already got it downloaded here. Um but let me show you what you're where you're gonna want to go. Like I've cued it up. Okay, so there we go, import prop types. Let's make sure my cases are correct. Yeah. Good. Um you can read a little bit about it here. There's lots, there's lots online about it as well, but this is basically where you declare what what type your prop is going to be. Just like type drop. Sounds like so boolean string number, whatever. All right. And therefore, and then when you're when you're passing props around it will tell you if you've sent it the wrong thing, if you sent out the wrong type and then that can help eliminate problems in the future. Ok, so now the first thing we're gonna do is let's maybe deal with um the central color which we have right now is yellow. So we know that that's F C C C 01. That's this particular like extremely bright. Best buy shade of yellow. Yeah. Okay. Outside of your SVG take what you're gonna want to do is you're gonna wanna say refugee green flower thought prop hips. There we go equals and then let's call it just color uh color center and then we're going to say but pics. Uh huh string hey? Mhm mhm save that a little bit too early. And then if I go to fill here, I'm going to say color center variable and then Okay, two Svg green flower got default ups. Okay, so this is saying basically if new information isn't being inputted um obviously default props, it's kind of then um what we want the color that we want it to be. Oh and then we can input that. Here is a string um I can't remember which one that was. Let's try this one here. Okay, what is going on? Yeah. Mm Oh I know we need to be outside groups. There we go there. Almost better compiled with an air color center is not defined. Is that correct? The center color center Oh this is 9 31. Oh I know I forgot this is important, props. Color center. Here we go. Okay, um that should be coming out yellow. Oh here's this, this one here. Mhm. Oh no I'm sorry. That's a lower case and this is also lower case prop types. Oh this is green. Okay, let's try this guy. Mhm. Hey blue. Okay. All right, okay. So I guess that's another thing is that be a little bit careful on the capitalization of these guys. I seem to it's not second nature to me so I definitely don't have have a smooth execution on that. Um Okay, so um now let us go back to our object as here and let us pass a new color weather center equals and then string red. Let me go. Right, so this can be any color you want. Um and you can see here that we're passing in um the information props is the color and it's coming up to the S. P. G. R. File here. You can do the same thing obviously with the leaves as well. Um Using this style fill and if you were to do the pedals you would go ahead and make another line entry underneath your and just say color pedals and then propped out type strength. All right, okay, well maybe the next one. We will do a little bit of an animation then. Okay, thanks very much