React JS

🖥 Создаём крутые 3D-сцены с помощью React Three Fiber

React Three Fiber упрощает создание 3D-сцен. В этой статье вы узнаете, как создавать захватывающие 3D-анимации с помощью React Three Fiber (R3F).

Вы изучите настройку сцены, создание геометрии, добавление освещения и включение эффектов постобработки:

https://varun.ca/modular-webgl/

@react_tg

ReactJS под капотом

React Reconciliation
Все ли вы знаете о React key?
Что вы знаете о useCallback?
какая разница между useLayoutEffect, componentDidMount и useEffect?
Best Practices for useEffect by React Documentation
Первое погружение в исходники хуков (задел на будущее)
createRef, setRef, useRef и зачем нужен current в ref
Что выбрать: глобальные переменные или useThis()?
Какая настоящая цена useMemo?
useMemo - исходники, альтернативное использование и мемоизация ссылки
React.memo это вам не useMemo || разница между HOC и hook на примере исходников
Чем отличается SimpleMemoComponent от MemoComponent?
Улучшаем перфоманс без memo() || Советы от Дэна Абрамова
Станет ли memo() дэфолтным поведением реакт компонента?
Блок схема по использованию memo() && Боевые примеры
Трюк с useMemo от React разработчиков
Новый хук в 18-ой версии React - useSyncExternalStore
Исходники Context API + Redux vs Context
[Эксперимент] useContext + useReducer вместо Redux
Лучшие примеры использования Context API
Новый хук useEvent решит наши проблемы!

Все видео доступны на youtube

@react_tg

🪝 Разработка пользовательских хуков для React

Тема хуков в React разработке довольно популярна и не единожды разобрана различными специалистами. Цель нашего материала, не столько привнести что-то новое, сколько разобрать достаточно важную и актуальную тему максимально доступным и понятным языком, чтобы она не вызывала сложности даже у новичков в разработке приложений на React.

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

➡️ Читать дальше

@react_tg

🌆 City Illustration — адаптивная SVG-иллюстрация города с параллакс-эффектом, реализованная с помощью React, jQuery.parallax.js и GSAP.

#параллакс #svg #gsap #jquery #react

https://codepen.io/lisilinhart/pen/MoqMQq

@react_tg

🖥 Будущее рендеринга в React

Статья с наглядными иллюстрациями и объяснением текущих и новых паттернов рендеринга React.

➡️ Читать статью

@react_tg

🖥 Ужасный UX с непослушными кнопками

В представленном проекте автор реализовал мечту всех блогеров: здесь кнопка для отписки никогда не дастся вам в руки, зато кнопка «подписаться» так и просится, чтоб её нажать.

Посмотреть как это реализовано и попробовать победить кнопки можно тут:

https://codepen.io/jh3y/pen/KKvvPrP

#codepen

@react_tg

​Управление состоянием в React с помощью Easy Peasy

В React многое завязано на управлении состоянием компонентов. Поэтому от того насколько эффективно этот процесс происходит зависит производительность всего проекта.

В этой статье вы узнаете, как использовать Easy Peasy для управления состоянием в React, разберёте основные концепции инструмента, а также преимущества перед другими решениями

https://blog.openreplay.com/easy-peasy-state-management-using-react-easy-peasy/

#фронтенд #react

@react_tg

🖥 Вопросы про React на собеседовании

Если вы создали в React элемент Twitter как в примере ниже, то как бы он выглядел?

<Twitter username="tylermcginnis33">
{(user) =>
user === null ? <Loading /> : <Badge info={user} />
}
</Twitter>;
import React, { Component, PropTypes } from 'react';
import fetchUser from 'twitter';
// fetchUser принимает имя пользователя и возвращает promise
// который резолвится с данными пользователя
class Twitter extends Component {
// закончите код здесь
}

Если вы не очень хорошо знакомы с шаблоном render callback, это может показаться немного странным. В этом шаблоне компонент получает функцию в качестве своего потомка. Обратите внимание, что находится внутри тега <Twitter> выше. Вместо другого компонента, как вы возможно видели до этого, потомок компонента Twitter является функцией. Это означает то, что в данной реализации компонента Twitter нам необходимо обратиться к props.children как к функции.

Вот как я вижу это решение:


import React, { Component, PropTypes } from 'react';
import fetchUser from 'twitter';
class Twitter extends Component {
state = {
user: null,
};
static propTypes = {
username: PropTypes.string.isRequired,
};
componentDidMount() {
fetchUser(this.props.username).then((user) =>
this.setState({ user })
);
}
render() {
return this.props.children(this.state.user);
}
}
Обратите внимание, что, как упоминал выше, я обращаюсь к props.children как к функции, вызывая ее и передавая пользователя.

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

Чтобы продемонстрировать это, давайте примем, что в другом файле мы хотим отрисовать Profile вместо Badge, и так как мы используем шаблон render callback, мы можем менять окружение интерфейса без изменения нашей реализации родительского компонента Twitter.


<Twitter username="tylermcginnis33">
{(user) =>
user === null ? <Loading /> : <Profile info={user} />
}
</Twitter>

@react_tg

🖥 React Slider – слайдер в темных тонах, который переключается с помощью стрелок внизу. Кнопки при нажатии показывают синюю подсветку.

@react_tg

🖥 From button to dialog

Кнопка, переходящая в окно, сделанная с помощью Pug, SCSS и библиотеки React.

