DEV Community: Atul Bhatt

Const doesn't prevent immutability

Atul Bhatt — Tue, 13 Jun 2023 15:03:59 +0000

What is a variable?

In programming, a variable is a name given to a location in the #memory of the computer.

Instead of treating the value of a variable as a number, string, etc. If we start looking at the value of a variable as an address to the location in a memory, then it will make it easy to understand the concept of let and const in JavaScript.

A mental model for understanding

Consider const keyword as representation for constant word.

And let keyword as temporary.
for example, if you remember, solving equations in mathematics we often say.

let us assume value of x is 10.

Now, combining both knowledge:

value of variable is an address
const is for constant
let is for temporary

it will start making sense for the statement below:

_const doesn't prevent immutability. It just prevents reassignment. _

Examples

Now, when I do:

const a = 12
/* A memory address is assigned to a (ex: M121312)
Now the value of "a" internally is "M121312")
If I try to do again: */

a = 13 
/*A new memory space will be assigned to value 13 (ex: M121314) */

So, internally it seems like, we are trying to do reassign a value to a.

This might feel vague for now. But hold on.

Let's come to array.

const b = [1,23,45,56] 
/* b is assigned a memory address (M131314)
and when I do: */

b[2] = 24 
/* it works because the address of b is not changed. 
The value of b is still (M131314)
However, if I do:
*/
b = [1,24,45,56] 
/* it's a new value assignment, i.e., a new address (M131320) */

This is just a mental model to think about const and let that I came up with. I don't know if it's entirely correct or not.

Tell me in the comments if it makes sense!

As always thanks for reading. Stay curious!

Hot Reload Fails, DOM adds an additional iframe

Atul Bhatt — Thu, 28 Apr 2022 16:41:47 +0000

Hey React Developers🙋‍♂️, this your gateway to solving this problem if you're still facing this. I've tested the solution in multiple React projects on various different devices with variety of OS and browsers. Why? Because everyone in my team was facing this issue but were not frustrated enough to solve it which I was.

I've gone through multiple github discussions and stackoverflow posts to finally reach this solution and then test it out.

Let's see the symptoms you're facing. Are they mentioned below:

Application becomes non-interactive, iframe is added to DOM.
Hot reload continues to work, but the page becomes unresponsive. Can't click or do anything unless you do a manual refresh.
process is not defined

Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at HTMLIFrameElement.e.onload (index.js:1)

You might have started facing this problem either after updating your CRA or starting a new project using create-react-app which lead to the probable lead cause of it to be react-error-overlay.

You can check the issue reported on github here

SOLUTION

npm i -D react-error-overlay@6.0.9

If this doesn't helps, check this out.

If this solution solves your problem, do like this post or comment down so that others can also get the benefit by reaching to it as early as possible. Till then safe debugging👍

Useful Tips for Web Dev - Part1

Atul Bhatt — Wed, 27 Apr 2022 16:54:36 +0000

A lot of time there are some problems which we face occasionally but the time when that occasion become too often it becomes frustrating to keep searching those occasional problem here and there on stack overflow or documentation of the libraries. So I'm starting this series of Problems and Solutions to have my those problems all curated at one place. Let's see how it goes. Some of these problems took me to get through a lot of stack overflow answers to find the right one. I wish it saves someone's time.

1. How to change port for NPM start? or Node JS change server port?

SET PORT=8080 && npm start //windows
export PORT=4000 && npm start //MAC

2. How to find difference between 2 dates in days?

Let's say we have two dates, your date of birth and today's date and you want to find the difference between them in days. It's something I feel someone will someday definitely need to use. So here's the way to do it.

3. Some Quick Generic Web-Developer Friendly Shortcuts

Clear Console logs - developer tools (ctrl+l)
Close Tabs - (ctrl+w)
Duplicate a Tab - (ctrl+shift+k)
Open recently closed tabs - (ctrl+shift+t)
Hard Reload - (ctrl+shift+r)

4. NVM- Node Version Manager ( Windows)

If you're a JS developer then you have had or will at later point in time face the need to change the node version installed in your system because the project doesn't supports the latest. Here NVM - Node Version Manager comes to your rescue.

It allows you to have multiple Node Versions installed and toggle between them.
NVM-windows

5. Copy as CURL

