Why use a variable as the first argument in ReactDOM.render() instead of a JSX expression?

FAQ JavaScript FAQ
#1

Question

Why use a variable as the first argument in ReactDOM.render() instead of a JSX expression?

Answer

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().

7 Likes
FAQ: Intro to JSX - Passing a Variable to ReactDOM.render()
#2

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!

30 Likes
#3

Is there a reason you’re using JSX syntax to reference the imported App variable from App.js?

I would have thought the code would be:

import App from ‘./App.js’;

ReactDOM.render(App, document.getElementById(“app”));

1 Like
#4

Hello. In the example given, what is being exported is not a JSX element, but a React Component. Pay attention to the fact that App variable is a function that returns a bunch of JSX elements. It could have been a class too, as React Components can be functions or classes.
If App were a JSX element (a JSX expression), it would look like this:

export default const App = (
    <>
        <Navbar />
        <MainPage />
        <NewsFeed />
    </>
);

This way, the rendering can be done as you suggest:

import App from ‘./App.js’;

ReactDOM.render(App, document.getElementById('app'));

A React Component is like one step above JSX elements, and the syntax needed to render them has to be a JSX expression just like the example given <App />.
Think about a JSX element (or React element) being just an object that describes a DOM node, and React Components being classes or functions that accept inputs and returns JSX elements (or React elements). Don’t get confused, it turns out React elements can be built without using JSX, but it’s not visually intuitive. That’s why JSX exists, to represent React elements in a friendly way. Once you get to see a compiled JSX syntax written .js file into plain JS, it will look confusing af. Hope this helps…

5 Likes
#5

Thanks for the explanation. I asked that question before I reached the lessons on React components, but now have a better understanding of it since moving on to the new content.

1 Like
#6

What is the difference between JSX element, React element and React component?

1 Like