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 :)