When you're frontend developer you often need to integrate APIs. And a lot of time there might be issues which you would've have to communicate to the backend developer who will be needing things like the payload and header you sent with the api to** check** you passed everything correctly.
Instead, what you can do is send the CURL url to your backend developer which he can import in his API test tool like POSTMAN to check it.

These are few for now and I'll keep coming with more soon. Till then fast solving😁.

Not 5 but 6 Things to ask Before Joining a new Organisation If you're a DEV or SDE.

Atul Bhatt — Wed, 27 Apr 2022 05:39:01 +0000

Often there comes a time when you've to face a situation to change your job. And there can be many reasons for that ranging from a high salary to work-life balance and many more.

So in this post I'll share some points that you can create a comparison table in order to decide which one to join and which one not.

1. Salary

Salary directly equates to money you'll earn. And you can say it's materialistic and we should not chase it. But but but...there's a catch.
You salary determines the worth of your time. It tells how much value you get for your time that you put in in your job.

Salary breakdown is also an important factor to check. Are you getting full amount in hand or there's a PF system. Because you can be a person like me who would like to have full money in hand and manage your money yourself instead of letting it be deprecated by inflation.

2. Job Location

Job location also plays a huge role when making career related decision. Location is very important as:

If you've to relocate to a new location and it's far it can be a pain to do so.
If the location is an expensive place then the salary you thought was high would actually look less in the end after all the expenditure.
Some people prefer to be around their family so now with the option to either do WFH or WFO or maybe Hybrid is now a choice based on location.
Job location also determines what kind of place or people you would like to be around. You can be working in a city which is IT Hub or a city which has good food, or maybe the mix of both world if you're that much lucky. So an awareness about the kind of lifestyle you want to have is must to make this choice.

3. Increment Structure

Increments are important to keep you motivated and hooked to the sense of making progress monetarily in your career. Therefore, it's always good to know how often increments are made, it's criteria, and what are the percentage ranges for the increment.

4. Bonuses

Adding to the increment there're annual bonuses and different other kinds of bonuses. So ask about the bonuses. They kind of add up to your annual income and hence boost your CTC.

Let's say you earn 12LPA and there are 10% annual bonus, then after completing a year you get 1Lakh and that kind of sums upto 13LPA.

5. Employee Friendly Policies and other

These are some minor things but plays a significant role in how easy it would be to carry on doing your job even if you love the job you do.

What are the leave policies? Number of leaves - paid leaves, sick leaves, etc. I even saw the option of unlimited leaves. Currently I don't know how it works but I'll update here once I do.
How flexible are timings? Do you need to pretend busy even if you're not?
Are there any coverage for health insurance or medical expenses?
Any upskilling model such as providing courses for online learning and other things?
Does the company provides you with the machine to work on or you've to use your own. Kinda sounds weird but there are some who ask you to use your own.

6. Bond and Notice Period

Firstly I would suggest that if you've multiple job offers in your hand refrain from bonds. Bonds are like handcuffs tied behind your hand.

I understand the role of bonds from the perspective of employer also as hiring is a cumbersome process so they won't want the hired employees to leave the place in early phase.

But what I also believe is that there's no good to keep someone who is not interested to be in the organisation as if they will only create a ripple effect of their negativity related to the organisation all around them inflicting their colleagues with it.
And Notice periods are also important I agree but make sure you don't sign off for more than 1 to 1.5 months.

I know a lot of these were obvious things but believe me they don't come to mind when you need them the most like the list of things we need to keep while traveling.

You feel me right?

I guess that's all for now. Comment down what you folks feel is also important to look before choosing a job. Till then happy hunting🙂.

10 Cool Tech Portfolios

Atul Bhatt — Wed, 30 Mar 2022 04:30:19 +0000

There are many reasons that one should create their own tech Portfolios if they are a developer. The number one reason being - Proof of Work. So here in this post I'm going to list 10 Cool Tech Portfolios that I filtered out of many portfolios that are different, unique and awesome in their own way.
These portfolios can be an inspiration for your tech portfolio. So let's jump in.

Note: The screenshots are just for reference. They don't depict the actual hardwork and creativity of the portfolios demonstrated through - animations, loaders, fonts, transitions. Also these portfolios are not ranked!
Do check out these portfolios and comment down your best picks. Also, if you have a tech portfolio put that also down in the comment section.

