Hi folks I wanted to share how you can go through your getting started using JSPM. Benefits include no manual config file and es6 out of the box.
Use the same data source.
Installation of jspm & dependencies:
npm init -y
npm install -D jspm
jspm init -y
jspm install react@0.14.8 react-dom@0.14.8 npm:react-d3-core npm:react-d3-basic json
HTML file: index.html
<!DOCTYPE html><html><head><metacharset="utf-8"><title>React D3 getting started</title><scriptsrc="jspm_packages/system.js" charset="utf-8"></script><scriptsrc="config.js" charset="utf-8"></script><scripttype="text/javascript">System.import('./main.js');</script></head><body><divid="chart"></div></body></html>Javascript file: main.js
importchartDatafrom'./user_sample.json!';importReactfrom'react';importReactDOMfrom'react-dom';import{LineChart}from'react-d3-basic';// loading chart data from json file using json-pluginimportchartDatafrom'./user_sample.json!';constwidth=700;constheight=300;constmargins={left: 100,right: 100,top: 50,bottom: 50};consttitle='User sample';// chart series,// field: is what field your data want to be selected// name: the name of the field that display in legend// color: what color is the lineconstchartSeries=[{field: 'BMI',name: 'BMI',color: '#ff7f0e'}];// your x accessorconstx=(d)=>d.index;// Leaving out the Chart from the regular getting started because it didn't // nest the LineChart inside it properly and it didn't seem to be necessary. ReactDOM.render(<LineChartmargins={margins}title={title}data={chartData}width={width}height={height}chartSeries={chartSeries}x={x}/>,document.getElementById('chart'));Now you can serve the folder in a web server and visit this index.html in a browser.
You can also easily create a useful npm start with a webserver and hot reloading by:
npm install -D serve chokidar-socket-emitter
Alter index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React D3 getting started</title>
<script src="../../jspm_packages/system.js" charset="utf-8"></script>
<script src="../../config.js" charset="utf-8"></script>
<script type="text/javascript">
System.trace = true;
System.import('systemjs-hot-reloader/default-listener.js');
System.import('./index.js');
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
Add npm script:
"scripts": {
"start": "serve & chokidar-socket-emitter"
},Now you can run npm start and visit localhost:3000
Hi folks I wanted to share how you can go through your getting started using JSPM. Benefits include no manual config file and es6 out of the box.
Use the same data source.
Installation of jspm & dependencies:
HTML file:
index.htmlJavascript file:
main.jsNow you can serve the folder in a web server and visit this index.html in a browser.
You can also easily create a useful
npm startwith a webserver and hot reloading by:Alter
index.htmlAdd npm script:
Now you can run
npm startand visitlocalhost:3000