0

I have built an app on reactjs and hosted internally, when I perform a fetch api or xhr, I'm getting only the index.html in the public folder, and it ends at id=root. However it's not giving me the html available in app.js of the source file which contains my actual UI html. What might be the mistake? New to REACT JS.

I tried doing a

fetch(url)

.then (r=>r.text())

    .then(r=>console.log(r))

    .catch(console.error)

Here's my index.js

const root =     ReactDOM.createRoot(document.getElementById('root'));
root.render( <React.StrictMode> <App /> </React.StrictMode> );

I'm getting this as the output

\<!DOCTYPE html\>\<html.   lang="en"\>\<head\>\<meta charset="utf-8"\>\<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"\>\<meta name="theme-color" content="#000000"\>\<meta name="referrer" content="no-referrer-when-downgrade"\>\<link rel="manifest" crossorigin="use-credentials" href="/tindntest/manifest.json"\>\<link rel="shortcut icon" href="/tindntest/favicon.ico"\>\<title\>React App\</title\>\<script src="/navigation/harmony-navbar.js"\>\</script\>\<script defer="defer" src="/tindntest/static/js/main.9ec7069e.js"\>\</script\>\<link href="/tindntest/static/css/main.7b41a95a.css" rel="stylesheet"\>\</head\>\<body\>\<noscript\>You need to enable JavaScript to run this app.\</noscript\>\<nav id="harmony-navbar"\>\</nav\>\<div id="harmonyBanners"\>\</div\>\<div id="root"\>\</div\>\</body\>\</html\>

And my expected DOM lies under the id= root. How do I get this?

Nayan Tindal
  • 1

1 Answers1

0

Doesnt sound like you made a mistake. React renders your UI on the client (i.e. in the browser), so you wouldnt see the UI when you view the page source. If you would inspect the rendered document in the browser, you would see the actual UI.

If you want to render React on the server, check out https://react.dev/reference/react-dom/server

0xRm
  • 1,259
  • 8
  • 11