Why use a variable as the first argument in ReactDOM.render() instead of a JSX expression?
Readability! If we are trying to pass a multi-line JSX expression to ReactDOM.render() we may find our JSX code is difficult to read and understand, however, if our JSX expression is a single line, we may want to pass the expression (instead of a variable storing the expression) to ReactDOM.render().
as your application grows, you’ll want to render a LOT of components (navbar, main content, articles, comment section, button, just an example)
in this case (after importing these components) your render method would look like this:
ReactDOM.render(
<div>
<Navbar />
<MainPage />
<NewsFeed />
..... etc.
</div>,
document.getElementById(app));
instead, it is more readable this way: you ‘collect’ these components in an App.js, and just render the App.
App.js: (after importing everything what’s needed) (sorry, commenting doesn’t keep the indentation formatting)
export default const App = () => (
return (
<>
<Navbar />
<MainPage />
<NewsFeed />
</>
));
when rendering:
ReactDOM.render(<App />, document.getElementById(app));
Hope this could help!