ReactJs - Interview Questions and Answers

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

A Virtual DOM is a lightweight JavaScript object which is an in-memory representation of real DOM. It is an intermediary step between the render function being called and the displaying of elements on the screen. It is similar to a node tree which lists the elements, their attributes, and content as objects and their properties. The render function creates a node tree of the React components and then updates this node tree in response to the mutations in the data model caused by various actions done by the user or by the system.

States are the source of data for React components. In other words, they are objects responsible for determining components behavior and rendering. As such, they must be kept as simple as possible.Accessible by means of this.state(), state is mutable and creates dynamic and interactive components.

Example:

class App extends React.Component {
constructor() {
super();
this.state={
foo: 'bar'
}
}

In React, each component must have a render() function. It returns a single React element, which is, in fact, the representation of the native DOM component.When there is a need for more than one HTML element to be rendered, we group them in one enclosing tag, which can be,or some other tag. There is a need for the render() function to return the same result each time it is invoked i.e. it needs to be kept pure.

The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.

Props (short for properties) are a Component’s configuration. Props are how components talk to each other. They are received from above component and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components. Props do not have to just be data — callback functions may be passed in as props.

Arrow functions are more of brief syntax for writing the function expression. They are also called ‘fat arrow‘ (=>) the functions. These functions allow to bind the context of the components properly since in ES6 auto binding is not available by default. Arrow functions are most useful while working with the higher-order functions.

Example:

render() {
           return();
         }
//With Arrow Function

render() {

           return(this.handleOnChange(e)

         }

/>);}

Arrow functions are more of brief syntax for writing the function expression. They are also called ‘fat arrow‘ (=>) the functions. These functions allow to bind the context of the components properly since in ES6 auto binding is not available by default. Arrow functions are most useful while working with the higher-order functions.

Example:

render() {
           return();
         }
//With Arrow Function

render() {

           return(this.handleOnChange(e)

         }

/>);}

• componentDidMount() – Executes on the client side after the first render
• componentDidUpdate() – Called immediately after rendering takes place in the DOM
• componentWillMount() – Executes immediately before rendering starts on both the client-side and the server-side
• componentWillReceiveProps() – Invokes when props are received from the parent class and before another render is called
• componentWillUnmount() – Used to clear up the memory space. Called right after the component is unmounted from the DOM
• componentWillUpdate() – Called immediately before rendering takes place in the DOM
• shouldComponentUpdate() – Returns either true or false. Though false by default, needs to be set to return true if the component needs to be updated

The distinct features of React include the following.

1. It uses Virtual DOM in place of Real DOM
2. It applies server-side rendering
3. It follows the unidirectional flow of data
4. It is data binding

Yes, we can make changes inside the child component in Props but not in the case of States.

The stateless component calculates the internal state of the component but does not have the authority to change state. There is no knowledge about the past, current, or future but receives props from the Stateful component, which are treated as a callback function.

Pure components include the components which are simple and easy to be written. They can easily replace any component which as a render().

An event is an action that a user or system may trigger, such as pressing a key, a mouse click, etc.

• React events are named using camelCase, rather than lowercase in HTML.
• With JSX, you pass a function as the event handler, rather than a string in HTML.

• React JS is a front end, open source JavaScript library used for building UIs.
• React Native, on the other hand, is an open source, MOBILE framework that allows developers to use React on platforms like Android and iOS. “Native” is a reference to the fact that React Native integrates React components with the native capabilities of these mobile-specific platforms.

• Redux helps developers build web applications that perform consistently and are easy to test. It also includes live code editing and debugging tools.
• Redux can be used with React or any other UI library.
• React? helps developers divide UIs into multiple components, but doesn’t have a specific way to keep track of state data. Redux? is a library that compliments React by providing a stable way to track this data.

Redux is composed of the following components:

Action – It’s an object that describes what happened.

Reducer –  It is a place to determine how the state will change.

Store – State/ Object tree of the entire application is saved in the Store.

View – Simply displays the data provided by the Store.

Actions in React must have a type property that indicates the type of ACTION being performed. They must be defined as a String constant and you can add more properties to it as well. In Redux, actions are created using the functions called Action Creators.

Example:-

function addTodo(text) { return { type: ADD_TODO, text } }

Reducers are pure functions which specify how the application’s state changes in response to an ACTION. Reducers work by taking in the previous state and action, and then it returns a new state. It determines what sort of update needs to be done based on the type of action, and then returns new values. It returns the previous state as it is if no work needs to be done.

A store is a JavaScript object which can hold the application’s state and provide a few helper methods to access the state, dispatch actions and register listeners. The entire state/ object tree of an application is saved in a single store. As a result of this, Redux is very simple and predictable. We can pass middleware to the store to handle the processing of data as well as to keep a log of various actions that change the state of stores. All the actions return a new state via reducers.

React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application. This keeps the URL in sync with data that’s being displayed on the web page. It maintains a standardized structure and behaviour and is used for developing single-page web applications. React Router has a simple API.