Understanding Stencil.js

Possibly save 1 hour of your time: Here are some resources that I have used to learn Stencil.js.

Decorators

  • @Prop
    • Props are custom attribute/properties exposed publicly on the element.
    • string, number, boolean, object, array
    • Children components should not know about or reference parent components, so Props should be used to pass data down from the parent to the child.
    • By default, when a member decorated with a @Prop() decorator is set, the component will efficiently re-render.
    • It’s important to know, that @Prop is immutable from inside the component logic. Once a value is set by a user, the component cannot update it internally.
    • Within the component class, the Props are accessed via the this operator.
    • Externally, Props are set on the element.
    • They can also be accessed via Javascript from the element.
  • @PropWillChange and @PropDidChange
  • @State
    • can be used to manage internal data for a component. This means that a user cannot modify the property from outside the component, but the component can modify it how ever it sees fit.
    • Any changes to a @State() property will cause the components render function to be called again.
  • @Method
    • used to expose methods on the public API.
    • Functions decorated with the @Method() decorator can be called directly from the element.

 

Videos

Announcement

https://www.youtube.com/watch?v=UfD-k7aHkQE

Getting Started

https://www.youtube.com/watch?v=MqMYaT1GlWY

 

Articles

Understanding Component, Prop, State, Event, EventEmitter, Listen:

https://coryrylan.com/blog/create-your-first-web-component-with-stencil-js

Understanding Constructor:

https://codecraft.tv/blog/2017/10/10/smile-to-unlock-webcomponent-stenciljs/

Understanding :

https://www.javascripttuts.com/creating-a-todo-application-using-stencil/

 

Lots of resources here:

https://github.com/mappmechanic/awesome-stenciljs/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s