@kirubakarane R

@kirubakarane-r

#1
HTML & CSS
Question
Explain the box model in CSS. How does it affect layout?
Answer
The box model describes the rectangular boxes
generated for elements. It consists of margins, borders,
padding, and the actual content. Understanding it is
crucial for layout and spacing.
@kirubakarane-r

#2
HTML & CSS
Question
How do you create a CSS grid layout?
Answer
Use “display: grid” on a container and define rows and
columns with “grid-template-rows” and
“grid-template-columns”.

@kirubakarane-r

#3
HTML & CSS
Question
What are pseudo-elements in CSS? Give examples
Answer
Pseudo-elements are used to style specific parts of an
element.
Examples: “::before”, “::after”, “::first-line”, “::first-letter”

@kirubakarane-r

#4
JavaScript
Question
Explain the concept of closures in JavaScript with
an example.
Answer
A closure is a function that retains access to its lexical
scope even when invoked outside that scope.

@kirubakarane-r

#5
JavaScript
Question
What are Promises? How do you use them?
Answer
Promises represent asynchronous operations that
can be pending, fulfilled, or rejected.
Use .then() for handling fulfillment and .catch() for errors.

) ;
@kirubakarane-r

#6
JavaScript
Question
Explain the “this” keyword in JavaScript.
How does it behave in different contexts?
Answer
“this” refers to the object that is executing the current
function. Its value depends on how the function is
called: in a method, it refers to the object; in a regular
function, it can be “undefined” (in strict mode)
or the global object; in an arrow function, it inherits
from the enclosing context.
@kirubakarane-r

#7
JavaScript
Question
What is event delegation in JavaScript?
Answer
Event delegation involves attaching a single event
listener to a parent element to manage events for
multiple child elements. It utilizes event bubbling.
document.getElementById ( ‘ parent ’ )
.addEventListener ( ‘ click ’ , function ( event ) {
if ( event.target &&
event.target.matches ( ‘ button.className ’ ) {
Lorem ipsum
console.log ( ‘ Button clicked ‘ ) ;
}
});
@kirubakarane-r

#8
JavaScript
Question
How do you debounce a function in JavaScript?
Answer
Debouncing limits the rate at which a function is
executed. It ensures the function runs after a specified
time has elapsed since the last invocation.
function debounce ( func , wait ) {

let timeout ;
return function ( args ) {
clearTimeout ( timeout ) ;
timeout = setTimeout ( ( ) =>
Lorem ipsumfunc.apply ( this , args ) , wait ) ;
};
}
const debouncedFunction = debounce ( ( ) =>
console.log ( ’ Debounced! ‘ , 300 ) ;
@kirubakarane-r

#9
React
Question
What are the differences between functional and class
components in React?
Answer
Functional components are stateless and simpler, while
class components can have state and lifecycle methods.
Hooks now enable state and side-effects in functional
components.
//Functional Component
const myComponent = ( ) => <div>Hello, World!</div> ;
//Class Component
Lorem ipsum
class myComponent extends React.Component {
render ( ) {
return <div>Hello, World!</div>;
}
}
@kirubakarane-r

#10
React
Question
Explain the concept of hooks in React. Give examples of
“useState” and “useEffect”.
Answer
Hooks allow you to use state and other React features in
functional components.
import { useState, useEffect } from ‘react’ ;

count Counter = ( ) => {
const [ count , setCount ] = useState ( 0 ) ;
useEffect ( ( ) => {
document.title = ` Count : $ { count } ` ;
return ( ) => document.title = ‘ React App ’ ;
}, [ count ] ) ;
Lorem ipsum
return (
<div> <p> { count } </p>
<button onClick = { ( ) => setCount (count + 1) }>
Increment </button> </div>
);
}
@kirubakarane-r

#11
React
Question
What is the context API in React? How do you use it?
Answer
The context API provides a way to pass data through the
component tree without prop drilling.
const MyContext = React.createContext ( ) ;
const App = ( ) => (
<MyContext.Provider value = " Hello, Context! ">

<Child />
</MyContext.Provider>
); Lorem ipsum
const Child = ( ) => {
const value = useContext ( MyContext ) ;
return <div>{ value }</div> ;
};
@kirubakarane-r

#12
React
Question
How do you optimize performance in a large React
application?
Answer
Techniques include memoization using “React.memo”,
using “useMemo” and “useCallback” hooks, code-splitting
with React.lazy and Suspense, and optimizing
component rendering with “shouldComponentUpdate” or
“React.PureComponent”.
@kirubakarane-r

#13
React
Question
What are higher-order components (HOCs) in React?
Answer
HOCs are functions that take a component and return a
new component with additional props or behavior.
const withExtraProps = (WrappedComponent) => (props) => (
<WrappedComponent {...props} extraProp = " I am extra! " />
);
const EnhancedComponent = withExtraProps ( MyComponent );
@kirubakarane-r

@kirubakarane R

Uploaded by

Copyright:

Available Formats

@kirubakarane R

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

@kirubakarane R

Uploaded by

Copyright:

Available Formats

Examples: “::before”, “::after”, “::ﬁrst-line”, “::ﬁrst-letter”

function debounce ( func , wait ) {

import { useState, useEffect } from ‘react’ ;

const MyContext = React.createContext ( ) ;

const App = ( ) => (

<MyContext.Provider value = " Hello, Context! ">

const Child = ( ) => {

const value = useContext ( MyContext ) ;

return <div>{ value }</div> ;

const withExtraProps = (WrappedComponent) => (props) => (

<WrappedComponent {...props} extraProp = " I am extra! " />

const EnhancedComponent = withExtraProps ( MyComponent );

You might also like

@kirubakarane R

Uploaded by

Copyright:

Available Formats

@kirubakarane R

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

@kirubakarane R

Uploaded by

Copyright:

Available Formats



Examples: “::before”, “::after”, “::ﬁrst-line”, “::ﬁrst-letter”

            

function debounce ( func , wait ) {

import { useState, useEffect } from ‘react’ ;

const MyContext = React.createContext ( ) ;

const App = ( ) => (

<MyContext.Provider value = " Hello, Context! ">

const Child = ( ) => {

const value = useContext ( MyContext ) ;

return <div>{ value }</div> ;

const withExtraProps = (WrappedComponent) => (props) => (

<WrappedComponent {...props} extraProp = " I am extra! " />

const EnhancedComponent = withExtraProps ( MyComponent );

You might also like