Creating Web Component with Stencil

In this article, we are going to create simple hello world web component using Stencil.

If you ever worked with angular/typescript then It will be very easy for you to learn stencil,
because most of the syntax are same.

Now let’t take a look at stencil compnent

<br />import { Component } from '@stencil/core';<br />@Component({<br />    tag: 'hello-world',<br />    styleUrl: 'hello-world.scss'<br />})<br />export class MyComponent {<br />    render() {<br />        return (<h1>Hello World</h1>)<br />    }<br />}<br />

Did you notice the syntax?
It’s similar to angular, right!
Now, Let’s understand it,

The First basic thing is @Component() decorator, It provides metadata about components, Like which tag name to use and which file to use for the styling that component.

so If we supply tag as hello-world(i.e tag:”hello-world”), then in HTML we will write our component as following

<hello-world></hello-world>

so when this is rendered browser will display Hello World.

Each component has render function which returns JSX content, In this example it is
<h1>Hello World</h1>

so that means when render function will be called it will return Hello World and will be displayed on the browser.

Thanks for reading this articles, stay tune for more articles. 🙂

I hope you like this Creating Web Component with Stencil article. 🙂