Comments (29)
What? React hot-reloading is like the main reason I would want (and need) this tool 😲
from create-react-app.
I love that you love it.
from create-react-app.
It seems it's actually very simple to add HMR for React to your app. See https://medium.com/@sheepsteak/adding-hot-module-reloading-to-create-react-app-e053fadf569d#.fxu5lgi3z. It's literally an extra 10 lines of code.
Before:
ReactDOM.render(
(
<Provider store={store}>
<App />
</Provider>
),
document.getElementById('root')
);
After:
function render(Component) {
ReactDOM.render(
(
<Provider store={store}>
<Component />
</Provider>
),
document.getElementById('root')
);
}
render(App);
if (module.hot) {
module.hot.accept('./App', () => {
const NextApp = require('./App').default;
render(NextApp);
});
}
from create-react-app.
@Scimonster When I use that solution it still refreshes the whole page, so my redux state still gets lost. Did I forget something?
from create-react-app.
The nice thing in this project is we get to control the complete experience. We can replace any part if there is a better solution. e.g. I’m hopeful about https://github.com/motion/pundle.
cc @steelbrain
from create-react-app.
@gaearon There's a 2x speed boost in steelbrain/pundle#43. It also adds support for requiring non-js files (css for example) and custom hot reloading wrappers. It'll be in the next major pundle version, which you can expect in about a week or two
from create-react-app.
Closing for now. CSS hot reloading is there, React hot reloading may come one day. 😉
from create-react-app.
CSS hot reloading is there.
React will be there is it’s stable enough but it requires work both on webpack and my side.
from create-react-app.
Oh, it's great that webpack's hot reloading infrastructure is already set up.
Yeah, this is purely anecdotal but when I tried switching from v2 to v3 of react-hot-loader it seemed a bit slower to compile my files. I definitely would make sure that this doesn't add significant overhead to the standard workflow of incremental compilation + refresh.
from create-react-app.
While cleaning out my CRA project with the intent to post the project for you. I found out what was causing the problem.
it was this code I used to implement material-ui:
// App.js
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
Moving this code to a separate file as described in this issue solved the problem.
Thanks for the effort guys, much appreciated.
from create-react-app.
Agreed. I think the compilation from babel+react-hot-loader was the slow part though, not webpack. Anyway, I love that this could turn into the de-facto place to benchmark this kind of stuff and establish a standard for the best way for things to work together.
from create-react-app.
Thanks! @steelbrain Would you be interested in sending a proof of concept PR switching this project to pundle? Doesn’t have to be fully feature complete, just to get a taste for it.
from create-react-app.
Sure @gaearon! I'll send in a PR soon
from create-react-app.
@gaearon what's the real issue with react hot reloading? I think it's nice to integrate that in CRA. Also, when it's integrated, more people can see and help react-hot-loader smooth out its issue.
from create-react-app.
@anomaly44 I'm having issues once I started using react-router. Similar situation?
from create-react-app.
@grantgeorge Yes I m using React-router v4, gonna try taking it out tonight if I can find some time and see if it works without.
from create-react-app.
@anomaly44 interesting. I had issues w/ react router but worked when I upgraded to v4 (from v3) last night and did some reconfiguration for the upgrade.
In case this helps, here's my setup:
package.json
"react-router-dom": "^4.0.0-beta.6",
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';
import './index.css';
const rootEl = document.getElementById('root');
ReactDOM.render(
<Routes />,
rootEl
);
if (module.hot) {
module.hot.accept('./routes', () => {
const NextApp = require('./routes').default;
ReactDOM.render(
<NextApp />,
rootEl
);
});
}
routes.js
const Routes = () => (
<Router>
<div>
<Route exact path="/" component={Home} />
...
</div>
</Router>
)
export default Routes
from create-react-app.
I did the same, the only difference being that my in the 'non hot' render is wrapped with a redux provider. It works, I dont get any errors, but the whole page refreshes, so my redux state still gets reset to the initial state. Strange
from create-react-app.
https://gist.github.com/anomaly44/83c7d7aa0b92997481f50e25800e6f88 Can you spot anything wrong with this? my component is in my App file. Everything works, except that i lose my redux state when making changes.
from create-react-app.
When you make changes in which files? And what is your configureStore
like?
from create-react-app.
When I edit some of the default text in App.js
added my store.js to the gist: https://gist.github.com/anomaly44/83c7d7aa0b92997481f50e25800e6f88
from create-react-app.
If you look at the code, you are rendering two different things. Why?
// 1
ReactDOM.render(
<Provider store={store}>
<Component/>
</Provider>,
// 2
ReactDOM.render(
<NextApp/>,
document.getElementById('root')
);
In one case you are rendering App
inside a Provider
, in other case you don't use Provider
. This is why the state gets lost.
You also declared a render()
function but you only use it once. Why did you declare it? The purpose of declaring it is so you could reuse it in both places:
const render = (Component) => {
return ReactDOM.render(
<Provider store={store}>
<Component/>
</Provider>,
document.getElementById('root')
);
};
render(App);
if (module.hot) {
module.hot.accept('./App', () => {
const NextApp = require('./App').default;
render(NextApp);
});
}
I would recommend to get more comfortable with HMR API before using it. You seem to be copy and pasting examples, so you are missing the intention of these lines (and thus missing why the code did not work).
I hope this helps!
from create-react-app.
sorry for the confusion, the inconsistencies you pointed out were caused by me switching things around and quickly trying some stuff I found googling because I couldnt get it working. The code you posted above is exactly what I tried the first time to get it working. I should have pasted that code instead of the mangled stuff I ended up posting.
Anyway, I added a console.log in the arrow function in the module.hot.accept. When I save a change in App I see the message in my console for half a second before the page refreshes and the state gets lost. Any idea what might be going wrong?
from create-react-app.
Sorry, no idea! If you post a project I could take a look.
from create-react-app.
Interesting, thanks!
from create-react-app.
Sorry, I'm confused. It's HMR available ? Should I do something extra to activate it?
Many thanks
from create-react-app.
HMR API is available so you can use module.hot
the same way you would normally do with Webpack.
Something like React Hot Loader is not included so you won’t be able to keep the component local state between hot “reloads”.
from create-react-app.
What's the difference ? May be that React Hot Loader
is able to keep the state and all the components and the regular HMR api does not? Because before using @Scimonster suggestion the entire page was being reload (like pressing F5 or command +R ) but now using the module.hot
stuff at least the browser is not refreshed, which is an improvement.
from create-react-app.
May be that React Hot Loader is able to keep the state and all the components and the regular HMR api does not?
This is correct.
from create-react-app.
Related Issues (20)
- Create react app HOT 1
- login issue
- my sign in not working
- HMR not working
- [email protected]
- "npx create-react-app" doesn't generate src or public folders HOT 1
- Usage override/workaround/hack with ESLint 9
- Frontend Host doesn't match the current host in the browser, so it's probably incorrect. Links in emails and file downloads from the API will not work. Click here to update. HOT 1
- [https://newsroom.spotify.com/news/](https://deezer.page.link/fCBsxrTRUZvKbLkA8) HOT 3
- react-scripts/v/5.1.0-next.14 contains multiple security vulnerabilities for inner modules
- Issue in creating react app HOT 4
- cra打包路由切换FiberRootNode会新增,webpack打包就不会 HOT 1
- Error -4048 and Error -4058 and ENOENT, HOT 1
- Des erreurs apres installation de mui sur un projet React 18.0.0 ou supérieur HOT 1
- del proyecto
- how i can run react program in vs code HOT 4
- React JS HOT 4
- @babel/plugin-proposal-private-property-in-object missing from babel-preset-react-app dependencies
- Npx create-react-app: 8 vulnerabilities (2 moderate, 6 high) in new react app HOT 1
- 不动 啊
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-react-app.