Skip to content

Instantly share code, notes, and snippets.

@SaraVieira

SaraVieira/app.jsx

Created October 20, 2017 21:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SaraVieira/4cd02f7c0242e8ae958bf46985ab8ff8 to your computer and use it in GitHub Desktop.
Save SaraVieira/4cd02f7c0242e8ae958bf46985ab8ff8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'))
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<script type="module" src="app.jsx"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
@lastmjs
Copy link

lastmjs commented Oct 20, 2017 •
edited

Try the following:

app.jsx:

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'))

index.html:

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>The HTML5 Herald</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <script src="app.jsx"></script>
</body>

</html>

@lastmjs
Copy link

lastmjs commented Oct 20, 2017

One problem was that ReactDOM couldn't find the div because the script was running before the DOM inside of the body was created

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment