Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React Components not rendering in browser

I have a ReactJS app that I’ve had since 2020 and it worked fast and well. When the domain expired in 2021, I forgot about it. Now as I was browsing files I found the app again and checked what it looked like so I ran yarn and yarn start only to find out that the components are not rendering anymore in the browser. I read a about the updates on ReactJS and found vite. My question is, do I need to re-write everything using vite or can I still use this site?

Here’s the Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Routes } from 'react-router-dom'

import "@fortawesome/fontawesome-free/css/all.min.css";
import "assets/styles/tailwind.css";

import App from './App';
import Privacy from './Privacy'
import Terms from './Terms'
import reportWebVitals from './reportWebVitals';
import { GraphQLClient, ClientContext } from 'graphql-hooks'

const client = new GraphQLClient({
  url: "https://graphql.datocms.com/",
  headers: {
    "Authorization": (process.env.REACT_APP_DATO_API_TOKEN)
  }
})

ReactDOM.render(
  <BrowserRouter>
    <ClientContext.Provider value={client}>
      <Routes>
        <Route path="/" exact component={App} />
        <Route path="/terms" exact component={Terms} />
        <Route path="/privacy" exact component={Privacy} />
        </Routes>
    </ClientContext.Provider>
  </BrowserRouter>,
  document.getElementById('root')
);

I added a dummy p tag in the public/index.html file:

  <body class="text-gray-800 antialiased">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <p>This paragraph is a part of HTML.</p>
    <div id="root"></div>
  </body>

The text showed so I know I’m missing something here.

Tags:

2

Answers


  1. 0

    Based on the code you provided, there doesn’t seem to be anything inherently wrong with it. However, there are a few things you can try to diagnose and fix the issue:

    Check the console for errors: Open up the developer console in your browser and check for any error messages. This could give you a clue as to what’s going wrong.

    Update dependencies: Make sure all your dependencies, including React and react-router-dom, are up-to-date. You can do this by running yarn upgrade or yarn upgrade-interactive and selecting the packages you want to update.

    Check environment variables: Make sure that any environment variables you’re using, such as the DatoCMS API token, are set correctly. You can check this by logging them to the console or by using a tool like dotenv to load them from a .env file.

    Check the network tab: Check the network tab in your browser’s developer console to see if the GraphQL requests are being made correctly and if there are any errors.

    Try running the app on a different machine: If none of the above steps work, try running the app on a different machine to see if it’s an issue with your local environment.

    If none of these steps work, you may need to provide more information or seek help from the React community to diagnose and fix the issue.

    Login or Signup to reply.
  2. 0

    In your case, you have added a paragraph tag (

    This paragraph is a part of HTML.

    ) directly in the public/index.html file, but this won’t be visible when your React application is rendered because the ReactDOM.render() method is replacing the contents of the div element with id="root" with your React components.

    To include the paragraph tag within your React application, you can add it as a component within your App.js file (or any other relevant component). For example, you can modify your App.js component to include the following code:

    function App() {
  return (
    <div>
      <p>This paragraph is a part of React.</p>
      {/* Add your other components and content here */}
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search