Forem: Aadi

A step by step guide to publish your first react library on npm.

Aadi — Sun, 21 Feb 2021 14:27:48 +0000

In this article, I will go through the entire process of creating a reusable component and publishing it on npm for other developers to use.

This article assumes that you already have a component to publish but if you don't then just create a simple button component or something to test your understanding once you finish reading this. I have tried to keep this article easy to follow for beginners with less technical jargons to help you quickly launch your package so let's get started.

Firstly, what is a reusable component?
I will use an interesting analogy to make sure you never have to look up for its definition again.

Imagine a pond of water with a caretaker whose only job is to help people catch fishes easily from the pond or dump their wastes into it. A reusable component is just like that pond and the caretaker is our props, the fishes coming out of the pond or the waste going into it is the data that we pass or fetch using props. That's it.

Now I will take you through the steps involved in this whole process. These are the steps that I created for myself while planning for the project and I urge everyone working on their projects to first think about the whole process and break it down into small steps because that will help you measure your progress as well as boost your morale as you move forward. I consider programming as no less than a battlefield and it is very easy to drop your weapons and surrender here when things get rough, especially when you are a beginner. That's why having checkpoints in your path is important. Let's move onto the steps now:

Creating the component:

The first part is to actually write the code for the component and test it out. My first npm package was a simple drag and drop component and since it was not a lot of work as I just needed few event listeners to listen for drag and drop event and then callbacks to handle those events, I went ahead to write a sample code with codesandbox. It is a great tool if you want to avoid the hassle of creating react boilerplates just to create and test a simple component. But if you want to use your code editor from the beginning then I would need you to first create a react boilerplate then a folder named "component" in the src directory and put your component code in it. Then clean your parent component (the app.js file in src) and import the component you created. Check if it is working as expected.

Passing data:

The next step was to think about how I would receive some data from the user. I am sure you already know how to do that. Yes, I am talking about props but we don't simply use that here as we do normally in our projects. We first import a package called prop-types to declare the types of props that will be passed in our component. Here is how I used it in my component to give you an idea.

If you are familiar with typescript then you might already understand what I did here. Typechecking your props like this makes sure that only the data-type you declared can be passed as props else will throw an error in the developer's console.
This is helpful because suppose you built a big and complex library but those who are using it in their projects don't know the data-type they are supposed to pass as props and hence might pass the wrong ones making your library to behave unexpectedly while they won't know what they did wrong (Example- Your library expected a string as props but received an object instead). Here's a great article if you're interested to learn more about prop-types.

Fetching data:

Now comes the third part which is fetching data from the library i.e. returning some data to the user. In my drag and drop files, I had to return the dropped files and believe me, despite being so simple, it took me a while to realize because I thought there might be some other magic trick to do that but there wasn't. I just had to pass a callback as props to my component the way we normally do anywhere in react which will carry the data back to the parent. simple, right? So if you scroll back to the code in the image above, you'll see that I am receiving a callback as a prop named getFiles for the same. One more thing, that isRequired at the end in our propTypes is added to indicate that without passing that prop, our component won't work as expected. There are other props that are passed as optional in which case, you don't need to add isRequired in the end when declaring their types.

Publishing the component:

The last step is to actually minify the code to publish but since I had little idea about webpack or anything, I followed this article by Chan. It gives you a boilerplate with all the fine tuning already done to the files to publish on npm. Just replace the src files with yours, change the project name in package.json and webpack, create a build and publish it. Volla! easy peasy. I know you might be wondering, "But this is like a shortcut, where are the detailed steps for publishing?" and you are right but my friend if you're publishing a package or building any new kind of project for the first time then your primary goal should be just completing it as soon as you can. Remember I earlier mentioned that programming is no less than a battlefield and in a battlefield, winning with minimum casualties is the primary goal. And that was our motive too in this article, to complete and publish our library without dying i.e. loosing motivation in the middle. You can always go and dive deep into publishing a package or what goes under the hood when npm publishes our package? how does webpack work? etc. But for now, this is enough.

And if you continued this far then here is a bonus. In the image I shared above, you will see I imported something called useDropy but what is that? They are called custom hooks in React (give yourselves a pat on your back if you already knew). Let me explain what this is with a simple example. Take any of your component files and instead of returning the JSX at the end, return some value like you do in a normal JavaScript function and that's it, that has now become a custom hook which can be imported anywhere in your project to fetch that data being returned. In react's language,

