eirikb/ JSPM + React + hotreload.md

## JSPM + React + hotreload.md

      
    Raw
  

               JSPM + React + hotreload.md
            
          
Download zip.
npm install.
npm start.


## app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Test from './test';

ReactDOM.render(React.createElement(Test), document.getElementById('app'));

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JSPM + React + hotreload</title>
</head>
<body>
<div id="app"></div>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.trace = true;
  System.import('capaj/systemjs-hot-reloader').then(function (HotReloader) {
    new HotReloader.default('http://localhost:5776');
  }).then(function () {
    System.import('app');
  });
</script>
</body>
</html>

## package.json
{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {
    "chokidar-socket-emitter": "^0.4.2",
    "http-server": "^0.8.5",
    "jspm": "^0.16.26",
    "npm-run-all": "^1.5.1"
  },
  "jspm": {
    "dependencies": {
      "capaj/systemjs-hot-reloader": "github:capaj/systemjs-hot-reloader@^0.5.5",
      "react": "npm:react@^0.14.7",
      "react-dom": "npm:react-dom@^0.14.7"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4"
    }
  },
  "scripts": {
    "postinstall": "jspm i -y",
    "server": "http-server -c-1 -o",
    "hotreload": "chokidar-socket-emitter",
    "start": "npm-run-all --parallel server hotreload"
  }
}

## test.js
import React from 'react';

class Test extends React.Component {
  constructor() {
    super();

    this.state = {
      text: 'World'
    };
  }

  render() {
    return <p>Hello, {this.state.text}!</p>;
  }
}

export default Test;
	import React from 'react';
	import ReactDOM from 'react-dom';

	import Test from './test';

	ReactDOM.render(React.createElement(Test), document.getElementById('app'));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>JSPM + React + hotreload</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="jspm_packages/system.js"></script>
	<script src="config.js"></script>
	<script>
	System.trace = true;
	System.import('capaj/systemjs-hot-reloader').then(function (HotReloader) {
	new HotReloader.default('http://localhost:5776');
	}).then(function () {
	System.import('app');
	});
	</script>
	</body>
	</html>
	{
	"name": "demo",
	"version": "1.0.0",
	"main": "index.js",
	"devDependencies": {
	"chokidar-socket-emitter": "^0.4.2",
	"http-server": "^0.8.5",
	"jspm": "^0.16.26",
	"npm-run-all": "^1.5.1"
	},
	"jspm": {
	"dependencies": {
	"capaj/systemjs-hot-reloader": "github:capaj/systemjs-hot-reloader@^0.5.5",
	"react": "npm:react@^0.14.7",
	"react-dom": "npm:react-dom@^0.14.7"
	},
	"devDependencies": {
	"babel": "npm:babel-core@^5.8.24",
	"babel-runtime": "npm:babel-runtime@^5.8.24",
	"core-js": "npm:core-js@^1.1.4"
	}
	},
	"scripts": {
	"postinstall": "jspm i -y",
	"server": "http-server -c-1 -o",
	"hotreload": "chokidar-socket-emitter",
	"start": "npm-run-all --parallel server hotreload"
	}
	}
	import React from 'react';

	class Test extends React.Component {
	constructor() {
	super();

	this.state = {
	text: 'World'
	};
	}

	render() {
	return <p>Hello, {this.state.text}!</p>;
	}
	}

	export default Test;