react-advance

What are the differences between functional and class components?
A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element. A class component requires you to extend from React. Component and create a render function which returns a React element. There is no render method used in functional components

. What are the different lifecycle methods in React?
As everything goes through a cycle of taking birth, growing, and death the same goes with React. Each component in React has a lifecycle that goes through three main phases Mounting, Updating, and Unmounting. The react lifecycle method is used in the React class component.

Explain Strict Mode in React.
StrictMode is a tool for highlighting potential problems in an application. Like Fragment StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.

Explain React state and props.
Props are used to pass data, whereas state is for managing data. Data from props is read-only, and cannot be modified by a component that is receiving it from outside. State data can be modified by its own component, but is private (cannot be accessed from outside

Name a few techniques to optimize React app performance.
performance Optimization Techniques for React Apps Using Immutable Data Structures. ... Function/Stateless Components and React. ... Multiple Chunk Files. ... Use React. ... Avoid Inline Function Definition in the Render Function. ... Throttling and Debouncing Event Action in JavaScript. ... Avoid using Index as Key for map.

What are keys in React?
A “key” is a special string attribute you need to include when creating lists of elements in React. Keys are used to React to identify which items in the list are changed, updated, or deleted. In other words, we can say that keys are used to give an identity to the elements in the lists.

How to pass data between react components?
1. Method 1: Integrate the methods mentioned above . 2. Method 2: Use Redux by maintaining the states of all child components that you might need in a global store and obtain the data from said store. 3. Method 3: Utilize React's Context API. 4. Step 1: Generate a provider component for the two child components.

What is the main difference between Angular and React?
Angular allows two-way data binding while React allows one-way data binding. Two-way data binding means that any changes you make to the model affect the view, and vice versa. One-way data binding means any changes you make to the model affect the view, but not the other way around

What is React Router?
React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

Explain the use of CSS modules in React.
CSS Modules tries to solve a problem that you might encounter when working on medium to large projects and that is global scoping in CSS. By default CSS scoping is global and the reason for this is that we want of styles to cascade throughout our project.

What can you do with HOC?
The purpose of a HOC is to enhance a component (usually a dumb component) with extra functionality. A HOC allows for reusability since in real-life applications there is a need to re-use the same functionalities in various similar kinds of components. A very common functionality is toggling
Higher order components use its make news components and as pass new agruments

what is memo funtion in react.js
The useMemo is a hook used in the functional component of react that returns a memoized value. In Computer Science, memoization is a concept used in general when we don't need to recompute the function with a given argument for the next time as it returns the cached result.

what is lazy funtion in react.js
We can control internal function its render or reload again we prevent and control this via memo function
lazy() It is a new function in react that lets you load react components lazily through code splitting without help from any additional libraries. Lazy loading is the technique of rendering only-needed or critical user interface items first, then quietly unrolling the non-critical items later.
suspense fallback="Home" suspense

HMTL 5 interview

What Is doctype in html 5
All HTML documents must start with a declaration.The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect. In HTML 5, the declaration is simple

What is difference between SVG and Canvas
The HTML svg element is a container for SVG graphics. SVG stands for Scalable Vector Graphics. SVG and useful for defining graphics such as boxes, circles, text, etc. SVG stands for Scalable Vector Graphics and is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. The HTML canvas element is used to draw graphics, via JavaScript. The canvas element is a container for graphics.

What is WebSocket
A WebSocket is a persistent connection between a client and server. WebSockets provide a bidirectional, full-duplex communications channel that operates over HTTP through a single TCP/IP socket connection. At its core, the WebSocket protocol facilitates message passing between a client and server.

What is geo location
HTML5 Geolocation. The Geolocation is one of the best HTML5 API which is used to identify the user's geographic location for the web application. This new feature of HTML5 allows you to navigate the latitude and longitude coordinates of the current website's visitor
What is Canvas

Tell me about What is Multimedia?tag
Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more. Web pages often contain multimedia elements of different types and formats. Note: MP4, WebM, and Ogg video are supported by the HTML standard. Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.

can you tell about nested pages
iframe src="https://www.javatpoint.com/" height="50%" width="70%" iframe >

what is semitic element in html5
Many web sites contain HTML code like: to indicate navigation, header, and footer. In HTML there are some semantic elements that can be used to define different parts of a web page: footer, header, aside, article

what is HTML figure and figcaption Elements
The figure tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. The figcaption tag defines a caption for a figure element. The figcaption element can be placed as the first or as the last child of a figure element.

What is Responsive Web Design?
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):
meta name="viewport" content="width=device-width, initial-scale=1" Use a media query to add a breakpoint at 800px: media screen and (max-width: 800px) { }

