JSPM With ReactJS And Babel -Tutorial Savvy

In my previous post we have learnt about Registry supported by JSPM.
In this Demo, “We will learn to work with ReactJS component with JSPM”.
Some of the important member of react module are React.createElement, React.createClass and React.Component, React.PropTypes, React.Children.
The react-dom module has ReactDOM.render, ReactDOM.unmountComponentAtNode, and ReactDOM.findDOMNode to work with virtual DOM and ReactDOMServer.renderToString and ReactDOMServer.renderToStaticMarkup for Isomorphic application.
To demonstrate JSPM with ReactJS we have created JSPMDemo project.The following screenshot shows the directory structure for JSPMDemo project:-

The react package can be installed using jspm install react@0.14.0-beta1 command.The following screenshot shows the terminal with react 0.14.0 installation.

The react-dom package can be installed using react-dom@0.14.0-beta1 command.The following screenshot shows the terminal with react 0.14.0 installation.

On Successful installation the package.json contains entries for react and react-dom inside jspm property.the content of package.json file are as follows.

{
  "name": "JSPMDemo",
  "version": "0.0.0",
  "devDependencies": {
    "jspm": "^0.16.2"
  },
  "jspm": {
    "dependencies": {
      "react": "npm:react@0.14.0-beta1",
      "react-dom": "npm:react-dom@0.14.0-beta1"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.22",
      "babel-runtime": "npm:babel-runtime@^5.8.20",
      "core-js": "npm:core-js@^1.1.0"
    }
  }
}

The following screenshot shows the jspm_packages with react and react-dom module installed in the project.

The HelloWorldComponent.js file contains the code definition for HelloWorld React component.The code content of HelloWorldComponent.js file are as follows.

import React from 'react';
class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, world.Welcome to JSPM With React</h1>;
    }
}
export default HelloWorld;

The main.js file contains the code for rendering the HelloWorld component in the main.html file.The code content of main.js file are as follows.

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorldComponent';

ReactDOM.render(
    <HelloWorld />,
    document.getElementById('container')
);

The main.html file contains the code for importing main.js file using System.import() method.The content of main.html file are as follows:-

<!doctype html>
<html>
<head>
    <title>JSPM React Babel Demo</title>
</head>
<body>
    <div id="container"></div>
</body>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
    System.import('main');
</script>
</html>

We can run main.html file with a local development server.While running the main.html the Babel transpiller will transpilled the React code to vanilla javascript code in run time and render the main.html file in browser.The output of this demo looks like following screenshot.

The demo code ca be downloaded from the following link.After downloading use jspm install command to install all necessary file.

https://github.com/saan1984/JSPMDemo

Sep 3, 2015Sandeep Patel

JSPM With ReactJS And Babel

Related

Sandeep Patel