How React, ReactDOM, and JSX Work Together?

#react #reactjsdevelopment #webdev #javascript

What is React and ReactDOM?

React is a JavaScript library that can be used to create UI elements for various platforms like browser, native, and VR. ReactDOM is a platform-specific package that takes the UI elements created by the React library and renders them in the DOM.

Render "Hello World" using only react and react-dom

Imagine, if you need to render a simple "Hello World" in DOM, you need to write the below code which is not that simple.

const reactElement = React.createElement('div', {
  className: 'container', 
  children: 'Hello World' 
});

What is JSX?

JSX is a syntax extension for JavaScript that allows developers to write HTML-like code in their JavaScript files. This code is then transformed into regular JavaScript using a transpiler like Babel.

If you need to write equivalent JSX code for the above reactElement code which is easy to understand, it will be like this:

<div className="container">Hello World</div>

The JSX code is far easy to understand, but React, ReactDOM, or browser does not understand it. Babel comes into picture to translate JSX code to equivalent React code.

import { jsx as _jsx } from "react/jsx-runtime";
/*#__PURE__*/_jsx("div", {
  className: "container",
  children: "Hello World"
});

When a React element is created with JSX, it is compiled into a regular javascript format that React core library can understand. This react element is then passed to ReactDOM, which renders it in the DOM.

The complete code using React, ReactDOM, and JSX:

Conclusion

Overall, React, ReactDOM, and JSX work together to provide a powerful and flexible way to create interactive and dynamic user interfaces for web applications.