What is the difference between “display: none” and “visibility: hidden”, when used as attributes to the HTML element.?
When we use the attribute “visibility: hidden” for an HTML element then that element will be hidden from the webpage but still takes up space. Whereas, if we use the “display: none” attribute for an HTML element then the element will be hidden, and also it won’t take up any space on the webpage.

What is a CSS Preprocessor? What are Sass, Less, and Stylus? Why do people use them?
A CSS Preprocessor is a tool used to extend the basic functionality of default vanilla CSS through its own scripting language. It helps us to use complex logical syntax like – variables, functions, mixins, code nesting, and inheritance to name a few, supercharging your vanilla CSS. SASS: Sass is the acronym for “Syntactically Awesome Style Sheets”. SASS can be written in two different syntaxes using SASS or SCSS SASS vs SCSS • SASS is based on indentation and SCSS(Sassy CSS) is not. • SASS uses .sass extension while SCSS uses .scss extension. • SASS doesn’t use curly brackets or semicolons. SCSS uses it, just like the CSS.

What is the Box model in CSS?
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. width: 320px; padding: 10px; border: 5px solid gray; margin: 0;

320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px

Difference between CSS grid vs flexbox?
CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows. Grid layout is intended for larger-scale layouts which aren’t linear in design. Flexbox is largely a one-dimensional system (either in a column or a row). Flexbox layout is most appropriate to the components of an application.

What is borderbox Defines how the width and height of an element are calculated: should they include padding and borders, or not There are four different combinators in CSS: • descendant selector (space) • child selector (>) : select only child selector div > p • adjacent sibling selector (+): select only div +p = div outer first p • general sibling selector (~):-select only div ~p:- div outer last p

HTML5 question and answer

What Is doctype in html 5
A Document Type Declaration, or DOCTYPE for short, is an instruction to the web browser about the version of markup language in which a web page is written. A DOCTYPE declaration appears at the top of a web page before all other elements. ... The DOCTYPE for HTML5 is very short, concise, and case-insensitive.

What is difference between SVG and Canvas
SVG stands for Scalable Vector Graphics. SVG and useful for defining graphics such as boxes, circles, text, etc. The HTML canvas element is used to draw graphics, via JavaScript. The element is a container for graphics.

What is WebSocket
What is geo location
What is Canvas
Tell me about What is Multimedia?tag
What is WebSocket
can you tell about nested pages

React.js Interview Question and Answer

What is React
React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels. React was created by Jordan Walke, a software engineer at Facebook.

Why react:
It has huge community of github Components base architecture
React Features
React’s popularity today has eclipsed that of all other front-end development frameworks. Here is why:
• Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality, as opposed to JavaScript, where coding often gets complex very quickly. • Improved performance: React uses Virtual DOM, thereby creating web applications faster. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do.
• Reusable components: Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.
• Unidirectional data flow: React follows a unidirectional data flow. This means that when designing a React app, developers often nest child components within parent components. Since the data flows in a single direction, it becomes easier to debug errors and know where a problem occurs in an application at the moment in question.
• Small learning curve: React is easy to learn, as it mostly combines basic HTML and JavaScript concepts with some beneficial additions. Still, as is the case with other tools and frameworks, you have to spend some time to get a proper understanding of React’s library.
• It can be used for the development of both web and mobile apps: We already know that React is used for the development of web applications, but that’s not all it can do. There is a framework called React Native, derived from React itself, that is hugely popular and is used for creating beautiful mobile applications. So, in reality, React can be used for making both web and mobile applications.
• Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be used to debug React applications. This makes the process of debugging React web applications faster and easier.

