0

I’m following this React tutorial and I can’t get index.html to connect with my index.js. I haven’t installed anything related to Node or something in command prompt yet.

index.js

ReactDOM.render(<p>Hi, my name is Bob!</p>, document.getElementById("root"))

index.html

<html>

<head>
  <link rel="stylesheet" href="index.css">
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script src="index.js" type="text/babel"></script>
</body>

</html>

Screenshot:

Screenshot

I tried to display “Hello, everyone!” when I open my index.html file. But nothing appears. I just get a blank HTML page.

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Toby
  • 5
  • 2
  • You probably need `react-dom` cdn as well. – user31782 Jun 27 '23 at 19:33
  • 1
    Works perfectly fine for me. Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`), read any errors. The dev tools provide a **Network** tab. Are the scripts _correctly loaded and found_ (e.g. HTTP 200 response)? If not, are they blocked by an extension or the browser? Using the `file:` might not work; use an HTTP server instead. – Sebastian Simon Jun 27 '23 at 19:43
  • Looks like you're looking at the file on your disk inside of VSCode instead of the current status of the HTML as rendered on the client through your browser – Samathingamajig Jun 27 '23 at 19:47

1 Answers1

0

React doesn't allow this interaction out of the box unless you set homepage: "" in your package.json for routing purposes.

A similar overflow question was asked here

But you said you don't have Node.js installed yet. You're going to need that to use React and install its node package dependencies. You can download that here and set up a npm environment which gets set up automatically with the npx create-react-app command.

Conventionally, you're supposed to run React apps in development by using the command npm start and the line "start": "react-scripts start" in your package.json

If you've finished you're project then run npm run build and then npx serve -s build, but all you need is a JavaScript runtime environment so there are other ways to deploy

Eyas Valdez
  • 135
  • 5