All You Need To Know About React & Virtual React Dom in 2021 |

Ashraful Hasan
3 min readMay 7, 2021
REACT

Hi there! Hope you all doing well. Today I would like to share about top 10 facts about React application.

1) What is React?

React is an open-source, mostly known as React.JS, front end, JavaScript library for building user interfaces or UI components. It is maintained & developed by Facebook. React can be used as a base in the development of single-page or mobile applications. Every react application build depends on components.

2) What is virtual DOM?

The Virtual Document Object Model is called shortly as ‘VDOM’. A virtual DOM is a lightweight JavaScript representation of the DOM used in React & many other application. Updating the virtual DOM is comparatively faster than updating the actual DOM as there is nothing has to be rendered onto the screen. Actually it is programming concept, where representation of a UI is kept in memory with real DOM.

3) How VDOM works?

React uses virtual DOM to boost its performance. Basically React maintains two virtual DOM at each time. It uses the observable to detect state and prop changes. React uses an algorithm to compare the versions of virtual DOM. It then makes sure that batched updates are sent to the real DOM for repainting or re-rendering of the UI.

4) What is React JSX?

React JSX stands for javascript XML. It allows to us write html code in react easily. We can write smoothly markup and logic at react file for JSX. JSX allow us put html element on DOM. It convert html tag to react elements. To use JavaScript inside of JSX, you need to surround it with curly braces: {} .

5) Do you know React props?

Props” is a special keyword or function in React, which stands for properties and is being used for passing data from one component to another. Props are used to pass data from a parent component to a child component in React and they are the main mechanism for component communication with each other.

6) What is defaultProps?

While most React components receive their props from a parent component, it’s also possible to specify default props. For this you need to assign a defaultProps object to the component. When React renders the component, the default props will be used unless the parent overrides them.

7) What does it means by setting default props value?

For a React component, you can set default props by adding a static property named defaultProps to the component class. The defaultProps static property should be set to an object representing the default props for the component.

8) What is ReactDOM.render?

The ReactDOM. render( ) function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the highlighted HTML element.

9) How to createElement in React?

Firstly You need to Call React.createElement() and describe its arguments. Then use ReactDOM.render() to render an element to a page. Add child elements and nested child elements. Finally Pass properties to an element.

10) Importance of Component in React Application!

React works basically on components. They play a very important role in React applications. Components are building a block of ReactJS and can be reused and nested within other components.

Thats all for today & Thanks for reading! My name is Ashraful Hasan. You can call me simply Ashraful! 😏

Follow me on Github & LinkedIn if you’d like to keep on touch with me. Have fun with coding & never lose hope.

--

--