For Begineers

Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app declaratively out of components that combine markup, styles and behaviours.

Acknowledgements

• HTML
• Javascript
• CSS

Basic Svelte Knownledge Features

Reactive Statement

• is a way to make a state and trigger some statement when the state are changes.

Props

• is a value that we pass from parent to the child component

Conditional Statement

• is a way we can render some HTML element using conditional function like if else

Slots

• is a way to pass the HTML element from the parent to the child component

Binding Value

• is a way to bind for example an input element to changes the state

Loops

• is a way to made an iteration inside of HTML element

Event Forwarding

• is a way when we want to set the function / statement from the parent and accessed from the child component

Event Modifier

• is a way to modify the event
• once : makes sure the event can only fire once (removes handler)
• preventDefault : prevent the default action (e.g e.preventDefault)
• self : only fires the event if the clicked element is the target