Metaclass by KTS
1.22K subscribers
133 photos
2 videos
257 links
Курсы для разработчиков, менеджеров и аналитиков от компании KTS

Ссылка на чат школы — @kts_dev
Download Telegram
#frontend

Замыкания и каррирование в JavaScript

На нашем Youtube-канале новое видео: фронтенд-разработчик и преподаватель школы Metaclass Надежда Меркулова расскажет про замыкания и каррирование в JavaScript:
https://youtu.be/DsIvWbpGEBw

Смотрите, сохраняйте себе в закладки и приходите к нам учиться 🎓
#frontend

Сохранение состояния в React с использованием React.useState

Недавно мы выложили небольшое видео на Youtube-канал. Виталий Черков, фронтендер и преподаватель, наглядно объясняет:

«Одно из важнейших понятий в React — состояние. В видео мы разберем это на примере React-компонента счетчика.

Чтобы хранить состояние, в функциональных компонентах React используется инструмент
React-хуки. В примере мы используем хук React.useState».


Посмотрите и вы: ссылка на видео
#программирование #frontend

Немного о верстке с display: grid

В 10-минутном видео frontend-разработчик KTS и преподаватель школы Metaclass Надежда Меркулова расскажет про свойство display: grid, как ведут себя элементы с ним и как позиционировать элементы с помощью этой технологии.

Если flexbox работает только в одном измерении с системой осей, grid работает c системой сеток. Элементы с flex нельзя расположить сразу на нескольких осях. Grid позволяет работать с разметкой в двухмерном пространстве и выравнивать содержимое в обоих измерениях.

Смотрите видео и сохраняйте в закладки, если полезно
#хабр #frontend

Выпустили на Хабре небольшую статью-обзор:
«Remix: руководство по новому open source React-фреймворку»

Remix — React-фреймворк для SSR (server-side rendering). Это означает, что бэкенд и фронтенд реализуются в одном приложении. Рендер происходит на сервере и верстка передается на клиент с минимальным использованием JavaScript. В классическом React-приложении данные сначала отдельно фетчатся, а затем компоненты с ними рендерятся на фронте. Remix, напротив, получает данные на бэкенде и передает отрендеренный HTML напрямую пользователю.

Автор статьи разобрал (а мы перевели) плюсы и недостаки Remix и его отличие от Next.js.

В конце — небольшой туториал по созданию приложения с погодой на новом фреймворке.

Читайте по ссылке
#frontend #react

Совсем недавно вышла новая версия библиотеки для роутинга в React – react-router.
Мы собрали краткий обзор изменений и постарались рассмотреть их с точки зрения истории развития библиотеки. В react-router v6 добавилось много того, что уже когда-то было в библиотеке. Некоторые из этих фичей появились еще в первых версиях, затем их убирали, а теперь вернули в новом представлении.

Прочитать об этом можно у нас на хабре: https://habr.com/ru/company/kts/blog/598835/
#frontend #react

Выпустили небольшой перевод-обзор:

«Remix: руководство по новому open source React-фреймворку»

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

Читать статью
#youtube #frontend

Frontend-фреймворки

Начинаем публиковать фрагменты большой лекции в МГТУ им. Баумана. Ведущий — один из наших управляющих партнеров Сергей Чернобровкин.

Сегодня поговорим про фронтенд-фреймворки и зачем они появились.

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

Задача фреймворков — упростить разработку.

Смотреть видео ▶️
#youtube #frontend

React: подготовка проекта

Еще один небольшой фрагмент лекции по фронтенду. Сегодня рассказываем про подготовку проекта на React. Поговорим про пакетный менеджер NPM, создание проекта и установку пакетов.

Объясняет Сергей Чернобровкин.

Смотреть видео ▶️
#youtube #frontend #сергей_чернобровкин

Create React App: быстрый разбор

Выпустили новое видео на нашем канале. Познакомимся с утилитой CRA, разберем основные команды и создадим первый проект.

Содержание:

0:00 — Что такое CRA
1:08 — Создание папки с нужными файлами
2:03 — yarn start
4:01 — yarn build
5:57 — Что делать дальше
6:40 — Пример продакшна
7:57 — yarn run eject
8:55 — Преимущества и недостатки

Объясняет Сергей Чернобровкин.

Смотреть видео целиком
👍4
#youtube #frontend #сергей_чернобровкин

Основы компонентов в React

Выпустили новое видео на нашем канале ▶️

Разберем, что такое компоненты, какие они бывают, как выстраиваются в дерево и как между ними передавать данные и события.

Содержание:
0:00 — Структура проекта
1:54 — Компоненты
3:00 — Что такое React
4:24 — Компонент-класс
6:01 — Дерево компонентов
7:50 — Props
9:41 — Пример компонента
11:40 — Поток данных и событий

Рассказывает наш управляющий партнер Сергей Чернобровкин.

Смотреть видео целиком
🔥6