I'm also looking more inspirations for creating my tech portfolio. So if you've a tech portfolio do not hesitate to comment that down. As always thank you for spending your time reading my posts.

Have an inspirational day :)

No import React from 'react'. Here's Why!

Atul Bhatt — Tue, 29 Mar 2022 05:44:50 +0000

Information Source: The React Docs

So I assume if you are reading this post then you are probably a react developer or an aspiring react developer. Doesn't matter which one you're the above question is the one that you may encounter within yourself while working with react.

Now, what triggered me to write this blog post is depicted in the screenshot below and further explained below the screenshot. Let's uncover this mystery together.

So as you can see the one line without which the React didn't used to work is now treated as declared but not read or in other word used.
Yes folks, I'm talking about none other than import React from "react";

Perhaps something might have changed so what can be a possibility for that. This new warning makes sense as of now because we were always importing React even if it was not required.

So as always let's divide our post into question with the first one being-

Why do we do `import React from "react";`?

As I had already assumed that you're a react developer so I also assume that you know that React uses JSX.

However, the browser doesn't understands JSX so it has to be converted in something that browser understand and that is JavaScript, and this conversion of JSX into JS was possible because of compilers like Babel.

As now we've crossed 2020 already and React 17 is a thing which didn't introduced any new features but one thing. And that's the key to answer for our question. Can you guess what??

The support for a New Version Of JSX Transform.
I say it again.
The support for a New Version Of JSX Transform.

Now we have two JSX transform - Old and New obviously.

So before when we were doing:



import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

The Old JSX transform used to do:



import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

Since, JSX was compiled into React.createElement, it was necessary for the React to be available in the scope.

Finally, one question is now answered.

But we are actually left with the original question. What's changed in new JSX transform that made it 'okay' to not import React for the sake JSX transform.

Now to import React so that it can be in the scope and just only because React.createElement can be called is not a perfect choice.

To solve this part and a few other performance improvements and simplifications (which we are not discussing here) React collaborated with the Babel to bring the new version of JSX transform into existence.

React made some changes in the React17 by adding two new entry points to the React package just to be used only by the compilers like Babel.

So now with the availability of these two new entry points that Babel uses to perform JSX transform which means the need to do JSX transform via React.createElement is no longer required.

And therefore folks, no need to do import React from "react" any longer if you are on React version greater than 16.

PS: If you're on older version of React such as React 16 or 15 or even 0 then there's a good news for you. React has released React 0.14.0, React 15.7.0, and React 0.14.10 for people who are still on the older major versions.

So now all you need to use latest JSX transform is these latest version and a supported compiler like Babel.

I hope you enjoyed reading this article and was able to calm your curious mind for some time. Meanwhile you can checkout my other posts.

Happy transforming into a curious reader.
Have a nice day folks.

Breaking down `npx create-react-app` from npm to npx🥷

Atul Bhatt — Sun, 20 Feb 2022 15:05:50 +0000

Hello🙋‍♂️ to all the curious devs🤓. Today in this post I'm going to breakdown the things that npx create-react-app does for us. I know there are many other articles for the same but as always I'm documenting👻 this firstly for me and if it proves to be useful for anyone out here reading this it would make me more than happy😸.

So let's start. I'll break this down in the form of questions, and below is the first.

What exactly is npx?

So all those who don't know and just kept on running the command npx create-react-app, know that npx is a node package runner😎.

Oh! that was simple. N-node, P-package and X-???
Let the X here be from executor, kind of program executor in other words program runner. So here we have it node package runner.

We are going good😁 so far, now this article is not about npm but you might be thinking, and I mean might be thinking🤨 what is npm then?

So, again the same way npm is 'Node Package Manager' - N-Node, P-Package, M-Manager.

Now let's break down what is the role of a package manager and a package runner.🤫

Node Package Manager

npm is a package manager that helps💪 you in managing the dependencies/packages you as a developer want to have in your project.

It also helps you in managing🤏 whether you want to install those packages globally (for all the projects) or locally (for the current project).

This all that we are talking about is a CLI (command line interface) that gets installed when you install Node JS in your system.

But npm is more than that.🕵🏼‍♂️

So when you install a package on your system it's fetched from online, and in online that place is the npm repository.
So npm is a package manager which is a combination of a CLI and a Repository.

