Skip to content

Commit

Permalink
Bump to 3.0.0-beta.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaearon
gaearon committed Apr 30, 2016
1 parent 7f8903b commit b52c727
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 3 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"babel-preset-stage-0": "^6.0.15",
"eslint": "^1.10.3",
"eslint-plugin-react": "^3.6.2",
"react-hot-loader": "^3.0.0-alpha.13",
"react-hot-loader": "^3.0.0-beta.0",

This comment has been minimized.

Sign in to view

Copy link
@code4cake

code4cake Apr 17, 2017

Ok this is a newbie question, but should react-hot-loader be included as a devDependency or a dependecy? A Google search has given me both approaches. Thanks
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.1"
},
Expand Down
7 changes: 7 additions & 0 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@ import React, { Component } from 'react';
import Layout from './Layout';
import Counter from './Counter';

// If you use React Router, make this component
// render <Router> with your routes. Currently,
// only synchronous routes are hot reloaded, and
// you will see a warning from <Router> on every reload.
// You can ignore this warning. For details, see:
// https://github.com/reactjs/react-router/issues/2182

export default class App extends Component {
render() {
return (
Expand Down
11 changes: 9 additions & 2 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,21 @@ import App from './App';

const rootEl = document.getElementById('root');
ReactDOM.render(
<AppContainer component={App} />,
<AppContainer>
<App />
</AppContainer>,
rootEl
);

if (module.hot) {

This comment has been minimized.

Sign in to view

Copy link
@tbranyen

tbranyen Jul 20, 2016

Why is this necessary if you have Babel/webpack injecting the helper anyways. I see React Hot Loader registration and this? Aren't they the same?
module.hot.accept('./App', () => {
// If you use Webpack 2 in ES modules mode, you can

This comment has been minimized.

Sign in to view

Copy link
@hammeiam

hammeiam Jul 16, 2016

Could someone post a link to some more information about Webpack 2's "ES modules mode"? Google didn't yield much info.

This comment has been minimized.

Sign in to view

Copy link
@griffinmichl

griffinmichl Oct 26, 2016

I would assume this means you don't have modules: false in your babel config.

This comment has been minimized.

Sign in to view

Copy link
@catamphetamine

catamphetamine Jan 9, 2017 •
edited
Loading

@hammeiam "use Webpack 2 in ES modules mode" means ["es2015", { modules: false }] instead of simply "es2015" in .babelrc which disables transpiling imports to require()s by Babel and instead Webpack does that while also eliminating unused imports (which is called "tree shaking")
// use <App /> here rather than require() a <NextApp />.
const NextApp = require('./App').default;
ReactDOM.render(
<AppContainer component={require('./App').default} />,
<AppContainer>
<NextApp />
</AppContainer>,
rootEl
);
});
Expand Down

6 comments on commit b52c727

@artivilla
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I have it setup as this, how do I create the section under if (module.hot) {} since I'm not requiring the file, the store and provider are in the same file.

        ReactDOM.render((
            <AppContainer>
                <Provider store={store}>
                    <Assignments data={modules} />
                </Provider>
            </AppContainer>
        ), creationComponentContainer);

@mr47
Copy link

@mr47 mr47 commented on b52c727 May 4, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@artivilla please read about module.hot.accept at https://webpack.github.io/docs/hot-module-replacement.html

Thanks.

@gaearon
Copy link
Owner Author

@gaearon gaearon commented on b52c727 May 4, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@artivilla

Probably like this:

ReactDOM.render(
  <AppContainer>
    <Provider store={store}>
      <Assignments data={modules} />
    </Provider>
  </AppContainer>,
  creationComponentContainer
);

 if (module.hot) {
    module.hot.accept('./Assignments', () => {
      // If you use Webpack 2 in ES modules mode, you can
      // use <Assignments /> here rather than require() a <NextAssignments />.
      const NextAssignments = require('./Assignments').default;
      ReactDOM.render(
        <AppContainer>
          <Provider store={store}>
            <NextAssignments data={modules} />
          </Provider>
        </AppContainer>,
        creationComponentContainer
      );
    });
}

However it would be easier to create an App component in a separate file that looks like

const store = ...
const modules = ...

export default App() {
  return (
    <Provider store={store}>
      <Assignments data={modules} />
    </Provider>
  );
}

and then use the example code with App just like it’s written in this boilerplate.

@batusai513
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gaearon i'm using the the app component with react router and react-redux provider component, and i'm getting this warning, but it works, the hot replacement.

Provider.js:29 <Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

@gaearon
Copy link
Owner Author

@gaearon gaearon commented on b52c727 May 5, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@batusai513

Move store into index.js and pass it as a prop so it doesn’t get created on every HMR update.

@batusai513
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gaearon thanks man, it worked like a charm, thanks again for your commitment to improve the development experience, much appreciated.

thanks.

Please sign in to comment.