Stenciljs is a Compiler Helps us to build Web Components and use
everywhere in Your JavaScript Projects(Angular, React, Vue)
without a need to copying onething again and again.You can either use
it in your vanilla JavaScript.
Stenciljs uses the syntax which is a combination of the jsx and typescript We called it as tsx.
Let's Build a web component Using Stenciljs
Open Your Terminal and clone it from GitHub
git clone https://github.com/ionic-team/stencil-component-starter my-header
cd my-header
git remote rm origin
npm install
after running npm install all dependencies installed
now run npm start to power up the server
Open the project in your favorite code editor
folder-structure-stenciljs
Open your src folder it shows the components Folder
Delete everything in the components folder
Let’s build a new component from the scratch
Add the new folder named my-header in the components folder
In the my-header folder
create two files show in the below image
Now open my-header.tsx file and add the below code
Let us talk about what these code is doing
1). At line one we are importing the Component decorator and Prop decorator from the stencil core.
2). Next, we want to config the name of the component and CSS URL.
@Component({
tag: "my-header",
styleUrl: "my-header.css",
shadow: true
})
3). We already discussed stencil is the combination of the jsx and typescript.In react we are writing props using the {props.first} but in the stenciljs we use it with Prop decorator.
4). So that we want to tell the stenciljsi want to use these props in the my-header component.
@Prop() first: string; //type string
@Prop() second: string;
@Prop() third: string;
5). Let us get to the render method we already saw it in the reactjs
in the render method, we can write HTML and javascript combination
we need to return the jsx same as react.
render() {
return (
<header>
<nav>
<li>{this.first}</li>
<li>{this.second}</li>
<li>{this.third}</li>
</nav>
</header>
);}
We are referencing to the props using this.Propname
Now let's add the little bit of CSS in our CSS file already created
Now the final step we want to add our component in the HTML file
we added props to the HTML file we already defined in our my-header component
It looks like these
Thanks for spending your valuable time..
Let's discuss in the next post how to use this component in the React, Vue and Vanilla JavaScript
How to use Stencil components in Angular apps
Resources
Top comments (0)