Where do I find app from document.getElementById('app') that I am rendering into?


#1

Question

Where do I find the document.getElementById('app') that I am rendering onto?

Answer

In the case of this lesson, you can find that clicking onto the folder icon at the top left of the middle panel will display multiple files, clicking on them opens them. If we open index.html we can see that the main tag has the id of app:

...
<body>
  <main id="app"> 
  </main>
	<script src="https://s3.amazonaws.com/codecademy-content/courses/React/react-course-bundle.min.js"></script>
  <script src="/ProfilePage.compiled.js"></script>
</body>
...

In our local projects using create-react-app we will notice that thereis a public/ directory that contains index.html there will commonly be the <body> tag with an id of root which is what React.render() will use for our react components.


FAQ: Components Render Other Components - Component Rendering In Action
#2

A small aside - you can actually rename the ID of the HTML element to whatever you want, as long as you are referencing the correct ID from the index.html file’s element. Similarly, you can have multiple named elements in the index.html file that, as long as each has a different ID, can have different React pieces inside of each one. Usually you just have a single element as the top-level item, but it is possible to do it this way if you have a good reason to keep pieces separate and non-interacting…