> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/wirebootstrap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/building-a-component/hello-world.md).

# Hello World

The code for the following examples are available in the [building-a-component](/wirebootstrap/working-with-components/building-a-component.md) 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");
```

![](/files/-MbJsk6ReHlGrrIhj6iD)

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"
});
```