What is hooks
Hooks are introduce in version 16.8 we used recycling method before that like class but basically hooks replaced the classes method to function components , we use useState and usestate a array return current data and updated data = initial data

What is jsx

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. Babel compiles JSX down to send compile data to browser What is render() method in react.js React, the render() method is the only required method in a class component, and is responsible for describing the view to be rendered to the browser window

What is render and return method
Render is a method that tell react what to display. Return is a method / give output of function render is a method of react. return is just pure javascript for returning output. ... In react, render is a method that tell react what to display. return in a method or function is the output of the method or function

What is arrow function:-
Arrow functions were introduced in ES6. Arrow functions allow us to write shorter function syntax Const sum = ()=>{ }

What is Event
Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences: React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string.

What is the use of virtual Dom in react JS?
Virtual dom is clone of Real dom we can do something in react pages its kept in virtal dome and after that it sync with real dom The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

what is controled and uncontroled components? In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.
An input form element whose value is controlled by React in this way is called a “controlled component”. For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component: class NameForm extends React. An input form element whose value is controlled by React in this way is called a “controlled component”.

What is State
State use in react you can update your data use state You cant update your date via variable

What is functional components
A Functional component is a function that takes props and returns JSX. They do not have state or lifecycle methods. Functional components are easier to read, debug, and test. They offer performance benefits, decreased coupling, and greater reusability.

JavaScript Interview Questions and Answers for

What is JavaScript?
JavaScript is a client-side as well as server side scripting language that can be inserted into HTML pages and is understood by web browsers. JavaScript is also an Object based Programming language

Differences between declaring variables using var, let and const.
var declarations are globally scoped or function scoped while let and const are block scoped. var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared. They are all hoisted to the top of their scope.

What is difference between Null and Undifine or Nan
null is an assigned value. It means nothing. undefined means a variable has been declared but not defined yet nan is not a number if you divide integer to strings then you get Nan

What is DOM?
DOM stands for Document Object Model. DOM is a programming interface for HTML and XML documents. When the browser tries to render a HTML document, it creates an object based on the HTML document called DOM. Using this DOM, we can manipulate or change various elements inside the HTML document. Example of how HTML code gets converted to DOM:

What is JSON?
JavaScript Object Notation JSON is a format for storing and transporting data. JSON is often used when data is sent from a server to a web page.

What is closure in javascript:- Closure is inner function that has access to the outer function variable

What Is ajax
AJAX = Asynchronous JavaScript And XML. AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }

Whati is && and ||
&& both condition should be true || both condition should be true and 1 condition should be true

What is Web API?
Examples: Application program interface YouTube API - Allows you to display videos on a web site. Twitter API - Allows you to display Tweets on a web site. Facebook API - Allows you to display Facebook info on a web site.

What is prototype in java script:
Prototype is help to obj to create multiple object use constructor its included default in java script

What is the rest parameter and spread operator?
Both rest parameter and spread operator were introduced in the ES6 version of javascript. Rest parameter ( … ) Any number of arguments will be converted into an array using the rest parameter. Rest parameter can be used by applying three dots (...) before the parameters.

What is classes
Class methods are created with the same syntax as object methods. Use the keyword class to create a class. Always add a constructor() method.

What Is Hoisting?
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

what is JavaScript Closures
JavaScript variables can belong to the local or global scope. Global variables can be made local (private) with closures.

What is difference between forEach and forloop;
the forEach method is a little cleaner than the for loop.In a forEach method, we pass each food type within that iteration into the callback. A for loop needs you to access the array using a temporary i variable. While might not seem very messy in the beginning, it can get more cluttered when you begin to add more code.

What Is Promise?
Fulfilled= resolve Rejected= reject fetch(url) then(process) then(save) catch(handleErrors)

What are JavaScript Data Types?
Following are the JavaScript Data types: • Number • String • Boolean • Object • Undefined What is the use of isNaN function?
• isNan function returns true if the argument is not a number otherwise it is false.

What is negative infinity?
• Negative Infinity is a number in JavaScript which can be derived by dividing negative number by zero.

What is 'this' keyword in JavaScript?
This' keyword refers to the object from where it was called.

