The react-icons library incorporates icons from many libraries and easily allows you to place them in your components. Learn about react-icons in this video.
- [Instructor] It's time to start working on our navigation and I'm going to use an additional library that I've pre-installed in here so that I can use icons in my project. If you take a look at my package.jason file I'm importing a library called React Icons. It makes it super simple to add icons to your projects and ti's really cool because you just import the icons you need for a specific component. We're going to do this by creating a new section so we're going to need to make another file here.
We'll call this one navigation. I'm going to grab this simple welcome component 'cause it's the smallest and just copy it and paste it in here. Of course, I need to change this welcome to navigation and I'm going to import this sort of generic React component and I need to import a couple of other little things. The component I'm going to need for icons is called FaUsers.
This is actually the icon itself that I'm importing from react-icons/fa. And this does need to be in quotes here. So this will import a specific icons and the way that this icon library works, you have a lot of different types of icons that you import from different library. So the Fa subdirectory here stands for Font Awesome which is an icon library that you can get online. If you want to get more information about React-icons, make sure you check the link at this URL.
To get the code for this navigation, since I don't want to be typing a bunch of bootstrap code, I've prepared a little gist for you at this URL. I'm going to just grab this, again you can click on raw and it's a little bit easier to copy it but if it's short like this, you can just select it and copy it. I've already changed all the classes to class names to make it easier for you. I'm going to replace what I have in here with this code. Let's go ahead and save it and I'm going to go ahead and import it.
Let's go back to app.js and just like we imported this home we're going to import navigation here. Navigation is also going to receive the user state so I need to go ahead and I forgot to actually import it here so I need to say import navigation from navigation and it's going to be an error here so looks like line 34 export default should be navigation.
I forgot to update this. I find the errors in React really useful. They very quickly let you find out what you need. So now my problem is I've got all these different lengths. And just like with the meetings, what I want to do is make sure that it only shows certain navigation depending on whether or not I have user information. So since a have a user right now, I really shouldn't see things like log in and register, I should only see meetings and log out.
We've already done that before so this is just a series of switches. So I'm going to grab this meetings right here, the link for meetings and I'm going to create an expression here and put in user ampersand, ampersand and then paste my link. And then I'll do the same thing with the other ones with the proper values so in the case of log in, what I want to do here is say if there's not a user then go ahead and print out this log in.
So now log in is gone since I do have a user that's great. The same thing for these other ones here. And finally log out expression user ampersand, ampersand and then the link. You'll notice that sometimes you need these parentheses so that the link works properly.
Go ahead and save then. You can see now that we only have the meeting button here and we only have the meeting link and actually log out should also show up there. So let's delete this not sign here and we see meetings and also your ability to log out. And then let's go back into app and just get rid of the user by typing in the null value here. And if it doesn't have a value you hit log in and register as well as these buttons down here.
So that is pretty awesome. So let's get to the icons. We imported, let's go ahead and save that. So back so we can see meetings now. Let's go back and do our icon now and it's really, really pretty simple and I have to say awesome. Let's go into navigation. And all you have to do is import the icon that you want to use from the proper library, and as I mentioned there are different libraries that you can use here. Then all you have to do is use a component and the components are named just like the thing you import.
So on the website for React icons you can see a list of all the icons and their names and which components you import. So I want to do this right here in the brand. So you type it in just like a tag. FaUsers and then if you want to you can add a class name. I'm going to say margin right of one unit which is a bootstrap class. Now you can see this little icon appearing right next to the brand and whenever you want any other icon in your application, that's all you need to do: import the right icon from React icons and then use it just like you would use atcomponent but it's not anything you have to define.
And the nice thing is that if you have different components and other components aren't showing up, it's not going to load that icon unless it needs it. So it's really efficient.
- Integrating Firebase
- Managing state in forms
- Registering users
- Logging users in and out
- Creating, editing, and deleting records from Firebase
- Filtering and searching data