I'm wondering if I need to wait for the document to be loaded (i.e. listen to DOMCOntentLoaded) before calling ReactDOM.render(...). It doesn't seem like other React example apps are doing so, so I'm guessing inside the implementation of ReactDOM.render they already wait?

I'm wondering if I need to wait for the document to be loaded (i.e. listen to DOMCOntentLoaded) before calling ReactDOM.render(...). It doesn't seem like other React example apps are doing so, so I'm guessing inside the implementation of ReactDOM.render they already wait?

• javascript
• reactjs
• dom
• document
• react-dom

• Could you post an example app which doesn't wait? I usually listen for the DOMContentLoaded event and would be interested to see the alternatives. – caffeinated.tech Commented Dec 6, 2017 at 16:20
• I believe since you explicitly pass an element to attach react apps to, there's no need to wait for anything. either the element you pass exists or it doesnt when calling render. – azium Commented Dec 6, 2017 at 16:23

1 Answer 1

You just need to ensure that the DOM element that your react code renders into is available at the time the <script> is evaluated. You can do this by placing the script after the dom element in your index.html file.

<!-- this will work -->
<div id="react-app"></div>
<script type="text/javascript" src="./my-react-script.js"></script>

<!-- this will NOT work -->
<script type="text/javascript" src="./my-react-script.js"></script>
<div id="react-app"></div>