How to restrict reactjs from cacheing API data - reactjs

I am new to reactjs. In my project front end is react and backend in slim.There I noticed a issue that whenever I make changes in API then its not reflected on front end until and unless I dont clear my browser cache.Its also happening for production project.
Is I am missing anything here in reactjs? Why it cacheing the API data

A solution that may work is to comment out registerServiceWorker and import unregister and invoke it.
import App from './App';
// import registerServiceWorker from './registerServiceWorker';
import { unregister } from './registerServiceWorker';
unregister();
ReactDOM.render(
<App />,
document.getElementById('root'),
);
Refer here for other suggestions! (https://github.com/facebook/create-react-app/issues/1910)

Related

Update from reacts-scripts-ts to react--scripts problem

I tried to update from the deprecated library react-scripts-ts to the "new" library react-scripts. I used this link from Vincent Tunru to do that.
But i run then into the Error:
ERROR in ./src/index.tsx 7:0-30
Module not found: Error: Can't resolve './pages/App' in 'C:\develop\remote\src\frontend\src'
I import the App as follow into my start file:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './pages/App';
import { Provider } from 'react-redux';
import { store } from 'src/store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root') as HTMLElement);
I have to do a little change to this file as follow './pages/App.tsx' and this error would go away. But then all the files in App also has to be imported as 'file.tsx' and then inside those imported files too. I would have to change over 200 lines. I don't think that this is the correct way to do it. But how should I solve this Error?

Error message with: Web3 + create-react-app + webpack 5

I am writing the frontend for a Dapp.
I have the script /src/config/index.js
import Web3 from 'web3';
const getLibrary = (provider) => {
return new Web3(provider);
};
export { getLibrary };
And the /src/index.js where I am trying to import getLibrary:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter } from 'react-router-dom';
import { ChakraProvider } from '#chakra-ui/react';
import { Web3ReactProvider } from '#web3-react/core';
import { getLibrary } from './config/web3';
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<ChakraProvider>
<Web3ReactProvider getLibrary={getLibrary}>
<App />
</Web3ReactProvider>
</ChakraProvider>
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);
But, I have the error
The line responsible for the error is:
import { getLibrary } from './config/web3';
I used create-react-app to build the project.
I have try several ideas but nothing is working for me... any help, please?
I had the same problem when using web3 with react and webpack 5. This helped me solve it. I followed option #1 as I couldn't get the other option to work (my main confusion being where to keep webpack.config.js since I had kept it at the root and it was not being picked up).
For anyone looking to resolve this still (2022-08-30), I recommend reading this article:
https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5
It will be different in regards to your dependencies but it helped resolve my issues. It basically adds support back in by rerouting requests to dependencies using the react-app-rewired package.

Render another root path with own routes

I am trying to figure render a complete seperate admin path with its own routes.
Is it possible to render say admin page that is with and existing project.
At the moment I have the following code it is working very well.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './client/App.js';
import Admin from './admin/admin.js';
var pathname = window.location.pathname;
if (pathname.substring(0, 6) == '/admin') {
ReactDOM.render(<Admin />, document.getElementById('root'));
} else {
ReactDOM.render(<App />, document.getElementById('root'));
}
I'm struggling to understand what you want to do exactly. You already have everything you need, Admin and App are components and therefore small projects I would say. However, you shouldn't do it that way and instead use react-router it avoids you to check the window location pathname by yourself and will save you a lof of time and headache.

Upgrading to Redux v6

I'm trying to upgrade to Redux V6 but am confused on how to use the createContext function and it's necessity. I know my store is created successfully, but when I try to run my app I get
Could not find "store" in the context of "Connect(ConfiguredApp)".
Either wrap the root component in a , or pass a custom React
context provider to and the corresponding React context
consumer to Connect(ConfiguredApp) in connect options.
Which tells me that my provider is not properly passing down the store for connect to grab. What am I doing wrong? Thanks!
import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {ConnectedRouter} from 'connected-react-router';
import {history, store} from './store/store';
import Routes from './routes';
const customContext = React.createContext(null);
render(
<Provider store={store} context={customContext}>
<ConnectedRouter history={history} context={customContext}>
<Routes />
</ConnectedRouter>
</Provider>, document.getElementById('app'),
);
You almost definitely shouldn't be creating and passing in a custom context instance. That's only if, for some very specific reason, you want to use a context instance other than the default one that React-Redux already uses internally. (A hypothetical reason to do this would be if you are using one store for your whole app component tree, but there's a specific subtree that needs to receive data from a different store instead.)
If you actually wanted to use your own custom context instance, then you would need to pass the same context instance to both <Provider> and each connected component in the app that needs to receive data from that <Provider>.
Looking at the connected-react-router docs, they do claim that in CRR version 6, you can pass a context instance to <ConnectedRouter>, but that shouldn't be necessary here.
More specifically, if you look at the error message, it says the problem is in Connect(ConfiguredApp). So, it's your own connected component that is saying there's a context mismatch.
Ultimately, the answer here is to delete the context arguments from both <Provider> and <ConnectedRouter>. You don't need them.

React won't play Audio

In my React project I've got this PresentationManager class that I call a simple method on at the end of my index.js file, like so:
presentationManager.startPresentation();
And the method does only the following:
var scoreAudio = new Audio("path/to/myWav.wav");
scoreAudio.load();
scoreAudio.volume = 0.5;
scoreAudio.play();
When I run my code these lines are executed without any Exceptions but no audio plays.
If I take the exact same 4 lines, and put them inside an HTML page script tag and nothing else, it works perfectly, and plays my audio.
Any idea why?
Below is the complete code of my index.js file.
Paul
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import pData from './data/pData.js';
import tData from './data/tData.js';
import PresentationManager from './presentation/PresentationManager.js';
var presentationManager = new PresentationManager(tData, pData);
ReactDOM.render(
<App presMgr={ presentationManager }/>,
document.getElementById('root')
);
presentationManager.startPresentation();

Resources