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.
- Install jspm, if you haven't already:
npm install -g jspm
Make a new directory, and initialize a new jspm project:
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:
│ ├── es6-module-loader.js
│ ├── es6-module-loader.js.map
│ ├── es6-module-loader.src.js
│ ├── github
│ ├── npm
│ ├── system.js
│ ├── system.js.map
│ └── system.src.js
- Now to write out index.html file, which will be put into the root of the project. 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.
- 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 :
- 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. 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.
- In the previous step, we are importing and outer component into our 'react-render.jsx' file, so lets set that up:
- Finally lets create the 'InnerComponent' used by the 'OuterComponent' 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:
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.