React

Question 1

What is React?

Answer 1

React is a front-end and open-source JavaScript library which is useful in developing user interfaces specifically for applications with a single page. It is helpful in building complex and reusable user interface(UI) components of mobile and web applications as it follows the component-based approach.

Question 2

React features

Answer 2

It will make use of the virtual DOM rather than real DOM (Document Object Model) as RealDOM manipulations are expensive.
It follows unidirectional data binding or data flow.
It uses reusable or composable UI components for developing the view.

Question 3

What are the advantages of using React?

Answer 3

It has a shorter learning curve for JavaScript developers and a large number of manuals, tutorials, and training materials are available because of its active community.
React is search engine friendly
It makes it easier to create rich UI and custom components.
React has quick rendering
The use of JSX allows us to write code that is simpler, more appealing, and easier to understand.

Question 4

What are the limitations of React?

Answer 4

React is not a full-blown framework as it is only a library.
It might be difficult for beginner programmers to understand React.
Coding might become complex as it will make use of inline templating and JSX.

Question 5

What is useState() in React?

Answer 5

The useState() is a built-in React Hook that allows you to have state variables in functional components.

It should be used when the DOM has something that is dynamically manipulated/controlled.

Question 6

What are keys in React?

Answer 6

A key is a special string attribute that needs to be included when using lists of elements.

Question 7

Importance of keys

Answer 7

Keys help React to identify which elements were added, changed or removed.
Keys should be given to array elements for providing a unique identity for each element.
Without keys, React does not understand the order or uniqueness of each element.
With keys, React has an idea of which particular element was deleted, edited, and added.

Question 8

What is JSX?

Answer 8

JSX stands for JavaScript XML. It allows us to write HTML inside JavaScript and place them in the DOM without using functions like appendChild( ) or createElement( ).

JSX provides syntactic sugar for React.createElement( ) function.

Question 9

What are the differences between functional and class components?

Answer 9

Before the introduction of Hooks in React, functional components were called stateless components and were behind class components on a feature basis. After the introduction of Hooks, functional components are equivalent to class components.

Question 10

What is the virtual DOM? How does react use the virtual DOM to render the UI?

Answer 10

Virtual DOM is a virtual representation of the real DOM. It is kept inside the memory and is synced with the real DOM by a library such as ReactDOM.

Question 11

Why was virtual DOM introduced?

Answer 11

DOM manipulation is an integral part of any web application, but DOM manipulation is quite slow when compared to other operations in JavaScript. The efficiency of the application gets affected when several DOM manipulations are being done. Most JavaScript frameworks update the entire DOM even when a small part of the DOM changes.
For example, consider a list that is being rendered inside the DOM. If one of the items in the list changes, the entire list gets rendered again instead of just rendering the item that was changed/updated. This is called inefficient updating.

Question 12

Why can’t Browsers Read JSX?

Answer 12

JSX is not a valid JavaScript code, and there is no built-in implementation that allows the browser to read and understand it.

We need to transpile the code from JSX into valid JavaScript code that the browser can understand, and we use Babel, a JavaScript compiler/transpiler.

Question 13

What are Components?

Answer 13

A component is a self-contained, reusable code block that divides the user interface into smaller pieces rather than building the entire UI in a single file.

There are two kinds of components in React: functional and class components.

Question 14

What is a Class Component?

Answer 14

Class components are ES6 classes that return JSX and necessitate the use of React extensions.

Because it was not possible to use state inside functional components in earlier versions of React (16.8), functional components were only used for rendering UI.

Question 15

What is a Functional Component?

Answer 15

A JavaScript/ES6 function that returns a React element is referred to as a functional component (JSX).

Question 16

There are 3 ways to style a react application with CSS:

Answer 16

Inline Styles
External Styling
CSS in JS

Question 17

What is the Use of render() in React?

Answer 17

Render() is used in the class component to return the HTML that will be displayed in the component. It is used to read props and state and return our JSX code to our app’s root component.

Question 18

What are Props?

Answer 18

Props transfer data from one component to the next (parent component to child component). They are typically used to render dynamically generated data.

Question 19

What is State in React?

Answer 19

State is a built-in React Object that is used to create and manage data within our components. It differs from props in that it is used to store data rather than pass data.

State is mutable (data can change) and accessible through this.state().

Question 20

How to Update the State of a Component in React

Answer 20

Have to use the setState() method which updates the component’s state object and re-renders the component.

Question 21

How to Differentiate Between State and Props

Answer 21

State and props are JavaScript objects with distinct functions.

Props are used to transfer data from the parent component to the child component, whereas state is a local data storage that is only available to the component and cannot be shared with other components.

Question 22

What is an Event in React?

Answer 22

In React, an event is an action that can be triggered by a user action or a system generated event. Mouse clicks, web page loading, key press, window resizes, scrolls, and other interactions are examples of events.

Question 23

What is Redux?

Answer 23

Redux is a popular open-source JavaScript library for managing and centralizing application state

Question 24

What are React Hooks?

Answer 24

React hooks allow us to use state and other React features without having to write a class.

They do not operate within classes, but rather assist us in HOOKing into React state and lifecycle features from function components.
React hooks were added in v16.8.

Question 25

Explain the useState() Hook

Answer 25

The useState Hook enables the use of state variables in functional components. You can pass the initial state to this function, and it will return a variable containing the current state value (not necessarily the initial state) and another function to update this value.

Question 26

Explain the useEffect() Hook

Answer 26

The useEffect Hook allows you to perform side effects in your components like data fetching, direct DOM updates, timers like setTimeout(), and much more.

This hook accepts two arguments: the callback and the dependencies, which allow you to control when the side effect is executed.

Question 27

What’s the Use of the useMemo() Hook?

Answer 27

The useMemo() hook is used in functional components to memoize expensive functions so that they are only called when a set input changes rather than every render.

Question 28

What Is the useRefs Hook?

Answer 28

The useRefs() hook, also known as the References hook, is used to store mutable values that do not require re-rendering when they are updated. It is also used to store a reference to a specific React element or component, which is useful when we need DOM measurements or to directly add methods to the components.

Question 29

What are Custom Hooks?

Answer 29

Custom Hooks are a JavaScript function that you write to allow you to share logic across multiple components, which was previously impossible with React components.

Question 30

What is Context in React?

Answer 30

Context is intended to share “global” data for a tree of React components by allowing data to be passed down and used (consumed) in whatever component we require in our React app without the use of props. It allows us to share data (state) more easily across our components.

Question 31

What is React Router?

Answer 31

React router is a standard library used in React applications to handle routing and allow navigation between views of various components.

npm install – -save react-router-dom