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:

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:

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 section is where you apply styles to your component.