In this Stencil Project Folder Architecture article, we are going to look at the architecture of stencil when we clone it from github.
What is Stencil Js?
Stencil is a developer-focused toolchain for building reusable, scalable component libraries and design systems. It provides a compiler that generates highly optimized Web Components, and combines the best concepts of the most popular frameworks into a simple build-time tool.
When you clone the project you will get following architecture.
Stencil Project Folder Architecture
As you can see the is src folder and inside src folder there is assets and components folder,
In the assets folder we will add stuff like images,icon,internationalization files etc.
In the component folder we will add components of the application.
When we expand component folder we can see that there are multiple components and it is having .tsx extension
The .tsx extension is required since Stencil components are built using JSX and TypeScript.
You can write your component logic in .tsx file.
I hope you like this Stencil article.
Also Read :
- JavaScript Console Methods
- JavaScript Array Methods
- JavaScript Array Properties
- JavaScript String Methods
- Conditional Statements
- Angular CRUD operation Example
- Angular Material Table example using mat-table
- How to Convert HTML to PDF in Angular Application?
- Top 10 VS Code extensions