How to  Build the Reusable Web Components Using Stenciljs
Tags: webcomponents, javascript, angular, react
Published: 2018-04-19 14:13:03

---
title: How to  Build the Reusable Web Components Using Stenciljs
published: true
description: stencil helps us build web components
tags: webcomponents,javascript,angular,react
cover_image: https://cdn-images-1.medium.com/max/800/1*-Reld3p8qx-G3YVwnFsn4g.png
---

**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
![image](https://cdn-images-1.medium.com/max/800/1*gZwWEh8pJbwXlaaFgSZZCQ.png)

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
![](https://cdn-images-1.medium.com/max/600/1*7HwYaSunbmRxBSjDNwUHSw.png)



Now open my-header.tsx file and add the below code

{% gist https://gist.github.com/saigowthamr/d8e85db463efb8bae0c82b77a784ccc0 %}

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

{% gist https://gist.github.com/saigowthamr/0e7cf5c3ed753e52ac929f2d90bf9e56 %}

Now the final step we want to add our component in the HTML file

{% gist https://gist.github.com/saigowthamr/52583f1fcb9b0a48fd976fbc8ac92567 %}

we added props to the HTML file we already defined in our my-header component

![header](https://cdn-images-1.medium.com/max/800/1*LLmvJiXNjP39uFlc23UwFQ.png)

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](https://medium.com/@saigowthamr/how-to-use-stencil-components-in-angular-apps-cd916043160b)


[Code Repository](https://github.com/saigowthamr/stencil-header)

**Resources**
- [Learn more about stencil](https://stenciljs.com/docs/getting-started/)

- [Learn more about decorators](https://stenciljs.com/docs/decorators/)