How Stencil is different from React and Angular?

Question

I am familiar with Angular and know basics of React. I was exploring stencil docs, I found stencil component has both @Component decorator and render() method -

component.tsx

import { Component, Prop } from '@stencil/core';  @Component({     tag: 'my-first-component',     styleUrl: 'my-first-component.scss' }) export class MyComponent {     // Indicate that name should be a public property on the component     @Prop() firstName: string;      render() {         return (             <p>             My name is {this.firstName}             </p>         );     } }  

Help me to understand that how Stencil is different from angular and react and how it works?

Answer 1

Stencil is not a framework, its just a compiler that turns classes with decorators into standards-based Web Components. This means that you can generate a collection of stencil components and use them in Angular, React, Vue or Polymer without any problem.

Basically, Stencil combines some of the best features from traditional frameworks, but outputs 100% standards-compliant Custom Elements, thats why you have @Component (Angular), render method (React)...

To make your first component i suggest to read the docs about your first component. You have everything explained there :)