With now this sorted😼, it's time to hop back towards npx.

So it's obvious that you installed a package and you wanna do something with it. Maybe uninstall it which you can easily do with npm or use it by running it.

There's a catch

How to run a package or in other words execute it. Can't we do with the help of npm? And boy we can do it.

So the answer to why we need npx in the very first place is just about to be revealed.🦹‍♂️

How to run a package with the help of npm?

Now, for those who are thinking "I've run a package with npm before and aren't be always starting react server with the help of the command - npm run start"

Yes, so if we are able to do it why in the world npx🥴🥴???

So the catch here is that - you can run only those packages using npm run those are specified in your projects package.json. And that simply means if you wanna run a npm package you gotta add that in your package.json.

You see all those inside scripts. That's the key to npm run for various packages. Like format is for the prettier.
There are other tedious way to do so, such as specifying the local path:_ npm run ./node_modules/.bin/your-package_

Now, there comes our hero🦸‍♂️ into the picture - NPX.

Let's explore what npx brings on the table🧙‍♂️ for us.

npx easily runs Node.js based executable installed via npm.
We can run a locally installed package easily, and that's what we are looking here for.
There are other perks of npx but not in this article.

Do you know you can start react server with npx also as:
npx react-scripts start

It's time for CRA (create-react-app)👩🏻‍🎨

If you're a react-dev like me. Then you might have used this command atleast once in your life - npx create-react-app

Now we know what npx is and from all our discussion it's also clear that create-react-app is an executable, so let's find out what it does for us.

CRA is a toolchain.

And now another term to breakdown🤦. What is a toolchain??

Don't worry💆 it's a simple term which holds its meaning in its name. It's a chain of tools or a collection of distinct tools that helps in achieving the process of completing the software development and sometimes deployment too.

So CRA (create-react-app) is a JavaScript toolchain or a set of software tools which are basically CLIs to help in creation of a react project.

So instead of reinventing the wheel again, I would add few content from React Docs:

A JavaScript build toolchain typically consists of:

A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.

A bundler, such as webpack or Parcel. It lets you write modular code and bundle it together into small packages to optimize load time.

A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers.

So, in short a CRA offers all these functionalities. For more info on this you can refer to react docs.

Thank you folks for reading all through this article. I tried my best to breakdown the terms that would've otherwise made you feel like you are missing some context to this.

Keep reading, keep learning, and never stop being curious. See you until next time.✌️✌️✌️

React Interview - (Part 3)

Atul Bhatt — Sat, 22 Jan 2022 08:54:00 +0000

So welcome🙂 again to another part of React Interview series. So we’re finally now into part-3. Before I thought to bind up this series into total of 3 parts but there are so many questions to cover because React also includes JS. So hopefully this series will have total 5 parts.

So let’s cut out the introductory crap and jump directly into some more React interview questions.

1- What does useState return?
2- What’s the difference between React Router and React router DOM?
3- What are peer dependencies?
4- Can we use React without JSX?
5- Why do we have to use className prop and can't have class as a prop to a component as a CSS selector?

  <div className= “react-interview”>
  Hi! [dev.to](http://dev.to) 
  </div>

6- Explain the Redux lifecycle.
7- What’s the output?

     const b = 'abc' 
     b.push(d) 
     console.log(b)

8- What are events in JS and how we can play around them?
9- Explain the use of useRef?
10- Difference between the Browser Router and Hash Router?

I'll be wrapping up this part of the article here. I'll be glad to read you answers to these question in the comment section.

And don't forget to mention your approach towards taking interviews. How you approach it? And I know there might be some flaws🥺 in asking these questions so you are free to point them out.

Find No of days between 2 dates using moment.js

Atul Bhatt — Sat, 25 Dec 2021 19:00:39 +0000

Time and time again I'm reminded that you can't escape time and so are the problems related to date and time. One such very common problem is to find the difference between 2 dates.

Let me give you a very simple example where we will try to find the how many days old are you?
So it feels like not a such big deal but think of writing the entire logic on your own when you know you can write but it will much less of a hassle to do it via library like moment.

I'm writing this as an article here because it took me time to find the way to do it using moment itself. I'm writing this article more for myself than for others. So consider this as a treat.

Here's the code:

  let myDob = moment("19/12/1997", "DD/MM/YYYY");
  let today = moment();
  let myAge = today.diff(myDob, "years");
  let noOfDays = today.diff(myDob, "days");

Below is the embedded sandbox to demonstrate it:

Check out the same in moment docs:
moment

Thanks for your time reading this. I hope it helped you. Have a productive day :)

