Stencil is a compiler for Web Components. It uses TypeScript and JSX to create Web Components. It even comes with a lot of features that are missing in the vanilla Web Components that can be used to make good single-page web apps.
Let's get a better idea of what Stencil can do with the help of a <hello-world> component. This component required a little understanding of TypeScript as well as JSX. If at any point in time you would like to take a look at the docs, you can find them here:
- TypeScript: https://www.typescriptlang.org/.
- JSX: https://reactjs.org/docs/introducing-jsx.html.
I will try to keep my code as simple as possible so that you don't have to look at the docs. Now that we have that out of the way, let's create a hello-world component using Stencil.