DEV Community

Cover image for Beginner to beginner introduction to Svelte

Posted on • Updated on

Beginner to beginner introduction to Svelte

Conditional Rendering

Hello friends, this is the second chapter of my series about Svelte, a new idea of framework.

This series of posts are not intended to teach anyone, they are basically a way for me to learn better the topic, so be free to roast me or help me where I make mistakes.

What is Conditional Rendering?

Question mark

As the official documentation says:
“ Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app“.

I can’t really say my opinion on other frameworks, I am really new in this area, so I’ll take it to granted!

In the last few days, I’ve been playing with it, and I can tell you that it’s really easy to grasp it and hold it and at the same time if you are new to frameworks, the syntax it’s easy to learn.

For me the difficult part it’s, no it’s not difficult, let’s say unusual, it’s working with different components.

I usually play with single app or a single page with a single style sheet and another for JavaScript, but I see the convenience and speed of working on small chunks of code and puzzle it together, I like it!

Remember that this is all new for me, using the JavaScript power in this way it’s vitalizing my knowledge about it.

Today i am writing about: Conditional Rendering

Conditional rendering means the way we show or hide elements from the Dom, based on JavaScript conditions, that we write directly in the HTML.

Render a component is extremely simple:


<h1>Hello World </h1>

Enter fullscreen mode Exit fullscreen mode

Basic if conditions start with a special syntax:

{#if isActive} // we open the condition with "#"

<h1> Your title goes here </h1> // HTML

{/if}  // We close the condition with "/"
Enter fullscreen mode Exit fullscreen mode

The full example:

  Let isActive = true;
{#if isActive}
<h1> Show your title </h1>
Enter fullscreen mode Exit fullscreen mode

We render the h1 element into the dom if isActive property is true.

Now we can chain differents statements, another elseblock or an else if block and so on.

A very good place to play with Svelte is the REPL on the Svelte official page, the follow link is related for the Conditional Rendering

That’s it for my contribution about conditional rendering, there is a lots more to add to it, but this set of my first post will be not very long, because I am still not use to it, but I promise I will improve my writer skills along my improvements with Svelte .

Happy Halloween! halloween pumpkin

See you next Sunday, during the week you can find me on Twitter.

Top comments (2)

codeyourwings profile image

Hey Alessandro, it's pretty awesome that you are sharing your experience with Svelte. I really enjoy reading it and it's really helpful.

I have a question that I am struggling with:
How much JavaScript should you know inorder to get started with Svelte?

I know it's not an easy question to answer.
So I just want to know whether basic knowledge of JavaScript be enough to get started with Svelte, according to your experience?


alessandrogiuzio profile image

Hello B, thank you for your comment.
I think you need a good grasp on the basics of JS before to start with Svelte.
The Svelte syntax it's very easy to learn, so you can practice and improve your JS learning Svelte at least the basics.