Stencil comes with a lot of features to build components. Let's first set up our folder to write a component. You can do so by typing the following command in the Terminal:

npm init stencil

You will be shown a bunch of options, from which you can select the component. On selecting the component option, feel free to enter a name for the project. I chose stenciljs-app. And this would print out an output that looks something like this:

 Pick a starter › component
 Project name › stenciljs-app
 All setup in 8.19 s

  Next steps:
   $ cd stenciljs-app
   $ npm start

  Further reading:
   - https://github.com/ionic-team/stencil-component-starter

This will create a starter project with a default component in it. You can run the project by typing the following command:

cd stenciljs-app
npm start

This will run the stenciljs-app project on localhost:3333 in the browser. It will also show the default component, <my-component>, as a part of the output. This is technically the <hello-world> component provided by default inside our project. But we will create our own <hello-world> component from scratch.

In order to create our <hello-world> component, we need to first complete some pre-requisites. These are as follows:

1. Create a folder called hello-world inside the src/components folder.
2. Create a file called hello-world.tsx inside this hello-world folder. We are using the .tsx extension because it is a TypeScript file. Stencil will compile this file to a .js file. We do not have to worry about it.
3. Create another file called hello-world.css inside the hello-world folder. This is where we will be writing the CSS for this component.

Now that we have the setup complete for the <hello-world> component, let's start writing the code for it. This is what hello-world.tsx looks like:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'hello-world',
  styleUrl: 'hello-world.css',
  shadow: true
})

export class HelloWorld {
  render() {
    return (
      <div>Hello World</div>
    );
  }
}

In the first line, we are importing the Component and h objects from the stencil library. When we talk about technical jargon, we will be calling this @Component as @Component decorator. As we can see, we are simply stating the tag for the component, the CSS it needs to use for styling, and whether the component needs to render in a shadow DOM or not. Inside the HelloWorld class, we are simply returning the JSX for this component. If you are from the React background, then it should be pretty straightforward. But if you are new to JSX, for the sake of simplicity, you can think of it as a way to write HTML inside JavaScript.

So, we have now created our first Stencil component. Now, to see it on the web page, you can simply add the <hello-world> tag in the index.html file inside the src directory. Stencil will pick it up automatically, create its include, and compile it for you. You just have to refresh the page.

Now that we know how to create a Stencil component, let's dive into the next section where we create nested Stencil Components.