React Interview Question

Q1. What is a React? What are its features?

React is also known as React.js and ReactJS. React is an open-source JavaScript library that is used to develop User Interface (UI). It is also a component-based front-end library which responsible for the application view layer for a single web page and mobile app. It allows some facility to the developer to create a large web application that can be used for changing the data without refreshing the page.

Features of React:

1. JSX
2. Component
3. Virtual DOM
4. One-way data-binding
5. Simplicity
6. Performance

Q2. What is JSX? Why we use JSX?

JSX stands for JavaScript XML. Its XML/HTML like syntax used by React. This syntax is used by the pre-processor such as BABEL for transforming the text in JavaScript file into standard JavaScript Objects. It describes what the user wants the interface to look like. JSX helps to make code easier to understand and debug. It embeds HTML into JavaScript code.

We used JSX because it helps to perform optimization i.e. faster than normal JavaScript, to create a template, and by separation and logic in different files, React uses components for it.

Q3. Difference between React and React Native.

• React is used to develop web applications using HTML tags whereas React Native is used for developing mobile applications without HTML tags.
• In terms of security, react provides high security but React Native provides less compare to React.
• In React, VDOM used to render the codes but in React Native, it uses APIs to render the application.

Q4. What is the purpose of render() function in React?

It is responsible to define every component whenever it renders the component it returns HTML node else if you don’t render it will return a null value.

Q5. Differentiate between State and Props.

• Props are immutable due to pass to a component that can’t be modified whereas State is Observable because it can be changed.
• The state has only used in Class component while Props have no limit that it can be either used with function or Class component.
• The state is handled by Event Handler whereas Props are used to set by the parent component.

Q6. What are the phases of the React Component Lifecycle?

In the React Application, every component has its lifecycle that defined as the no. of methods that are used in different stages of the Component. They are as follows:

• Initial Phase
• Mounting Phase
• Updating Phase
• Unmounting Phase

Q7. Why do we need a Router to React?

It shows numerous perspectives in a solitary page application. It is utilized to characterize different courses in the application. At the point when a client types a particular URL into the program, and if this URL way coordinates any 'course' inside the switch record, the client will be diverted to that specific Route. Along these lines, we have to add a Router library to the React application, which permits making numerous courses with each prompting us a one of a kind view.

Q8. What is Flux Concept?

A flux is not a framework and library. It is an architecture uses initially for creating a client-side application with React. Simply, React is a programming concept in that data flow in uni-directional i.e. at the top data entry in the unidirectional flow until it executes on the screen. It is very helpful if the project application is in dynamic form due to that there is reduce in a runtime error.

Q9. How different is React's ES6 syntax when compared to ES5?

• Data Type: ES5 supports data types i.e. string, number, Boolean, null, and undefined. Apart from all the data type ES6 introduced new one SYMBOL for unique vales.
• Arrow function: In the case of ES5, to define the function we have to use both functions and return keywords but I another case, there is no need to use any keyword to define the function.
• Object Manipulation: In ES6, Object manipulation can be processed smoothly due to destructing and special operation but in ES5 it consumes more-time than ES5 for processing.
• Performance: based on performance, ES6 has a higher performance than others due to the new features and the shorthand storage implementation whereas ES5 has a lower performance due to the non-presence of features.

Q10. How many ways can we style the React Component?

There are mainly four ways to style the React application:

• Inline Styling
• CSS Module
• Styled component
• CSS Stylesheet