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

Ссылка на чат школы — https://t.me/kts_dev
Download Telegram
#хабр #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
#youtube #frontend #сергей_чернобровкин

React State

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

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

Содержание:
0:00 — Что такое State
0:55 — useState — подцепляемся к состоянию
1:58 — setCounter: изменения происходят не сразу
5:11 — Функция-сеттер

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

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

Жизненный цикл React-компонентов

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

Разберем этапы жизненного цикла у React-компонентов и как с ними работать.

📋 Содержание:
0:00 — Процессы жизненного цикла
1:00 — Этапы обновления
1:24 — Жизненный цикл функционального компонента
2:09 — Демо жизненного цикла
4:57 — useEffect: асинхронные операции
7:05 — useEffect: массив обновлений
9:26 — useEffect: отслеживаем обновления
10:07 — useEffect: сбрасываем подписки
13:02 — Hooks

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

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

Правило хуков

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

Как должны располагаться хуки и почему. Расскажем про правильное использование хуков и где их использовать не надо.

📋 Содержание:
0:00 — где должны располагаться
0:13 — пример неправильного использования
01:08 — правильное использование
01:25 — как можно вызывать хуки
01:38 — как нужно именовать хуки
02:03 — какие еще есть хуки

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

Смотреть видео целиком
👍7
#хабр #frontend #react

Заводная boop!-статья на Хабре

Что заставляет девочек визжать от восторга, а парней украдкой смахивать скупую слезу от умиления? Конечно, hover-анимация!

В нашей новой статье-переводе мы попробуем научиться этой хитрой магии

Если не знаешь, чем зацепить на первом свидании — срочно читай: https://habr.com/ru/company/kts/blog/670234/

(но лайки обязательны в любом случае 👍)
🔥6👏1
#youtube #frontend #сергей_чернобровкин

Обновление компонентов

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

Поговорим про алгоритм оптимизации, React.memo, Key и React.fragment.

📋 Содержание:
Алгоритм React для оптимизации компонентов 0:00
Как это работает 1:02
Что делает React.memo 1:49
Свойство Key 2:40
React.Fragment 4:20

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

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

Роутинг

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

Опишем роуты, научимся делать навигацию, разберем хуки react-router.

Содержание:
Что такое роутинг 0:10
Демо 2:32
Route 3:58
Каким IDE лучше пользоваться для написания приложений на React 4:44
Навигация 6:50
Вложенные роуты 7:48
Другие хуки react-router 17:04
Типы роутеров 28:30

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

Смотреть видео целиком
🐳5🔥3🎉1
#youtube #frontend #сергей_чернобровкин

Context

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

Обычно данные идут от родительского компонента к дочернему. Разбираем, какие проблемы это может вызвать и что с этим делать.

Содержание:
Что такое Context 0:00
Как это работает 1:00
Context в классах 3:08
Несколько источников 4:06

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

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

Менеджеры состояния в React

«Это же уже Redux»! — скажете вы. Всё так, но всё законно... Об этом мы тоже поговорим в новом видео на Youtube-канале ▶️

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

Содержание 💬
0:00 О Менеджерах состояния
1:20 Зачем управлять состоянием
2:13 Handmade: подробное demo, пишем свой мини-менеджер
6:50 Зачем использовать useMemo
15:37 Актульные технологии в 2021-2022
19:01 Какие еще есть state manager
23:20 Redux
24:27 Пример работы Redux
26:38 Преимущества и недостатки Redux
29:34 MobX
31:03 Преимущества и недостатки MobX

Фрагмент лекции Сергея Чернобровкина в МГТУ Баумана.

Смотреть видео целиком
👍6
#курсы #frontend #backend #хабр

Интервью со студентами школы Metaclass 🏪

В понедельник начинают учиться студенты новых бесплатных курсов по React и Python, а мы пока собрали немного обратной связи от тех, кто уже прошёл обучение и попал к нам на стажировку:

🔸 Интервью с Анастасией Жуковой, курс «Начинающий React-разработчик»

🔹 Интервью с Иваном Пакеевым, курс «Начинающий Backend-разработчик»

Пока мы готовили интервью, набор на курс по фронтенду закрылся из-за большого количества участников, но вы ещё можете записаться на курс по бэкенду. Старт — 6 февраля.
🔥7
Интервью со студентом школы Metaclass c курса бэкенда

21-го августа мы запустим новый поток школы, а пока собираем и делимся обратной связью от выпускников — стажёров KTS.

В сегодняшней статье-интервью о прохождении курса рассказывает наш бэкендер Кирилл Лапушинский:

👉 читать статью

#курсы #frontend #backend #хабр
👍2👀2🔥1👌1
Сегодня — вебинары по курсу фронтенда и бэкенда

Напоминаем, что сегодня мы проводим вебинары по школе, которая стартует 21-го августа. Зарегистрироваться и получить ссылку можно на страницах курсов:

🔹«Начинающий Backend-разработчик», начало в 17:00 МСК
🔸«Начинающий React-разработчик», начало в 18:00 МСК

На вебинарах расскажем:
1. Про команды преподавателей на фронтенде и бэкенде
2. О программах каждого из курсов
3. Кому обучение подойдёт лучше всего
4. Как проходят занятия
5. Что нужно будет сделать на выпускном проекте
6. Кто в команде менторов в этому году

У вас есть свой вопрос? Приходите и задайте его!

Вебинары проводят ведущие преподаватели курсов Андрей Баронский и Фёдор Биличенко.


#школа #frontend #backend
🔥2👍1👌1
Записи ознакомительных вебинаров 17-го августа по курсам фронтенда и бэкенда

Записи вебинаров доступны по ссылкам:
🔹«Вебинар о курсе Начинающий Backend-разработчик»
🔸«Вебинар о курсе Начинающий React-разработчик»

Посмотреть программу куров и записаться можно по ссылкам:
🔹«Начинающий Backend-разработчик»
🔸«Начинающий React-разработчик»


#школа #frontend #backend
👍2🔥2👏1
Роадмап по современному фронтенду от KTS

Наш фронтенд-тимлид Федя Биличенко составил подробный роадмэп для фронтендеров и написал к нему статью. Он будет полезен не только начинающим, но и опытным специалистам.

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

👉 По ссылке можно прочитать статью и скачать роадмэп с кликабельными ссылками на разделы статьи.


#frontend #федор_биличенко
👍5🔥511