Authoring Components With Stencil

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 app option
• The component option

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 my-component.tsx file contains the logic and templating that the component tree is ultimately generated from.
• The my-component.css file contains the styling for the