React js Interview Questions

Yes, React can be used without JSX. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment.

Difference between MVC and Flux

MVC (Model view controller) and Flux both are design patterns used for web development. Because of MVC’s simplicity, it is considered as the most used form of web design.

Flux is a completely new architecture with a different concept from social media Facebook and works in a unidirectional concept.

The difference between pure components and general components in React can be stated as the PureComponent handles the shouldComponentUpdate method for you. When props or state changes, PureComponent will do a shallow comparison on both props and state. Whereas Component won't compare current props and state to next out of the box.

Higher-order components are a pattern that rises up from React’s nature of the composition. HOC is a new technique used for reusing the logic.

Basically, HOC will take the old component and returns the new component.

The components of React are functions also classes. When the programmer uses the methods on classes or functions are called as lifecycle events.

There are three stages of lifecycle events.

• Mounting: During the mounting phase, the component is created and inserted into the DOM.
• Updating: When a component is updated, the component is rendered.
• Unmounting: The same component when is it removed from the DOM is called as Unmounting.

The difference between functional and class components in React can be stated as a functional component is just a plain JavaScript function that accepts props as an argument and returns a React element. Whereas a class component requires you to extend from React and to create a render function that returns a React element.

Redux is used as a state management tool with React. It is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test.

Flux is a type of architecture or pattern used by Facebook internally when it is working along with React. This is not a library or a type of framework. But a simple and new type of architecture and one which complements React along with the concept of Unidirectional Data Flow. The individual components of Flux that will help in understanding it better are mentioned below:

1. Action
2. Store
3. Dispatcher
4. Controller View

The difference between prop and state in ReactJs can be stated as the Props are like parameters - they are passed to a component from the caller of a component. Whereas State is still variables, but directly initialized and managed by the component. The state can be initialized by props.

The set to up routing in ReactJS are as follows:

• Build an App. js React component. In the src directory, create one component file called App. 
• Make three components. First, make one components directory and in that make Home. js component. 
• Register the routes in the App. js file. // App.

Stateless and stateful components in React

Stateless components are also a functional component in which the local state is absent. But the state characteristics can be added in addition by React.

Stateful components are the exact opposite of stateless components by having a local state into it. It has the state object and sometimes, event handling functions also.

In React, a synthetic event is a cross-browser wrapper around the browser's native event. The difference can be stated as to when the event occurs and bubbling into the document, React passes the event content to the middle layer SyntheticEvent whereas it doesn't require non-synthetic events.

ReFS stands for the Resilient File System which is Microsoft's newest file system. We need it to maximize data availability, scale efficiently to large data sets across diverse workloads, and provide data integrity with resiliency to corruption.

Diffing is a process of comparing the current version of DOM with its previously done DOM. This action of comparing is done by React. When react observes the state changes, it immediately captures the change and update in the virtual DOM tree. With this available data, React’s responsibility is to compare.

React.createElement() method is a method used for creating and returning a new React element of the given type. The type argument can be either a tag name string, a React component type i.e. a class or a function, or a React fragment type.

To start the development server in ReactJs you can use the command npm run as it will run command webpack-dev-server --mode development --open --port 3000 which will open a browser with dev host on the port.

In React, Super() method is used to call the constructor of its parent class. This is required when we need to access some variables of its parent class.

Babel is a compiler of Javascript. It is an open-source as well as a free compiler. The main purpose of this compiler is to convert the code of ECMAScript 2015+ into a code that is backward-compatible one of the Javascript only and can also be executed easily on earlier engines of Javascript. This is a well-known tool to use the latest features of the well-renowned programming language of Javascript.

The factory design pattern is a type of creational design method. This method is related to the creation of an object. In this pattern, objects are created without the creation of logic being exposed to the client. The client also uses the same interface which is quite common, to create an object of a new type. The intention is to use the static member function, this will create and return the instances, without exposing the details to the user of the class modules.

Angular directives can be defined as the new syntax or markup such that these markers on the DOM element provide some special behavior to DOM elements and tells Angular HTML compiler to attach.