├── .babelrc
├── .eslintrc
├── .gitignore
├── README.md
├── index.html
├── package.json
├── server.js
├── src
├── Root.js
├── components
│ ├── App.js
│ ├── Counter.js
│ └── Home.js
├── index.js
└── routes.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react", "es2015"],
3 | "plugins": ["react-hot-loader/babel"]
4 | }
5 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "eslint:recommended",
3 | "ecmaFeatures": {
4 | "jsx": true,
5 | "modules": true
6 | },
7 | "env": {
8 | "browser": true,
9 | "node": true
10 | },
11 | "parser": "babel-eslint",
12 | "rules": {
13 | "no-console": 0,
14 | "quotes": [2, "single"],
15 | "strict": [2, "never"],
16 | "react/jsx-uses-react": 2,
17 | "react/jsx-uses-vars": 2,
18 | "react/react-in-jsx-scope": 2
19 | },
20 | "plugins": [
21 | "react"
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | temp/
4 | .idea/
5 | *.env
6 | npm-debug.log
7 | .DS_Store
8 | bundle.js
9 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | The application can be run locally after installing Node.js
2 |
3 | ### Run Locally
4 |
5 | #### Node.js
6 | Install 4.0+ ([NVM](https://github.com/creationix/nvm) recommended)
7 |
8 | ```shell
9 | npm install
10 | npm start
11 | ```
12 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Example
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-hot-loader-examples",
3 | "version": "0.0.1",
4 | "description": "Examples demonstrating how to use React Hot Loader 3 with various libraries in the React ecosystem",
5 | "main": "server.js",
6 | "scripts": {
7 | "start": "node server"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/calesce/react-hot-loader-examples"
12 | },
13 | "author": "Cale Newman (http://github.com/calesce)",
14 | "license": "MIT",
15 | "dependencies": {
16 | "express": "^4.14.0"
17 | },
18 | "devDependencies": {
19 | "babel-core": "^6.14.0",
20 | "babel-eslint": "^7.0.0",
21 | "babel-loader": "^6.2.5",
22 | "babel-preset-es2015": "^6.14.0",
23 | "babel-preset-react": "^6.11.1",
24 | "eslint": "^3.6.1",
25 | "eslint-plugin-react": "^6.3.0",
26 | "react": "^15.3.2",
27 | "react-dom": "^15.3.2",
28 | "react-hot-loader": "^3.0.0-beta.5",
29 | "react-router": "^2.8.1",
30 | "webpack": "^1.13.2",
31 | "webpack-dev-middleware": "^1.8.3",
32 | "webpack-hot-middleware": "^2.12.2"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var path = require('path');
3 | var webpack = require('webpack');
4 | var config = require('./webpack.config');
5 |
6 | var app = express();
7 | var compiler = webpack(config);
8 |
9 | app.use(require('webpack-dev-middleware')(compiler, {
10 | noInfo: true, publicPath: config.output.publicPath
11 | }));
12 |
13 | app.use(require('webpack-hot-middleware')(compiler));
14 |
15 | app.get('*', function(req, res) {
16 | res.sendFile(path.join(__dirname, 'index.html'));
17 | });
18 |
19 | app.listen(3000, function(err) {
20 | if(err) {
21 | return console.log(err);
22 | }
23 |
24 | console.log('Server running on port: 3000');
25 | });
26 |
--------------------------------------------------------------------------------
/src/Root.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Router, browserHistory } from 'react-router';
3 |
4 | export default class Root extends Component {
5 | render() {
6 | return (
7 |
8 | {this.props.routes()}
9 |
10 | );
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router';
3 |
4 | export default class App extends Component {
5 | render() {
6 | return (
7 |
8 | Home | Counter
9 | {this.props.children}
10 |
11 | );
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/Counter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | export default class Counter extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = { counter: 0 };
7 | }
8 |
9 | componentDidMount() {
10 | this.interval = setInterval(this.tick.bind(this), 1000);
11 | }
12 |
13 | tick() {
14 | this.setState({
15 | counter: this.state.counter + 1
16 | });
17 | }
18 |
19 | componentWillUnmount() {
20 | clearInterval(this.interval);
21 | }
22 |
23 | render() {
24 | return (
25 | Counter: {this.state.counter}
26 | );
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/Home.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Home extends Component {
4 | render() {
5 | return Hello, world
;
6 | }
7 | }
8 |
9 | export default Home;
10 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 |
5 | import Root from './Root';
6 | import routes from './routes';
7 |
8 | const renderApp = appRoutes => {
9 | render(
10 |
11 |
12 | ,
13 | document.getElementById('root')
14 | );
15 | };
16 |
17 | renderApp(routes);
18 |
19 | if (module.hot) {
20 | module.hot.accept('./routes', () => {
21 | const newRoutes = require('./routes').default;
22 | renderApp(newRoutes);
23 | });
24 | }
25 |
--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IndexRoute, Route } from 'react-router';
3 |
4 | import App from './components/App';
5 | import Home from './components/Home';
6 | import Counter from './components/Counter';
7 |
8 | const routes = () => {
9 | return (
10 |
11 |
12 |
13 |
14 | );
15 | };
16 |
17 | export default routes;
18 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var path = require('path');
3 |
4 | module.exports = {
5 | devtool: 'cheap-module-eval-source-map',
6 | context: __dirname,
7 | entry: [
8 | 'react-hot-loader/patch',
9 | 'webpack-hot-middleware/client?quiet=true',
10 | './src/index.js'
11 | ],
12 | output: {
13 | path: __dirname,
14 | publicPath: '/static/',
15 | filename: 'bundle.js'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin(),
20 | new webpack.NoErrorsPlugin()
21 | ],
22 | module: {
23 | loaders: [
24 | {
25 | test: /\.js$/,
26 | loaders: ['babel'],
27 | include: path.join(__dirname, 'src')
28 | }
29 | ]
30 | }
31 | };
32 |
--------------------------------------------------------------------------------