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

Question

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.

Answer 1

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

Answer 2

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

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

Question

2 answers

solution1
0 2023-01-01 11:23:34

solution2
0 2023-01-01 11:23:57

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

Question

2 answers

solution1 0 2023-01-01 11:23:34

solution2 0 2023-01-01 11:23:57

solution1
0 2023-01-01 11:23:34

solution2
0 2023-01-01 11:23:57