Шахматы на 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

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 компоненты вместо функций

✍️ @React_lib

✍️ @React_lib

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

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

✍️ @React_lib

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

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

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

✍️ @React_lib

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

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

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

✍️ @React_lib

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

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

✍️ @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

Simple React Component That Makes Titles More Readable

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

✍️ @React_lib

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

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

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

✍️ @React_lib

✨React-bits

Коллекция паттернов, антипаттернов, советов и полезных ресурсов для React-разработчиков.

https://github.com/vasanthk/react-bits

✍️ @React_lib

Работа с ошибками как профессионал в TypeScript

Обработка ошибок в Type/JavaScript - это тема, которой не уделяется должного внимания. Для долговечности любого проекта очень важно отлавливать и регистрировать ошибки.

С годами, когда я начал больше работать с TypeScript, я начал понимать, что не совсем понимаю обработку ошибок. Я часто сталкивался с этой проблемой:

https://engineering.udacity.com/handling-errors-like-a-pro-in-typescript-d7a314ad4991

✍️ @React_lib

The Easiest React Hook

00:00 - Introduction
00:30 - Why this hook is needed
02:25 - How to use the useId hook
04:03 - querySelector gotcha
05:08 - How to use the useId hook with multiple ids

✍️ @React_lib