Develop an Appointment App with React and Tailwind CSS (Part 3)
In a real project, you will want to do all the work yourself. So, let’s take a look at how we can install a module that is external to help us add icons to our project. Now the one I’m going to be using is called React Icons, and it’s one of my favorite React Component Libraries.
To install it, we’re going to issue an npm install command, and use react-icons, and then save it as a dependency. Go into your terminal, in your project, and run the following command.
Once you’ve done that, you can use it in any one of your modules, which is pretty cool.
Now, to use that, you’re going to need to have the import command with the icon that you want to import.
So, one of the cool things about React Icons is that it’ll only insert the code for the icon that you need. So, you won’t, unlike something like Font Awesome if you install it normally, you copy the entire library with all the icons, even if you only need like two or three icons, so, way more stuff than you need and has to download that By doing thing with this module, it just copies the code for the one or two or three or however many icons you’re going to need for your project.
So, you use the import command in any module that you want, and then you add the name of the icon. When you import, you can add more by adding commas and putting in more names, and then you have to specify what library you are going to import them from.
This is usually a two-letter extension, so, bs is for Bootstrap and you can find the names of the icon libraries on the website. Then whenever you want to use the icon, you can just use a tag with the icon name. Usually, this is capitalized
and you can write the code like this or, I usually just write it as a single sort of tag and put a slash at the end, like:
So, as I mentioned, to get the name of the icon we can go into React Icons and either search for what we’re looking for.
So say that you’re looking for a cool trash can, then you just type in ‘trash’ in Search Icons and you’ll see that all the libraries or icons for trash for all the libraries appear.
I like this one called BiTrash, I think that looks pretty cool. And once you find one that you want to use, just click on it and notice that it copies the icon name to the clipboard, which means that you can immediately use it.
You just have to remember that this two-letter word before the name of the icon is the extension, but if you know the library, if you go to say BoxIcons, which is where this comes from, you can see that this is how you would import it, the bi goes at the beginning. So, you can kind of guess it from the name or you can just go to that sort of icons page and find the icon and the import command right here.
So, let’s say that we wanted to import, I’m going to use this BiArchive. So, now it copied the name of the icon to the clipboard and we’ll need to add this import icon name at the top of the component.
So, let’s see, we wanted to go ahead and add that to say this App, that JS component. So, first we’ll need the import statement. So, it’ll be imported and then, in curly braces, the name of which icon you want to import, in this case we just want this icon to begin with. And then we also need from, and react-icons, slash and then, the library name, which for us was bi.
Now that means that the icon is ready to just be inserted wherever you want it to be, and what you will do is you will just copy the name and go ahead and create a tag, put the slash at the end, and that will allow us to import that. So, once you save it, you can see that it came up left to the Appointment text in the browser in the proper position.
And that’s how you can install any icon. If you wanted to have more than one icon, then you would just sort of add comma. So, it actually makes sense to import from just one icon library,
but if you want to do two then you can just copy this a couple of times or however many times you need it, and bring that into your project. So, that is awesome.
And it’s a great way to find, just about any icons you need are going to be on that list. So, not only can you install a library like this for icons but you can also use any other React Components that have been pre-made for you, to bring other things into your applications, a little bit more efficiently.
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
In the dispensation of CSS libraries and frameworks, a ton of awesome libraries has been built to simplify the work of a developer in the quest to create intuitive interfaces. However, quite a lot of them (Bootstrap, Foundation) impose design decisions that are difficult to undo; they come with predefined components, therefore eliminating the need for dynamic customization. This is the reason why Tailwind CSS is considered to be a good choice for building 21st-century web interfaces. Make your life a whole lot easier with Tailwind CSS. Setting Up Tailwind CSS in a React Project
Adding Tailwind CSS to our React App. In this series, we are going to be building a full SaaS Web Application using React.js and Node.js! This will cover everything from setting up the project through to building the individual components and then through to deployment through automation. The SaaS product will allow developers to programmatically generate OpenGraph images for their social media posts.
In this article we will go over how to create a confirm dialog using React and Tailwind CSS. This article will roughly go over the logic in my other article, Creating a Confirm Dialog in React and Material UI, however this article will use Tailwind CSS.