DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Alessandro
Alessandro

Posted on

Learning Svelte Part #4

Props and Components

Hello developers, welcome back to my series of articles about my journey to learn Svelte, this is my 4th post about it, and so far it’s very helpful for my learning, writing down my steps make it public make a good contribution to my knowledge.

Today I am writing about Props and Components.

Normally, a Svelte website is made with of many different components: App.svelte, Header.svelte, Content.svelte, Footer.svelte and so on.
All this components will be structured to make up the full page, the root component it’s the App.svelte, this component will be directly deployed in the Dom by the main.JS file.

We will nest all the others components with it.

Svelte components structure

The question is: why we need to split our webapp in so many different pieces and not write all the code in the App.svelte root component?
The main reason is to keep your code easy to read, tidy and modular.
Imagine we put everything in one module, the chances that our code will be disorganized are very high.

Another reason to split in different modules is that with this method we can easily reuse it, we can create components to use whenever we need.

We can easily import our components in the App.svelte using the syntax import

Script hero

And then we will display it in our HTML like in the follow example:

hero

If we want to change any data in the reused component, we can do that, using props.

How can we pass props to a component?

We need to declare the props we want to pass in, in the component itself, we can call it how we like it and we need to set it to a value that ca be: a string, an object, could be an integer. When the components it’s created it will read the props and the value

properties

To access the prop inside the Footer component we need to declare that we are going to use that variable called β€œprop” (you can name it how you like most)

Image description

We declare the variable β€œprop”, and set to β€œexport” , so now this way we can access the value outside the component.

That’s it for my contribution today, it’s difficult for me write in English but I will keep going, please feel free to leave a comment and roast my explanation.

Top comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!