Manav Pandya
03
Jun-
What is React?
React is a JavaScript-based library that is used to create a SPA (Single Page Application) and different User Interfaces. React is developed and maintained by Facebook and other contributors. By using React, we can develop web and mobile applications by just following component-based architecture, and by using React we can get robust, scalable, and high-performance applications.
React makes the task easier to create dynamic web applications because it requires less coding and offers more functionality along with the quick application configuration, unlike opposed to JavaScript, where the coding often gets complex very quickly over a period of time.
What is Virtual DOM in React?
DOM plays an important role in terms of web application performance, thus there are tons of frameworks are available that manipulate the DOM directly by adding, modifying, or removing any existing element. When we perform any action on a page, at that time content should be updated based on the result of the action and it should be reflected in the DOM. In React, Virtual DOM plays an important role by updating DOM which is marked as dirty. React’s Virtual DOM converts the dirty component into a Virtual image of a component and compares it with the existing DOM, and based on the result of the comparison, the new DOM will be replaced by the existing DOM.
The concept of a virtual DOM comes in and performs significantly better than the real or the actual browser DOM. The virtual DOM in React is only a virtual representation of the DOM which means every time the state of our application changes or any element in the DOM should be manipulated, the virtual DOM gets updated instead of the real DOM and this is how rendering will be better.
For the execution of Virtual DOM in React, the diffi algorithm plays an important role to watch for the changes and does it requires a re-render of that section or not.
What is the difference between Real DOM and Virtual DOM?
When we change any action in an application, at that time real DOM should be updated, in this case, it would be expected that all that conversion tasks should be faster to achieve higher performance. Basically, a DOM or Real DOM is a structured collection of abstracted elements and the Virtual DOM is the abstraction of HTML DOM. Real DOM is the structure of the existing elements, whereas Virtual DOM is the virtual tree of our application with the recent changes we have done. At the end of the comparison between Real DOM and Virtual DOM, the newly updated DOM will be rendered into the browser.
What is Diffing Algorithm?
Diffing Algorithm is used to compare different DOM trees, while this algorithm compares the two different root elements, and based on the different results, it mounts the new tree and unmounts the old one. For example, we have an element inside <div>, and below is the old and new version of the change.
// Old <div id="mydiv"> <img src="" /> </div> // New <div id="mydiv"> <a href="">Click Me</a> </div>
Here is an above code snippet of two different versions of a <div>, we have changed <img> control to <a> element, now React will tear down the old tree and build the new tree from the scratch with the updated changes. And to keep in mind that the child element of the root element will also be unmounted.
What are the Hooks in React?
As per the official definition, React Hooks means.“Hooks let you use state and other React features without writing a class. You can also build your own Hooks to share reusable stateful logic between components” By using Hooks, we can share state using function component which acts as isolated reusable units which means now we don’t need to use class component for using state. One of the updates in Hooks is that we can write the state and update it even within a single line of code. Apart from using state in the function component, we can also access different lifecycle hooks using useEffect.
With the release of React 16.7, multiple hooks functions were added to use stateful component features and state into the functional components that were not possible before the release of the React hooks.
What are the advantages of using create-react-app CLI?
Creating a project of React is a very straightforward process and for that, we just need to install the create-react-app package. But why do we need to use it, there are a few advantages to using create-react-app which are listed below.
One line command to set up React web app.
No need to mug up all the configurations, because it provides the way to set up and minifies the production-ready app.
Application versioning can be well maintained.
It comes with great package support like ESLint, Babel, Webpack, and so on.
Upgrading the existing app to the latest version is less painful
What is JSX?
JSX stands for “JavaScript XML”.Basically, JSX is a syntax extension of JavaScript, in other words, we can say JSX is a way to use JavaScript along with the HTML elements.
The browser does not know that this is a JSX syntax because it's not valid JavaScript code but it's an extended version of JavaScript with XML. It is happening because we are assigning an HTML tag to a variable or various JavaScript expressions that is not a string but just an HTML code. So to convert the JSX-based codebase to the browser understandable JavaScript code, we can use tools such as Babel which is a JavaScript compiler/transpiler.
It can be used as a template engine but it’s not necessary to use it compulsorily thus it has some advantages to use along with React which are listed below.
Faster in rendering and performance
Can create a reusable component using JSX syntax
It will be very easy to create an HTML structure by using JSX
Why we should use JSX?
Using JavaScript with XML makes it more useful while developing a web application using React. While using React for web development, we need to perform various tasks along with the UI like events, DOM manipulation, changes of states and props, managing reusable components,s and so on. By using JSX, we can embed code of JavaScript with HTML easily which allows us to manage errors, inline expressions, conditions, etc. Using Component, we can have HTML markup and business logic in a single file so that it can be a more manageable component in order to update anything. And of the main advantage is that JSX can be easily used by just using curly braces { } in our JSX file and we are good to go.
How does JSX works behind the scene?
JSX syntax is different than JavaScript, but while we write anything in JSX, at last, it will be converted into JavaScript using Babel. When we create any component, at that time every element in the component will be transpired into a React.createElement () call. It means that every element should be converted into the React element before rendering, for example, we have a simple <h1> element in our component like this.
render() { return ( <div> <h1>Hello World</h1> </div> ); }Here we have <h1> element inside the parent <div> element, but <h1> element will be converted using React.createElement() like this.
React.createElement("h1", {}, "Hello, World");How to use custom JSX elements?
We can create the component using JSX, the same way we can also render a reusable JSX element as a child element into the JSX file. For that, we just need to import the same component and can use it inside the parent JSX element as explained in the below example.
render() { return ( <div> // JSX Child file 1 <Header /> // JSX Child file 2 <Content /> // JSX Child file 3 <Footer /> </div> ); }Here in this example, we have one parent element <div> and inside the parent element, we have three different elements which is basically a JSX element that resides at a different location. So, when we run our application, our child JSX element will be rendered in a particular order.
What is a Component?
Component nowadays is a booming world, but we may have a question like what is Component. The component is a reusable, independent piece of code that contains the JavaScript and HTML component data. It can be exported from one place to another and using the import statement, we can access its various functionality developed in the component file. Basically, the component acts as a part of a big application, and the component has to serve the specific functionality wherever it’s being used, one of the important advantages of using a component is that we can create a loosely coupled system by dividing the application module as chunk which called as “Component”.
In React, the components can be architected according to the application requirement hence, creating re-usable components makes it even better for getting better application maintenance and usability while developing it.
How to create a Component in React?
In React, the component just returns the JSX code which is used to render something in the DOM. Creating a component is a very straightforward thing, for that we just need to create a “.js” file and the code should look like this.
import React from 'react'; class Demo extends React.Component { render() { return ( <div> <h1>Component in React</h1> </div> ); } } export default Demo;As you can see that we have an import statement where we have used ‘react’ which means we are going to use react package for this component and its element “Component”.One thing to be noticed here is that we have used “React. Component” because we are going to use Component from the React package itself. We cannot skip the “render ()” method which is used to render the JSX/HTML content from the current component. The last statement is to export the current component so that any component can access the current component by its class name.
Other than the class based on stateful component, we can also create the functional function using the "function" followed by the function name which is similar to the JavaScript function that accepts multiple arguments as given below.
function App(props) { // Use props values here return ( // return html content as required ) }How many types of Components can be created using React?
React primarily supports two types of Component structures which are listed below.
Stateful/Class based Component
Stateless/Function-based Component
What is a Stateful/Class-based Component in React?
A stateful Component or Class-based component can be created using ES6 class which is one of the features of ES6. Basically stateful component in React contains the internal state object which is used to manage component level data for the rendering purpose. Being a Class-based component, we can access different components from each other because there is communication possible between two components by passing the state from one to another. So whenever the state of the class will be changed, at that time the render () method also re-renders its JSX/HTML content. Below is a simple example of a Stateful Component.
import React from 'react'; class Demo extends React.Component { constructor() { super(); this.state = { message: "This is Stateful Component !!!" } } render() { return ( <div> <h1>Hello {this.state.message}</h1> </div> ); } } export default Demo;As you can see in the above example, we have used a class that is part of ES6, and apart from that, we have a constructor () which is again the functionality of an ES6. One thing to be noticed is that inside the constructor, we have used “this.state” which is a component-level state management mechanism to populate data while rendering. We can manipulate the state object whenever we want for the current component.
What is Stateless/Functional Component in React?
A stateless or Functional component does not contain the state object and it follows purely a functional approach while creating the component. It is a kind of simple function-based component which contains the “container” part, it means when we want to show data based on the request but don’t require data to be changed then the function component will be used. For example, we have data of 10 employees and we just need to show them as a list, then we can create a functional component and can return the list of the employee along with the design part. Keep in mind that a functional component cannot maintain an internal state object unlike a Stateful component, but it can use props in order to populate data in a webpage. Below is a simple example of the Stateless component.
const functionalComponent = (props) => { <h1>Hello World !!!</h1>; } export default functionalComponent;Here in the above example, we have a simple function called “functional component” along with the props as an argument, and this function just returns the static message. We can use the function-based component while we want to use only rendering logic.
With the latest version of React, function components are not more limited to just rendering the logic but it has now all capabilities to use state and lifecycle methods as we do in stateful components and that is only possible using React hooks.
What is Higher Order Component in React?
As per the official definition of HOC is. “A higher-order component (HOC) is an advanced technique to React for reusing component logic” In other words, we can say that it accepts the component and returned the new processed component. HOC is not a part of React’s Component API, it is a kind of third-party component where we can use external component functionality by just importing it. The syntax of the HOC will look like this.
const newComponent = myhoc(thisComponent);
What is a State in React?
The State in React is an instance of the React Component Class and it can be defined as an object of a set of observable properties that control the behavior of the component by mutating its value. State in React is the heart of the application, which is used to maintain the component level data as well as the global state for the whole application. The object of the State is mutable which means we can update the state value over a period of time. The important thing to be noted is that the values of the State can be passed from the parent component to a child for the rendering purpose and the parent component can update the state of the child.
The component state can be manipulated from the component itself but to manage the global state object across the application, we may use other ways such as context API, Redux, or the similar libraries that manage the store and global state object that can be manipulated while interacting with the components.
What are Props in React?
In React, Props and State is the heart of every application, and Props is the same as State but there is some difference between them. Props in React is a way to pass the data to the Component which is exactly like the properties that contain a single value or object as a value. One of the important points about the Props is that it is “immutable”, which means we cannot update it from the component anyhow, but we can make use of it for the rendering purpose.
When we pass any data such as state values or other values to the child component for the child component, those values act as a prop and it can be used by the child component by using "this.props.prop_name" while working with the React component.
How many types of Form input are supported?
Forms in React are completely different than other libraries or frameworks, here In React, we need to manage everything from scratch like creating forms, validations, and so on. There are two types of Form input that are supported which are listed below.
Controlled form inputs
Uncontrolled form inputs
What is react-router-dom?
The react-router-dom is a library that is used to implement web app-based routing functionality. Previously it was called “react-router” but now it’s split into the three different packages which are listed below.
react-router-dom
Used for implementing web application based routing
react-router-native
Used for implementing routing only for mobile applications (i.e. React Native)
react-router-core(deprecated)
It is used to implement the core routing mechanism anywhere for the core React application
Summary
I hope these questions and answers will help you to crack your React Interview. These interview questions have been taken from our newly released eBook React Interview Questions & Answers. This book contains more than 165 React interview questions.
This eBook has been written to make you confident in Angular with a solid foundation. Also, this will help you to turn your programming into your profession. It's would be equally helpful in your real projects or to crack your React Interview.
Take our free skill tests to evaluate your skill!
In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.
