ReactJS

Question 1

1. How does React update the DOM?

Answer 1

Once the virtual DOM has been updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update.

Question 2

How is a DOM represented?

Answer 2

The DOM is a tree-like representation of the web page that gets loaded into the browser.
It represents the web page using a‌‌ series of objects. The main object is the document object.

Question 3

How do you utilize multiple pages in React?

Answer 3

One approach is to utilize the React Router library. React Router manages the browser history and allows components to be displayed on specific pages corresponding to specific URLs. Enclose all pages in the Router and routes component along with their path.

Question 4

4. Describe how to use useState.

Answer 4

The useState() hook takes the first (initial) value of the state variable as its argument. The second value then sets your state, which is why it’s always initiated as setState.

The useState hook is used in React components to manage state. It lets you generate and read a state variable, as well as update the state variable.

Question 5

5. What happens with a component when it receives new props?

Answer 5

By default, when your component’s state or props change, your component will re-render.

Question 6

6. What is ReactJS?

Answer 6

It is an open-source front-end JavaScript library that is used for building composable user interfaces, especially for single-page applications.

Question 7

7. What are the major features of React?

Answer 7

• Uses JSX syntax, a syntax extension of JavaScript that allows developers to write HTML in their JS code.
• It uses Virtual DOM instead of Real DOM considering that Real DOM manipulations are expensive.
• Supports server-side rendering which is useful for Search Engine Optimizations(SEO).
• Follows Unidirectional or one-way data flow or data binding.
• Uses reusable/composable UI components to develop the view.
• React updates only those components that have changed, rather than updating all the components at once. This results in much faster web applications.

Question 8

8. What is JSX?

Answer 8

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.

Question 9

9. What is the difference between Element and Component?

Answer 9

An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it cannot be mutated.
The JavaScript representation(Without JSX) of React Element would be as follows:

const element = React.createElement(“div”, { id: “login-btn” }, “Login”);

and this element can be simiplified using JSX

<div>Login</div>

Whereas a component can be declared in several different ways. It can be a class with a render() method or it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output:

const Button = ({ handleLogin }) => (
<div id={“login-btn”} onClick={handleLogin}>
Login
</div>
);

Then JSX gets transpiled to a React.createElement() function tree:

const Button = ({ handleLogin }) =>
React.createElement(
“div”,
{ id: “login-btn”, onClick: handleLogin },
“Login”
);

Question 10

10. How to create components in React?

Answer 10

Components are the building blocks of creating User Interfaces(UI) in React. There are two possible ways to create a component.

• Function Components: This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as the first parameter and return React elements to render the output:
function Greeting({ message }) {
• return <h1>{Hello, ${message}}</h1>;
• }


• Class Components: You can also use ES6 class to define a component. The above function component can be written as a class component:
class Greeting extends React.Component {
• render() {
• return <h1>{Hello, ${this.props.message}}</h1>;
• }
• }