Welcome to the second lesson of our course, "Svelte Basics: Getting Started and Core Concepts." In this lesson, we'll explore Svelte components, the fundamental building blocks of any Svelte application. Components encapsulate functionality, styles, and reactivity, making your code modular and reusable.

Our goal is to create a simple Svelte component and integrate it into your project, helping you understand how components work in practice. Let's get started!

If you're working on your local machine, you need to set up a Svelte development environment. The easiest way to do this is by using Vite, a fast build tool optimized for modern front-end development. Run the following command in your terminal to create a new Svelte project:

Bash
Copy to clipboard
1npm create vite@latest myapp

During setup, select Svelte as the framework and proceed with the default options. Once the project is created, navigate to the directory and install dependencies:

Bash
Copy to clipboard
1cd myapp
2npm install
3npm run dev

This will start a local development server, allowing you to view your Svelte app in the browser.

Note: If you're working in the CodeSignal environment, you can skip this step. Everything you need is already installed, and you can start coding in Svelte right away! 🚀

A Svelte component is typically structured into three main sections: <script>, HTML, and <style>. The <script> section is where you define your component's logic, such as variables and functions. The HTML section contains the markup that defines the component's structure, and the <style> section is where you apply styles to your component.

In Svelte, you can use TypeScript within the <script> tag to enhance your development experience with type safety. This is particularly useful for catching errors early and improving code readability. Remember, TypeScript is optional, but it can be a valuable tool as your projects grow in complexity.

Let's create a simple Svelte component named MyComponent.svelte. In this component, we'll define a state variable using Svelte's runes, which is a new feature in Svelte 5 that replaces the traditional store mechanism. Here's how you can define a state variable:

svelte
Copy to clipboard
1<script lang="ts">
2  let name: string = $state("World");
3</script>
4
5<h1>Hello, {name}!</h1>
6
7<style>
8  h1 {
9    color: blue;
10  }
11</style>

In this example, we use the $state rune to create a reactive state variable name initialized with the value "World". The HTML section displays a greeting using this state variable, and the <style> section applies a blue color to the <h1> element. When you render this component, it will display "Hello, World!" in blue text.

Note: The $state rune can only be used to define a variable, not to update it. Once a variable is declared using $state, you must modify its value directly without reassigning it. For example, instead of count = $state(0); count = $state(count + 1);, simply use count = $state(0); count++; to update the state correctly.

Now that you have created MyComponent.svelte, let's see how to import and use it in another Svelte file, such as App.svelte. Importing a component is straightforward and allows you to reuse it across different parts of your application.

svelte
Copy to clipboard
1<script lang="ts">
2  import MyComponent from '$lib/MyComponent.svelte';
3</script>
4
5<MyComponent />
6<h1>Hello, Fixed!</h1>
7
8<style>
9  h1 {
10    color: red;
11  }
12</style>

In solution.svelte, we import MyComponent and use it within the HTML structure. This demonstrates how components can be nested and reused. Additionally, we add another <h1> element with the text "Hello, Fixed!" styled in red. When rendered, this file will display "Hello, World!" in blue and "Hello, Fixed!" in red, showcasing how styles can be applied independently to different components.

In this lesson, you learned how to create a Svelte component, manage state using runes, and integrate components into your application. We explored the basic structure of a Svelte component, including the use of TypeScript for enhanced development. You also saw how to import and use components, allowing for modular and reusable code.

As you move forward, practice creating additional components and experiment with different styles and states. The upcoming exercises will reinforce these concepts and help you gain confidence in building Svelte applications. Remember, components are the heart of Svelte development, and mastering them will empower you to create dynamic and interactive user interfaces. Happy coding!