Currently, I am delving into the world of web development and utilizing Visual Studio Code for my projects. To kick things off, I created a React app by running the command 'npx create-react-app my-app' which worked smoothly. As I progressed with frontend development, I felt the need to establish a separate 'server' folder for backend operations. Here's where the hiccup arises – when attempting to load the index.html file onto the browser using 'app.get', only the HTML content gets displayed. The React components that should render within the div id="root" are missing. How can I rectify this issue?
Take a look at the file directories here: file directories
The index.html file residing in the public folder appears as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
...
</body>
</html>
Furthermore, inside the server folder is the index.js file containing the necessary setup for backend connectivity:
const express = require("express");
...
Initially, I encountered an error regarding absolute or relative paths preventing the display of the HTML file. Thankfully, after some research and troubleshooting, I managed to resolve that issue. However, the challenge now lies in getting the React elements to render properly on the screen, despite thorough searches online leaving me empty-handed for solutions.