> For the complete documentation index, see [llms.txt](https://dsheiko.gitbook.io/ng-backbone/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dsheiko.gitbook.io/ng-backbone/writing_our_first_component.md).
# Writing Our First Component
As we specified in `tsconfig.json` location for our first component will be `src/app.ts`. Within the file we import from the ngBackbone core module class `View` and decorator `@Component`. By using `@Component` we declare that underlying view has to bind to `ng-hello` element of the DOM and use `Hello World!` string as template:
```javascript
import { Component, View } from "ng-backbone";
@Component({
el: "ng-hello",
template: `Hello World!`
})
class HelloView extends View {
}
let hello = new HelloView();
hello.render();
```
To compile TypeScript in JavaScript we run:
```
npm run build
```
In HTML we just need to set binding element `ng-hello` that we refer in the component:
```markup
Hello world!
Loading ...
```
Something is missing, isn't it? Of course we need to load Backbone and its dependencies:
```markup
```
Well, we have Backbone, but have to oad the app itself. According to the `tsconfig.json` TypeScript compiler has generated CommonJS-compliant module. Thus to run it we have at least two options:
* We can use SystemJs/Webpack to load it asynchronously
* We can bundle it for in-browser use with Browserify
## Bundling App with Browserify
Browserify bundles the source CommonJS module with all the dependent modules encountered recursively into a single file, suitable for in-browser use. If you have not installed Browserify you can do it that easy:
```
sudo npm i browserify -g
```
With Browserify we bundle our app source like that:
```
browserify build/src/app.js -o build/app.bundled.js
```
When we have `build/app.bundled.js` we load our app straight in the HTML:
## Loading App with SystemJS
On the contrary to Browserify, SystemJs loads the module and all the encountered dependencies on-the-fly. If we choose this way, here is what we need to add to HTML:
```markup
```
In any case we result with 'Hello World!' string rendered in the browser:
