I've just cloned a repo from github, and started the server and able to see the default text showing at http://localhost:8080
The default text is showing inside src/components/app.js. And making any changes to the text, simply switch back to browser and reload the webpage to see the changes.
Now I try to create the src folder from scratch, so I've deleted src and recreated it and added a file index.js, without any content. (My web server is still running all this while)
So my question is, when I reload the webpage, I was expecting no content to be showing in the webpage. But truth is I can still see the previous changes showing on webpage. It seems to be cached or something? In order to reflect the latest changes, I have to kill the webserver and npm start again.
This is my first timer in Web Development so wondering if it's a common scenario and best practices to restart webserver everytime we make any changes?
Usually when developing with react you don't even have to refresh the page you are in. Once you save the changes in the Editor they sould be visible in the browser immediately. Maybe you have made a mistake by setting up the index.js
When starting with react I would suggest you to use https://github.com/facebook/create-react-app
With that it's very easy to start and you can play around a bit and get started with React.
You should use Hot Module Replacement.
Here is an example:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}
Hot Module Replacement (HMR) is a tool to reload your application in the browser, so that the
browser doesn’t perform a page refresh.
BTW #Zander is right, you don't have to kill the server. The page automatically refreshes. For your help, I hope you installed create-react-app using npm as
npm install -g create-react-app and to initiate a new app as create-react-app yourApp. If done so, everything basic is automatically configured.
Related
I have the following bug:
I created a new project using CRA with the typescript template:
npx create-react-app my-project --template typescript
After running yarn start everything works fine. But then when I create some new component files, say a Counter.tsx and I import it into App.tsx, include it in the render/return and then start to make changes to the counter component, nothing shows up anymore on hot reload.
I opened the inspector and the div#root is empty after hot reloading.
Only when I change something in the App.tsx the React code gets inserted again.
So the behaviour is:
Change anything in a child or grandchild etc.. component from App.tsx
Browser shows empty screen with empty div#root
Expected behaviour:
Change anything same as before.
Browser shows the rendered react including the recent change. (with same state etc..)
Same behaviour tested in Firefox and Chrome.
Am I missing something? The console and browser don't give any error.
Thank you!
EDIT/UPDATE:
This actually only seems to be the case when I include the following context provider that initiates a web audio context:
https://gist.github.com/casperleerink/c10e81f89cf83a282be593ce62c3039d
I tried it using a context that doesn't initiate an audio context, and then everything works fine. Not sure what I should change in my code though.
I uploaded alot of react packages. Some update caused the # to be removed from the url. Works on dev machine but not on production which runs apache. I tried all different kind of rewrite in virtual host but I can't get it to work.
I need to add the # again. Must be some option som react router package?
Sorry for not specifying exactly what react packages it is. I updated so many I don't really know which it is. Production is down cause of this so it's an emergency. I promise to clean up the question once it's back up.
react-router-dom has HashRouter component. You can use that.
I want to deploy a React app to netlify but the build fails. When I check the build logs I find that it fails where I used lazy loading to get a component.
When I use lazy loading to get a component, as shown below,
import React, {lazy } from 'react';
const SidebarLeft = lazy(() => import('./pages/SidebarLeft'))
the build fails with the error message
12:26:05 AM: Cannot find file './pages/WorldCases' in './src'.
What could be the cause of this, and how do I fix it?
For anyone who might run into this problem, it turned out that git didn't change the folder name when I did. I initially created a Pages folder. I later renamed it to pages, with a small p. But git didn't pick up that change. So I had to change the name back to Pages.
Is it mandatory to run create-react-app command to create app every time?
I don't want to fire create-react-app command which provides some react module files that help to run react application.
So can you guys help me to understand, is it mandatory to every time run this command.
import React from 'react';
const App = {
return (
<div id="root">
<p>Hello this is first react application</p>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
create-react-app (cra) is used to bootstrap a new react app fast.
You can use react without using it, you can run react with only react+react-dom CDN as you already wrote in your code example.
Or you can also bootstrap it yourself if you know a little webpack, you just need the react-jsx babel preset to convert JSX syntax to React.createElement calls.
You can run it once and make a local copy to just copy over every time.
You also can build an app from scratch although that will take longer.
The majority of the 5+ minutes is downloading required dependencies for the app.
NOTE: This is not good practice as it results in never getting newer updated dependencies in your app, and you literally just keep using the old one.
If you are just making a bunch of apps to test, then that’s fine. If you are instead making a bunch of apps for production purposes, remember that part of maintenance is updating dependencies regularly as security updates are released.
Good evening, I'm trying to work with Reactjs and ServiceWorker to create a PWA but when creating a new project everything seems to work fine but when running npm run build and dispatch the result with npm's http-server opens the application correctly but the browser never records that there is a service worker.
I have already dealt with 3 projects and different browsers but everything remains the same.
The projects are as they are installed with create-react-app.
Does anyone know why the service worker is not installed?
Attached image of how it is not registered by the browser even though it is in the build folder.
If I do this without using react as proof with a simple service worker file if I can register it but with reacrt I do not get it that way.
Thanks.
Does you import your SW in the App entry point module? Example:
// index.js:
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Thanks partners. I was able to solve it by modifying in line src / index.js the line 1 that I had:
serviceWorker.unregister();
By: serviceWorker.register();
And now it works.
Regards!