Uma introdução ao Stencil.js

Gabriel Tanner Segue 24 de junho · 10 min ler Foto por Domenico Loia em Unsplash

Stencil é um compilador que gera componentes da Web desenvolvidos pela equipe Ionic. O Stencil combina os melhores conceitos das estruturas mais populares em uma ferramenta simples de tempo de criação.

O Stencil usa recursos populares, como o Virtual DOM, o Typescript e o JSX, para criar componentes da Web baseados em padrões que podem ser usados com todos os frameworks front-end conhecidos (Angular, React, Vue).

O objetivo principal deste artigo é fornecer uma visão geral rápida do framework Stencil e como usá-lo para construir Web Components . Também veremos como podemos construir nosso componente para que ele possa ser usado nos frameworks frontend mais populares (Angular, React, Vue, Ember).

Então, sem perder mais tempo, vamos começar.

Configuração

Antes de começarmos a criar um componente, primeiro precisamos configurar nosso ambiente de desenvolvimento Stencil. Para isso, você precisa ter o Node.js instalado e, em seguida, precisar clonar o projeto inicial.

 clone git https://github.com/ionic-team/stencil-component-starter stencil-starter 
cd stencil-starter
origem rem remota do git
npm install

Esses comandos clonam o projeto stencil-component-starter e o salvam no armazenamento local. Depois disso, passamos para a pasta e instalamos todas as dependências do projeto.

O projeto inicial fornece um ambiente de desenvolvimento padrão do Node.js, incluindo algumas configurações básicas, um servidor de desenvolvimento e alguns componentes de exemplo.

Agora que concluímos a configuração básica do estêncil, podemos começar a criar nosso primeiro componente.