● How do relative, fixed, absolute, and statically positions differ?

HTML elements are positioned “Static” by default. The positioning properties, i.e. top,
right, bottom, and left, have no effect on “statically positioned” elements.
“Fixed” elements are positioned relative to viewport, and remains fixed. The positioning
properties are used to define the element’s position, but scroll events don’t affect the
‘fixed’ element.
“Absolute” positioned elements are positioned relative to their nearest parent element
that is either “relative” or “absolute” positioned. If no parent in the DOM is
Relative/Absolute positioned, this element is positioned relative to the document body.

● What is the difference between variables created using let, var, and const?

We can analize the difference in declaring a variable using let, var and const, with
respect to Scoping, Hoisting, Mutation and Declaration.
“Scoping” - Scoping is determining where variables, functions, and objects are
accessible in your code during runtime. var is function-scoped, while both let and const
are block-scoped.
“Hoisting” - Hoisting refers to the process whereby the interpreter appears to move the
declaration of functions, variables or classes to the top of their scope, prior to execution
of the code. var is hoisted, i.e. it can be initialized without defining it. One the other
hand, initializing a variable using let and const without defining it gives reference error.
“Declaration” - Unlike const, both var and let can be declared without initialization.
However, let cannot be accessed without initialization, and returns an error. Var on the
other hand can be accessed without initialization because its default value is undefined
“Mutation” - All three behave differently. Var can be updated and redeclared, let can be
updated but not redeclared, const can neither be updated nor redeclared.
“Summary” - One of the issues is that the variables declared with the var keyword can
be re-declared or updated in the same scope. This could lead to a serious problem if we
declare another variable with the same name in the same scope; the new value will
replace the old one. Another issue with the var keyword is that if you declare a variable
without the keyword var, then that variable will have global scope.let is the improved
version of var. let eliminates all the issues of var that we have talked about in the
previous section. let has a similar syntax to var but has a more strict scope.The const
keyword follows the same rules as the let keyword, with the exception of defining a
constant value.

● What must be developed first, desktop or mobile view, and why?

I don’t have a specific preference in this regard. While working with SASS, I prefer
desktop-first approach. In my experience as a developer, I realized that the mobile-first
approach causes a lot of css overrides, which doesn’t seem like a good idea.
 However, if I am to work with tailwind, I’d prefer Mobile-first approach, because tailwind
is designed such a way.

My approach is simple: I work in parallel, handling each component separately. With

SASS, I start with desktop version and move down to tablet and mobile version using the
media query, @media (max-width: …) {...}. With tailwind, I start with mobile and move up
to desktop version using sm, md, lg, etc.

● What is the difference between an alert and an alert dialog? Also, walk us through the
appropriate instances to use them.

“Alert” - An alert box is often used if you want to make sure information comes through
to the user. This type of box only gives information like error response, success, system
info, etc. to the user. The interactive control, e.g. an OK button, doesn’t control the
application flow.
“Alert Dialog” - Alert dialogs like Confirm Box, Prompt Box requires user interaction
to decide where the app should proceed. Javascript confirm-box gives interactive
controls, e.g. OK and CANCEL button, that allows tha app to proceed in different flow.
While the Javascript prompt-box requires a user input that controls the flow. Usually the
input is required to display the contents of the page based on that input. This can be
used in countless scenarios, e.g. entering an OTP, user name, age (to filter the contents
of the page), etc.

● What is the difference between a link, a generic button and a submit button? Walk us
through the appropriate instances to use them.

With the powers of CSS, both link and a button (and a div) can be styled to look exactly
the same. Semantically these come with different repercussions. The button element
comes with :hover, :active and :focus pseudo selectors. However, unlike button
element, the link element comes with additional pseudo selectors: :link and :visited.

Generic Button element (<button> or <button type=”button”>) does nothing specific like
<button type=”submit”> or <button type=”reset”>. Both generic and submit button can be
used inside a form but submit button submits the form data to a form-handler.

<form onSubmit={()=>handleSubmit()}> … </form>

You can have a submit button as a form’s child element without an onlick handler.
<button type=”submit”>Submit</button>

This can also be accomplished with a generic button, but you can also submit a form
using an enter key if onSubmit handler is defined.
● React (how the component cycle works, if you have experience with Redux
Reducers/Actions, Webpack, code efficiency, optimization, and performance).

The stages of ReactJS lifecycle can be broken down intofollowing phases:

“Initialization” - Here we setup props and/or state
“Mounting” - Mounting is when react renders the component for the first time. In this
stage the App builds the DOM using the instructions provided.
“Updating” - The next phase in the lifecycle is when a component is updated. A
component is updated whenever there is a change in the component's state or props.
“Unmounting” - In this phase, component is removed from the DOM, or unmounted.

Lifecycle methods in Class Components:

“Initialization” - Constructor()
“Mounting” - ComponentDidMount(), render()
“Updating” - ComponentDidUpdate(), render()
“Unmounting” - ComponentDidUnmount()

Lifecycle methods in Functional Components:

“Initialization” - useState()
“Mounting” - useEffect(()=>{...},[]),
“Updating” - useEffect(()=>{...},[...]),
“Unmounting” -useEffect(()=>{...()=>return(...)},[...]),

Note:
Although hooks are a paradigm shift from thinking in terms of "lifecycles and time" to
thinking in terms of "state and synchronization with DOM". Hooks don’t completely
replicate the behaviors of lifecycle methods in Class components.