Interview questions for Jquery

1. What is JSX?

JSX is a syntax extension of JavaScript. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.

2. Can web browsers read JSX directly?

• Web browsers cannot read JSX directly. This is because they are built to only read regular JS objects and JSX is not a regular JavaScript object
• For a web browser to read a JSX file, the file needs to be transformed into a regular JavaScript object. For this, we use Babel

3. What is the virtual DOM?

DOM stands for Document Object Model. The DOM represents an HTML document with a logical tree structure. Each branch of the tree ends in a node, and each node contains objects.

React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects.

4. What are the biggest limitations of React?

Following is the list of the biggest limitations of React:
o React is just a library. It is not a complete framework.
o It has a huge library which takes time to understand.
o It may be difficult for the new programmers to understand and code.
o React uses inline templating and JSX, which may be difficult and act as a barrier. It also makes the coding complex.

5. What is JSX?

JSX stands for JavaScript XML. It is a React extension which allows writing JavaScript code that looks similar to HTML. It makes HTML file easy to understand. The JSX file makes the React application robust and boosts its performance. JSX provides you to write XML-like syntax in the same file where you write JavaScript code, and then preprocessor (i.e., transpilers like Babel) transform these expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children.

6.  What are Pure Components?

Pure components introduced in React 15.3 version. The React.Component and React.PureComponent differ in the shouldComponentUpdate() React lifecycle method. This method decides the re-rendering of the component by returning a boolean value (true or false). In React.Component, shouldComponentUpdate() method returns true by default. But in React.PureComponent, it compares the changes in state or props to re-render the component. The pure component enhances the simplicity of the code and performance of the application.

7.  What are Higher Order Components(HOC)?

In React, Higher Order Component is an advanced technique for reusing component logic. It is a function that takes a component and returns a new component. In other words, it is a function which accepts another function as an argument. According to the official website, it is not the feature(part) in React API, but a pattern that emerges from React’s compositional nature.

8. What is the use of render() in React?

• It is required for each component to have a render() function. This function returns the HTML, which is to be displayed in the component.
• If you need to render more than one element, all of the elements must be inside one parent tag like <div>, <form>.

9. How do you style React components?

There are several ways in which we can style React components:
• Inline Styling

• JavaScript Object

• CSS Stylesheet

10. Explain the use of CSS modules in React?

• The CSS module file is created with the .module.css extension
• The CSS inside a module file is available only for the component that imported it, so there are no naming conflicts while styling the components.

11. Why is it necessary to start component names with a capital letter?

In React, it is necessary to start component names with a capital letter. If we start the component name with lower case, it will throw an error as an unrecognized tag. It is because, in JSX, lower case tag names are considered as HTML tags.

12.  What are fragments?

In was introduced in React 16.2 version. In React, Fragments are used for components to return multiple elements. It allows you to group a list of multiple children without adding an extra node to the DOM.
Example
1. render() {
2. return (
3. <React.Fragment>
4. <ChildA />
5. <ChildB />
6. <ChildC />
7. </React.Fragment>
8. )
9. }
There is also a shorthand syntax exists for declaring Fragments, but it’s not supported in many tools:
1. render() {
2. return (
3. <>
4. <ChildA />
5. <ChildB />
6. <ChildC />
7. </>

13.  Why are fragments better than container divs?

o Fragments are faster and consume less memory because it did not create an extra DOM node.
o Some CSS styling like CSS Grid and Flexbox have a special parent-child relationship and add <div> tags in the middle, which makes it hard to keep the desired layout.
o The DOM Inspector is less cluttered.

14. How to apply validation on props in React?

Props validation is a tool which helps the developers to avoid future bugs and problems. It makes your code more readable. React components used special property PropTypes that help you to catch bugs by validating data types of values passed through props, although it is not necessary to define components with propTypes.
We can apply validation on props using App.propTypes in React component. When some of the props are passed with an invalid type, you will get the warnings on JavaScript console. After specifying the validation patterns, you need to set the App.defaultProps.

15. What is a state in React?

• The state is a built-in React object that is used to contain data or information about the component. The state in a component can change over time, and whenever it changes, the component re-renders.
• The change in state can happen as a response to user action or system-generated events. It determines the behavior of the component and how it will render.