Introduction to Functional Components

We're going to talk about creating functional components now. So as it says in their re-act docs here the simplest way to create a re-act component is to just write a javascript function here. So this example here is pretty much the simplest example of writing re-act component. So we're just going to go and copy that and just paste that in here just to show you a really simple example of how to use a re-act component so we can actually just add this in here as the welcome component so to say welcome. And now this is just going to actually return a header in here so I can actually just close this off here to just be a single reac tag like that. So in a save that. And so now you could see it saying hello. But because we're not passing in any props the name isn't being logged there so now we could just add in a simple prop name and say crypto dash and we'll see that it says hello to dash. And so you'll notice that I'm putting brackets in here. This is a javascript expression so any brackets you see inside of the GSX here is going to be evaluated as a javascript expression. And so a string is just an example of a javascript expression. You can also remove these brackets here and just say name equals crypto Dashon like this which is not including those brackets there and that will work just the same. So crypto dash. Just to show you that does change still while updating. So now we're adding in this simple prop here. I showed you this. This bracket here which kind of evaluates the javascript expression. Another way you can do it is you can just say for example let's say a number. So one plus one is two. This is evaluating the javascript expression and then we'll be inserting that into the brackets so. So now we're just going to change this since we don't really need a dynamic name here. We're just going to change this to just say welcome to crypto dash. So we'll just go here and we'll just change this to be. Welcome to crypto Dasch say that. And so there you go. This is just our message now it's our welcome message that we're going to ask the user to choose their cryptocurrency coins with later. But for now so we're just going to delete this prop's here. But for now this is just a nice welcome message now to show you how to import this welcome message since we're in our apt. J.S. here. App index here. And it's not really great to define these components in here we're going to be actually importing them in here. So to do that we're just going to create a new file inside of our app directory and we're going to call this welcome message and we said yes. And now inside of this a message we can actually paste our welcome message that we defined in our app so instead of saying function welcome we're going to say export default function welcome and we save that go back to our index SJS. And now we're just going to say import welcome from dot slash welcome message actually I should say welcome message messager OK. So now we save that and we're going to get this warning that is re-act must be in scope. You have to remember when you create new files you have to always import react to do that. You say import re-act from re-act and you save that. And so now you can see we're importing this functional re-act component into our app. And so there's just an intro of importing components and creating functional components.