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?

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:

<main>

<h1>Hello World </h1>

</main>

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 "/"

The full example:

<script>
  Let isActive = true;
</script>
<main>
{#if isActive}
<h1> Show your title </h1>
{/}

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!

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