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.