#css #js

https://codepen.io/camilleguy/pen/bGgYgaW

@react_tg

​Обнаружение долгого нажатия в событиях JavaScript в React

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

#react #en

https://spacejelly.dev/posts/how-to-detect-long-press-gestures-in-javascript-events-in-react/

@react_tg

useSuncExternalStore — недооценённый хук React

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

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

https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api

#react

@react_tg

🔥 Полезнейшая Подборка каналов

🖥 Javascript / front

@javascriptv - проф javascript изучение
@about_javascript - javascript продвинутый
@JavaScript_testit -тесты JS
@htmlcssjavas - web
@hashdev - web разработка
@react_tg - react
@mobdevelop - мобильная разработка
@javascriptjobjs - js jobs

🖥 Machine learning
@ai_machinelearning_big_data – все о машинном обучении
@data_analysis_ml – все о анализе данных.
@machinelearning_ru – машинное обучении на русском от новичка до профессионала.
@machinelearning_interview – подготовка к собеседования Data Science
@datascienceiot – бесплатные книги Machine learning
@ArtificialIntelligencedl – канал о искусственном интеллекте
@neural – все о нейронных сетях
@machinee_learning – чат о машинном обучении
@datascienceml_jobs - работа ds, ml
@Machinelearning_Jobs - чат работы мл

🖥 Python

@pythonl - python
@pro_python_code – погружение в python
@python_job_interview – подготовка к Python собеседованию
@python_testit тесты на python
@pythonlbooks - книги Python
@Django_pythonl django
@python_djangojobs - работа Python
@python_django_work

🖥 Java
@javatg - Java для програмистов
@javachats Java чат
@java_library - книги Java
@android_its Android разработка
@java_quizes - тесты Java
@Java_workit - работа Java
@progersit - шпаргалки ит

👣 Golang
@golang_interview - вопросы и ответы с собеседований по Go. Для всех уровней разработчиков.
@Golang_google - go для разработчиков
@golangtests - тесты и задачи GO
@golangl - чат Golang
@GolangJobsit - вакансии и работа GO
@golang_jobsgo - чат вакансий
@golang_books - книги Golang
@golang_speak - обсуждение задач Go

🖥 Linux
@linux_kal - чат kali linux
@linuxkalii - linux kali
@linux_read - книги linux

👷‍♂️ IT работа

@hr_itwork - ит-ваканнсии

🖥 SQL
@sqlhub - базы данных
@chat_sql - базы данных чат

🤡It memes
@memes_prog - ит-мемы

⚙️ Rust
@rust_code - язык программирования rust
@rust_chats - чат rust

#️⃣ c# c++
@csharp_ci - c# c++кодинг
@csharp_cplus чат

📓 Книги

@programming_books_it
@datascienceiot
@pythonlbooks
@golang_books
@frontendbooksit
@progersit
@linux_read
@java_library
@frontendbooksit

🖥 Github
@github_code - лучшие проекты с githuub
@bigdatai - инструменты по работе с данными

📢 English for coders

@english_forprogrammers - Английский для программистов

✔️ Как создать многоуровневое выпадающее меню в React

Многоуровневое меню предоставляет несколько вариантов выбора, делая панель навигации динамичным и организованным. В этом руководстве вы пошагово рассмотрите процесс реализации функции раскрывающегося списка в React:

https://blog.logrocket.com/how-create-multilevel-dropdown-menu-react/

#фронтенд #react

@react_tg

Event Cards — карточки с информацией о событий, реализованные с помощью React.

#карточки #card #react

https://codepen.io/ivanodintsov/pen/bGVwMjW

@react_tg

Создаём собственный текстовый редактор на React

Если вам не подходят уже существующие решения для текстовых редакторов, то можно создать своё. Оно будет:

— иметь предустановленные стили элементов;
— настраивать стили текста — курсив, жирность и так далее;
— поддерживать интерактивный элементы, например, ссылки;
— поддерживать хоткеи;
— и импортировать/экспортировать контент в HTML.

Всё это можно реализовать с использованием React, а вернее фреймворка на его основе Draft.js, который специально создан для работы с текстом. Как? Узнаете здесь:

https://habr.com/ru/company/kts/blog/576682/

#react #draftjs #фронтенд

@react_tg

50 Shades of Hue - CPC Monochromatic —
генератор монохромной цветовой палитры, который генерирует до 50 оттенков. Реализован с помощью React и Prism.js.

#цвет #react #prismjs

https://codepen.io/jh3y/pen/xxgbvPz

@react_tg

🖥 Сайт-шпаргалка по React.js

https://devhints.io/react

@react_tg

React Cool Inview

Если вы искали способ определять, что за элемент сейчас находится на экране, то библиотека React Cool Inview как раз то, что вам нужно. Это простой в использовании React-хук, который позволяет легко узнать какой сейчас элемент отображается на экране, чтобы затем взаимодействовать с ним.

Подробнее:

https://www.npmjs.com/package/react-cool-inview

#фронтенд #react

@react_tg

🖥 Гуляем по мирам с помощью React

Автор этого проекта решил наглядно показать на что способен React при правильном подходе. Он создал страницу на которой вы можете прогуляться по пяти известным вымышленным мирам, используя только колёсико мыши.

Вот тут вы можете изучить код проекта и его особенности:
🖥 Github

А здесь совершить ту самую прогулку:
⭐️ Демо

#веб #react

@react_tg