Cannot render react component. I have created multiple html pages in public folder, index.js file is kept in src folder. I want to render react component in one of the html file inside the bootstrap "row" container. My Error image
HTML:
<div class="row">
<div class="col-lg-4 col-mg-6 col-sm-12">
<div id="root"></div>
</div>
</div>
<script src="../src/index.js" type="text/jsx"></script>
</body>
</html>
index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./Components/App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
Have you tried:
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();