Skip to content

Getting started

Jump to bottom
Roberto Asiel Guevara Castañeda edited this page Nov 27, 2019 · 6 revisions

Getting started

Once you have installed the module you can start to write components for your application. Let's learn how do can do it.

First we need a workspace folder, so, let's do it

~$ mkdir trebor-example && cd trebor-example

Now we will create a file named hello-world.html in the workspace folder

~$ touch hello-world.html

It is time to work with a text editor now, so, open your favorite and put this code in the file:

<!-- hello-world.html -->

<h1>Hello, {name}!</h1>

<script>
  export default class {
    name = 'World'
  }
</script>

Note: We will use trebor as a cli for simplicity but you can try it with webpack or rollup if you want.

Let's explain a little bit what is going on here:

  • We have make an html file that looks like a Single file component, if you has been worked with Vue.JS.
  • We have put a header 1 (<h1>) tag with some text and a variable named name into braces
  • We have created an script tag that export a class with a property named name

Well, because i like React, Vue and Angular syntax, some of expression are similar to the template syntax of one or other. This is pretty much simple to understand since they are very popular frameworks.

So, let's compile the file and look what happened

~$ trebor -i hello-world.html

Note: Take a look to the options and how to use trebor typing trebor -help in the console.

After run the command we can see a file named hello-world.js beside our html file:

trebor-example
├─ hello-world.html
└─ hello-world.js

Note: If you wish, you can take a look inside the .js file and see what is going on in there.

Now let's try this new component in the browser. Make an index.html file and put this code in there:

<!DOCTYPE html>
<html>
  <main></main>
  <script src="hello-world.js"></script>
  <script>
    var hiThere = new HelloWorld();
    hiThere.$mount('main');
  </script>
</html>

Open the index.html in your favorite browser and see what happened. Play with the console and try to change the name like this:

hiThere.$set('name', 'somebody');

You should see how 'World' was replaced with 'some body' instantly. Is it not this fabulous? 👏😜

Now take a look to the next section to see how work with other amazing things.

Clone this wiki locally