0

just getting started with React and I am building something very simple to verify that everything works. I have the following:

import React from "react"
import ReactDOM from "react-dom"

const element = <h1>Hi there!!!!</h1>
ReactDOM.render(element, document.getElementById("root"));
body { }
<html lang="en">
  <head>
    <title>Hey!</title>
  </head>
  <body>
    <div id='root'></div>
    <h1>Hi</h1>
    <script src="index.pack.js"></script>
  </body>
</html>

I am running this all from atom using live-server I can see the title and the header but the js script with react does not load. I checked with developer tools and the console does not report any errors, the network tab has no 4XX or 5XX codes. I found that a potential error could be "Uncaught SyntaxError: Cannot use import statement outside a module" from the code snippet tool here. Tried quite a few things but not really sure how to fix that.

I am probably missing something but not sure what. Any ideas?

nanquim
  • 1,786
  • 7
  • 32
  • 50
Shando
  • 32
  • 9
  • not quite. I have html, js and css files that I am trying to render in a localhost server. The HTML part works fine but I cannot figure out why JS is not loading – Shando Apr 04 '20 at 17:59
  • 1
    You need to compile the react code first and link the complied react file. This one cannot run without webpack dev server. Or just install webpack and configure webpack to run your project. Else, just download create-react-app and use that module to create your project and run in development mode – Dilshan Apr 04 '20 at 18:21
  • Thanks, Dilshan! That did it. Now I get it. Cheers! – Shando Apr 04 '20 at 18:56

0 Answers0