ReactJS Interview Questions (2021) | TechGeekNxt >>

ReactJS Interview Questions (2021)


React is JavaScript library for building user interfaces

reactjs

In this post, questions from reactJS Interviews will be answered for Experienced and Freshers. We're trying to share our experience and learn how to help you make progress in your career.

  1. What is React / ReactJS?
  2. React vs Angular?
  3. What are the advantages of using ReactJS?
  4. What are the core concept of React?
  5. What is JSX in React?
  6. What is the Document Object Model (DOM) in ReactJS?
  7. What is Virtual DOM in ReactJS?
  8. How VirtualDOM works in ReactJS?
  9. What is ReactJS component and what are different ways to create it?
  10. What is Props in ReactJS?
  11. What is state in ReactJS?
  12. React Props vs State?
  13. What is one-way data binding in ReactJS?
  14. How to debug the reactjs application?
  15. What is React Native?
  16. What is Flutter?
  17. What is the difference between Flutter and React Native?

Q: What is React / Reactjs?
Ans:

React is a component-based, declarative JavaScript library for building user interfaces.

It was created at Facebook and released to the public in 2013, and it powers many of the most popular apps, including Facebook and Instagram.

Its main purpose is to make it simple to reason about an interface and its state at any given time by splitting it into components.

Q: React vs Angular?
Ans:

React
Angular
Author

Facebook

Google

Language

JavaScript, JSX

JavaScript, HTML

Type

Open Source JS Framework

Open Source MVC Framework

Data-Binding

Uni-directional

Bi-directional

DOM

Virtual DOM

Regular DOM

Architecture

Only the View of MVC

Complete MVC

Q: What are the advantages of using ReactJS?
Ans:

  • Easy - React is fast, simple, and most importantly, easy to learn.
  • Backed by Facebook.
  • Performance - It uses VirtualDOM to improve efficiency instead of RealDOM, as RealDOM manipulations are more expensive.
  • React can be conveniently used on the client as well as server side.
  • JSX - Because of JSX, code's readability increases
  • React is easy to integrate with other frameworks like Meteor, Angular, etc
  • Test friendly - Using React, writing UI test cases become extremely easy
  • Follows Unidirectional Data binding
  • React is compatible with the most recent JavaScript features, including ECMAScript 2015, and provides all of the benefits of ES6 as well as increased productivity.
  • Uses reusable/composable UI components to develop the view.
  • SEO friendly
  • flexibility - React provides you the freedom to choose the tools, libraries, and architecture for developing an application based on your requirement.

Q: What are the core concept of React ?
Ans:

Components: A string is a series of characters that are stored as UTF-16 Unicode code
JSX: It reflects the values of the number form. The numbers are stored as floating-point values in React
State: This can have values as true or false
Props: This can be a list of numbers together
Tuple: This data type allows users to create an array where the fixed number type elements are known but not the same.
Enum: This allows creating a user-defined data type.
Undefined: The Undefined type denotes all uninitialized variables.

Q: What is JSX in React?
Ans:

JSX stands for JavaScript XML. JSX provides syntactic sugar for React. createElement( ) function.

It makes easier to create templates. JSX is a React extension which allows you to write XML-like syntax in the same file as your JavaScript code, and then a preprocessor (such as Babel) converts these expressions into actual JavaScript code. JSX tags have a tag name, attributes, and children, just like XML/HTML tags. It is type-safe, and most of the errors can be found at compilation time.

const container = (
                    <div>
                      <p>This is sample JSX</p>
                    </div>
                   );
                   ReactDOM.render(container,rootElement);

Without using JSX, we would have to create an element one by one as following :

const textElement = React.createElement('p', {}, 'This is wihout JSX');
                            const container = React.createElement('div','{}',textElement);
                            ReactDOM.render(container,rootElement);

Q: What is the Document Object Model (DOM) in ReactJS?
Ans:

The DOM (Document Object Model) handles an XML or HTML document as a tree structure, with each node representing a section of the document as an object.

Document Object Model (DOM)

Q: What is Virtual DOM in ReactJS?
Ans:

  • 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.

Q: How VirtualDOM works in ReactJS?
Ans:

    This Virtual DOM works in three simple steps.
  1. When the underlying data changes, the entire UI is re-rendered in Virtual DOM format.
  2. After that, the difference between the old and new DOM representations is computed.
  3. Finally the calculations have been completed, the real DOM will be updated with only the changes that have occurred.

Checkout our related posts :

Q: What is ReactJS component and what are different ways to create it?
Ans:

Components are React applications building blocks. These components divide the entire user interface of the React application into small, independent and reusable code parts.

A render() function must be required for each reacting component.

We can create React component in two ways :

  • Function Components
    This is the easiest way of building a component. These are pure JavaScript functions, which accept the object props as first parameter and return the elements React.

    Also known as stateless components, these components have no state of their own and just have a render method.

    function Greeting(props) {
    
      return <h1>Welcome to {props.name}</h1>;
    
    }
  • reactjs components
  • Class Components
    You can use ES6 class to define a component, which extends from 'React.Component' and implement 'render()' function, which is must be required for each reacting component. To return the HTML you want to display within a component, the return function is used.

    Because they can have a state, they're also known as stateful components

    class Greeting extends React.Component {
      render() {
        return <h1>Welcome to {this.props.name}</h1>;
      }
    }

Q: What is Props in React?
Ans:

Props ("Properties" ) are read-only inputs to components, passed down from a parent component to a child component.

  • Props is data (object which stores the value of attributes)
  • Props are immutable, so we cannot modify the props from inside the component
  • Props are available in the component as this.props and can be used to render dynamic data in render method.
  • Trigger state changes.
Refer Reactjs Props Example for it's implementation.

Q: What is state in React?
Ans:

A component's state is an object that contains information that may change over the component's lifetime. It's the heart of the react component, determining how it behaves and renders.
Refer Reactjs State Example for it's implementation.

Q: React Props vs State?
Ans:

Props
State

Props are immutable / read-only.

State is mutable. State modifications can be asynchronous.

Props enable you to transfer data as an argument from one component to other component.

State contains component information.

Props are used to communicate between components.

States can be used with the component to make dynamic changes.

Q: What is one-way data binding in ReactJS?
Ans:

Because React uses one-way data binding, everything stays modular and quick. When a developer creates a React project, they usually nest child components within parent components due to the unidirectional data flow. A developer can effectively manage the entire web application by knowing where and when an error occurs.

one-way data binding

Q: How to debug the reactjs application?
Ans:

It's simple to test React apps because of the wide developer community. Facebook even offers a little browser extension that speeds up and simplifies React debugging.

reactjs debug

For example, this Chrome extension adds a React tab to the developer tools menu. The tab allows for direct inspection of React components.

Q: What is React Native?
Ans:

React Native is a framework for creating user interfaces that combines the best features of native programming with React. It allows you to create mobile apps entirely with JavaScript. These mobile apps are available for download on the Google Play Store and the Apple App Store.

Q: What is Flutter?
Ans:

Google's Flutter is a cross-platform mobile app development framework. It allows developers to create and deliver visually appealing natively built apps for mobile (iOS, Android), web, and desktop from a single code base.

Q: What is the difference between Flutter and React Native?
Ans:

  1. React Native
    Using React, React Native is totally developed in JavaScript. Because JavaScript is one of the most widely used languages in the world today, this is a benefit for React Native.
  2. Flutter
    Flutter is written in the Dart programming language. Dart is a programming language created by Google in 2011 that is only utilised by a small number of developers.


Recommendation for Top Popular Post :