ReactJS Interview Questions and Answers

Answer - 1 : - React JS is a JavaScript library used in web development to build interactive elements on websites. But if you’re not familiar with JavaScript or JavaScript libraries, that’s not a helpful definition. So let’s take a step back and deal with those terms first.

Answer - 2 : - The major features of React are: o It uses VirtualDOM instead of RealDOM considering that RealDOM manipulations are expensive. o Supports server-side rendering. o Follows Unidirectional data flow or data binding. o Uses reusable/composable UI components to develop the view.

Answer - 3 : - JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.

Answer - 4 : - An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated. Whereas a component can be declared in several different ways. It can be a class with a render() method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output:

Answer - 5 : - There are two possible ways to create a component. 1. Function Components: This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as first parameter and return React elements: 2. function Greeting({ message }) { 3. return {`Hello, ${message}`} 4. } 5. Class Components: You can also use ES6 class to define a component. The above function component can be written as: 6. class Greeting extends React.Component { 7. render() { 8. return {`Hello, ${this.props.message}`} 9. } }

Answer - 6 : - If the component needs state or lifecycle methods then use class component otherwise use function component. However, from React 16.8 with the addition of Hooks, you could use state , lifecycle methods and other features that were only available in class component right in your function component.

Answer - 7 : - Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component. The primary purpose of props in React is to provide following component functionality: . Pass custom data to your component. i. Trigger state changes. ii. Use via this.props.reactProp inside component's render() method. For example, let us create an element with reactProp property: This reactProp (or whatever you came up with) name then becomes a property attached to React's native props object which originally already exists on all components created using React library. props.reactProp

Answer - 8 : - Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function.

Answer - 9 : - If you try to update state directly then it won't re-render the component. //Wrong this.state.message = 'Hello world' Instead use setState() method. It schedules an update to a component's state object. When state changes, the component responds by re-rendering. //Correct this.setState({ message: 'Hello World' })

Answer - 10 : - Binding in Constructor: In JavaScript classes, the methods are not bound by default. The same thing applies for React event handlers defined as class methods. Normally we bind them in constructor.