React Review part 1
What are the limitations of React?
The high pace of developmentPoor DocumentationView PartJSX as a barrier
What is the virtual DOM? Explain how it works within ReactJS.
A Virtual DOM is a lightweight JavaScript object which is an in-memory representation of real DOM. Virtual DOM works in three steps: 1. Whenever any data changes in the React App, the entire UI is re-rendered in Virtual DOM representation. 2. Now, the difference between the previous DOM representation and the new DOM is calculated. 3. Once the calculations are completed, the real DOM updated with only those things which are changed.
What is an event in React?
An event is an action which triggers as a result of the user action or system generated event like a mouse click, loading of a web page, pressing a key, window resizes, etc. In React, the event handling system is very similar to handling events in DOM elements. The React event handling system is known as Synthetic Event, which is a cross-browser wrapper of the browser's native event. Handling events with React have some syntactical differences, which are: React events are named as camelCase instead of lowercase. With JSX, a function is passed as the event handler instead of a string.
Why can't browsers read JSX?
Browsers cannot read JSX directly because they can only understand JavaScript objects, and JSX is not a regular JavaScript object. Thus, we need to transform the JSX file into a JavaScript object using transpilers like Babel and then pass it to the browser.
List some of the major advantages of React.
Easy to Learn and USeCreating Dynamic Web Applications Becomes EasierReusable ComponentsPerformance EnhancementThe Support of Handy ToolsKnown to be SEO FriendlyThe Benefit of Having JavaScript LibraryScope for Testing the Codes
Is setState a synchronous or async call?
First of all, yes, it is asynchronous. Many devs don't realize this, but setState is asynchronous. I know the setState calls don't look asynchronous, and inadvertent calls can introduce some bugs.
What do you understand from "In React,everything is a component."
In React, components are the building blocks of React applications. These components divide the entire React application's UI into small, independent, and reusable pieces of code. React renders each of these components independently without affecting the rest of the application UI. Hence, we can say that, in React, everything is a component.
Explain the purpose of render() in React.
It is mandatory for each React component to have a render() function. Render function is used to return the HTML which you want to display in a component. If you need to rendered more than one HTML element, you need to grouped together inside single enclosing tag (parent tag) such as <div>, <form>, <group> etc. This function returns the same result each time it is invoked.
What is JSX?
JSX stands for JavaScript XML. It is a React extension which allows writing JavaScript code that looks similar to HTML. It makes HTML file easy to understand. The JSX file makes the React application robust and boosts its performance. JSX provides you to write XML-like syntax in the same file where you write JavaScript code, and then preprocessor (i.e., transpilers like Babel) transform these expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children.
What is Props?
Props stand for "Properties" in React. They are read-only inputs to components. Props are an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from the parent to the child components throughout the application. It is similar to function arguments and passed to the component in the same way as arguments passed in a function. Props are immutable so we cannot modify the props from inside the component. Inside the components, we can add attributes called props. These attributes are available in the component as this.props and can be used to render dynamic data in our render method.
What are the features of React?
React framework gaining quick popularity as the best framework among web developers. The main features of React are: JSXComponentsOne-way Data BindingVirtual DOMSimplicityPerformance
What is React?
React is an open-source JavaScript library created by Facebook for building complex, interactive UIs in web and mobile applications. The key point in this answer is that React's core purpose is to build UI components; it is often referred to as just the "V" (View) in an "MVC" architecture.
Differentiate between Real DOM and Virtual DOM.Real DOM vs Virtual DOM
Real DOM (Document Object Model)- is where the content of the webpage is physically displayed. That's what the users see. So whenever we want to dynamically change the content of the webpage, we modify the DOM. b.Virtual Dom is abstraction of the HTML DOM (Real DOM) It's lightweight and detached from the browser. In other words, the virtual DOM is just a local and simplified copy of the Real Dom.
What is arrow function in React? How is it used?
The Arrow function is the new feature of the ES6 standard. If you need to use arrow functions, it is not necessary to bind any event to 'this.' Here, the scope of 'this' is global and not limited to any calling function. So If you are using Arrow Function, there is no need to bind 'this' inside the constructor. It is also called 'fat arrow '(=>) functions.
What is a state in React and how is it used?
The State is an updatable structure which holds the data and information about the component. It may be changed over the lifetime of the component in response to user action or system event. It is the heart of the react component which determines the behavior of the component and how it will render. It must be kept as simple as possible.
What are the different phases of React component's lifecycle?
The different phases of React component's lifecycle are: Initial Phase: It is the birth phase of the React lifecycle when the component starts its journey on a way to the DOM. In this phase, a component contains the default Props and initial State. These default properties are done in the constructor of a component. Mounting Phase: In this phase, the instance of a component is created and added into the DOM. Updating Phase: It is the next phase of the React lifecycle. In this phase, we get new Props and change State. This phase can potentially update and re-render only when a prop or state change occurs. The main aim of this phase is to ensure that the component is displaying the latest version of itself. This phase repeats again and again. Unmounting Phase: It is the final phase of the React lifecycle, where the component instance is destroyed and unmounted(removed) from the DOM.
Explain the lifecycle methods of React components in detail.
The important React lifecycle methods are: getInitialState(): It is used to specify the default value of this.state. It is executed before the creation of the component.componentWillMount(): It is executed before a component gets rendered into the DOM componentDidMount(): It is executed when the component gets rendered and placed on the DOM. Now, you can do any DOM querying operations. componentWillReceiveProps(): It is invoked when a component receives new props from the parent class and before another render is called. If you want to update the State in response to prop changes, you should compare this.props and nextProps to perform State transition by using this.setState() method. shouldComponentUpdate(): It is invoked when a component decides any changes/updation to the DOM and returns true or false value based on certain conditions. If this method returns true, the component will update. Otherwise, the component will skip the updating. componentWillUpdate(): It is invoked before rendering takes place in the DOM. Here, you can't change the component State by invoking this.setState() method. It will not be called, if shouldComponentUpdate() returns false. componentDidUpdate(): It is invoked immediately after rendering takes place. In this method, you can put any code inside this which you want to execute once the updating occurs. componentWillUnmount(): It is invoked immediately before a component is destroyed and unmounted permanently. It is used to clear up the memory spaces such as invalidating timers, event listener, canceling network requests, or cleaning up DOM elements. If a component instance is unmounted, you cannot mount it again.
How can you update the state of acomponent?
We can update the State of a component using this.setState() method. This method does not always replace the State immediately. Instead, it only adds changes to the original State. It is a primary method which is used to update the user interface(UI) in response to event handlers and server responses.
How can you embed two or more components into one?
You can embed two or more components into the following way: import React from 'react' class App extends React.Component { render (){ return ( <h1>Hello World</h1> ) } } class Example extends React.Component { render (){ return ( <h1>Hello JavaTpoint</h1> ) } } export default App
How different is React's ES6 syntax when compared to ES5?
require vs. Import exports vs. export component and function props
What are the different ways that you can call setState ?
setState component did mount through props component did update
Differentiate between stateful and stateless components. Stateful vs Stateless Components React
stateless: -The stateless components do not hold or manage state. -It does not contain the knowledge of past, current, and possible future state changes -It is also known as a functional component. -It is simple and easy to understand -It does not work with any lifecycle method of React. -The stateless components cannot be reused. stateful: -The stateful components can hold or manage state. -It can contain the knowledge of past, current, and possible future changes in state. -It is also known as a class component. -It is complex as compared to the stateless component. -It can work with all lifecycle method of React. -The stateful components can be reused.
