In this Creating Web Component with Stencil 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
import { Component } from '@stencil/core';
@Component({
tag: 'hello-world',
styleUrl: 'hello-world.scss'
})
export class MyComponent {
render() {
return (<h1>Hello World</h1>)
}
}
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. 🙂
Also Read :
- Angular Reactive Forms
- React Complete Course
- Get started with Bootstrap
- Chakra UI Setup in React
- Material UI Setup in React
- Tailwind CSS Setup with Next.js
- Vs code shortcut key