Привет всем, это серия постов, которые я хочу написать, чтобы показать возможности и то, как легко создавать компоненты с помощью 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 и используете ли вы его в проекте, и я надеюсь, что этот небольшой урок был вам полезен. Если у вас есть какие-либо вопросы, пожалуйста, оставьте в разделе комментариев.