React

Использование шаблонов проектирования группы GoF в React

В этой статье поговорим о том, как написать в React многократно используемый код, используя три шаблона проектирования группы Gang-of-Four.

https://blog.bitsrc.io/using-gof-design-patterns-with-react-c334f3ea3147

✍️ @React_lib

Simple React Component That Makes Titles More Readable

https://github.com/shuding/react-wrap-balancer

✍️ @React_lib

Как создать Star Rating виджет на React.js и оптимизировать его

В этой статье я хочу затронуть еще одну задачу, с которой вы можете столкнуться на собеседовании на позицию Front-End — создание Star Rating виджета.

За последние пять месяцев у меня было 15 онсайт собеседований, а также офферы от Google, Roku, Microsoft и других компаний.

Вы должны уточнить требования и реализовать этот виджет в течение ~ 45–50 минут.

Rus https://habr.com/ru/post/678478/

Eng https://betterprogramming.pub/how-to-implement-star-rating-widget-with-react-js-and-optimize-it-e3625f3104f

✍️ @React_lib

Learning React
Авторы: Alex Banks, Eve Porcello (2020)

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

✍️ @React_lib

Вещи, которые полезно знать о React.js

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

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

✍️ @React_lib

Возможно, вам не нужен эффект

Эффекты - это люк для выхода из парадигмы React. Они позволяют вам "выйти за пределы" React и синхронизировать ваши компоненты с какой-либо внешней системой, например, с не-React виджетом, сетью или DOM браузера. Если внешняя система не задействована (например, если вы хотите обновить состояние компонента при изменении некоторых реквизитов или состояния), вам не нужен Эффект. Удаление ненужных Эффектов сделает ваш код более понятным, быстрым в исполнении и менее подверженным ошибкам.

https://beta.reactjs.org/learn/you-might-not-need-an-effect

✍️ @React_lib

Примеры использования React ref callback

https://julesblom.com/writing/ref-callback-use-cases

✍️ @React_lib

React Email

Коллекция высококачественных нестилизованных компонентов для создания красивых электронных писем с помощью React и TypeScript.

Сайт https://react.email/
Примеры https://react.email/examples

✍️ @React_lib

✍️ @React_lib

Используйте в React компоненты вместо функций

✍️ @React_lib

UseState: Asynchronous or what?

00:00 Introduction
00:30 The Basics
01:14 React Advanced Sponsorship
02:12 Basic React State/Rendering Flow
10:10 Fixing the Async "Problem"
15:20 What have we learned
16:30 Outroduction

✍️ @React_lib

Шахматы на React и TypeScript С НУЛЯ. Практикуем ООП

00:00 ➝ Введение
00:50 ➝ Реклама
02:40 ➝ Начало разработка. Инициализация React приложения
07:20 ➝ Создаем ООПшные классы для шахмат. Инициализируем клетки шахматной доски
17:17 ➝ Расставляем фигуры
23:50 ➝ Координаты доски. Х Y
29:10 ➝ Логика игры. Подсвечиваем доступные для хода клетки
40:20 ➝ canMove. Движение фигур. Ферзь, слон, ладья
51:00 ➝ Движение коня и пешки
56:10 ➝ Перезапуск игры. Передача хода
59:40 ➝ Список съеденных фигур. Таймер

✍️ @React_lib

Build a React dashboard with Tremor

Dashboards are essential tools for modern corporations and administrators. They provide insightful data that can help monitor an enterprise’s quantitative performance and metrics.

https://blog.logrocket.com/build-react-dashboard-tremor/

✍️ @React_lib

React Redux Webpack - практический курс

1. React Redux Webpack - практический курс. Введение
2. React Redux Webpack - базовая настройка Webpack, импорт стилей
3. React Redux - настраиваем React в Webpack
4. React Redux - основы Redux, используем хуки useDispatch() и useSelector()
5. React Redux - Главная страница. Axios - асинхронные запросы на API GitHub
6. React Redux - поиск репозиториев, анимация подгрузки
7. React Redux - Pagination\Пагинация - постраничный вывод репозиториев GitHub
8. React Redux - Роутинг\Маршрутизация по страницам. React-router-dom, Router, Switch, Redirect
9. React Redux - страница репозитория.
10. React Redux - обработка ошибок

https://www.youtube.com/playlist?list=PL6DxKON1uLOHTgN679Es1vkCS911i9HJX

✍️ @React_lib