{ Soham Kamani }

AboutBlog GithubTwitter

Supercharge your ReactJs application with ES6 and jspm ⚡

This post is about creating a hello world application using jspm and ES6 with ReactJs.

Feeling lazy and just want to see the code? Go Here

Although jspm and ES6 can be used for any type of application, I have specifically targeted React because I feel that the intentions of ES6’s module loading specification and ReactJs are all focused on the same thing, and that is componentization — separating your logic into small byte sized pieces. Throwing a mountain of script tags in your index.html file for a single page application is just not as appealing as it used to be. The ES6 way of doing things is to only import a piece of functionality when you need it. This marries really well with Reacts principle of separating your markup into its individual components, so its only natural that both of them be used together. Don’t worry… if you’ve never heard of jspm before, it’s really friendly to new-comers :) I’m not going to go into the details of what jspm is because it’s explained really well on their website, so lets just dive into bootstrapping our hello world application.

  1. Install jspm, if you haven’t already:
    npm install -g jspm
  1. Make a new directory, and initialize a new jspm project:
    jspm init
    And install all the dependencies we will require:

    jspm install react react-dom jsx
    After all the initialization formalities are done, your folder tree will look something like this:
    .
    ├── config.js
    ├── jspm_packages
    │   ├── es6-module-loader.js
    │   ├── es6-module-loader.js.map
    │   ├── es6-module-loader.src.js
    │   ├── github
    │   ├── npm
    │   ├── system.js
    │   ├── system.js.map
    │   └── system.src.js
    └── package.json
  1. Now to write out index.html file, which will be put into the root of the project.

    <!--index.html-->
    <html>
    
    <head>
        <title>JSPM Experiment</title>
    </head>
    
    <body>
        <div id="container"></div>
        <script src="jspm_packages/system.js"></script>
        <script src="config.js"></script>
            System.import('./start');
        </script>
    </body>
    
    </html>

    What? Is that it? Yep, thats it. And most likely, for most of your projects, that would be the only content that will ever be in your index.html file.

  2. Next, lets create the start.js file that your index.html keeps raving about. This file will not have any functional code in it and simply serves as an entry point to the rest of the app. For this project, it will be exactly 1 line :

    //start.js
    import './lib/react_render';
  1. All of your js files will be in the src directory. Here, react_render.js is the script that finally renders all your react components.

    //lib/react-render.jsx
    import OuterComponent from './react_components/outer-component.jsx!';
    import ReactDom from 'react-dom';
    import React from 'react';
    
    ReactDom.render(
    React.createElement(OuterComponent)
    , document.getElementById('event-box'));

    The ’!’ after the jsx file means that we don’t want to append a ‘.js’ extension to it. JSX files are handled nicely by babel, which comes shipped out of the box with jspm.

  2. In the previous step, we are importing and outer component into our ‘react-render.jsx’ file, so lets set that up:

    //lib/react_components/outer-component.jsx
    import React from 'react';
    
    import InnerComponent from './inner-component.jsx!'
    
    var OuterComponent = React.createClass({
    render: function () {
    return (
    <div>
    <h1>I am the outer title</h1>
    <InnerComponent />
    <InnerComponent />
    <InnerComponent />
    </div>
    );
    }
    });
    
    export default OuterComponent;
  3. Finally lets create the ‘InnerComponent’ used by the ‘OuterComponent’

    //lib/react_components/inner-component.jsx
    import React from 'react';
    
    var InnerComponent = React.createClass({
    render: function () {
    return (
    <div>
    Hi! Im the inner component.
    </div>
    );
    }
    });
    
    export default InnerComponent;

And… thats it! Run a local server on the root directory of the project and open up the index.html file, and you should see something like this:
img1

As you may have noticed, most of our scripts are pretty small, barely exceeding 20 lines of code. This is because each piece of logic (in this case each react component) is contained in its own file. And, as a bonus, we get all the awesome new features of ES6 to play around with.
If you got lost at any point, here’s the source for the entire project.


Like what I write? Join my mailing list, and I'll let you know whenever I write another post

Comments

Soham Kamani

Written by Soham Kamani, an author,and a full-stack developer who has extensive experience in the JavaScript ecosystem, and building large scale applications in Go. He is an open source enthusiast and an avid blogger. You should follow him on Twitter