DEV Community

Cover image for React and ReactDom
John Ekunola O.
John Ekunola O.

Posted on

React and ReactDom

What is React.js?

React.js, more commonly known as React, it's a free open-source JavaScript library. The React.js framework library was developed by Facebook.

In React, you develop your applications by creating reusable components. These components are individual pieces of a final interface, which, when assembled, form the application’s entire user interface. This makes React applications very easy to update and maintain.

The important features of ReactJS are as follows.

JSX
Components
One-way Data Binding
Virtual DOM
Simplicity
Performance
JSX
JSX stands for JavaScript XML. It is a JavaScript syntax extension. It's an XML or HTML like syntax used by ReactJS. This syntax is processed into JavaScript calls of React Framework. It extends the ES6 so that HTML-like text can co-exist with JavaScript react code. It is not necessary to use JSX, but it's recommended to use in ReactJS.'

Example of a JSX code:

`render(){
    return(
      <div>
        <h2>Hello AltSchool</h2>
      </div>
    )
}`

Enter fullscreen mode Exit fullscreen mode

Components
ReactJS is all about components. ReactJS applications are made up of multiple components, and each component has its logic and controls. These components can be reused, which helps you to maintain the code when working on large-scale projects.

Virtual DOM
A virtual DOM object is a representation of the original DOM object. It works like a one-way data binding. Whenever any modifications happen in the web application, the entire UI is re-rendered in virtual DOM representation. Then it checks the difference between the previous DOM representation and the new DOM. Once it has been done, the real DOM will update only the things that have changed. This makes the application faster, and there is no waste of memory.

Simplicity
ReactJS uses JSX files which makes the application simple and to code as well as understand. JSX files are HTML files with embedded JavaScript. This makes the code more readable and easier to understand.

ReactJS is a component-based approach that makes the code reusable as your need it. This makes it simple to use and learn.

Performance
ReactJS is known to be a great performer. This feature makes it much better than other frameworks out there today. The reason behind this is that it manages a virtual DOM. The DOM is a cross-platform and programming API that deals with HTML, XML, or XHTML. The DOM exists entirely in memory. Due to this, when we create a component, we did not write directly to the DOM. Instead, we are writing virtual components that will turn into the DOM leading to smoother and faster performance.

*What is DOM? *

DOM, abbreviated as Document Object Model, is a World Wide Web Consortium standard logical representation of any webpage. In easier words, DOM is a tree-like structure that contains all the elements and it’s properties of a website as its nodes. DOM provides a language-neutral interface that allows accessing and updating of the content of any element of a webpage.

*What is ReactDOM? *

ReactDOM is a package that provides DOM-specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing the following methods and a few more.
render()
findDOMNode()
unmountComponentAtNode()
hydrate()
createPortal()

Should I Learn React JS?

React is quickly shaping into one of the most popular and in-demand JavaScript libraries. Therefore, the demand for React developers is very high. As a result, there is a wide range of jobs for developers who know how to use React.

Overall, the demand for React developers is high, and the range of jobs is wide. If you are a React developer, you should be able to find a job that fits your skills and interests.

Top comments (0)