<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. 🙂