React
Kanalga Telegram’da o‘tish
Подборки по React js и все что с ним связано. По всем вопросам @evgenycarter
Ko'proq ko'rsatish
Tarmoq:2 645
Obunachilar
-224 soatlar
-67 kun
-1430 kun
Postlar arxiv
2 645
7 TypeScript типов для React разработчиков
Использование TypeScript при написании компонентов в React может существенно облегчить разработку и поддержку кода. Небольшая подборка утилитарных типов для работы с React:
- React.ComponentProps. Иногда нет доступа к типу пропсов компонента: например, внешняя библиотека, которая дает доступ только к самому компоненту. Чтобы узнать тип пропсов компонента можно использовать
React.ComponentProps.
import { ComponentProps } from "react";
import { ExternalComponent } from "external-lib";
type InternalComponentProps = ComponentProps<typeof ExternalComponent> & {
outerClassName: string;
};
- React.MouseEventHandler. Используется для типизации колбека события мыши.
import { MouseEventHandler, } from "react";
type ComponentProps = {
caption: string;
onClick: MouseEventHandler<HTMLButtonElement>;
};
const Component = (props: ComponentProps) => (
<div>
<button onClick={props.onClick}>{props.caption}</button>
</div>
);
- Pick. Используется для создания нового типа объекта, принимает два аргумента: исходный тип объекта и список ключей для выбора из исходного объекта. В React можно использовать для создания интерфейса пропсов, когда какой-то интерфейс расшарен между несколькими.
type ComponentProps = Pick<Something, "propA" | "propB" | "children"> & {
wrapperClassName?: string;
}
export const Component = (props: ComponentProps) => (
…
);
https://www.chakshunyu.com/blog/7-typescript-utility-types-for-react-developers/
✍️ @React_lib2 645
Проблемы в типизации children
https://fettblog.eu/react-types-for-children-are-broken/
✍️ @React_lib
2 645
❗️ Как писать программы, которые пишут код на Typescript за вас?
Узнайте и попробуйте сами 15 сентября в 20:00 на открытом уроке «Кодогенерация Typescript» в OTUS.
На занятии мы не только научимся писать такие программы, но и попробуем в действии несколько библиотек и приобретем навык чтения абстрактного синтаксического дерева.
👨🏻💻Занятие проведет Арсений Высоцкий, тимлид в международной компании, в рамках онлайн-курса «JavaScript Developer. Professional» для тех, кто хочет повысить свой уровень в JS-разработке.
👉 Для регистрации на занятие пройдите вступительный тест: https://otus.pw/JR34/
2 645
React Hooks и советы по избежанию бесполезного рендеринга компонентов, применяемого к спискам
https://blog.theodo.com/2022/01/react-list-hooks-avoid-render/
✍️ @React_lib
2 645
Виртуализация больших списков с помощью библиотеки react-window
Сверхбольшие таблицы и списки могут значительно снижать производительность сайта. В этом случае на помощь может прийти виртуализация.
✍️ @React_lib
2 645
Знакомство с SVG-анимацией с помощью React-Native ReAnimated 2
https://medium.com/tribalscale/intro-to-svg-animations-with-react-native-reanimated-2-78bd87438129
✍️ @React_lib
2 645
Frontender's notes - самый большой канал по фронту с годной инфой по HTML, CSS, JS, TypeScript, React, Node.js и развитию Soft-skills, а также разборы вопросов для интервью и подборка крутых статей c опытом релокации айтишников в другие страны.
Вам сюда: 👉 @frontendnoteschannel
Ну а если вы любите почитать статейки о вебе в оригинале то вот сюда 👉 @frontend_international
В общем добро пожаловать!
2 645
В этом небольшом туториале я покажу вам, как разработать простой редактор кода на React.
Обратите внимание: туториал рассчитан, преимущественно, на начинающих разработчиков, хотя, смею надеяться, что и опытные найдут в нем что-нибудь интересное для себя.
Функционал нашего приложения будет следующим:
имеется три вкладки: для ручного редактирования HTML, CSS и JavaScript, соответственно;
пользователь имеет возможность загружать файлы, соответствующие текущей вкладке;
пользователь имеет возможность бросать (drop) файлы, соответствующие текущей вкладке;
код, введенный пользователем, загружается в iframe и выполняется в режиме песочницы (sandbox) при нажатии соответствующей кнопки.
✍️ @React_lib
2 645
Frontend meetup online
1. Формы: костыли для библиотек или долгострой велосипедов - Фёдор Кирпичёв, Evrone
В проектах, над которым работают большое количество людей, есть проблема написания кода в одном стиле. На примере Практикума посмотрим, как это можно улучшить.
2. Как мы вывели Code Style в Практикуме на следующий уровень - Софья Гусева, Яндекс
Расскажу, об асинхронных коммуникациях. Покажу как найти события, почему события должны быть разных видов, как добиться эволюционности и что делать дальше.
3. Отдел разработки без бэкенда: растим фронтенд и сохраняем бюджет клиента - Владислав Худяков, Pragmatica
Как реализовывать сайты и сервисы, не имея в штате ни одного бэкенд-специалиста. Инструменты, решения и опыт разработки только силами фронта.
➖➖➖
🗓 14 сентября, начало в 19:00 мск, Среда
🌐 ОНЛАЙН
✅ Регистрация на мероприятие
2 645
Как создать редактор кода для 40+ языков с помощью React
Онлайн-платформа выполнения кода позволяет писать и сразу запускать код на любимом языке программирования. В идеале можно увидеть вывод программы, например двоичного поиска на JavaScript. Далее
✍️ @React_lib
2 645
Опасности гидратации в React
Недавно я столкнулся со странной проблемой. В разработке все было хорошо, но в производстве нижняя часть моего блога делала что-то... непреднамеренное.
https://www.joshwcomeau.com/react/the-perils-of-rehydration/
✍️ @React_lib
2 645
Краткое введение в Elm для React разработчиков
Elm - это, пожалуй, мой любимый язык программирования, разработанный для создания интерфейсов приложения, предлагающий альтернативу JS библиотекам, таким как React.
https://blog.theodo.com/2021/10/intro-to-elm-for-react-devs/
✍️ @React_lib
2 645
React
React in 100 Seconds
10 React Hooks Explained // Plus Build your own from Scratch
WASM + React... Easily build video editing software with JS & FFmpeg
Advanced Dropdown Menu - React & CSS Animation Tutorial for Beginners
Invite Only! Use FOMO to grow your app // Exclusive Phone SignIn Tutorial
How to use TypeScript with React... But should you?
Google Sheets… Your Next Database?
Springy Animated Modals // Framer Motion & React Tutorial for Beginners
React Native in 100 Seconds
React Native vs Flutter - I built the same chat app with both
Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar
Next.js 12 is a Beast
Remix is a NEW JavaScript framework you MUST try
10 React Antipatterns to Avoid - Code This, Not That!
This video was made with code. But how?
React Query in 100 Seconds
Доступно на youtube
✍️ @React_lib
2 645
"Javascript developer. Professional" - это хардкорный онлайн-курс для web-разработчиков по продвинутым возможностям JS и его фреймворков.
Справитесь ли вы с уровнем курса? Покажет вступительный тест.
📍Пройдите тестирование, чтобы:
● оценить свои навыки
● получить доступ к демо-занятиям курса
● занять место по специальной цене
● получить доступ в закрытое сообщество JS-разработчиков
👉 Пройти полное тестирование: https://otus.pw/ttM4/
2 645
Upgrade a Component to Use Suspense in React 18 in 5 Minutes
https://medium.com/@pkellner/upgrade-a-component-to-use-suspense-in-react-18-in-5-minutes-95f36996e74e
✍️ @React_lib
2 645
Полное руководство по React Router: Все, что вам нужно знать
https://ui.dev/react-router-tutorial
✍️ @React_lib
2 645
Как реализовать reCAPTCHA в приложении React
В этой статье мы продемонстрируем, как реализовать reCAPTCHA v2 в приложении React и как проверить пользовательские токены в бэкенде Node.js.
✍️ @React_lib
