## Hello World
What makes this function a component is the fact that it returns something that React can render.
The `<div>Hello world</div>` is a syntax called JSX, and it looks and works a lot like HTML.
React calls the function, gets the JSX, and renders the equivalent HTML to the DOM.
Notice how the JSX is not a string. It's not return `"<div>Hello World</div>";`.
React isn't turning these things directly into strings, either.
Before React runs, there's an extra step the code goes through that converts the JSX into function calls.
This all happens under the hood (Babel is the tool that does the heavy lifting).
The fact that it's not a string might seem like an unimportant detail,
but it's actually pretty cool: you can insert bits of JS code inside the JSX tags,
and React will run them dynamically. We'll see that in a minute.
```
import React from "react";
import ReactDOM from "react-dom";
function Hi() {
return <div>Hello World!</div>;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Hi />, rootElement);
```