friends The problem with me is that react works only in case of CDN links added to the html file, but when I remove CDN links and use import statement , the app does not work here is my code
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
index.js file
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
ReactDOM.render(<h1>Eslam</h1>, document.querySelector("#root"));
If you are opening the file locally:
When you open an HTML file locally, it isn't on a server, and therefore import statements won't work.
To run your code on a local server, you can use a bunder, but most depend on NodeJS being installed, so if it isn't, go ahead and install it.
If you are opening the file on a server:
You can use a combination of CDN links and import statements:
import React from "unpkg.com/react@16.7.0/umd/react.production.min.js";
import ReactDOM from "unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
ReactDOM.render(<h1>Eslam</h1>, document.querySelector("#root"));
Or, if you're using a bundler such as Parcel, Webpack, or Vite, make sure you have the packages react and react-dom installed in node_modules (or etc. if you use yarn PnP):
$ # in the terminal (assuming you have node and npm installed-if you don't,
$ # do yourself a favor and install them because this won't work w/o it)
$ npm install react
$ npm install react-dom