Building your own Hooks lets you extract component logic into reusable functions.

That can save you from the pain of prop-drilling and will help you keep your code clean. You can read more about them here.
To checkout my first drag and drop library that I published on npm, click here.
I hope you liked the article, wish you all the best.

The Mysterious React hook: useRef()

Aadi — Mon, 21 Sep 2020 02:33:22 +0000

useRef() hook is used to create references (or refs in short) in functional components of React.
Yes, that’s it, you can stop reading now (just kidding).

In this article, I’ll briefly explain what a Ref is, what it can do and how to use it without making it much complex.

As per the definition from Reactjs official docs,

Refs provide a way to access DOM nodes or React elements created in the render method.

This is the best definition anyone can give about refs but let me put it even more simply.

Refs let you target any HTML or React element just like the id attributes.

Though refs are slightly different and more convenient in some cases.

Now Let’s see where to assign ref and how does the useRef hook helps us:
As I said earlier, it works like ids so you can put it in a div element like the ids: <div ref={myTarget} /> but why am I using curly brackets instead of strings like we use while assigning ids to elements: <div id='mytarget' />?
The reason is self-explanatory, we are passing that myTarget as a variable into the ref. This variable is like a name to that particular div element and will help us target it later. Now you might ask that we haven’t defined any variable named myTarget then what are we passing?
Well then let’s define that variable but a little trick here. You cannot just define any variable and pass it to ref (like const ref = something) because when we pass a variable to ref, it needs to be created specially just to be used in ref. But how do we create a special variable like that? This is where the hook useRef comes in. We use this hook to create our special variable and also assign it an initial value of null as shown in the image.
We have created our ref, time to use it:
To target our beloved element, we use a property called current which acts like an indicator or a signal that tells us whether our targeted element is painted (or loaded) in the DOM or not. We will add an if else condition in useEffect to check that and then do whatever magic we want.
There are a bunch of things you can do after targeting an element once the DOM loads like adding some animation to that element or if it is an input element then you can add a property called focus to it and it will focus on that input. This comes handy when you want a user to navigate to a form to fill their names once they visit your website or something else. You can also use many third party libraries in it. Here is an image showing the code for whatever I've explained so far.

Hope this article helped you understand the use of ref attribute and useRef hook in React. I am leaving some links down here in case you want to explore more.
Happy Coding.

Reactjs docs
CSS-tricks article

How to deploy web apps as a beginner ?

Aadi — Sun, 02 Aug 2020 04:29:41 +0000

Did you recently start learning web development and made your first or second web app but are now confused about how and where would you deploy it?
Then this article is for you.

I have tried to keep this extremely short to let you know just enough to get started quickly as I too understand the excitement of hosting your first few projects on the web.
Though there are tons of options out there ( both free and paid ) still we will be mainly looking at the two most popular and free ones:

Heroku – It is a platform that lets developers deploy, manage, scale web apps. It provides its own CLI which lets you use your terminal to track changes or deploy your code directly to Heroku after logging in. They provide a detailed and step by step guide for beginners as soon as you sign up and set up your account.
But if you still want to read their documentation in detail then click here
Vercel – Vercel is also a platform to deploy and manage your web apps but the front-end part only. Though the steps are very easy. You just need to connect your Github account with Vercel and then choose the repository which has the project you wish to deploy. Once added, it will also keep track of any changes you’ll do in your master branch and will keep re-deploying the app with those changes. Just visit Vercel and follow the steps.

After looking at the options, let us look at their use cases.
I use Heroku to launch my node apps or any other backend I build and Vercel for my static sites or front-end of my apps.
Now, if you’re looking to deploy a Fullstack app you might ask, “Why to deploy the front-end and backend separately? Why not host everything in one place ?”

The answer is simple. In a Fullstack app (where you are using some framework for your front-end), you need to run two commands, one for your front-end like npm start in case of React and one for your backend like node index.js but platforms like Heroku can not run both of these commands simultaneously on the same host whenever you visit your app's link. Hence we deploy our backend seperately and use that link to connect it to our frontend (you can use fetch functions or axios for that).

