Svelte templates and reactivity
Let's start by creating our first components and explore how Svelte deals with templates and reactive statements.
Naming conventions
Names for Svelte components always begin with an uppercase letter. This makes it possible to distinguish Svelte components from HTML tags, which always start with a lowercase letter. For example, Input refers to a Svelte component, while input is the usual HTML tag.
Of particular importance when building a full web application with Svelte is that the root component is conventionally called App.
As for organizing your source files, in this book we'll be storing Svelte component files in the src/components/ folder, in a file carrying the same name as the component. For example, the App component will be located in src/components/App.svelte (recall from Chapter 2, Scaffolding Your Svelte Project, how each .svelte file contains one—and only one—component).