Explain the working of timers in JavaScript? Also elucidate the drawbacks of using the timer, if any?
Timers are used to execute a piece of code at a set time or also to repeat the code in a given interval of time. This is done by using the functions setTimeout, setInterval and clearInterval. The setTimeout(function, delay) function is used to start a timer that calls a particular function after the mentioned delay. The setInterval(function, delay) function is used to repeatedly execute the given function in the mentioned delay and only halts when cancelled. The clearInterval(id) function instructs the timer to stop. Timers are operated within a single thread, and thus events might queue up, waiting to be How can you convert the string of any base to integer in JavaScript?

what is call back function?

Explain the difference between "==" and "==="?
"==" checks only for equality in value whereas "===" is a stricter equality test and returns false if either the value or the type of the two variables are different.

What would be the result of 3+2+"7"?
Since 3 and 2 are integers, they will be added numerically. And since 7 is a string, its concatenation will be done. So the result would be 57.

What do mean by NULL in Javascript?
The NULL value is used to represent no value or no object. It implies no object or null string, no valid boolean value, no number and no array object.

What is the use of Void(0)?
Void(0) is used to prevent the page from refreshing and parameter "zero" is passed while calling. Void(0) is used to call another method without refreshing the page.

What are the different types of errors in JavaScript?
There are three types of errors: • Load time errors: Errors which come up when loading a web page like improper syntax errors are known as Load time errors and it generates the errors dynamically. • Run time errors: Errors that come due to misuse of the command inside the HTML language. • Logical Errors: These are the errors that occur due to the bad logic performed on a function which is having different operation. Describe the properties of an anonymous function in JavaScript? var anon = function() { alert('I am anonymous'); }; anon();

What boolean operators can be used in JavaScript?
The 'And' Operator (&&), 'Or' Operator (||) and the 'Not' Operator (!) can be used in JavaScript. *Operators are without the parenthesis. what is empty array
var str = [1,3,5,6]; str = []; console.log(str)

what is anonymous function what is the use of javascript
anonymous function has no name between the function keyword and parentheses () . Because we need to call the anonymous function later, we assign the function to the show variable.
Var a = function(){ Document.write(“welcom”) } A()
What's the difference between call and apply and bind `?
Fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments. The difference is that call() takes the function arguments separately, and apply() takes the function arguments in an array. Difference between call() and apply() method: The only difference is call() method takes the arguments separated by comma while apply() method takes the array of arguments. bind(something) returns a new function, in which references to this will refer to something . This is a way of saving the current value of this , which is in scope during the call to the constructor, so that it can be used later when the function is called

What are undeclared and undefined variables?
Undeclared variables are those that do not exist in a program and are not declared. If the program tries to read the value of an undeclared variable, then a runtime error is encountered. Undefined variables are those that are declared in the program but have not been given any value. If the program tries to read the value of an undefined variable, an undefined value is returned.

Write the code for adding new elements dynamically?
function addNode () { var newP = document. createElement("p"); var textNode = document.createTextNode(" This is a new text node"); newP.appendChild(textNode); document.getElementById("firstP").appendChild(newP); }

What is the use of Void (0)?
Void(0) is used to prevent the page from refreshing, and parameter "zero" is passed while calling. Void(0) is used to call another method without refreshing the page.

What are JavaScript Cookies?
Cookies are the small test files stored in a computer, and they get created when the user visits the websites to store information that they need. Examples could be User Name details and shopping cart information from previous visits.

What a pop()method in JavaScript is?
The pop() method is similar to the shift() method, but the difference is that the Shift method works at the array's start. The pop() method takes the last element off of the given array and returns it. The array on which it is called is then altered. Example: var cloths = ["Shirt", "Pant", "TShirt"]; cloths.pop(); //Now cloth becomes Shirt,Pant

What is the use of the Push method in JavaScript?
The push method is used to add or append one or more elements to an Array end. Using this method, we can append multiple elements by passing multiple arguments.

What is the unshift method in JavaScript?
Unshift method is like the push method, which works at the beginning of the array. This method is used to prepend one or more elements to the beginning of the array.

what is opps in javascript