Frontend - Reactjs

Stateless Components key features

1. Calculates the internal state of the components 2. Do not have the authority to change state 3. Contains no knowledge of past, current and possible future state changes 4. They receive the props from the Stateful components and treat them as callback functions.

Controlled Components

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

Uncontrolled Components

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

Stateful Components key features

1. Stores info about component's state change in memory 2. Have authority to change state 3. Contains the knowledge of past, current and possible future changes in state 4. Stateless components notify them about the requirement of the state change, then they send down the props to them.

What is the virtual DOM?

A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM.

What are Higher Order Components(HOC)?

An advanced way of reusing the component logic.

List some of the major advantages of React.

Application performance, client & server-side rendering, JSX readability, easy integration and testing.

componentWillUnmount

Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.

componentDidUpdate

Called immediately after rendering takes place.

componentWillUpdate

Called just before rendering takes place in the DOM.

What can you do with HOC?

Code reuse, logic and bootstrap abstraction, Render High jacking, State abstraction and manipulation, Props manipulation

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

Component State(s) are objects which determine components rendering and behavior. They are mutable unlike the props and create dynamic and interactive components

What are the key differences between VDOM & DOM

DOM: Updates slow, Can directly update HTML, DOM manipulation is very expensive, Too much of memory wastage.

componentWillMount

Executed just before rendering takes place both on the client as well as server-side.

componentDidMount

Executed on the client side only after the first render.

What is an event in React?

In React, events are the triggered reactions to specific action. The event argument contains a set of properties, which are specific to an event

First phase of React component's lifecycle?

Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM.

componentWillReceiveProps

Invoked as soon as the props are received from the parent class and before another render is called.

What is a ref in React?

It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function

What is JSX and what does it do?

JSX allows you to write HTML-ish tags in JavaScript code. With it you can create React Elements and Components.

Why can't browsers read JSX?

JSX file needs to be transformed into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

What are Pure Components?

Pure components are the simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhance the simplicity of the code and performance of the application.

React.js

React is a front end JavaScript library that follows the component based approach which is used for developing complex and interactive web and mobile UI.

Explain how the virtual DOM works within ReactJS.

React's render function creates a node tree out of the React components, then updates this tree in response to the mutations in the data model and the entire UI is re-rendered in Virtual DOM representation. Then the difference between the previous DOM representation and the new one is calculated and the real DOM will be updated with only the things that have actually changed.

shouldComponentUpdate

Returns true or false value based on certain conditions. If you want your component to update, return true else returnfalse. By default, it returns false.

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

The more brief syntax for writing the function expression. They allow for binding the context of the components properly since in ES6 auto binding is not available by default.

What is Props?

They are read-only components which must be kept pure i.e. immutable.

Third phase of React component's lifecycle?

Unmounting Phase: This is the final phase of a component's life cycle in which the component is destroyed and removed from the DOM.

Second phase of React component's lifecycle?

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.

What are the features of React?

Virtual dom, server side rendering, uni-directional data flow.

How do you modularize code in React?

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

List the lifecycle methods of React components.

componentWillMount(), componentDidMount() componentWillReceiveProps(), shouldComponentUpdate(), componentWillUpdate(), componentDidUpdate(), componentWillUnmount()