Видео курс по Svelte
2 года назад·2 мин. на чтение
Полный видео курс по Svelte
1. Что такое Svelte и как он устроен?
В этом уроке проинициализируем default проект на Svelte и рассмотрим структуру default проекта. Смотреть на Rutube2. Как устроен Компонент в Svelte?
В этом уроке рассмотрим компоненты Svelte, пропс (props
, $$props
, $$restProps
, export let prop
), реактивность SvelteJS, блоки script
и style
, изоляцию стилей и :global()
Смотреть на Rutube
3. Жизненный цикл Svelte компонента
В этом видео рассматриваем методы жизненного цикла компонентов Svelte, а именноonMount
, onDestroy
, beforeUpdate
, afterUpdate
, а также функция tick
.
Смотреть на Rutube
4. HTML шаблоны в Svelte
В этом уроке рассмотрим cинтаксис HTML шаблонов Svelte, а именноif
, each
, await
, key
, а также html
и debug
.
Смотреть на Rutube
5. Как работать с событиями в Svelte?
В этом уроке по Svelte рассматриваем работу с событиями в Svelte, а именно директивуon
, модификаторы событий, переброс событий, createEventDispatcher
и т.д.
Смотреть на Rutube
6. Байндинги и Привязки - Svelte Bindings
В этом уроке рассмотрим привязки в Svelte, синтаксис и директивуbind:
, привязки к компонентам и т.д.
Смотреть на Rutube
7. Хранилище Svelte Store
В этом уроке рассмотрим store в Svelte и разновидности хранилищ: writable store (хранилище для записи), readable store (хранилище только для чтения), derived store (производные хранилища) и custom store (пользовательские хранилища). Смотреть на Rutube8. Анимации и переходы в Svelte - Motion, Transition and Animation
В этом видео рассматриваем анимации в Svelte, а именно анимации значений (Svelte motion), анимации переходов (Svelte Transition), Svelte Animate, директивыtransition
, in
, out
и многое другое.
Смотреть на Rutube
9. Действия и директива use - Svelte Actions
В этом видео рассматриваем Действия в Svelte, для чего они нужно и как ими пользоваться. Добавляем в проект директивуuse
, отправляем события из Действия и реализовываем функции действий - destroy
и update
.
Смотреть на Rutube
10. Слоты - Svelte slots. Context Модуль - Svelte module context
В этом видео рассматриваем слоты в Svelte и работу сscript
c context="module"
.
Смотреть на Rutube
11. API контекста - Svelte Context API
В этом видео рассматриваем возможности контекста Svelte, функцииsetContext
, getContext
и hasContext
, а также применение CSS классов по условию.
Смотреть на Rutube
12. Специальные элементы - Svelte Special elements
В этом видео рассматриваем специальные элементы в Svelte. Смотреть на Rutube Исходный код проектаКак добавить шрифт в React приложение
2 года назад·2 мин. на чтение
В HTML шрифт используется для указания начертания шрифта, размера шрифта, типографики текста. Вы можете добавлять шрифты в свое React приложение разными способами. В этой статьей рассмотрим два быстрых способа добавления шрифтов в React приложение.
Использование link
со ссылкой на шрифт
Можно ссылаться на любые шрифты, размещенные в Интернете, используя тег <link>
внутри HTML-файла. Давайте рассмотрим пример применения Google шрифтов с помощью тега <link>
.
- Перейдите на fonts.google.com
- Выберите понравившийся шрифт и скопируйте его имя
- Вставьте в
index.html
линк со ссылкой на шрифт. Если ваше приложение создано с помощьюcreate-react-app
, вы найдетеindex.html
в папкеpublic
.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
- Настройте css класс с помощью веб-шрифта в таблице стилей, указав
font-family: 'Font Name'
, например, вindex.css
:
.font-dancing-script { font-family: 'Dancing Script'; }
- Примените селектор в любом React компоненте
// App.jsx import './App.css'; function App() { return ( <div className="font-dancing-script"> <p>Hello</p> </div> ); } export default App;
Использование загруженного шрифта с @font-face
В некоторых ситуациях подключение шрифтов онлайн может быть недоступно или запрещено. Классический пример: пользователи вашего приложения используют интранет и имеют ограниченный доступ к Интернету. В таких случаях шрифты должны быть загружены локально и упакованы в приложение.
@font-face
— это CSS правило для определения шрифта путем указания шрифта с помощью URL-адреса.
- Создайте папку с именем
fonts
вsrc
. - Загрузите необходимые шрифты в папку
src\fonts
. В этом примере мы загрузили шрифтDancing Script
.
- Затем импортируйте шрифты в файл
index.js
// index.js import './fonts/DancingScript/DancingScript-Bold.ttf';
- В
index.css
добавьте
@font-face { font-family: 'DancingScript'; src: local('DancingScript'), url('./fonts/DancingScript/DancingScript-Bold.ttf') format('truetype'); font-weight: bold; }
- Теперь добавьте в файл
index.css
имя класса, в котором используется этот font family.
.font-dancing-script { font-family: "DancingScript"; }
- Используйте это имя класса в своем React компоненте.
// App.jsx import './App.css'; function App() { return ( <div className="font-dancing-script"> <p>Hello</p> </div> ); } export default App;