Interview Question React | Basics for Freshers and Seniors

interview question react, react interview questions, interview question react js, top react interview question, react interview question and answers, react interview question, react interview question for senior developer

✔ What is NPX?

The npx stands for Node Package Execute and is included with npm. If you install npm above version 5.2.0, npx will be installed as well. It’s a npm package runner that allows you to run any package from the npm registry without having to install it.

✔ What is the difference between npm & npx to “create react app”?

To use create-react-app in npm the command is > npm install create-react-app then > create-react-app myApp (Installation required). Npm is a tool that use to install packages.
But in npx you can use that without installing like > npx create-react-app myApp, this command is required in every app’s life cycle only once.

✔ What is the Create React App?

Create React App is a package to start building a new single-page application in React.
It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.
Under the hood, it uses Babel and Webpack.

✔ What is React JS?

Reactjs is a popular open-source JavaScript toolkit for building dynamic and responsive user interfaces.
Reactjs appears as a particularly effective alternative for constructing quick and scalable front-ends for online and mobile applications, thanks to its component-based architecture.
It primarily focuses on building natural, interactive, and appealing applications.
Reactjs demands a minimal coding effort on the part of developers and offers the best rendering performance.

Reactjs was created by Jordan Walke, a software engineer at Facebook, in the year 2011.
In 2011, Facebook applied this new library to its web-based application and in 2012 it was applied to Instagram. The library went open source in 2013 and soon its implementation expanded.

Read here more –
https://www.thirdrocktechkno.com/blog/why-choose-reactjs-for-your-next-project-features-and-benefits/

✔ Is React a framework or library?

React is a JavaScript library for building user interfaces. It deals with the views and lets you choose the rest of your front-end architecture. However, a strong library ecosystem has developed around it, allowing you to build a complete framework around React by adding a few libraries to it.

✔ Does Google Use React or Angular?

Google created Angular and they use Angular for their products. It means Google does not use React, Because, Google has its own massive Angular framework.

✔ Why is React Declarative?

Why is React Declarative? What does it mean? “Declarative”, at least in the programming sense, is usually defined as “telling what to do instead of how to do it”.
When we talk about React being declarative, the most frequent explanation is that when you design a component, all you have to do is tell React how you want the DOM to look, and React will take care of the rest. You don’t have to worry about how the various parts on the website should change, or which ones should be removed or included. Simply say “I want a button there, disabled,” and React will make it happen. “Now I’d like the button to work.” No worries, React has your back.

✔ What is declarative programming with examples?

Declarative programming is when you write your code in such a way that it describes what you want to do, and not how you want to do it. It is left up to the compiler to figure out the how. Examples of declarative languages are HTML, XML, CSS, JSON, SQL, and there are more.

✔ What does imperative mean in programming?

Imperative programming is a software development paradigm where functions are implicitly coded in every step required to solve a problem. In imperative programming, every operation is coded and the code itself specifies how the problem is to be solved, which means that pre-coded models are not called on.

✔ What are the differences between ReactJS vs Angular?

The most popular framework that is compared with ReactJS is the AngularJS framework. Let’s compare both of them.

ReactJS is a library while AngularJS is a framework.
ReactJS is developed by Facebook and AngularJS is developed by Google.
JSX is used in ReactJS. Typescript is used in AngularJS.
There is no concept of virtual DOM in AngularJS.
In reactJS, one-way data binding is used. In AngularJS, two-way data binding is used.
AngularJS is a full-fledged framework that can solely be used for developing web applications. ReactJS always need additional libraries for routing, API interaction, etc.
There is two-way data binding in AngularJS that is excellent while passing data through components. That does not mean ReactJS’s one-way data binding is not good. Two-way data binding is always a better option.
AngularJS uses typescript which is a superset of javascript. Typescript is a complex language and it is a bit difficult to master as compared to JSX. But typescript provides many additional functions like object-based programming.
ReactJS is better than AngularJS in rendering data. There is no virtual DOM in AngularJS. That means while DOM manipulation, the whole of the original DOM is updated which makes it very slow.
In JSX we write, both the logic and markup in one file, but in AngularJS, we have to use separate files. This makes coding in AngularJS very complex.

✔ What is one-way data binding?

One-way data-binding means that throughout the whole application, data flows only in one direction. This gives better control over it. The data is passed from the parent component to the child component through read-only props. These props cannot be sent back to the parent component. This is how one-way data binding works. Although, the child component can communicate with the parent component to update the state via callback functions.

✔ React versions and release dates?

17.0.2 – 22 March 2021
17.0.1 – 20 Oct 2020
17.0.0 – 22 Oct 2020
16.0.0 – 26 Sep 2017
16.12.0 – 14 nov 2019
16.13.0 – 26 February 2020
16.14.0 – 14 October 2020

✔ How to Work with Images and Other Assets?

import logo from "./logo.svg";

First We can import a file with the above statement. To import it’s fixed to put a file in the src folder.

<img src={logo} className="App-logo" alt="logo" />

Second, instead of including static assets directly within our src folder, we also have the option to include them in our public folder. If we move our logo.svg file from src to the public, instead of importing our file by using the import syntax, we can write the following.

<img src="/logo.svg" className="App-logo" alt="logo" />

What is convenient about Create React App is that we do not need to use an img element at all to display this svg. We can import this SVG as a component using the following syntax:

import { ReactComponent as Logo } from "./logo.svg";

<Logo style={{ height: 200 }} />

What exactly is going on here? We may import the SVG file as a ReactComponent and then use it as a keyword to rename it to anything we want.

✔ What is the use of index.js in React?

Regarding React, index. js is where you would usually mount/render your main react component onto your “root” element(which you mark in your HTML).

✔ Is JSX compulsory for react?

JSX is not a requirement for using React. Using React without JSX is especially convenient when you don’t want to set up compilation in your build environment.
Each JSX element is just syntactic sugar for calling React.createElement(component, props, …children). So, anything you can do with JSX can also be done with just plain JavaScript.

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));

✔ What is “React Fiber”?

Fiber is the new reconciliation engine in React 16. Its main goal is to enable incremental rendering of the virtual DOM.
React Fiber is an ongoing reimplementation of React’s core algorithm. It is the culmination of over two years of research by the React team.

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

Other key features include the ability to pause, abort, or reuse work as new updates come in; the ability to assign priority to different types of updates; and new concurrency primitives.
https://github.com/acdlite/react-fiber-architecture

JS Mount

Learn More