PS:Moment is in maintenance mode.

You can read about the meaning of it in the article linked below.
MOMENT.JS OFFICIALLY BECOMES A LEGACY PROJECT IN MAINTENANCE MODE

React JS Interview(Part-2)

Atul Bhatt — Thu, 23 Dec 2021 10:45:32 +0000

So this is the second blog post where I'm sharing some more important questions that you may stumble upon while giving a React JS or just a JS interview. Even if you don't encounter any of these questions in your interview it will be good to check them out just for finding out how many of them you know well. Let's start.

What is a pure function?
What is a HOC?
Give some examples of HOC you have used.
What is render props?
Custom Hooks?
Difference between Custom Hooks and Functions and Component?
Explain the working of Virtual DOM in detail.
What is reconciliation in react?
What are controlled and Uncontrolled components?
Which one is better-controlled or uncontrolled components?
What is Memoization and how it can be achieved in React?
Do you know what is a toolchain?
What is code splitting in React and how we can achieve it?
What is hoisting in JavaScript?
What is the difference between Array.forEach() and Array.map()?
Explain event loop?
Name one JS engine.
Is Javascript Object Oriented? If not then what type it is?

Some JS snippets to try:

Snippet1

let a = [1,2,3,4,5]
let b = a
b[3] = 10
let c = b
console.log(a,b,c)
//Output: ??

Snippet2


let obj1= {name:"atul", age:24, 
           hobbies:['reading books', 
           'writing blogs','exercising', 'poetry']}
let obj2 = obj1
delete obj2['hobbies']
console.log(obj1, obj2)

Snippet3


const aa  = 5
const bb = [12,23,543,56]
const cc = {name: "atul", age:24}
ac= 10 //What will happen? Is this Ok.
bb[3] = 9
bb[4] = 12
cc['Age'] = 'greater than 18'

Snippet4


let myself = {
  name: "atul",
  age: 24,
  hobbies: ["reading books", "writing blogs", "exercising", "poetry"],
  favourites: {
    movies: ["Iron Man", "End Game", "Spiderman"],
    Sports: ["Cricket", "Football", "Basketball", "Badminton"],
    song: ["Legends Never Die", "Chidiya: Vilen", "etc", "etc..."]
  }
};

let yourself = { ...myself };
yourself["hobbies"] = ["Guitar playing", "playing football", "Dancing"];

let newSelf = {
  ...myself
};
newSelf.favourites.movies = ["Star Wars", "Ice Age", "Batman", "Flash"];

console.log("myself:", myself);
console.log("yourself:", yourself);
console.log("newself", newSelf);

Here is link to all the questions asked above with implementation, so that you don't feel slacking off with what will happen in each case.

I will be ending this article here for now. I'll continue it in the next part with more questions that will cover more in-depth questions. So see you around here next time.👋 Have an insightful day 😄.

5 Frequently used JS libraries for React

Atul Bhatt — Wed, 15 Dec 2021 10:34:46 +0000

I've seen many interns that join my company who have just basic knowledge of JS and are starting to dive into a UI library like React struggling with what to learn ahead to fasten there development journey. While there are lot of things you can learn from the internet to proceed further in your Web Development journey through React JS but I believe there are some JS libraries that you should immediately start practicing and get a grasp on. This is something I've felt after working on multiple React projects.

So without further adieu let's start with our list. This list is biased towards React so please take this list with a grain of salt.

