Your first component - React.js Tutorial

- All the work that we've been doing has prepared us for building our own interface. Now let's get started by putting together our first component. Now you've already seen a couple of components in our application. If we take a peek at the index.JS file, which is the entry point for our application, you'll notice that it doesn't start outputting HTML to our page. Instead it calls a separate component called App right here. It imports it from this file which then displays the information that we need right here. And App.JS itself calls a different component from the React icons library. And you can see how it's used in this line right here. We simply call it as an HTML tag with properties. This should make it pretty easy to understand how to make another component. So let's go ahead and add a folder in here, in the source directory. And we're going to call this components. We're going to place all of our components in here. The first component we'll need will be a search component. So I'm going to create a new file and I'm going to call this one search. And usually you capitalize the name of components. It'll have a .JS extension. Now in here there's a couple of ways that we could create the component. We can use a function and type in the function name and then create a function just like we would in normal JavaScript. But there's another way that you can do this and it's a little bit more convenient for some of the work that we'll be doing later on. So we can create a function by creating a constant. We'll call this search. And then we'll use arrow functions instead. Arrow functions are just like regular functions except that they have a little arrow which is just an equal sign plus a greater than sign. And they allow you to use this section right here to pass along one or more variables. And in here, since this is going to create some HTML for us, it's going to return a number of things right here. So what it's going to return is some HTML and I've prepared a file here for you with all the HTML you need for this component. Now this is written in JSX, so you see class name instead of the word class and we're already using an icon component called search right here and caret down. So let's go ahead and copy this. Switch back and we'll go ahead and paste. So that's interesting. We have a JavaScript function that returns some HTML looking stuff which is the language we call JSX. So in addition to this, we're going to need to import the icon library for the two icons that we're using here. So we'll say import and then in curly braces, we'll import BI search as well as BI caret down. And this is going to come from the react icons library /BI for the name of the icons we're using. And then since this is going to be used in a parent component, we're going to need to export default which means that by default, what we want to export out of this module is the search component. So let's go ahead and save that. And then we'll need to call this inside the app .JS component. So now this is going to import and we'll give this a name locally. So locally this will be called search. I know this is the name that the component, of course, is called but what we call this here will be the name of the tag that we're using wherever we're calling this component. So import, search from and we'll look for a component and then the name, we don't need to put the JS in here, so we'll just leave it like this. And we'll save this and then we'll need to add this into our project. So after this headline, we will use our new search tag. We'll use the self closing version and we'll hit save. Now let's see if this is showing up in our application. And sure enough you can see that the search box is showing up. It has the proper icon next to the search right here and it has this little caret that allows us to create a drop down whenever we get to that part. That's pretty awesome.