​Как эффективно использовать React Context

В этой статье рассматриваются методы эффективного использования потребителей контекста (Context Consumer), которые помогут вам избежать ошибок и упростят разработку приложений и/или библиотек:

https://habr.com/ru/post/522896/

#react #хуки

​Где учить React в 2022 году

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

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

https://blog.openreplay.com/where-to-learn-react-js-in-2022-a-list-of-resources-for-new-developers

#javascript #react

​Formik — лёгкий способ создать сложную форму обратной связи

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

Подробности:

https://formik.org/

#библиотека #react

​Что плохого в react-router?

На сегодняшний день react-router — это, можно сказать, монополист в мире React. Если в проекте нужен роутинг, то скорее всего выбор падет именно на эту библиотеку. Однако, автору этой статьи не давали покоя некоторые его нюансы, поэтому он решил написать собственное решение, которое продолжает успешно применять и сегодня.

О том, чем же react-router всё-таки не угодил и как быть с этим, читайте в статье:

https://habr.com/ru/post/599347/

#react

​Современные методы получения данных API в React

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

Это руководство рассматривает современные способы извлечения данных в React, а также их обработки:

https://blog.logrocket.com/modern-api-data-fetching-methods-react/

#react #api

​Создание реального приложения dApp с помощью React, Solidity и Web3.js

Сегодня как никогда остро стоит вопрос децентрализованного интернета и сейчас самое время познакомиться с технологиями, которые позволяют реализовать сервис для интернета нового поколения.

Эта статья покажет вам азбуку того, как создать децентрализованное приложение с нуля и настроить среду разработки:

https://habr.com/ru/post/653679/

#web3 #react #solidity

10 антипаттернов React, которых следует избегать

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

В этом руководстве вы рассмотрите 10 антипаттернов в React, а также советы и рекомендации по улучшению вышего кода.

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

#видео #react

​Шахматы на React и TypeScript

Всего за час вы сможете изучить способ создания шахмат с использованием React и TypeScript. Для этого вам понадобятся общие знания ООП и щепотка энтузиазма:

https://youtu.be/mUvYGUYMvKo

#видео #react #typescript

​Подготовка окружения React-приложения: VSCode, Prettier, ESLint, Stylelint, Husky

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

https://tproger.ru/articles/podgotovka-okruzhenija-react-prilozhenija-vscode-prettier-eslint-stylelint-husky/

#react

​Полное руководство по React Context

React Context позволяет без использования props’ов передавать и применять данные в любом компоненте приложения. Таким образом, он упрощает обмен данными между компонентами. В этой статье представлены советы, которые будут полезные даже тем, кто ещё не работал с React:

https://nuancesprog.ru/p/15868/

#react

​Совместное использование компонентов React с Webpack 5

В интернете полно статей, посвящённых использованию компонентов совместно с Webpack. Но во многих из них существует ряд проблем и ошибок, которые усложняют понимание материала. Эта статья призвана устранить данные проблемы.

Подробнее:

https://nuancesprog.ru/p/15900/

#webpack #react

​«Я всё время неправильно создавал формы в React.js»

Если вам часто приходится создавать формы с помощью React, то вы наверняка сталкивались с необходимостью использования множества useState для различных элементов формы.

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

https://dev.to/kuvambhardwaj/i-was-creating-forms-the-wrong-way-all-along-in-reactjs-hl3

#фронтенд #react

​Удобный способ использовать SVG в React

Добавить SVG на сайт можно совершенно разными способами. Но если вы хотите полноценно использовать все возможности SVG, то необходимо вставлять изображение непосредственно в HTML-разметку. Или нет?

В этой статье вы найдёте ещё один хитрый, но при этом удобный способ:

https://habr.com/ru/post/672984/

#react #svg

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

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

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

#фронтенд #react

​Проверяем свои знания по React: готовы ли мы к собеседованию или нет?

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

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

https://www.freecodecamp.org/news/prepare-for-react-technical-interviews/

#react #фронтенд

Визуальное руководство по рендерингу React. Часть 1

Хотите понять как работает рендеринг в React и своими глазами увидеть процесс? Что ж, эта статья для вас. Здесь вы узнаете, как работает повторный рендеринг и как его избежать:

https://alexsidorenko.com/blog/react-render-always-rerenders/

#react

Визуальное руководство по рендерингу React. Часть 3

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

Подробнее:

https://alexsidorenko.com/blog/react-render-usememo/

#react

​Изучение React Suspense с помощью React Freeze

Слышали о новом компоненте React Suspense? Он позволяет корректно обрабатывать загрузку и визуализацию данных. Есть также React Freeze, который позволяет заморозить рендеринг компонентов и контролировать, что на самом деле обновляется в ваших приложениях React.

В этой статье подробно рассмотрен React Freeze и его возможности, а также показано, как его можно использовать в реальных проектах:

https://blog.logrocket.com/exploring-react-suspense-react-freeze/

#react

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

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

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

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

#react

Как сделать игру 2048 на React

Игру 2048 знают многие и многие в неё играли. А давайте теперь попробуем реализовать её самостоятельно с автором этого туториала.

В своей версии он использовал хуки библиотеки React, её Context API, а также TypeScript и LESS. Помимо туториала в статье вы найдёте ссылки на игру, её код и демо анимацией:

https://habr.com/ru/company/skillfactory/blog/588356/

#react #gamedev