Создаем приложение React с нуля

Пошаговое руководство по созданию современного приложения React без шаблонов

Вы можете получить доступ ко всей этой статье и всему связанному с ней коду на GitHub.

✍️ @React_lib

Использование глобальной мемоизации в React

Когда наши приложения React становятся медленными, мы обычно обращаемся к useMemo, чтобы избежать бесполезной работы по повторному рендерингу. Это молоток, который часто работает хорошо, и с его помощью трудно выстрелить себе в ногу. Но useMemo не является серебряной пулей - иногда он просто добавляет еще больше бесполезной работы вместо того, чтобы сделать ваше приложение быстрее.

https://blog.thoughtspile.tech/2022/02/09/react-global-memo/

✍️ @React_lib

React Dark Mode Example

Реализация элементарного переключателя темной/светлой темы на ReactJS с помощю Class-Components

https://codepen.io/montesmakes/pen/WNrPKaO

✍️ @React_lib

Underrated React Hooks you’re missing out on

https://blog.logrocket.com/underrated-react-hooks-youre-missing-out-on/

✍️ @React_lib

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_lib

Методы выборки данных с помощью React

https://blog.openreplay.com/data-fetching-techniques-with-react

✍️ @React_lib

Remotion: фреймворк для создания видео в React

https://blog.logrocket.com/remotion-a-framework-for-making-videos-in-react/

✍️ @React_lib

Повышение производительности приложений React с помощью React Profiler

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

https://indepth.dev/posts/1497/react-profiler

✍️ @React_lib

VSCode Glean

Allows extracting JSX into new component
Allows converting Class Components to Functional Components and vice-verse
Allows wrapping JSX with conditional
Allows renaming state variables and their setters simultaneously.
Allows wrapping code with useMemo, useCallback or useEffect
Moving code between files
Typescript support
ES2015 modules support
CommonJS modules support

https://marketplace.visualstudio.com/items?itemName=wix.glean

✍️ @React_lib

React JavaScript Framework for Beginners – Project-Based Course

Learn React in this full course for beginners. React is one of the most popular JavaScript frameworks and this course is the perfect place to start your learning journey. You will learn everything you need to know to get started with React by building three different projects.

https://www.youtube.com/watch?v=u6gSSpfsoOQ

✍️ @React_lib

React TypeScript Cheatsheets

https://react-typescript-cheatsheet.netlify.app/

✍️ @React_lib

Most Popular React Tech Stack in 2022

https://profy.dev/article/react-tech-stack

✍️ @React_lib

Удалённая работа и фриланс становятся всё более популярными. Рынок заполнился горе-фрилансерами, которые демпенгуют и забирают себе заказы.

Хочешь научиться работать грамотно, развиваться и забирать самые хорошие заказы?

Подписывайся на блог о правильных подходах в Freelance, аутсорсинге и удалёнке https://t.me/+7-2eSP81MpxlMmQy

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

Ссылка на канал: https://t.me/+7-2eSP81MpxlMmQy

Тетрис на React

00:00 Introduction
03:40 create-react-app and tooling
06:57 Scaffolding Components
15:49 Stage and Tetrominos
32:05 Styling with Styled Components
57:19 usePlayer and useStage
1:12:51 Stage update and player movement
1:37:02 Collision Detection
1:50:46 Player RotationG
2:04:12 Clear Rows
2:11:37 drop with useInterval
2:18:47 useGameStatus and React.memo

https://github.com/weibenfalk/react-tetris-starter-files

✍️ @React_lib

React Hooks

useCallback STOPS this React MISTAKE | useCallback React Hooks Tutorial
useMemo Explained | React Hooks useMemo Tutorial
BUILD a React Timer with useRef | React Hooks useRef Tutorial
useReducer is BETTER than useState | React Hook useReducer Tutorial
useLayoutEffect vs useEffect | React Hooks Tutorial
useImperativeHandle Explained with an Example | React Hooks Tutorial
The Built-in React Hook 🤯 NO ONE talks about!
Use Axios with React Hooks for Async-Await Requests
React v18 Hooks - useTransition vs useDeferredValue Examples & Comparison

https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PSdiQpSxO9zxvB0ns6m3ta

✍️ @React_lib

Используем Axios в React

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

Rus https://medium.com/@stasonmars/%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D0%B5%D0%BC-axios-%D0%B2-react-453c04ed0654
Eng https://designrevision.com/react-axios/

✍️ @React_lib

Create a custom debounce Hook in React

https://blog.logrocket.com/create-custom-debounce-hook-react/

✍️ @React_lib

Как создать функцию фильтрации в виде выпадающего списка в React

✍️ @React_lib

Frontend meetup (Online)

1. Организация сложных многоступенчатых форм на VueJS - Роман Троицкий, Комус-тех
Расскажу про опыт формирования формы покупки полиса осаго со словарями, подсказками и тп, продвинутый форм-билдер vue2 - vue3

2. Новые рецепты. React(Vue) Query вместо вашего любимого state manager - Паромов Евгений, Evrone
Рассмотрим как с React Query можно выкинуть тонны сложного, ненужного, страшного кода. И сделать ваши компоненты действительно переиспользуемыми

3. Dprint - Форматирование на максимальной скорости - Поляков Андрей, БФТ
Быстрый форматер кода написанный на языке Rust.

➖➖➖

🗓 30 ноября, начало в 19:00 мск, Среда

🌐 ОНЛАЙН

✅ Регистрация на мероприятие
📢 Наш телеграмм каналл с анонсами митапов.

Building a React portfolio website with Locomotive Scroll

https://blog.logrocket.com/building-react-portfolio-website-locomotive-scroll/

✍️ @React_lib

CSS Animations as a DOM-Based Animations Framework

https://medium.com/bbc-product-technology/css-animations-as-a-dom-based-animations-framework-d6ef582c033a

✍️ @React_lib