React has transformed the way we create user interfaces by introducing components, state management, and a declarative approach to UI development. But how does React get those components on the screen? The answer is in React DOM.
In this blog, we'll look at what React DOM is, why it's important, and how to use it to render React components in the browser's DOM.
What is React DOM?
React DOM is a package that provides methods to interact with the browser's Document Object Model. While React itself is responsible for defining and managing components, React DOM is the tool that actually renders these components into the browser. More importantly, React DOM serves as the bridge between the React components and the browser's HTML.
Key features of React DOM
- Rendering components: The main function of React DOM is to render React components to the DOM.
- Updating the DOM: It efficiently updates the DOM whenever there are changes in state or props of your components.
- Event Handling: React DOM also manages events, ensuring that synthetic event system of React works seamlessly with browser's native events.
How to set up a React DOM?
If you have set up a new React project using 'create-react-app', you'll already have React DOM installed. However, it's good to know that React DOM is a separate package that you can install using npm:
npm install react-dom
Rendering Single Component
Suppose you have a simple 'App' component that displays 'Hello, World!'.
//App.jsx
import React from 'react';
function App(){
return <h1>Hello, World!</h1>
}
export default App;Now to render this component into the DOM, we use React DOM in our index.js or main.jsx file.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root');The ReactDOM.render(<App />, document.getElementById('root') line tells React DOM to render the App component into the HTML element with id="root".
<App /> is the instantiation of App component, React DOM takes this and turns it into actual DOM elements, in this case, an <h1> element.
So, how exactly the elements are rendered?
When ReactDOM.render() is called, React DOM checks the DOM tree for the root element. It then creates a React component tree starting with App and converts it into DOM nodes. Finally, these nodes are injected into the root element, which is usually an empty div in our index.html file.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Rendering Multiple Components
Until now we saw how to render a single component in React. Let's see how we can render multiple components. Suppose you have a Header and a Footer component.
// Header.jsx
import React from 'react';
function Header() {
return <header><h1>Welcome!</h1></header>;
}
export default Header;
// Footer.jsx
import React from 'react';
function Footer() {
return <footer><p>© 2024 September</p></footer>;
}
export default Footer;Now you can use these components in the App component and render together.
// App.jsx
import React from 'react';
import Header from './Header';
import Footer from './Footer';
function App() {
return (
<div>
<Header />
<p>This is the main content of the page.</p>
<Footer />
</div>
);
}
export default App;In your index.js or main.jsx file, the App component is responsible for rendering the Header, the main content, and the Footer. React DOM takes care of rendering this entire component tree into the root element in the DOM.
Conclusion
React DOM is the essential link between your React components and the browser's DOM. Its responsibilities include rendering components, updating the DOM as needed, and managing events. Understanding how React DOM works is critical for creating successful and efficient React applications.
