A brief introduction to ReactDOM and render() method in React application.

We'll cover the following

The App component is located in your entry point to the React world: the src/index.js file.

Press + to interact
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

ReactDOM.render() uses a DOM node in your HTML to replace it with JSX. It’s a way to integrate React in any foreign application easily, and you can use ReactDOM.render() multiple times across your application. You can use it to bootstrap simple JSX syntax, a React component, multiple React components, or an entire application. In a plain React application, you would only use it once to bootstrap the component tree.

ReactDOM.render() expects two arguments. The first argument is for rendering the JSX. The second argument specifies the place where the React application hooks into your HTML. It expects an element with an id='root', found in the public/index.html file.

Press + to interact
ReactDOM.render(
  <h1>Hello React World</h1>,
  document.getElementById('root')
);

During implementation, ReactDOM.render() takes your App component, though it can also pass simple JSX. It doesn’t require a component instance.

Exercises:

  • Open the public/index.html to see where the React application hooks into your HTML

Futher Reading:

Get hands-on with 1400+ tech skills courses.