1. Moment (https://momentjs.com/)

One thing that always seize to exist is time. One day or another day you'll definitely get a data that'll require you to deal with time. So moment is the library that's a must to learn. The library is easy and offers a lot of methods to manipulate date and time.

2. Axios (https://axios-http.com/docs/intro)

Axios is a simple promise based HTTP client for the browser and node.js. In simple words, Axios is a library that you use to perform API callings. Axios reduces the pain of API calling by providing features like:

Make XMLHttpRequests from the browser

Make http requests from node.js

Supports the Promise API

Intercept request and response

Transform request and response data

Cancel requests

Automatic transforms for JSON data

Client side support for protecting against XSRF

3. Material-UI (https://mui.com/)

There always comes a time when you have to dive into a UI library to get prebuilt components to fasten your development. And the most common UI library I've encountered in various projects I've worked on is material-ui. Apart from material-ui you can also look into core-ui.

4. React-toastify (react-toastify/introduction)

React toastify says it's usage all with its name. It's quite useful for displaying toast messages to update user on events like successful login, signup, and rest is upto your usage and imagination where you feel it can fit your usage.

5. Formik (https://formik.org/)

A web project without dealing with form feels so much incomplete. I don't intend to say that a project without form is not a project but here and there forms will be there. When it comes to dealing with form the other things that will definitely hop on are from fields validations.
Formik is a small library that helps you with the 3 most annoying parts:

Getting values in and out of form state

Validation and error messages

Handling form submission

I would like to keep this post short and would like to hear more about your top 5 picks. Of course there are other libraries which totally deserve to be in this list such as redux, core-ui, react-bootstrap, font-awesome, and many more. But let's keep them preserved for some other time. I'm really excited to know about your top picks from the comments.

Thanks for your time reading. Have a informatic day.

React Interview(Part-1)

Atul Bhatt — Mon, 27 Sep 2021 08:20:30 +0000

Below you'll find the interview questions that I was asked and also I use to ask in the React interviews.

With almost working 1 year as a React Developer in a startup I have played plethora of roles as its core-member and learned a lot there. And one of the roles I had to perform was of a technical interviewer.

We were mostly focusing on hiring interns who would learn with us in their 2 months of internship and if they do well we would offer them a full time job.

Amidst all this I also had to go through the interview processes for client in which I used to flunk until a point came when I was acing them.

So I'm writing this article to highlight few of these questions in a single place. You're welcome to answer these questions in the comments.

Now where were we? So yes, selecting right candidates for internship process was very crucial as we were a very small team of 5 people in which only four were React DEVs.
So in this article I'm going to share few of the basic beginner level questions which goes from the beginner to the intermediate level that I frequently ask in the interviews I take.

I'm not sure if this is a post or a startup story but all I hope from this post is that it reaches to someone whom it may be helpful.

So let's start.😏

Like any other normal interview my first statement starts with salutations and greeting followed by "Please Introduce Yourself?🤓"

This question is important for setting up the tone of the interview. With this question I'm giving the candidates the chance to express themselves and give the interview any direction they want.

"What are the projects you have done?"
Then comes the very first and the most basic react question -What is React?
And when the candidate answers this question all I look are the keywords to frame my next question around this answer.
So the most common keywords are "JS library" and sometimes the candidates also answer "JS Framework", "Component", "Virtual Dom", and few more which varies.

Now the next question can be any of the below👇

Is React library or framework?
What is the difference between library and a framework?
What is Virtual Dom?
How Virtual Dom works?
Life cycle methods of React?
Difference between state and props?
What are the different types of libraries you have used in your project?
What are hooks? Can you name some hooks other than useState and useEffect?

Some questions goes beyond beginner level if the candidate keeps on answering the previous questions👌. I don't mind checking the depth of concepts the candidate is clear about.

I also keep mixing👨‍🍳 JS questions in between such as:

What is the difference between == and ===?
What is the difference between let, const, and var?
By any chance do you know the difference between deep copy and shallow copy?
How do we pass props in Functional Component?
What is JSX?
If JSX is JS + XML, which part of JSX is related to XML?
Why we have to use camelCase to write CSS properties in JSX, such as:const myStyle = {backgroundColor:"red"}Why can't we use it as we do it in our native css.

In how many ways we can use useEffect hook?
What is the difference between import Random from ".../random" and import {Random} from "../random?

Have your heard about axios?
What about interceptors in axios?

What you prefer async-await or promises? Why?

Are you familiar with context or Redux? If yes, then why do we need them or when do we need them?

Few UI questions:

Explain Margin and Padding?
What is CSS box?
How many types of position are there?
How and when to use position absolute?
What is the default position?
Do you know what is box-sizing?

I'll be wrapping up this first part of the article here. I'll be glad to read you answers to these question in the comment section.