Hello World

The code for the following examples are available in the building-a-component project inside the \hello-world folder.

Render

The most basic WireBootstrap component is a function or class that can be instanced and contains a public method called render that takes one parameter. That parameter is the id of the element into which the component will render its content.

The following example uses plain JavaScript to create the myComponent component. When rendered, it will write the text Hello World inside the element passed into the render method.

var myComponent = function () {

    this.render = function (el) {
        document.getElementById(el).innerHTML = "Hello World";
    }

}

The example below creates a new instance of the component and renders it inside the component1 DOM element on the page.

<div id="component1"></div>

...

new myComponent().render("component1");

So as not to create the component function as a loose global, it can be created inside an anonymous function and added to an already existing global object.

The example below creates the component function on an existing global variable named app.

(function () {

    app = app || {};

    app.myComponent = function () {
    
        ...
                
    }
    
})();

...

new app.myComponent().render("component1");

Configuration

In the example above, the component displays the static text Hello World. In order to make this text configurable outside of the component, a configuration parameter can be added. A configuration parameter allows any number of settings to be passed into the component in order to control attributes such as data, display, and functionality.

Use the second parameter to the render function to pass a configuration object into the component.

In the example below, the same Hello World text is passed into the component using the configuration parameter instead of being hard-coded inside the component.

var myComponent = function () {

    this.render = function (el, config) {
        document.getElementById(el).innerHTML = config.value;
    }

}

<div id="component1"></div>

...

new myComponent().render("component1", {
    value: "Hello World"
});