Dependencies

To follow along with this tutorial you'll need Git and a recent version of Node.js/npm.

Todo Boilerplate

Start by cloning the boilerplate repository:

git clone https://github.com/metal/metal-tutorial-todo.git

Then navigate to the root of the project in your terminal and install the local npm dependencies:

cd metal-tutorial-todo && npm install

The boilerplate that you'll build on is located in the src/jsx directory. You can also view the finished product in the src/jsx/final directory.

Building

To test drive the boilerplate located in the src/jsx directory, run the build script shown below:

npm run build:jsx

This runs babel + webpack to transpile and bundle the JavaScript into something consumable by web browsers.

This tutorial uses ES6 syntax; if you're unfamiliar with it, check outthis guide first.

To build the finished product, run the following script:

npm run build:jsx:final

Demo

Now that you've built the project, go ahead and open the demo page located atdemos/index.html.

If you check the file you'll see that the component is already being invoked:

<script type="text/javascript">
    new metal.TodoApp();
</script>

When you invoke a component this way, it is rendered to the body element.