Reactjs.org: Explanation for "mountNode" on home page code examples would help

[craigdanj]

So I hit the Reactjs.org home page and while reading the code examples I ran into this variable called "mountNode".

Eg:

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);

Unfortunately the page offers no explanation for what this is or how to create that variable.

Since these are examples that beginners will usually read I think it might help to provide at least a one line explanation somewhere on the page. Or maybe at least show the variable being assigned a reference to the root element.

FYI: I later learnt what mountNode is but this is for the benefit of others trying to learn React.

Example of someone else getting confused:
https://stackoverflow.com/questions/23600443/uncaught-referenceerror-mountnode-is-not-defined

[SeasonLeee]

Thank god, I am not alone. I have been using the search feature of the browser to look for the definition of this mysterious 'mountNode'. I couldn't get the intention of its usage by simply reading its name nor I couldn't even figure where on earth does it pop up. And the craziest thing is React have been in the market for at least 5 years and its popularity is so wide that you would be shamed if you never used it as a frontend developer. So, is the homepage of React have been like this all the time or just recently update and accidentally forgot to mention what this little thing for? Anyway, thanks for the issue fixing. Although as a great dummy, I still confused even there's an update of the definition of the variable. Yet, the homepage still remains the same...

[craigdanj]

So, is the homepage of React have been like this all the time or just recently update and accidentally forgot to mention what this little thing for?

Not sure really... just noticed it when I read it and figured it could possibly be improved.

[Glen-Dango]

i had same question... iam now more confused by github...where is the answer to this question?

[RadGH]

I am a react newbie trying to get the examples up and running on my own Laragon local server. I got it all set up like the examples but I get that mountNode error.

I've since found the answer but not without frustration. The top result on Google reads: "Make sure your mountNode variable exists.". Yes that is exactly the problem from the front page.

I eventually went to the "Get Started" page on the website and the online codepen playground also explains the HTML portion, which is not mentioned anywhere on the front page (what?!).

I don't understand why this information is not explained in the very first piece of code you read when you decide to try React. It adds a very unnecessary and frustrating barrier to entry. And like in most programming, you spend a whole 10 minutes trying to find the answer and it's just a really simple one.

Just show all the necessary code! It takes 50 more pixels on the website and eliminates the first hurdle most new developers will run into. The CodePen example does a great job, why not use that on the front page?

[Glen-Dango]

Amen . Use jQuery. Lol

On Sat, 24 Nov 2018, 08:37 Radley Sustaire <[email protected] wrote:

I am a react newbie trying to get the examples up and running on my own
Laragon local server. I got it all set up like the examples but I get that
mountNode error.

I've since found the answer but not without frustration. The top result on
Google reads: "Make sure your mountNode variable exists.". Yes that is
exactly the problem from the front page.

I eventually went to the "Get Started" page on the website and the online
codepen playground also explains the HTML portion, which is not mentioned
anywhere on the front page (what?!).

I don't understand why this information is not explained in the very first
piece of code you read when you decide to try React. It adds a very
unnecessary and frustrating barrier to entry. And like in most programming,
you spend a whole 10 minutes trying to find the answer and it's just a
really simple one.

Just show all the necessary code! It takes 50 more pixels on the website
and eliminates the first hurdle most new developers will run into. The
CodePen example does a great job, why not use that on the front page?

[image: image]
https://user-images.githubusercontent.com/2008464/48966175-0cd67100-ef81-11e8-9dd1-5610f7d0fc54.png

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/reactjs/reactjs.org/issues/1017#issuecomment-441352454,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AdPj91e3uNa-cRUe0GWuDTohzoXrOyPmks5uyQVjgaJpZM4U61bS
.

[pcgeek86]

I ran across this GitHub issue because I'm confused by mountNode on the React.js homepage. Where is this being defined, and what does it do?

[alexkrolick]

mountNode is a DOM node which you are telling ReactDOM to render the component into.

It's a bit confusing on the homepage because the live editor creates mountNode and makes it available in the code sample scope - normally you would use an existing element, like this:

• index.html

<body>
<div id="app"></div>
<script src="my-app-bundle.js"></script>
</body>

• my-app-bundle.js (Babel/JSX source)

import MyApp from './my-app';

ReactDOM.render(<MyApp />, document.querySelector('#app'));

Sorry about this, does #1521 help?

[pcgeek86]

@alexkrolick It's a little confusing that it's commented out, but at least it demonstrates where that variable would come from. Why not just leave it uncommented, but add a human-readable comment above it, indicating that the user will need to customize it?

[alexkrolick]

Thanks to Dan the live samples should now resemble real code - the only assumption is the DOM element with the id exists in the page.

The comment was just a stopgap because the live code editor did some magic to define mountNode and pass it in - you couldn't define it inside the sample code. Thought it would be a tricky change but Dan fixed it super quick.

[kishan2019]

thanks