React Components

Question 1

“In React, everything is a component.” Explain.

Answer 1

1. Components are the building blocks of a React application’s UI.
2. These components split up the entire UI into small independent and reusable pieces.
3. React renders each of these components independent of each other without affecting the rest of the UI.

Question 2

What is the purpose of render() in React.

Answer 2

1. Each React component must have a render() mandatorily.
2. Render returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as , ,<div> etc. This function must be kept pure i.e., it must return the same result each time it is invoked.</div>

Question 3

What is Props?

Answer 3

1. Props is the shorthand for Properties in React.
2. Props are read-only components which must be kept pure i.e. immutable.
3. Props are always passed down from the parent to the child components throughout the application.
4. A child component can never send a prop back to the parent component. This helps in maintaining the unidirectional data flow and are generally used to render the dynamically generated data.

Question 4

What is a state in React and how is it used?

Answer 4

1. States are the source of data and must be kept as simple as possible.
2. States are the objects which determine components rendering and behavior.
3. States are mutable unlike the props and create dynamic and interactive components.
4. States are accessed via this.state().

Question 5

What is arrow function in React? How is it used?

Answer 5

1. Shorter syntax for writing the function expression.
2. These functions allow to bind the context of the components properly since in ES6 auto binding is not available by default.
3. Arrow functions are mostly useful while working with the higher order functions.

Question 6

What are the different phases of React component’s lifecycle?

Answer 6

1. Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM.
2. Updating Phase: Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase.
3. Unmounting Phase: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.

Question 7

What is an event in React?

Answer 7

In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc. Handling these events are similar to handling events in DOM elements. But there are some syntactical differences like:

1. Events are named using camel case instead of just using the lowercase.
2. Events are passed as functions instead of strings.

The event argument contains a set of properties, which are specific to an event. Each event type contains its own properties and behavior which can be accessed via its event handler only.

Question 8

What are synthetic events in React?

Answer 8

1. Synthetic events are the objects which act as a cross-browser wrapper around the browser’s native event.
2. They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers.

Question 9

How do you modularize code in React?

Answer 9

1. We can modularize code by using the export and import properties.
2. They help in writing the components separately in different files.

Question 10

How are forms created in React?

Answer 10

1. React forms are similar to HTML forms.
2. In React, the state is contained in the state property of the component and is only updated via setState().
3. Elements can’t directly update their state and their submission is handled by a JavaScript function.
4. This function has full access to the data that is entered by the user into a form.

Question 11

What do you know about controlled and uncontrolled components?

Answer 11

Controlled Components

1. They do not maintain their own state
2. Data is controlled by the parent component
3. They take in the current values through props and then notify the changes via callbacks

Uncontrolled Components

1. They maintain their own state
2. Data is controlled by the DOM
3. Refs are used to get their current values