Components

Components of Weblabs

Weblabs uses native HTML Components which are directly converted to HTML Elements when described. That means every HTML Component is valid in Weblabs too! But how will we translate HTML to our components?

Let's see an example below:

<p>Hello World</p>

Now this is a HTML component, and how would we describe it in Weblabs? Well here it is

import { p } from '@weblabsjs/core/components'
 
p("Hello World")

As you can see, a HTML component is just a function in Weblabs, that means every html component will have it's own function, like

import { p, h1, h2, div, section } from '@weblabsjs/core/components'

p("I am a pragraph")
h1("I am a large heading")
h2("I am smaller than large heading")
div("I am a container")
section("I am a section")

But in HTML, you can nest components, like

<div>
    <p>Name: Weblabs</p>
    <p>Work: Javascript Framework</p>
</div>

So how we can do it in Weblabs? Well all the function you just saw as components also accept multiple components as their child elements, i.e

import { div, p } from '@weblabsjs/core'

div(
    p("Name: Weblabs"),
    p("Work: Javascript Framework")
)

Note: the html tag <var> clashes with the keyword var in javascipt, hence if you want to use the <var> tag, call the Var() function instead

It's that simple! You can now create layouts entirely on this architecture, and the intellisense that your IDE will provide, it will be even faster and you will have amazing developer experience!