Урок записан и будет смонтирован в ближайшее время!
Ждите на уроке:
1) React + Typescript
2) DnD события (имитация)
4) Хуки и контексты
5) Интерфейсы, типы и дженерики
Код урока уже на гитхабе (ищите сами, ссылку дам уже с уроком 🙂)
Поговаривают, что на этой библиотеке будут интенсивы, так что следите за новостями =)
#constcode #dnd #typescript #react
Ждите на уроке:
1) React + Typescript
2) DnD события (имитация)
4) Хуки и контексты
5) Интерфейсы, типы и дженерики
Код урока уже на гитхабе (ищите сами, ссылку дам уже с уроком 🙂)
Поговаривают, что на этой библиотеке будут интенсивы, так что следите за новостями =)
#constcode #dnd #typescript #react
👍6
Второй урок по react-constcode-dnd ужа в продакшане!
Второй урок отрепетирован и отснят. На этот раз получилось не хуже и не короче, а даже наоборот. Еще больше кода на React и Typescript.
В этом уроке исправим несколько багов, добавим поддержку handles и напишем 4 миним-проекта для примера! Правда на последний проект не хватило сил, его сделали на половину - но возможно это к лучшему (полноценную треллу сделаем на интенсиве)
Спасибо всем, кто поддерживает выход уроков на ConstCode канале! Ваши лайки и позитивные комментарии всегда мне помогают 🙂
#constcode #dnd #typescript #react
Второй урок отрепетирован и отснят. На этот раз получилось не хуже и не короче, а даже наоборот. Еще больше кода на React и Typescript.
В этом уроке исправим несколько багов, добавим поддержку handles и напишем 4 миним-проекта для примера! Правда на последний проект не хватило сил, его сделали на половину - но возможно это к лучшему (полноценную треллу сделаем на интенсиве)
Спасибо всем, кто поддерживает выход уроков на ConstCode канале! Ваши лайки и позитивные комментарии всегда мне помогают 🙂
#constcode #dnd #typescript #react
👍8
Immer - маленькая библиотека, изменившая для мира frontend разработки правила игры.
Дальше речь о React.
Как ускорить рендер страницы? Обновляя только те части страницы, которые изменились.
Как понять какие части страницы изменились? Найти отличия нового виртуального DOM дерева и старого.
Как выяснить какие именно вершины дерева изменились?
Ужасно: глубоко сравнить все вершины деревьев, начиная с корня.
Плохо: глубоко сравнить входящие аргументы компонентов, из которых и строится интерфейс.
Нормально: глубоко сравнить входящие аргументы компонентов и, начиная с узла, где найдено изменение, перерендривать все поддерево.
Хорошо: поверхностно сравнить входящие аргументы компонентов и, начиная с узла, где найдено изменение, перерендривать все поддерево.
Отлично: React 19 обещает нам компилятор. Посмотрим.
Поверхностное сравнение, т.е. через ===, хорошо работает с примитивами. А вот с объектами не очень. Ведь изменив что-то в объекте, ссылка на него не изменится. По-хорошему бы, чтобы облегчить поиск изменения входных аргументов в React, надо бы обеспечить иммутабельность входных данных, даже для объектов. И если нужно изменить данные в объекте, то будь добр создать новый объект, смерджить его со старым и внести изменения. Теперь будет понятно, что если ссылка на объект изменилась, то значит и данные в объекте изменились.
Собственно именно это immer и делает. Благодаря функции produce можно добиться описанного выше результата. Можно и вручную заняться клонированием объектов бесчисленное количество раз, но produce сделать это за тебя быстрее и надежнее. А ты спокойно пиши код в процедурном стиле.
Обязательно зайди на сайт immer и почитай, посмотри примеры кода. Скорее всего ты начнешь его применять повсеместно.
P.S. тебе нет нужды применять immer вручную. По большому счету библиотеки по типу redux/toolkit и zustand позволяют внедрять технологию immer почти прозрачно в свои actions.
https://immerjs.github.io/immer/produce
#react #immer
Дальше речь о React.
Как ускорить рендер страницы? Обновляя только те части страницы, которые изменились.
Как понять какие части страницы изменились? Найти отличия нового виртуального DOM дерева и старого.
Как выяснить какие именно вершины дерева изменились?
Ужасно: глубоко сравнить все вершины деревьев, начиная с корня.
Плохо: глубоко сравнить входящие аргументы компонентов, из которых и строится интерфейс.
Нормально: глубоко сравнить входящие аргументы компонентов и, начиная с узла, где найдено изменение, перерендривать все поддерево.
Хорошо: поверхностно сравнить входящие аргументы компонентов и, начиная с узла, где найдено изменение, перерендривать все поддерево.
Отлично: React 19 обещает нам компилятор. Посмотрим.
Поверхностное сравнение, т.е. через ===, хорошо работает с примитивами. А вот с объектами не очень. Ведь изменив что-то в объекте, ссылка на него не изменится. По-хорошему бы, чтобы облегчить поиск изменения входных аргументов в React, надо бы обеспечить иммутабельность входных данных, даже для объектов. И если нужно изменить данные в объекте, то будь добр создать новый объект, смерджить его со старым и внести изменения. Теперь будет понятно, что если ссылка на объект изменилась, то значит и данные в объекте изменились.
Собственно именно это immer и делает. Благодаря функции produce можно добиться описанного выше результата. Можно и вручную заняться клонированием объектов бесчисленное количество раз, но produce сделать это за тебя быстрее и надежнее. А ты спокойно пиши код в процедурном стиле.
Обязательно зайди на сайт immer и почитай, посмотри примеры кода. Скорее всего ты начнешь его применять повсеместно.
P.S. тебе нет нужды применять immer вручную. По большому счету библиотеки по типу redux/toolkit и zustand позволяют внедрять технологию immer почти прозрачно в свои actions.
https://immerjs.github.io/immer/produce
#react #immer
🔥4👍2❤1
Продолжаем рубрику “статистика”.
Правда опять за 2023 год. 2024 какой-то бесконечный.
devjobsscanner предлагает ознакомится со собранной ими статистикой. Особенностью из выборки является то, что они не берут популярность фреймворков по опросам. А по рабочим местам и поиску сотрудников. Т.е. даже если тебе ну очень нравится Vue и ты считаешь, что все должны писать на нем - рынок может быть с тобой не согласен и отдавать 50% всех рабочих мест разрабам на ReactJS.
Интересно что тут есть отдельная строчка статистики именно по России.
React 51%
Angular 36%
Vue 13%
Other ~0%
К чему это я. Если рассматриваешь перспективу найти работу как front разработчик и все еще не определился с библиотекой/фреймворком, то присмотрись к React. Рынок как бы намекает.
P.S. любая статистика - это манипуляция. Она может быть из эгоистических соображений, может быть недостоверной, неактуальной или просто нерелевантной. Поэтому важно смотреть на разные срезы и разные источники. Ко всем относись скептически и перепроверяй. НО! ReactJS реально круто.
https://www.devjobsscanner.com/blog/the-most-demanded-frontend-frameworks/
#react #vue #angular #статистика
Правда опять за 2023 год. 2024 какой-то бесконечный.
devjobsscanner предлагает ознакомится со собранной ими статистикой. Особенностью из выборки является то, что они не берут популярность фреймворков по опросам. А по рабочим местам и поиску сотрудников. Т.е. даже если тебе ну очень нравится Vue и ты считаешь, что все должны писать на нем - рынок может быть с тобой не согласен и отдавать 50% всех рабочих мест разрабам на ReactJS.
Интересно что тут есть отдельная строчка статистики именно по России.
React 51%
Angular 36%
Vue 13%
Other ~0%
К чему это я. Если рассматриваешь перспективу найти работу как front разработчик и все еще не определился с библиотекой/фреймворком, то присмотрись к React. Рынок как бы намекает.
P.S. любая статистика - это манипуляция. Она может быть из эгоистических соображений, может быть недостоверной, неактуальной или просто нерелевантной. Поэтому важно смотреть на разные срезы и разные источники. Ко всем относись скептически и перепроверяй. НО! ReactJS реально круто.
https://www.devjobsscanner.com/blog/the-most-demanded-frontend-frameworks/
#react #vue #angular #статистика
Devjobsscanner
The Most Demanded Frontend Frameworks in 2024
Discover the top frontend frameworks of 2024 with an in-depth analysis of over 250,000 job listings from LinkedIn, Glassdoor, and more, identifying the highest demand and best-paying technologies in the industry
👍4❤1👌1
На сколько хорошо ты понимаешь ReactJS?
1) Почему при переходе с Foo на Bar счетчик не сбрасывается? Ведь это разные компоненты. Как это исправить?
2)Почему счетчик сбрасывается после перехода null к Foo? Как можно сохранить счетчик что бы работало как в исходном примере? Для каждого компонента?
3) Что происходит, когда компоненты используются в качестве значения переменной/константы?
Ответы можно в личку (@AlekseyDanchin). Отвечать и разбирать не буду, но особые интересные решения подчеркну. Только обязательно напишите о чем идет речь, чтобы в будущем я понял о чем идет речь. Можно продублировать теги.
Через пару дней дам свой ответ )
#react #problems #problem1
1) Почему при переходе с Foo на Bar счетчик не сбрасывается? Ведь это разные компоненты. Как это исправить?
2)Почему счетчик сбрасывается после перехода null к Foo? Как можно сохранить счетчик что бы работало как в исходном примере? Для каждого компонента?
3) Что происходит, когда компоненты используются в качестве значения переменной/константы?
Ответы можно в личку (@AlekseyDanchin). Отвечать и разбирать не буду, но особые интересные решения подчеркну. Только обязательно напишите о чем идет речь, чтобы в будущем я понял о чем идет речь. Можно продублировать теги.
Через пару дней дам свой ответ )
#react #problems #problem1
👍3❤1🤷♂1🤔1