How to Build Reusable Web Components Using Stenciljs

from stenciljs.com

Stenciljs is a Compiler Helps us to build Web Components and use everywhere in Your JavaScript Projects(Angular,React,Vue) without need to copying one thing again and again.You can either use it in your vanilla JavaScript.

Stenciljs uses the syntax which is combination of the jsx and typescript We called it as tsx.

Lets Build a WebComponent 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 every thing in the components folder

Let’s build a new component from the scratch

Add new folder named my-header in the components folder

In the my-header folder

create two files show in

the left-side image

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

Lets 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 stenciljs i want to use these props in my-header component

@Prop() first: string; //type string
@Prop() second: string;
@Prop() third: string;

5.Lets get to the render method we already seen 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 lets 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 in the html file we already defined in our my-header component

header-component

It looks like these

Thanks for spending your valuable time..

Lets discuss in the next post how to use these component in the React , Vue and Vanilla JavaScript

How to use Stencil components in Angular apps

Follow me on twitter

Code Repository

Resources

Learn more about stencil

Learn more about decorators

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.