 Hello everyone. Good evening. So, this is my second talk in the ReactKnee knowledgeable re-knowledgeable. Thanks for giving me an opportunity second time again and again I am that is my favorite topic about the Gatsby. So, the last time when I was talking so, I was showing you how to build a you know Gatsby using I mean using Gatsby how do we build a blog under 10 minutes how fast we can build the you know the blog. So, today I am going to show you the new feature the cool feature which Gatsby has you know introduced very recently that is a Gatsby theme. So, what is Gatsby theme? It is basically the you know the functionalities which we can reuse across multiple sites can be built as a themes that is basically like I can actually publish those themes as well as publish and distribute across various sites and you know and also Gatsby earlier it had a kind of a starter packages like say for example, you can use some starter themes basically kind of a theme which can fork the starter package and then you can build your own site. But the pitfall of that particular you know structure is you have to rebuild everything and it is kind of a eject like how react comes with the eject like with the create react up once you did it you cannot actually go back and do it or otherwise if there is a update or new feature been added to the starter kit you cannot get that update you have to rebuild everything again from the scratch. Where in themes it is a package NPM package it is distributed as an NPM package where you can actually whenever there is update come you can install a new version. So, you get your website also will get updated automatically. So, today we are going to quickly build the small theme component I am going to show you how do we build. So, do I have to in loss is it okay? So, I have a basic setup here it does not have any code it. So, it is a kind of a mono repo that I have set. So, you can see that this there is a root package .json which contains nothing it is just a mocked it as a private and it has two workspaces Gatsby theme like post. So, I am naming my theme as a Gatsby theme like post okay before diving into it what we are going to build today is a small like button like say for example for any blog and for any blog post if we have a like button people. So, we can easily know okay people liked it or not. So, that is the one which we are going to build today it is easy to build a block but wherein the like button have lots of functionalities I am going to show or I am going to build a theme which can be installed as a npm package and if you have a blog which is written in Gatsby you can easily download this package and then put it you will have a like button in your every blog post. So, that is a so this is one of the workspace I kept it and there is a small site workspace that is basically we will be experimenting our code with this site workspace. So, there are two different folders one is the Gatsby theme like post and site. So, this is where we are going to build our own component here let us build it. So, I am going to create like maybe small source components and I will call it as a like button okay before building let us just check whether everything works fine. Yeah okay so as you know I am using the okay maybe I should is it visible I am using a workspace this is a Mono repo. So, I am using a workspace here let me first see whether is there any problem with my site folder. So, I am using a Gatsby develop here. So, if you look at the package JSON of each and every folder here it is a very simple thing. So, I do not have much dependencies. So, the one main dependency is this. So, as I mentioned each and everything can be installed as a package npm package. So, it is a it is a it is kind of a link npm link that we have created Gatsby theme like post there is no version for now but once I publish this particular library then you can have a version also here. And like the develop actually uses the Gatsby binary to develop to run it as a developer mode and the same way for here also Gatsby theme like post the same scripts but there are couple of dependencies the dev dependencies is like I am I am not going basically I will try to minimize the dependencies. So, that every dependencies will be managed by the site owner. So, here the peer dependencies and the dev dependencies are given okay. So, there are no compil errors my site is fine I am going to test the same thing for the my theme folder. So, if I do not have any compil errors here too. So, let us go and build our components as usual we need a package it is a simple like button. So, let us see whether it works fine. So, this is a simple like button. So, I am putting a button here. Let me export it to default. Okay, so the interesting thing here is the main. So, if you look at the gap package the JSON, there is a main which is pointing to the index.js which file I mean that file is not it available I am going to create that file. Okay. So, here I am going to I am sorry I forgot the syntax. Yeah. So, what I am doing is I am exporting the like button as a you know default component. So, that people easily can use a named export named importing while importing this package. Okay. So, the main this is fine. Now, as you already aware, like say for example, I want to create any pages in a Gatsby everything should go under the src slash pages. So, I am let put src pages and I will call this index.js which is the home page. Okay. Let me copy this and put it here and make it as a home. I will put it as a hello everyone. Okay. So, now I have a default page. So, let us see whether it is working fine. Let me launch my site which is basically it has only one page which shows hello everyone the h1 header tag. Now, I am going to add the component which we created the like button. So, to do that, let me do this. So, so this is the import statement from from our own build theme and it has a like button. So, I am importing the like button here and that is it. So, you can see the like button. Is it visible? Yeah. You can see the like button. So, the like button is built as a theme basically. So, that is a power of theme. So, you can build any component and can distribute that particular component as a package and then people can customize. So, I can customize from this particular site itself. Okay. So, now when I click what I wanted just to keep it simple like I want to have some identifier and then store this information in the local storage. So, that every time I visit, if it is already like this button has to be disabled. So, that is a goal. Let us quickly go here. Okay. So, as I mentioned, so on I click I need some details to be you know stored about the post maybe like I want to capture the post ID. So, let me take the post ID as a props. This will be a unique identifier which I will use it to store it in a local storage maybe like handle click. Yeah, I will call the handle click. So, I am going to create a new method. So, I do not want any default event handlers. Okay. So, I have a post ID. It is a simple. So, I will create a key called whatever the post ID that I have received and then maybe like I put it as a true. Okay. As you are aware like the local storage which always stores any value as a string. So, which you can see the type of the value as to be string. Even if you pass a Boolean it will automatically you know considered as a string. So, better not to deal with any types here. I will store it as a you know string. Okay. So, okay. Now actually once the user clicks the like button I want to be disabled for that. Let me have a local state. I will capture the you know the state of the button here. Click. So, and handler for the click and I will use the local state here. So, by default I will keep it as a false and the moment it is stored I will make it as a true and here disabled. So, I will point it to the click state so that if it is already clicked it will show. Okay. So, yeah. All right. So, let us see what I have in my local storage already. Okay. I do not have anything. So, but as I mentioned there is a post ID which the post ID I have to pass. Let me go back to my page. I will pass it as a maybe like index post. I will pass it as a index post. Now this should be fine. So, you can see that index post is stored in a local storage and yeah the button is disabled. Okay. So, there is a problem now. After refreshing again it is showing I mean the button is not disabled. The reason is we have to handle this in a well component mount basically like we have to check whether this what is the current state of this button. Okay. To fix that problem favorite use effect and the dependencies. So, the dependencies for the use effect I it has to be a post ID because I am going to check whether the post ID state is disabled or not. So, I have taken a dependency as a post ID, local storage get item of post ID. So, you know why I added post ID as a dependency, right? Because I am actually reading from the local storage with that post ID identifier. That is the reason I am adding it as a because any props any state whatever it gets changed you have to add it as a dependency that is a mandatory for the use effect. So, I am adding that and yeah set click. So, that is that is pretty much enough. So, you can see that this button is now disabled that every time you you know refresh it will be disabled only to just to make sure that it is working fine. Let us create another page maybe I will call it as a about about but this time here I have to put it as a about post because for each and every post it has to be different. So, if you see this button is enabled the reason is like we do not have this you know the key in our local storage if I like then it will be added okay. So, yeah that is pretty much is it like so we built a button and we we are actually doing it as a theme so that any in any of your existing site you can easily add this like button. The functionality is very simple here but we can make it like you know kind of a persisted across not in the browser maybe like we can add a Firebase we can actually send this even to the Firebase and store it across and it will be real time that is that is it today for today and yeah. So, so I am Vimal Raj Silvam and I will be able you can actually reach out to me through my Twitter or my blog. Thank you. Thank you.