Though this was a very brief article still I hope that I cleared the most basic stuffs required to deploy your app without confusing you much.
Wish you all the very best, Happy Coding.

How to approach for help in tech ?

Aadi — Sun, 12 Jul 2020 17:06:15 +0000

"I didn’t hear back from him. Just because they are good at something doesn’t mean they should be arrogant, right?"
No, they shouldn’t and maybe they aren’t. Hear me out first.

We, the beginners who are just starting out on our journey in the field of Information Technology tend to be impatient and naïve initially (specially the teenagers). We get fascinated by this industry and its potential but we often don’t know from where to start or are simply lost. So, tell me what do you do when you get lost on a path? You ask for help from those who’ve walked down that road before you, right? This is where the real problem begins.

We, as beginners, don’t have the slightest idea about how to approach a professional to ask queries or for suggestions and feedback. No one talks about this issue and there are barely any good articles on that but the real question is, can there be a proper guide on how to approach someone or be more social?

To be honest, there can’t be. Because we humans, by nature, are social. Teaching us the same is like teaching a fish how to swim. We don’t need that but the noise of social media around, has actually made us less social and dulled our senses. We like to be empathetic behind the screens but not in reality. We don’t value time, neither ours nor others or else these things would’ve been much simpler. Just think about it.
You are reaching out to someone for help who is really good at what they do which means two things:

They’ll be humble but busy. So just introduce yourself formally, tailor your question well, be honest and respectful of their time and have some patience for the reply and woosh! You’re done. Was it hard? No. But we still don’t do it. Why? I answered that above.

Sorry it was too much but if you read it till here then I won’t disappoint you now. So I'll be sharing some basic mistakes that I’ve seen beginners make and how to avoid that to increase your odds of getting a response. Here we go:

Don’t start with greetings or wait for a reply to ask your queries:
This point needed to be at the top as I see most of the professionals being annoyed by the “Hi” and “Hello” messages or smaller chunks of messages with no clear question or subject. Please don’t do that. Do you really think they have the time for a chit chat with you? No.
So just get to the subject of message and no, they won’t find it rude but would be happy instead that you valued their time.
Do your research and structure your question well:
A half-baked message won’t get you a reply making you angry at the end and see them as arrogant (as I mentioned in the start). Trust me they are not arrogant (at least most of them aren’t). They just have a limited amount of time so make sure you have done some research and structured your message well to better your odds. This also shows that you’re serious about what you are asking and not texting them on a whim.
A line by Eminem wraps up this point very well,
"You only got one shot, do not miss the chance to blow"
Be patient:
As I stated before that as beginners, we are impatient but sometimes it might happen that you won’t hear back from them for days and there can be multiple reasons for that. They either missed it as they receive 100s or 1000s of such messages everyday or they marked it for later or maybe something else. Be a bit empathetic, try to understand their reasons as well and reach out again after some days or tag them in your post asking for help if you follow them. (Most of them are pretty active on twitter.)
Be grateful and form connections:
Don’t be mean and have an exit as soon as you got the help you needed or else it may damage their motivation to help your peers. Thank them properly and execute their advice. Reach out to them again shortly and show your progress. Trust me, they’d be more than happy to see that and it might register your name in their head and that is the best thing you can do because these people are certainly worth sharing a good bond with.

Here’s an example on reaching out for help with open-source:

“Needed help with Open-source.
Aditya from this side. I’ve been learning web development for few months now and have also built decent projects with react.js and finally decided to contribute to the open-source to level up my skills or land a good job but the huge codebase overwhelms me and no amount of YouTube tutorials really focuses on the extreme beginner stuffs so reaching out to you as I’ve been following you for a while and have seen you posting about your open-source contributions. Would really appreciate your guidance and suggestions.”

I included the subject at the top because the first two lines of your message are what they see before even opening it (wise move, right?) and all of this in one single message. No smaller chunks, no extra cheesy stuffs, nothing.

Now a personal opinion before dropping the curtains:
Always help others with those handful of things you learned. You don’t need to be perfect or solve their problem completely but even a small help with the right intention goes a long way and who knows you might get a 100x return on that because "law of karma" exists, doesn't it?