Getting started using JSPM #8

peteruithoven · 2016-05-05T15:55:54Z

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>
    <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.import('./main.js');
    </script>
  </head>
  <body>
    <div id="chart"></div>
  </body>
</html>

Javascript file: main.js

import chartData from './user_sample.json!';
import React from 'react';
import ReactDOM from 'react-dom';
import { LineChart } from 'react-d3-basic';
// loading chart data from json file using json-plugin
import chartData from './user_sample.json!';

const width = 700;
const height = 300;
const margins = { left: 100, right: 100, top: 50, bottom: 50 };
const title = '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 line
const chartSeries = [
  {
    field: 'BMI',
    name: 'BMI',
    color: '#ff7f0e'
  }
];
// your x accessor
const x = (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(
  <LineChart
    margins={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

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Getting started using JSPM #8

Getting started using JSPM #8

peteruithoven commented May 5, 2016 •

edited

Loading

Getting started using JSPM #8

Getting started using JSPM #8

Comments

peteruithoven commented May 5, 2016 • edited Loading

peteruithoven commented May 5, 2016 •

edited

Loading