Authoring Components With Stencil
Explore how to author reusable web components using Stencil within the Ionic framework. This lesson guides you through setting up a new Stencil project, understanding the component file structure, using decorators like @Component and @Prop, and utilizing lifecycle methods for optimal component performance. Gain hands-on knowledge to efficiently build and manage dynamic components while leveraging Shadow DOM, JSX rendering, and virtual DOM concepts.
We'll cover the following...
Getting started
We run the following command to create a new Stencil project:
npm init stencil
We will then be presented with the following options to select the type of project we wish to create:
- The
appoption - The
componentoption
The prompts should be reasonably self-explanatory, but for this chapter, make sure to select the component option.
Note: Try running this command in the terminal provided below! Answer the prompts as directed and give our project a suitable name.
Once the project has been created (and we’ll need to run npm install from the command line afterward to ensure that the Stencil packages are installed), we’ll see that an automatically generated custom component named my-component exists in the src/components directory.
Component file structure
If we look inside the my-component directory, we’ll see the following files:
- The