Привет всем, это серия постов, которые я хочу написать, чтобы показать возможности и то, как легко создавать компоненты с помощью Svelte, но прежде всего нам нужно начать с самого начала.

Что такое Свелте? (с моих слов🙊 )

Svelte — это фреймворк FrontEnd, такой же как Vue, React и Angular, но с другим подходом к разработке компонентов, а также способом обработки ресурсов нашего браузера, например, Svelte запускается во время сборки. Более подробно вы можете узнать по этой ссылке.

После того, как мы немного узнали о Svelte, мы можем перейти к моей любимой части... давайте кодить!!

Работать со Svelte очень просто, но прежде чем начать, мы должны убедиться, что у нас есть установленный узел для выполнения следующих команд, Примечание: пожалуйста, выполняйте в том же порядке.

npx degit sveltejs/template project-name
cd project-name
npm i
npm run dev

После того, как команды были выполнены успешно, вы можете получить доступ в своем браузере, и приложение будет работать на сервере http://localhost:5000, вы увидите что-то вроде этого.

Если вы используете редактор кода (VS Code cof cof 🤭), вы увидите следующую структуру папок.

Как вы видите, приложение выглядит как обычное приложение Javascript с папкой package.json и src, но важным часть здесь следующие файлы.

App.svelte ⚙️

Это первый компонент Svelte в приложении, поэтому он имеет расширение .svelte. Важным здесь является то, что все компоненты должны иметь это расширение, а также одинаковую структуру. Здесь есть два важных тега.

Стиль: Здесь у нас будет весь стиль CSS компонента, и мы можем использовать простую нотацию CSS.

Script: это раздел, в котором находится наша логика javascript, а также здесь мы можем импортировать другие компоненты или получать наши реквизиты, как в предыдущем примере. с именемprop.

Main.js

Этот файл является точкой входа в приложение, поэтому в основном здесь мы ссылаемся на основные компоненты приложения. Пока нам не нужно ничего менять здесь.

Создание нашего первого компонента 📝

На этом этапе вы можете поиграть с файлом App.svelte, возможно, изменив стили или добавив больше элементов HTML внутрь, но я хочу показать вам, как создать новый компонент с нуля.

Сначала нам нужно создать новый файл в нашей папке src, для простоты я назову этот компонент Counter.svelte, пожалуйста, не забудьте про расширение, это очень важно.

Наш компонент должен иметь 2 важных тега, раздел style и script, как мы видели в App.Svelte, а также я добавлю ‹div› тег, это собственный HTML-тег.

Счетчик должен иметь переменную для сохранения результата счетчика, а также нам нужна функция, которая будет выполняться каждый раз, когда мы нажимаем кнопку.

<script>
let counter = 0;  // counter variable
const handleClick = () => { //Function to add 1 to our variable
counter += 1;
};
</script>
<style>
button{
border:0px;
background: #3380ef;
color:white;
}
</style>
<div class=”counterComponent”>
<button on:click={handleClick}>plus 1</button>
<section>My couter is: {counter}</section>
</div>

Следующий шаг — скопировать и вставить этот код в наш компонент Counter, а затем нам нужно изменить файл App.Svelte, чтобы импортировать новый компонент. App.Svelte должен выглядеть примерно так.

Если все работает, ваша страница будет автоматически обновляться, и вы увидите синюю кнопку, и каждый раз, когда вы нажимаете ее, число будет добавляться на 1.

Итак, поздравляю, теперь вы создали свой первый компонент, я рекомендую вам больше работать с ним, например, изменить стили, добавить новые функции и создать новые компоненты.

Вывод.

Svelte — новичок по соседству, но он демонстрирует большой потенциал, и это хороший способ создавать легкие приложения, возможно, его неудобно реализовывать в корпоративном приложении или в большом проекте, но он может быть очень полезен для быстрого запуска или средние проекты.

Пожалуйста, дайте мне знать, что вы думаете о svelte и используете ли вы его в проекте, и я надеюсь, что этот небольшой урок был вам полезен. Если у вас есть какие-либо вопросы, пожалуйста, оставьте в разделе комментариев.