# ReactDOM.render() Hello Fellow Codenewbies 👋 One functionality of ReactDOM is to **render** React elements to the web page, which can be achieved with [ReactDOM.render()](https://reactjs.org/docs/react-dom.html#render) method. ## Syntax ```markdown ReactDOM.render(element, container[, callback]) ``` We can see it this way: ```markdown ReactDOM.render(WHAT to render, WHERE to render[, callback if any]) ``` ## Prerequisite Before we dive in, in this post, we will use both React, and ReactDOM [CDN](https://reactjs.org/docs/cdn-links.html) links in an HTML file to run the React app instead of installing the `create-react-app`. This way, you can see and understand how `react-dom` dependency works under the hood. ```html ``` We also need [Babel](https://babeljs.io/docs/en/#jsx-and-react) to convert the JSX syntax. ```html ``` ## `ReactDOM.render()` In Action Let's create a `
` with `id="root"` in an `index.html` file. ```html ...
... ``` Anything between the opening and the closing `div` tag is **where** React will render what we've created.
The `
` is *the container* for our entire application. Now we will render an `h1`.
Since we need Babel to translate the JSX, we will run the `ReactDOM.render()` in ` ``` 📖 How to read:
Render `h1` in the `
` with `id="root"`. As you can see, we put the HTML element of `h1` in the middle of Javascript's code as a parameter. That entire line of code is called **JSX**.
We will talk more about JSX in the next post. ## Conclusion - `ReactDOM.render()` is a React method to render a React app to the web page. - `ReactDOM.render()` takes at least 2 parameters: 1. element (**what** we want to render) 2. container (**where** we want to render) --- I provide here the complete code. ```html ReactDOM.render()
```