React and React Dom

In this topic, We mainly focus on one of the most famous javascript frameworks such as React js and also discuss on the difference between React and React Dom.

What is ReactJs?

ReactJS basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications.

As per the React documentation, React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

Benefits of ReactJs:

  1. Single Page Application.
  2. React js works on the concepts of Virtual dom.
  3. Entire page remains the same but only a few components change.
  4. The code is easy to scale and maintain.
  5. Isomorphic Rendering(Server side rendering)
  6. Blazing speed

Below is the simple example of the React component.

As you see in the above code, Every component require two depedency such as react and react-dom. The methodrender returns a description of what you want to see on the screen. React takes the description and displays the result.

In particular, render returns a React element, which is a lightweight description of what to render. As you see in the above code we are using JSX (=>) for declaring the function.

React and React Dom:

In React web application, All the components use two packages— react and react-dom

Why are these packages requires?

Prior to v0.14, all ReactDOM functionality was part of React. React and ReactDOM were only recently split into two different libraries.

The react package holds the react source for components, state, props and for lifecycle hooks, etc. i.e. the guts of a React application.

ReactDOM is the glue between React and the DOM. Often, you will only use it for one single thing mounting with ReactDOM.render(). Another useful feature of ReactDOM is ReactDOM.findDOMNode() which you can use to gain direct access to a DOM element.

Why separate them?

The reason React and ReactDOM were split into two libraries was due to the React Native (A react platform for mobile development).To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main react package into two: react and react-dom.

React components are such a great way to organize UI that it has now spread to mobile to react is used in web and in mobile. react-dom is used only in web apps.

2 Comments

  1. I was recommended this blog by my cousin. I am not sure whether
    this post is written by him as nobody else know such detailed about
    my trouble. You are incredible! Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

Show Buttons
Hide Buttons