{"id":21626,"date":"2017-11-20T20:51:09","date_gmt":"2017-11-20T20:51:09","guid":{"rendered":"http:\/\/getting_started_with_stenciljs"},"modified":"2017-11-20T20:51:09","modified_gmt":"2017-11-20T20:51:09","slug":"getting_started_with_stenciljs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/getting_started_with_stenciljs","title":{"rendered":"Getting Started with StencilJS"},"content":{"rendered":"

StencilJS<\/a> is a new compiler for composing user interfaces using pure custom components. Stencil enables you to build components using new, cutting-edge technologies, such as TypeScript and JSX, then generates a pure custom component<\/a> that can be used anywhere supported. This means you can import a Stencil generated component into React, Angular, Vue, etc.<\/p>\n

Background<\/h2>\n

Stencil is basically a compiler, not necessarily a UI library. A compiler that transforms TSX (TypeScript + JSX) into self-contained custom components.<\/p>\n

Before you start learning about the tool, it\u2019s important to note that Stencil is not another heavy JavaScript framework you need to learn. If you have worked with Angular or React, or understand web components, then Stencil is worth a look.<\/p>\n

Stencil enables you to write some TSX and SCSS, which it compiles down into shippable components. It was built by the Ionic team to help them write smaller, reusable components without having to carry along the weight of Angular. However, this led to solving a more general problem. We can write platform-independent component with our favorite tools (TS, JSX, etc) and compile to standard custom components which can then be used with any framework and supporting browsers. All features of Stencil boil down to optimization and performance, which is the motivation behind Stencil.<\/p>\n

Stencil also provides a lot of progressive features out of the box, including easy server-side rendering and service worker installation. Now let\u2019s take a look at a practical approach to using Stencil and some of its interesting features.<\/p>\n

Installing Stencil<\/h2>\n

Even Stencil\u2019s installation is simple. You can clone a starter template from GitHub and install the npm dependencies. No major configuration, just clone, install and run.<\/p>\n

Clone the repository from GitHub to your machine:<\/p>\n

# Clone starter<\/span>\ngit clone<\/span> https:\/\/github.com\/ionic-team\/stencil-starter.git todo<\/span>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Install the dependencies:<\/p>\n
# Enter the cloned project<\/span>\ncd todo\n\n# Install dependencies<\/span>\nnpm install\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
You can start the app at port 3333<\/code> using the following command:<\/p>\n
npm start\n<\/code><\/span><\/pre>\n
All our component code will be written in src\/components<\/code>. You can ignore the my-name<\/code> starter component, since we will remove it from the face of the project.<\/p>\n
Creating Components<\/h2>\n
Each component is saved in a containing folder, such as a TSX file. The containing folder also can contain an SCSS file for the component\u2019s styles.<\/p>\n
Let\u2019s start with a container component that will serve as the app\u2019s shell. Create a folder named site<\/code> in the components<\/code> folder, then add site.tsx<\/code> and site.scss<\/code> files in the folder. You just created an empty Stencil component.<\/p>\n
Throughout the article, we will skip the SCSS contents for brevity. You can grab them from the GitHub repo provided<\/a>. With that in mind, let\u2019s add some component content:<\/p>\n
\/\/ components\/site\/site.tsx<\/span>\nimport<\/span> { Component } from<\/span> '@stencil\/core'<\/span>;\n\n@Component({\n  tag<\/span>: 'todo-site'<\/span>,\n  styleUrl<\/span>: 'site.scss'<\/span>\n})\nexport<\/span> class<\/span> Site<\/span> <\/span>{\n  \n  render() {\n    return<\/span> (\n      <div<\/span> class<\/span>=\"wrapper\"<\/span>><\/span>\n        <nav<\/span>><\/span>\n          <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n            <h2<\/span>><\/span>To - Do<\/h2<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/nav<\/span>><\/span>\n        <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n          <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\n            <div<\/span> class<\/span>=\"col-md-offset-4 col-md-4 col-sm 12\"<\/span>><\/span>\n\t\t\t\t{\/* Todo App goes here *\/}\n\t\t\t\t\n            <\/div<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span><\/span>\n    );\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n