# Hello World

The code for the following examples are available in the [building-a-component](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/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.

```javascript
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.

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

...

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

![](https://1908368930-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHDYOz0QETYIPewpGM-%2F-MbJkSidDWDZ7Mv_-Esf%2F-MbJsk6ReHlGrrIhj6iD%2Fimage.png?alt=media\&token=93535b3e-dffe-4112-aa03-7a4d07b01735)

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.&#x20;

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

```javascript
(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. &#x20;

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.

```javascript
var myComponent = function () {

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

}
```

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

...

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