Stencil : Counter Component

Introduction : Stencil

Stencil is a compiler which is created by the Ionic Framework team, for web components and this compiler generates Web Components with power of virtual DOM layer, async rendering that’s make stencil fast , JSX and TypeScript .Stencil can be used to build simple standalone web components, but it can also be used to build full fledged progressive web apps.

Introduction & getting started: Stencil Counter Component

It is a simple web component used for counting purpose.To start with it first of all clone Stencil starter app from below link:

git clone https://github.com/ionic-team/stencil-starter.git

run following commands:

1. npm install
2. npm start

App will be served at localhost.Open stencil-starter project folder & files in any text editor for example Visual Studio Code , Sublime etc.

• go to the directory src/components /my-app/my-app.tsx
• Below is a my-app.tsx file containing source code for counter.

my-app.tsx

my-app.tsx

go to the directory src/components /my-app/my-app.css

Below is a my-app.css file containing CSS code for counter.

my-app.css

Add component name “ my-app” as a tag in body tag of index.html file.

index.html

Add my-app component in components array of stencil.config.js file.

stencil.config.js

Here is our Counter Component looks like.

Thanks.