-
Notifications
You must be signed in to change notification settings - Fork 879
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React Hot Loader 3.0 beta demo #61
Changes from all commits
c423415
5d5175b
afa4aee
691fe11
7f8903b
b52c727
f134ff3
febf956
dfeb37b
f764530
5c76efd
372080f
a26a653
9089b6b
9609a8e
437dc6a
314c024
6811627
19d3594
59281e4
abe4763
c78530f
26938f2
43f80ee
d6891f2
92cb506
8a05c0d
949277a
677a4d6
a2d489d
530fb8f
8ebffda
4e51cf7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,10 @@ | ||
{ | ||
"presets": ["es2015", "stage-0", "react"] | ||
"presets": [ | ||
["es2015", {"modules": false}], | ||
"stage-2", | ||
"react" | ||
], | ||
"plugins": [ | ||
"react-hot-loader/babel" | ||
] | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,3 +2,4 @@ node_modules | |
npm-debug.log | ||
.DS_Store | ||
dist | ||
*.swp |
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,19 @@ | ||
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 ( | ||
<h1>Hello, world.</h1> | ||
<Layout> | ||
<Counter /> | ||
</Layout> | ||
); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import React, { Component } from 'react'; | ||
|
||
export default class Counter extends Component { | ||
constructor(props) { | ||
super(props); | ||
this.state = { counter: 0 }; | ||
} | ||
|
||
componentDidMount() { | ||
this.interval = setInterval(this.tick.bind(this), 1000); | ||
} | ||
|
||
tick() { | ||
this.setState({ counter: this.state.counter + 1 }); | ||
} | ||
|
||
componentWillUnmount() { | ||
clearInterval(this.interval); | ||
} | ||
|
||
render() { | ||
return <h2>Counter: {this.state.counter}</h2>; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react'; | ||
|
||
export default function Layout({ children }) { | ||
return ( | ||
<div> | ||
<h1>Hello, world!</h1> | ||
{children} | ||
</div> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,16 @@ | ||
import { AppContainer } from 'react-hot-loader'; | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import App from './App'; | ||
|
||
ReactDOM.render(<App />, document.getElementById('root')); | ||
const rootEl = document.getElementById('root'); | ||
const render = Component => | ||
ReactDOM.render( | ||
<AppContainer> | ||
<Component /> | ||
</AppContainer>, | ||
rootEl | ||
); | ||
|
||
render(App); | ||
if (module.hot) module.hot.accept('./App', () => render(App)); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @gaearon Do you need to re-require the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. +1 in fact this line should be:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It should not, unless you are incorrectly transforming modules before webpack sees them. You only need to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @kovensky I'm inclined to believe you're wrong due to the official 3.0 docs saying otherwise: https://github.com/gaearon/react-hot-loader/edit/master/docs/README.md#L96 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, that is incorrect for webpack 2, as long as you disable the module transform in babel/typescript/etc. webpack has to see the raw See the webpack 2 section in https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#webpack-2 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
var path = require('path'); | ||
var webpack = require('webpack'); | ||
|
||
module.exports = { | ||
entry: './src/index.js', | ||
|
||
output: { | ||
filename: 'static/bundle.js', | ||
path: path.resolve(__dirname, 'dist'), | ||
publicPath: '/' | ||
}, | ||
|
||
devtool: 'source-map', | ||
|
||
module: { | ||
rules: [ | ||
{ | ||
test: /\.jsx?$/, | ||
use: [ | ||
'babel-loader' | ||
], | ||
exclude: /node_modules/ | ||
} | ||
] | ||
}, | ||
|
||
plugins: [ | ||
new webpack.optimize.UglifyJsPlugin({ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is redundant since There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
sourceMap: true, | ||
comments: false | ||
}) | ||
] | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
s/es2015/latest/
?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why is necessary disable modules? looks like works without this option
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Kikobeats disable modules has no effect on hot loader. Webpack now can handle es 6 modules and for better tree shaking this has to be off in babel.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@tracker1 might as well use babel-present-env instead
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@dlebedynskyi agreed, apparently there's a deprecation message on -latest that says as much now.