Js with React JS imported is not rendering properly in VS Code-CodePudding

I am learning react. I tried to connect JS and HTML. But it is not connecting properly.

HTML Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="styleesheet" href="style.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js" type="text/jsx"></script>
  </body>
</html>

JS Code:

import React from "react";
import { ReactDOM } from "react";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>Hi</div>
);

I thought something will be displayed in the screen, but it is not happening in vs code. But I tried the same code in some online coding platforms it worked.

CodePudding user response：

You need to add react cdn into your HTML. Click here

CodePudding user response：

if you want to add React as a plain tag on an HTML page I recommend giving this a read: https://reactjs.org/docs/add-react-to-a-website.html

or instead of doing that head over to vscode and run a new terminal then type npx create-react-app myApp then use the command cd myApp to get into the myApp folder and then use npm start for the react app to start and you edit your app from there

You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine. it's honestly better to use create-react-app

https://reactjs.org/docs/create-a-new-react-app.html#create-react-app