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().
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:
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âŚ
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.
Rather, you can also decide to import all your components into a single app and then render ReactDOM.
i.e
function Code(){
return(
<>
// componets imported